feat(系统设置): 添加任务-同步频率 UX优化

This commit is contained in:
dataeaseShu 2024-04-11 16:13:38 +08:00
parent 1ab11e64c1
commit 00bcee2687
5 changed files with 10 additions and 36 deletions

View File

@ -24,7 +24,7 @@
"axios": "^1.3.3",
"crypto-js": "^4.1.1",
"dayjs": "^1.11.9",
"element-plus-secondary": "^0.5.4",
"element-plus-secondary": "^0.5.5",
"element-resize-detector": "^1.2.4",
"file-saver": "^2.0.5",
"html-to-image": "^1.11.11",

View File

@ -2,7 +2,6 @@
import { propTypes } from '@/utils/propTypes'
import { computed, PropType, reactive, toRefs, h } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { Icon } from '@/components/icon-custom'
const { t } = useI18n()
@ -11,8 +10,6 @@ interface Config {
showType: string
//
rangeSeparator: string
//
prefixIcon: string
// label
startPlaceholder: string
// label
@ -32,13 +29,11 @@ const props = defineProps({
title: propTypes.string
})
const { property } = toRefs(props)
const prefixIcon = h(Icon, { name: 'icon_calendar_outlined' })
const timeConfig = computed(() => {
let obj = Object.assign(
{
showType: 'datetime',
rangeSeparator: '-',
prefixIcon,
startPlaceholder: t('datasource.start_time'),
endPlaceholder: t('datasource.end_time'),
format: 'YYYY-MM-DD HH:mm:ss',
@ -74,7 +69,6 @@ defineExpose({
v-model="state.modelValue"
:type="timeConfig.showType"
:range-separator="timeConfig.rangeSeparator"
:prefix-icon="timeConfig.prefixIcon"
:start-placeholder="timeConfig.startPlaceholder"
:end-placeholder="timeConfig.endPlaceholder"
:format="timeConfig.format"

View File

@ -65,7 +65,6 @@ const props = defineProps({
const selectValue = ref()
const multiple = ref(false)
const dvMainStore = dvMainStoreWithOut()
const calendar = h(Icon, { name: 'icon_calendar_outlined' })
const { config } = toRefs(props)
const minDate = new Date('1970/1/1')
const maxDate = new Date('2100/1/1')
@ -377,7 +376,6 @@ const formatDate = computed(() => {
:disabled-date="disabledDate"
@calendar-change="calendarChange"
:format="formatDate"
:prefix-icon="calendar"
v-if="multiple"
@change="handleValueChange"
:range-separator="$t('cron.to')"
@ -389,7 +387,6 @@ const formatDate = computed(() => {
v-model="selectValue"
:type="config.timeGranularity"
@change="handleValueChange"
:prefix-icon="calendar"
:style="selectStyle"
:placeholder="$t('commons.date.select_date_time')"
/>

View File

@ -1,13 +1,13 @@
<script lang="ts" setup>
import { ref, reactive, computed, toRefs, nextTick, watch } from 'vue'
import { ref, reactive, h, computed, toRefs, nextTick, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import type { FormInstance, FormRules } from 'element-plus-secondary'
import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
import { cloneDeep } from 'lodash-es'
import ApiHttpRequestDraw from './ApiHttpRequestDraw.vue'
import { Configuration, ApiConfiguration, SyncSetting } from './index.vue'
import { Icon } from '@/components/icon-custom'
import { getSchema } from '@/api/datasource'
import { Calendar } from '@element-plus/icons-vue'
import { Base64 } from 'js-base64'
import { CustomPassword } from '@/components/custom-password'
import { ElForm, ElMessage } from 'element-plus-secondary'
@ -54,6 +54,7 @@ const schemas = ref([])
const dsForm = ref<FormInstance>()
const cronEdit = ref(true)
const calendar = h(Icon, { name: 'icon_calendar_outlined' })
const defaultRule = {
name: [
@ -873,11 +874,7 @@ defineExpose({
更新一次
</div>
</el-form-item>
<el-form-item
v-if="form.syncSetting.syncRate === 'CRON'"
prop="syncSetting.cron"
:label="t('common.cron_exp')"
>
<el-form-item v-if="form.syncSetting.syncRate === 'CRON'" prop="syncSetting.cron">
<el-popover :width="834" v-model="cronEdit" trigger="click">
<template #default>
<div style="width: 814px; height: 400px; overflow-y: auto">
@ -890,11 +887,7 @@ defineExpose({
</div>
</template>
<template #reference>
<el-input
v-model="form.syncSetting.cron"
style="width: 50%"
@click="cronEdit = true"
/>
<el-input v-model="form.syncSetting.cron" @click="cronEdit = true" />
</template>
</el-popover>
</el-form-item>
@ -906,7 +899,7 @@ defineExpose({
<el-date-picker
v-model="form.syncSetting.startTime"
class="de-date-picker"
:prefix-icon="Calendar"
:prefix-icon="calendar"
type="datetime"
:placeholder="t('datasource.start_time')"
/>
@ -916,16 +909,11 @@ defineExpose({
:label="t('datasource.end_time')"
prop="syncSetting.endLimit"
>
<el-radio-group v-model="form.syncSetting.endLimit">
<el-radio label="0">{{ t('datasource.no_limit') }}</el-radio>
<el-radio label="1"> {{ t('datasource.set_end_time') }}</el-radio>
</el-radio-group>
<div style="width: 100%">
<el-date-picker
v-if="form.syncSetting.endLimit === '1'"
v-model="form.syncSetting.endTime"
class="de-date-picker"
:prefix-icon="Calendar"
:prefix-icon="calendar"
type="datetime"
:placeholder="t('datasource.end_time')"
/>
@ -955,9 +943,7 @@ defineExpose({
}
.execute-rate-cont {
background: #f5f6f7;
border-radius: 4px;
padding: 16px;
margin-top: -8px;
}

View File

@ -256,18 +256,15 @@ const dialogErrorInfo = ref(false)
const dialogMsg = ref('')
const formatSimpleCron = (info?: SyncSetting) => {
const { syncRate, simpleCronValue, simpleCronType, startTime, endTime, cron, endLimit } = info
const { syncRate, simpleCronValue, simpleCronType, startTime, endTime, cron } = info
let start = '-'
let end = '-'
if (startTime) {
start = dayjs(new Date(startTime)).format('YYYY-MM-DD HH:mm:ss')
}
if (endLimit === '1' && endTime) {
if (endTime) {
end = dayjs(new Date(endTime)).format('YYYY-MM-DD HH:mm:ss')
}
if (endLimit === '0') {
end = '无限制'
}
let strArr = []
switch (syncRate) {
case 'RIGHTNOW':