Commit 1b3be73d50746f36f279fde77afed4942bcfdfc3

Authored by fengtao
1 parent b3646dfb

fix:DEFECT-898 场景联动-定时启用名称不符,自定义启用一样

1 1 <template>
2   - <BasicModal v-bind="$attrs" :width="600" title="编辑报警日程" centered @register="registerModal" @ok="handleOk"
3   - @cancel="handleCancel">
  2 + <BasicModal
  3 + v-bind="$attrs"
  4 + :width="600"
  5 + :title="isUpdateFlag ? '编辑' + title : '新增' + title"
  6 + centered
  7 + @register="registerModal"
  8 + @ok="handleOk"
  9 + @cancel="handleCancel"
  10 + >
4 11 <BasicForm @register="registerForm" ref="basicFormRef">
5 12 <template #customEnable>
6 13 <template v-for="(item, optionIndex) in options" :key="item.flag">
... ... @@ -8,222 +15,252 @@
8 15 <div class="ml-4 mr-4 flex items-center">
9 16 <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox>
10 17 </div>
11   - <TimePicker placeholder="开始时间" v-model:value="item.startsOn" value-format="x" format="HH:mm"
12   - :disabled="!item.enabled" />
  18 + <TimePicker
  19 + placeholder="开始时间"
  20 + v-model:value="item.startsOn"
  21 + value-format="x"
  22 + format="HH:mm"
  23 + :disabled="!item.enabled"
  24 + />
13 25 <span class="ml-4 mr-4 flex items-center">~</span>
14   - <TimePicker @change="handleBlur(item.startsOn,item.endsOn)" placeholder="结束时间" v-model:value="item.endsOn"
15   - value-format="x" format="HH:mm" :disabled="!item.enabled" />
  26 + <TimePicker
  27 + @change="handleBlur(item.startsOn, item.endsOn)"
  28 + placeholder="结束时间"
  29 + v-model:value="item.endsOn"
  30 + value-format="x"
  31 + format="HH:mm"
  32 + :disabled="!item.enabled"
  33 + />
16 34 </div>
17 35 </template>
18 36 </template>
19 37 <template #timing>
20   - <TimePicker placeholder="开始时间" v-model:value="timeState.startsOn" value-format="x" format="HH:mm" />
  38 + <TimePicker
  39 + placeholder="开始时间"
  40 + v-model:value="timeState.startsOn"
  41 + value-format="x"
  42 + format="HH:mm"
  43 + />
21 44 <span class="ml-4 mr-4">~</span>
22   - <TimePicker @change="handleTimeBlur(timeState.startsOn,timeState.endsOn)" placeholder="结束时间"
23   - v-model:value="timeState.endsOn" value-format="x" format="HH:mm" />
  45 + <TimePicker
  46 + @change="handleTimeBlur(timeState.startsOn, timeState.endsOn)"
  47 + placeholder="结束时间"
  48 + v-model:value="timeState.endsOn"
  49 + value-format="x"
  50 + format="HH:mm"
  51 + />
24 52 </template>
25 53 </BasicForm>
26 54 </BasicModal>
27 55 </template>
28 56
29 57 <script lang="ts" setup>
30   -import { reactive, ref, watch, nextTick } from 'vue';
31   -import { useModalInner, BasicModal } from '/@/components/Modal';
32   -import { BasicForm, useForm } from '/@/components/Form';
33   -import { alarmScheduleSchemas } from '../config/config.data.ts';
34   -import { Checkbox, TimePicker } from 'ant-design-vue';
35   -import { useMessage } from '/@/hooks/web/useMessage';
  58 + import { reactive, ref, watch, nextTick } from 'vue';
  59 + import { useModalInner, BasicModal } from '/@/components/Modal';
  60 + import { BasicForm, useForm } from '/@/components/Form';
  61 + import { alarmScheduleSchemas } from '../config/config.data';
  62 + import { Checkbox, TimePicker } from 'ant-design-vue';
  63 + import { useMessage } from '/@/hooks/web/useMessage';
36 64
37   -const emit = defineEmits(['register', 'cancel']);
38   -const { createMessage } = useMessage();
39   -const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
40   - showActionButtonGroup: false,
41   - schemas: alarmScheduleSchemas,
42   -});
43   -const timeState = reactive({
44   - startsOn: null,
45   - endsOn: null,
46   -});
47   -
48   -const options = ref([
49   - {
50   - enabled: false,
51   - dayOfWeek: 1,
52   - flag: '一',
53   - endsOn: null,
54   - startsOn: null,
55   - },
56   - {
57   - enabled: false,
58   - dayOfWeek: 2,
59   - flag: '二',
60   - endsOn: null,
61   - startsOn: null,
62   - },
63   - {
64   - enabled: false,
65   - dayOfWeek: 3,
66   - flag: '三',
67   - endsOn: null,
68   - startsOn: null,
69   - },
70   - {
71   - enabled: false,
72   - dayOfWeek: 4,
73   - flag: '四',
74   - endsOn: null,
75   - startsOn: null,
76   - },
77   - {
78   - enabled: false,
79   - dayOfWeek: 5,
80   - flag: '五',
81   - endsOn: null,
82   - startsOn: null,
83   - },
84   - {
85   - enabled: false,
86   - dayOfWeek: 6,
87   - flag: '六',
88   - endsOn: null,
  65 + const emit = defineEmits(['register', 'cancel']);
  66 + const title = ref('');
  67 + const isUpdateFlag = ref(false);
  68 + const { createMessage } = useMessage();
  69 + const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
  70 + showActionButtonGroup: false,
  71 + schemas: alarmScheduleSchemas,
  72 + });
  73 + const timeState = reactive({
89 74 startsOn: null,
90   - },
91   - {
92   - enabled: false,
93   - dayOfWeek: 7,
94   - flag: '日',
95 75 endsOn: null,
96   - startsOn: null,
97   - },
98   -]);
99   -const basicFormRef = ref<InstanceType<typeof BasicForm>>();
100   -let index = ref(null);
101   -watch(
102   - options,
103   - (newValue) => {
104   - const arr = [];
105   - for (let item of newValue) {
106   - if (item.enabled && item.startsOn && item.endsOn) {
107   - arr.push(true);
108   - } else if ((!item.enabled && item.startsOn && item.endsOn) || item.enabled) {
109   - arr.push(false);
  76 + });
  77 +
  78 + const options = ref([
  79 + {
  80 + enabled: false,
  81 + dayOfWeek: 1,
  82 + flag: '一',
  83 + endsOn: null,
  84 + startsOn: null,
  85 + },
  86 + {
  87 + enabled: false,
  88 + dayOfWeek: 2,
  89 + flag: '二',
  90 + endsOn: null,
  91 + startsOn: null,
  92 + },
  93 + {
  94 + enabled: false,
  95 + dayOfWeek: 3,
  96 + flag: '三',
  97 + endsOn: null,
  98 + startsOn: null,
  99 + },
  100 + {
  101 + enabled: false,
  102 + dayOfWeek: 4,
  103 + flag: '四',
  104 + endsOn: null,
  105 + startsOn: null,
  106 + },
  107 + {
  108 + enabled: false,
  109 + dayOfWeek: 5,
  110 + flag: '五',
  111 + endsOn: null,
  112 + startsOn: null,
  113 + },
  114 + {
  115 + enabled: false,
  116 + dayOfWeek: 6,
  117 + flag: '六',
  118 + endsOn: null,
  119 + startsOn: null,
  120 + },
  121 + {
  122 + enabled: false,
  123 + dayOfWeek: 7,
  124 + flag: '日',
  125 + endsOn: null,
  126 + startsOn: null,
  127 + },
  128 + ]);
  129 + const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  130 + let index = ref(null);
  131 + watch(
  132 + options,
  133 + (newValue) => {
  134 + const arr = [];
  135 + for (let item of newValue) {
  136 + if (item.enabled && item.startsOn && item.endsOn) {
  137 + arr.push(true);
  138 + } else if ((!item.enabled && item.startsOn && item.endsOn) || item.enabled) {
  139 + arr.push(false);
  140 + }
110 141 }
  142 + const flag = arr.length ? !arr.every((item) => item) : true;
  143 + nextTick(() => {
  144 + setModalProps({
  145 + okButtonProps: {
  146 + disabled: flag,
  147 + },
  148 + });
  149 + });
  150 + },
  151 + {
  152 + deep: true,
111 153 }
112   - const flag = arr.length ? !arr.every((item) => item) : true;
113   - nextTick(() => {
  154 + );
  155 +
  156 + const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
  157 + watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
114 158 setModalProps({
115 159 okButtonProps: {
116   - disabled: flag,
  160 + disabled:
  161 + timeState.startsOn === null ||
  162 + timeState.endsOn === null ||
  163 + !formModel.daysOfWeek?.length,
117 164 },
118 165 });
  166 + watch(
  167 + () => formModel.schedule,
  168 + () => {
  169 + timeState.startsOn = null;
  170 + timeState.endsOn = null;
  171 + }
  172 + );
119 173 });
120   - },
121   - {
122   - deep: true,
123   - }
124   -);
  174 + const { value, currentIndex, isUpdate, scheduleData } = data;
  175 + isUpdateFlag.value = isUpdate;
  176 + if (value === 'SPECIFIC_TIME') {
  177 + title.value = '定时启用';
  178 + } else {
  179 + title.value = '自定义启用';
  180 + }
125 181
126   -const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
127   - watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
128   - setModalProps({
129   - okButtonProps: {
130   - disabled:
131   - timeState.startsOn === null ||
132   - timeState.endsOn === null ||
133   - !formModel.daysOfWeek?.length,
134   - },
  182 + index.value = currentIndex;
  183 + const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
  184 + // 编辑
  185 + setFieldsValue({
  186 + schedule: value,
135 187 });
136   - watch(
137   - () => formModel.schedule,
138   - () => {
139   - timeState.startsOn = null;
140   - timeState.endsOn = null;
141   - }
142   - );
143   - });
144   - const { value, currentIndex, isUpdate, scheduleData } = data;
145   - index.value = currentIndex;
146   - const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
147   - // 编辑
148   - setFieldsValue({
149   - schedule: value,
150   - });
151   - if (isUpdate) {
152   - nextTick(() => {
153   - // 回显定时启用
154   - if (scheduleData.type === 'SPECIFIC_TIME') {
155   - setFieldsValue({
156   - daysOfWeek: scheduleData.daysOfWeek,
157   - });
158   - timeState.startsOn = scheduleData.startsOn + dayZenoTime + '';
159   - timeState.endsOn = scheduleData.endsOn + dayZenoTime + '';
160   - }
161   - // 回显自定义启用
162   - if (scheduleData.type === 'CUSTOM') {
163   - for (let [index, item] of scheduleData?.items.entries()) {
164   - if (item.enabled) {
165   - options.value[index].enabled = item.enabled;
166   - options.value[index].startsOn = item.startsOn + dayZenoTime + '';
167   - options.value[index].endsOn = item.endsOn + dayZenoTime + '';
  188 + if (isUpdate) {
  189 + nextTick(() => {
  190 + // 回显定时启用
  191 + if (scheduleData.type === 'SPECIFIC_TIME') {
  192 + setFieldsValue({
  193 + daysOfWeek: scheduleData.daysOfWeek,
  194 + });
  195 + timeState.startsOn = scheduleData.startsOn + dayZenoTime + '';
  196 + timeState.endsOn = scheduleData.endsOn + dayZenoTime + '';
  197 + }
  198 + // 回显自定义启用
  199 + if (scheduleData.type === 'CUSTOM') {
  200 + for (let [index, item] of scheduleData?.items.entries()) {
  201 + if (item.enabled) {
  202 + options.value[index].enabled = item.enabled;
  203 + options.value[index].startsOn = item.startsOn + dayZenoTime + '';
  204 + options.value[index].endsOn = item.endsOn + dayZenoTime + '';
  205 + }
168 206 }
169 207 }
170   - }
171   - });
172   - }
173   -});
174   -const scheduleData = ref({
175   - type: 'ANY_TIME',
176   -});
177   -const handleBlur = (eS, eE) => {
178   - if (eS > eE) {
179   - return createMessage.warn('开始时间不能大于结束时间')
180   - }
181   -}
182   -const handleTimeBlur = (eS, eE) => {
183   - if (eS > eE) {
184   - return createMessage.warn('开始时间不能大于结束时间')
185   - }
186   -}
187   -const handleOk = () => {
188   - const { schedule: type, timezone, daysOfWeek } = getFieldsValue();
189   - // 获取当天0时时间戳
190   - const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
191   - if (type === 'CUSTOM') {
192   - const items = options.value.map((item) => {
193   - return {
194   - startsOn: item.startsOn ? item.startsOn - dayZenoTime : 0,
195   - endsOn: item.endsOn ? item.endsOn - dayZenoTime : 0,
196   - dayOfWeek: item.dayOfWeek,
197   - enabled: item.enabled,
  208 + });
  209 + }
  210 + });
  211 + const scheduleData = ref({
  212 + type: 'ANY_TIME',
  213 + });
  214 + const handleBlur = (eS, eE) => {
  215 + if (eS > eE) {
  216 + return createMessage.warn('开始时间不能大于结束时间');
  217 + }
  218 + };
  219 + const handleTimeBlur = (eS, eE) => {
  220 + if (eS > eE) {
  221 + return createMessage.warn('开始时间不能大于结束时间');
  222 + }
  223 + };
  224 + const handleOk = () => {
  225 + const { schedule: type, timezone, daysOfWeek } = getFieldsValue();
  226 + // 获取当天0时时间戳
  227 + const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
  228 + if (type === 'CUSTOM') {
  229 + const items = options.value.map((item) => {
  230 + return {
  231 + startsOn: item.startsOn ? item.startsOn - dayZenoTime : 0,
  232 + endsOn: item.endsOn ? item.endsOn - dayZenoTime : 0,
  233 + dayOfWeek: item.dayOfWeek,
  234 + enabled: item.enabled,
  235 + };
  236 + });
  237 + scheduleData.value = {
  238 + type,
  239 + timezone,
  240 + items,
198 241 };
199   - });
200   - scheduleData.value = {
201   - type,
202   - timezone,
203   - items,
204   - };
205   - } else if (type === 'SPECIFIC_TIME') {
206   - scheduleData.value = {
207   - type,
208   - timezone,
209   - daysOfWeek,
210   - startsOn: timeState.startsOn - dayZenoTime,
211   - endsOn: timeState.endsOn - dayZenoTime,
212   - };
213   - }
214   - closeModal();
215   -};
216   -const handleCancel = () => {
217   - emit('cancel', index.value);
218   -};
  242 + } else if (type === 'SPECIFIC_TIME') {
  243 + scheduleData.value = {
  244 + type,
  245 + timezone,
  246 + daysOfWeek,
  247 + startsOn: timeState.startsOn - dayZenoTime,
  248 + endsOn: timeState.endsOn - dayZenoTime,
  249 + };
  250 + }
  251 + closeModal();
  252 + };
  253 + const handleCancel = () => {
  254 + emit('cancel', index.value);
  255 + };
219 256
220   -defineExpose({
221   - scheduleData,
222   -});
  257 + defineExpose({
  258 + scheduleData,
  259 + });
223 260 </script>
224 261
225 262 <style lang="less" scoped>
226   -:deep(.ant-time-picker) {
227   - width: 12rem;
228   -}
  263 + :deep(.ant-time-picker) {
  264 + width: 12rem;
  265 + }
229 266 </style>
... ...