Commit f1186b5cc8a1c595b2b2aea627d437fb4eabe00a

Authored by fengwotao
1 parent bb619146

fix:DEFECT-665 场景联动选择定时启用和自定义启用时,时间范围结束时间不能在开始时间之前,按照顺序进行选择

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