update

src/pages/merchant/pages/task-center/components/new-task-4.vue

@@ -1,26 +1,14 @@
 <script setup>
 import FormTitle from "../../../../../components/FormTitle/index.vue";
-import {reactive} from "vue";
 import Backfill from "./Backfill.vue";
 import {v4} from "uuid";
 import XTimePicker from "../../../../../components/XTimePicker/XTimePicker.vue";
 
-const {form} = defineProps({
-    form: {
-        type: Object,
-        default: {}
-    }
-});
 const INDEX = ['一', '二', '三'];
 const emits = defineEmits(['success', 'prev']);
-const po = reactive({
-    start_time: null,
-    end_time: null,
-    is_other: 0,
-    backfill: []
-});
+const form = defineModel('form');
 
-po.backfill.push({
+form.value.backfill.push({
     id: v4(),
     start_time: null,
     end_time: null,
@@ -28,7 +16,7 @@ po.backfill.push({
 });
 
 const addHT = () => {
-    po.backfill.push({
+    form.value.backfill.push({
         id: v4(),
         start_time: null,
         end_time: null,
@@ -37,7 +25,7 @@ const addHT = () => {
 }
 
 const success = () => {
-    emits('success', po);
+    emits('success', form.value);
 }
 </script>
 
@@ -47,12 +35,12 @@ const success = () => {
 
         <a-form
             class="mt-[30px]"
-            :model="po"
+            :model="form"
             label-align="right"
             :label-col-props="{span: 4}"
             :wrapper-col-props="{span: 12, offset: 1}">
             <a-form-item label="任务可接时间段" extra="达人可在此时段内接受任务，超出将无法领取任务">
-                <x-time-picker v-model:start="po.start_time" v-model:end="po.end_time"></x-time-picker>
+                <x-time-picker v-model:start="form.start_time" v-model:end="form.end_time"></x-time-picker>
             </a-form-item>
 
             <a-form-item extra="*达人未回传，但不能确定素材是否被发布">
@@ -63,18 +51,18 @@ const success = () => {
                     </div>
                 </template>
 
-                <a-radio-group v-model:model-value="po.is_other" direction="vertical">
+                <a-radio-group v-model:model-value="form.is_other" direction="vertical">
                     <a-radio :value="0">该子任务不可被其他达人可领取</a-radio>
                     <a-radio :value="1">该子任务可被其他达人可领取</a-radio>
                 </a-radio-group>
             </a-form-item>
-            
+
             <a-form-item
-                v-for="(item, index) in po.backfill"
+                v-for="(item, index) in form.backfill"
                 :key="item.id"
                 :label="`第${INDEX[index]}次回填`">
                 <div class="flex flex-col gap-[20px]">
-                    <Backfill :form="form" v-model:po="po.backfill[index]"></Backfill>
+                    <Backfill :form="form" v-model:po="form.backfill[index]"></Backfill>
 
                     <div class="flex gap-[8px]">
                         <a-button type="outline">
@@ -84,8 +72,8 @@ const success = () => {
                             查看指引
                         </a-button>
                         <a-button
-                            v-if="po.backfill.length > 1"
-                            @click="po.backfill.splice(index, 1)"
+                            v-if="form.backfill.length > 1"
+                            @click="form.backfill.splice(index, 1)"
                             type="outline"
                             status="danger">
                             <template #icon>
@@ -94,7 +82,7 @@ const success = () => {
                             删除
                         </a-button>
                         <a-button
-                            v-if="po.backfill.length < 3 && po.backfill.length === index + 1"
+                            v-if="form.backfill.length < 3 && form.backfill.length === index + 1"
                             @click="addHT"
                             type="outline">
                             <template #icon>