feat: 时间组件修改

src/components/select-range-datetime/index.vue

@@ -11,66 +11,45 @@
 </template>
 
 <script setup lang="ts">
-  import { objModifyAssign } from '@/utils/utils';
   import { ref, watch, useAttrs } from 'vue';
 
   defineOptions({
     name: 'SelectRangeDatetime',
   });
 
-  interface KeysType {
-    startTime: string;
-    endTime: string;
-  }
+  type TimeType = number | undefined;
 
   const props = withDefaults(
     defineProps<{
-      modelValue: Record<string, any>;
-      keys?: KeysType;
+      startTime: TimeType;
+      endTime: TimeType;
       showTime?: boolean;
       format?: string;
     }>(),
     {
-      modelValue: () => {
-        return {};
-      },
-      keys: () => {
-        return { startTime: 'startTime', endTime: 'endTime' };
-      },
       showTime: true,
       format: 'YYYY-MM-DD HH:mm',
     }
   );
-  const emit = defineEmits(['update:modelValue', 'change']);
+  const emit = defineEmits(['update:startTime', 'update:endTime', 'change']);
   const attrs = useAttrs();
 
   const selected = ref<number[]>();
 
   function onChange(value: any) {
-    const { startTime, endTime } = props.keys;
-    const dt: Record<string, number | undefined> = {};
-    const vals = value as number[] | undefined;
-    if (vals) {
-      dt[startTime] = vals[0];
-      dt[endTime] = vals[1];
-    } else {
-      dt[startTime] = undefined;
-      dt[endTime] = undefined;
-    }
-    objModifyAssign(props.modelValue, dt);
-    emit('update:modelValue', props.modelValue);
-    emit('change', props.modelValue);
+    const vals = (value || []) as TimeType[];
+    emit('update:startTime', vals[0]);
+    emit('update:endTime', vals[1]);
+    emit('change', vals);
   }
 
   watch(
-    () => props.modelValue,
+    () => [props.startTime, props.endTime],
     (val) => {
-      const { startTime, endTime } = props.keys;
-      selected.value = [val[startTime] as number, val[endTime] as number];
+      selected.value = (val || []) as number[];
     },
     {
       immediate: true,
-      deep: true,
     }
   );
 </script>

src/components/select-range-time/index.vue

@@ -10,65 +10,43 @@
 </template>
 
 <script setup lang="ts">
-  import { objModifyAssign } from '@/utils/utils';
   import { ref, watch, useAttrs } from 'vue';
 
   defineOptions({
     name: 'SelectRangeDatetime',
   });
 
-  interface KeysType {
-    startTime: string;
-    endTime: string;
-  }
+  type TimeType = string | undefined;
 
   const props = withDefaults(
     defineProps<{
-      modelValue: Record<string, any>;
-      keys?: KeysType;
+      startTime: TimeType;
+      endTime: TimeType;
       format?: string;
     }>(),
     {
-      modelValue: () => {
-        return {};
-      },
-      keys: () => {
-        return { startTime: 'startTime', endTime: 'endTime' };
-      },
-      showTime: true,
       format: 'HH:mm',
     }
   );
-  const emit = defineEmits(['update:modelValue', 'change']);
+  const emit = defineEmits(['update:startTime', 'update:endTime', 'change']);
   const attrs = useAttrs();
 
   const selected = ref<string[]>();
 
   function onChange(value: any) {
-    const { startTime, endTime } = props.keys;
-    const dt: Record<string, string> = {};
-    const vals = value as string[] | undefined;
-    if (vals) {
-      dt[startTime] = vals[0];
-      dt[endTime] = vals[1];
-    } else {
-      dt[startTime] = '';
-      dt[endTime] = '';
-    }
-    objModifyAssign(props.modelValue, dt);
-    emit('update:modelValue', props.modelValue);
-    emit('change', props.modelValue);
+    const vals = (value || []) as TimeType[];
+    emit('update:startTime', vals[0]);
+    emit('update:endTime', vals[1]);
+    emit('change', vals);
   }
 
   watch(
-    () => props.modelValue,
+    () => [props.startTime, props.endTime],
     (val) => {
-      const { startTime, endTime } = props.keys;
-      selected.value = [val[startTime] as string, val[endTime] as string];
+      selected.value = [val[0] || '', val[1] || ''];
     },
     {
       immediate: true,
-      deep: true,
     }
   );
 </script>

src/views/order/task-manage/addTimes.vue

@@ -28,7 +28,8 @@
         ]"
       >
         <select-range-datetime
-          v-model="formData.date"
+          v-model:startTime="formData.date.startTime"
+          v-model:endTime="formData.date.endTime"
           :show-time="false"
           format="YYYY-MM-DD"
         >
@@ -49,12 +50,17 @@
       >
         <select-range-time
           v-if="IS_LOOP"
-          v-model="formData.times[index]"
+          v-model:startTime="formData.times[index].startTime"
+          v-model:endTime="formData.times[index].endTime"
           disable-confirm
           :style="{ width: '256px' }"
         >
         </select-range-time>
-        <select-range-datetime v-else v-model="formData.times[index]">
+        <select-range-datetime
+          v-else
+          v-model:startTime="formData.times[index].startTime"
+          v-model:endTime="formData.times[index].endTime"
+        >
         </select-range-datetime>
         <a-button class="ml-10" @click="toAdd(index)">
           <template #icon>

src/views/order/task-manage/modifyTask.vue

@@ -72,7 +72,7 @@
   }
 
   function modifiedHandle() {
-    getDetail();
+    if (props.rowData.id) getDetail();
     emit('modified');
     if (isEdit.value) return;
     close();

src/views/order/task-manage/ruleForm.vue

@@ -36,11 +36,8 @@
       </a-form-item>
       <a-form-item field="selfApplyStartTime" label="第一阶段开启时间">
         <select-range-datetime
-          v-model="formData"
-          :keys="{
-            startTime: 'selfApplyStartTime',
-            endTime: 'selfApplyEndTime',
-          }"
+          v-model:startTime="formData.selfApplyStartTime"
+          v-model:endTime="formData.selfApplyEndTime"
         >
         </select-range-datetime>
         <template #extra>
@@ -49,11 +46,8 @@
       </a-form-item>
       <a-form-item field="openApplyStartTime" label="第三阶段开启时间">
         <select-range-datetime
-          v-model="formData"
-          :keys="{
-            startTime: 'openApplyStartTime',
-            endTime: 'openApplyEndTime',
-          }"
+          v-model:startTime="formData.openApplyStartTime"
+          v-model:endTime="formData.openApplyEndTime"
         >
         </select-range-datetime>
         <template #extra>

src/views/order/task-manage/timeForm.vue

@@ -10,7 +10,10 @@
         :field="`times[${index}].startTime`"
         :rules="rules"
       >
-        <select-range-datetime v-model="formData.times[index]">
+        <select-range-datetime
+          v-model:startTime="formData.times[index].startTime"
+          v-model:endTime="formData.times[index].endTime"
+        >
         </select-range-datetime>
         <a-button class="ml-10" status="danger" @click="toDelete(index)">
           <template #icon>