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

<script setup>
import FormTitle from "../../../../../components/FormTitle/index.vue";
import Backfill from "./Backfill.vue";
import {v4} from "uuid";
import XTimePicker from "../../../../../components/XTimePicker/XTimePicker.vue";
import {onMounted, reactive, useTemplateRef} from "vue";
import {Message} from "@arco-design/web-vue";
import Api from "../../../../../api/index.js";
import Preview from "../../../../../components/XImage/Preview.vue";

const INDEX = ['一', '二', '三'];
const emits = defineEmits(['success', 'prev']);
const form = defineModel('form');
const formRef = useTemplateRef('formRef');
const rules = {
    start_time: [{
        required: true,
        message: '任务可接时段不完整',
    }],
    end_time: [{
        required: true,
        message: '任务可接时段不完整',
    }],
    is_other: [],
    backfill: [{
        required: true,
        validator: (value, callback) => {
            for (const v of value) {
                if (!v.end_time || !v.start_time || !v.content_id) {
                    callback('回填内容不完整');
                }
            }
        }
    }],
}

if (form.value.backfill.length === 0) form.value.backfill.push({
    id: v4(),
    start_time: null,
    end_time: null,
    content_id: null
});

if (form.value.is_comment === 1) {
    Api.merchant.getChooseContent({
        id: form.value.platform_id,
    }).then(({data}) => {
        const k = data.find(v => v.is_comment === 1);
        form.value.backfill[0].content_id = k.id;
    })
}

const addHT = () => {
    form.value.backfill.push({
        id: v4(),
        start_time: null,
        end_time: null,
        content_id: null
    });
}

const success = async () => {
    formRef.value.validate().then((res) => {
        if (res) {
            const firstKey = Object.keys(res)[0];
            Message.warning(res[firstKey].message);
        } else {
            emits('success', form.value);
        }
    });
}

const SelectList = reactive([]);
const getSelectList = async () => {
    const {data} = await Api.merchant.getChooseContent({id: form.value.platform_id});
    SelectList.length = 0;
    SelectList.push(...data);
}
onMounted(() => {
    getSelectList();
})
</script>

<template>
    <FormTitle>
        <template #title>回填管理</template>

        <a-form
            class="mt-[30px]"
            ref="formRef"
            :model="form"
            :rules="rules"
            label-align="right"
            :label-col-props="{span: 4}"
            :wrapper-col-props="{span: 12, offset: 1}">
            <a-form-item field="start_time" label="任务可接时间段" extra="达人可在此时段内接受任务，超出将无法领取任务">
                <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="*达人未回传，但不能确定素材是否被发布">
                <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="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 form.backfill"
                field="backfill"
                :key="item.id"
                :label="`第${INDEX[index]}次回填`">
                <div class="flex flex-col gap-[20px]">
                    <Backfill :form="form" :index="index" v-model:po="form.backfill[index]"></Backfill>

                    <div class="flex gap-[8px]">
                        <Preview
                            :srcList="SelectList.find(v => v.id === form.backfill[index].content_id)?.image_arr || []"
                            infinite>
                            <a-button type="outline">
                                <template #icon>
                                    <icon-bulb/>
                                </template>
                                查看指引
                            </a-button>
                        </Preview>
                        <a-button
                            v-if="form.backfill.length > 1"
                            @click="form.backfill.splice(index, 1)"
                            type="outline"
                            status="danger">
                            <template #icon>
                                <icon-minus/>
                            </template>
                            删除
                        </a-button>
                        <a-button
                            v-if="form.backfill.length < 3 && form.backfill.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 class="mr-[24px]" @click="emits('prev')">上一步</a-button>
                <a-button type="primary" @click="success">下一步</a-button>
            </a-form-item>
        </a-form>
    </FormTitle>
</template>

<style scoped>

</style>