update

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

@@ -0,0 +1,108 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+import Backfill from "./Backfill.vue";
+import {v4} from "uuid";
+
+const INDEX = ['一', '二', '三'];
+const htList = reactive([]);
+htList.push({
+    id: v4(),
+    time: null,
+    content: null,
+});
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const addHT = () => {
+    htList.push({
+        id: v4(),
+        time: null,
+        content: null,
+    });
+}
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>回填管理</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            label-align="right"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+            <a-form-item label="任务可接时间段" extra="达人可在此时段内接受任务，超出将无法领取任务">
+                <a-time-picker type="time-range"></a-time-picker>
+            </a-form-item>
+
+            <a-form-item extra="*达人未回传，但不能确定素材是否被发布">
+                <template #label>
+                    <div class="flex flex-col justify-end items-end">
+                        <div>若达人领取子任务后</div>
+                        <div>未按时提交第1个回传</div>
+                    </div>
+                </template>
+
+                <a-radio-group v-model:model-value="po.name" 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 htList"
+                :key="item.id"
+                :label="`第${INDEX[index]}次回填`">
+                <div class="flex flex-col gap-[20px]">
+                    <Backfill></Backfill>
+
+                    <div class="flex gap-[8px]">
+                        <a-button type="outline">
+                            <template #icon>
+                                <icon-bulb/>
+                            </template>
+                            查看指引
+                        </a-button>
+                        <a-button
+                            v-if="htList.length > 1"
+                            @click="htList.splice(index, 1)"
+                            type="outline"
+                            status="danger">
+                            <template #icon>
+                                <icon-minus/>
+                            </template>
+                            删除
+                        </a-button>
+                        <a-button
+                            v-if="htList.length < 3 && htList.length === index + 1"
+                            @click="addHT"
+                            type="outline">
+                            <template #icon>
+                                <icon-plus/>
+                            </template>
+                            添加
+                        </a-button>
+                    </div>
+                </div>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style scoped>
+
+</style>