xl-root/src/components/PreviewTaskModal/PreviewTaskModal.vue

<script setup>
import XImage from "../../components/XImage/Index.vue";
import {reactive, ref, watch} from 'vue';
import Api from "../../api/index.ts";
import {Message} from "@arco-design/web-vue";
import Comment from "../Comment/index.vue";
import Talk from "../Talk/index.vue";
import AddMaterial from "../../pages/merchant/components/AddMaterial.vue";
import AddComment from "../../pages/merchant/components/AddComment.vue";
import RejectTaskModal from "../../pages/manage/pages/manage-reward-mission/components/RejectTaskModal.vue";

const emits = defineEmits(['success', 'checkChange']);
const checked = ref(false);
const selecdKey = ref([]);
const {id} = defineProps({
    id: {
        type: Number,
        default: 0,
    }
});
const visible = ref(false);
const detail = reactive({});
const activeKey = ref(0);

const getData = async (update) => {
    Api.admin.getTaskChildrenInfo(id).then(({data}) => {
        if (update) {
            detail.content.forEach((v, index) => {
                v.comment = data.content[index].comment;
            });
        } else {
            Object.assign(detail, data);
        }
    });
}

watch(
    () => visible.value,
    (val) => {
        if (val) getData();
    },
    {deep: true}
)

const passTaskChildren = async () => {
    console.log(selecdKey.value);

    const {msg} = await Api.admin.passChildrenMaterial({
        id: detail.id,
        data: detail.content.map(v => ({
            id: v.id,
            title: v.title,
            content: v.content,
            tags: v.tags,
            material: v.material,
        }))
    });
    Message.success(msg);
    visible.value = false;
    emits('success');
}

const refuseTaskChildren = async () => {
    const {code, msg} = await Api.admin.refuseTaskChildren(id);
    if (code === 1) Message.success(msg);
    visible.value = false;
    emits('success');
}

watch(
    () => checked.value,
    (val) => {
        emits('checkChange', val)
    },
    {deep: true}
)
</script>

<template>
    <a-link v-if="!$slots.default" :hoverable="false" @click="visible=true">预览</a-link>
    <div v-else @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        title-align="start"
        title="预览"
        v-model:visible="visible">
        <a-tabs v-model:active-key="activeKey" type="rounded" v-if="detail.id !== undefined && detail.id !== null">
            <a-tab-pane v-for="(item, index) in detail.content" :title="`素材${index+1}`" :key="index">
                <a-form
                    layout="vertical">
                    <a-form-item label="标题" v-if="item?.material_type?.title_limit > 0">
                        <a-input v-model:model-value="item.title" :disabled="detail.check_status !== 0"
                                 :max-length="item.material_type.title_limit"></a-input>
                    </a-form-item>
                    <a-form-item label="正文" v-if="item?.material_type?.desc_limit > 0">
                        <a-textarea
                            v-model:model-value="item.content"
                            :max-length="item.material_type.desc_limit"
                            show-word-limit
                            :disabled="detail.check_status !== 0"
                            :model-value="item.content">
                        </a-textarea>
                    </a-form-item>
                    <a-form-item label="话题" v-if="item?.material_type?.tags_limit > 0">
                        <Talk v-model:model-value="item.tags" :disabled="detail.check_status !== 0"
                              :limit="item?.material_type?.tags_limit"></Talk>
                    </a-form-item>

                    <a-form-item label="素材">
                        <div class="flex flex-wrap gap-[16px]">
                            <x-image
                                v-for="(v, index) in item.material"
                                @delete="item.material.splice(index, 1)"
                                :hide-delete="detail.check_status !== 0"
                                :key="index"
                                width="60px"
                                height="60px"
                                :src="v">
                            </x-image>
                            <add-material
                                v-if="detail.check_status === 0"
                                @success="val => item.material = val"
                                ref="AddMaterialRef"
                                :id="item.task_id"
                                :material="item">
                                <div
                                    class="size-[60px] bg-[#F2F3F5] flex justify-center items-center flex-col rounded-[8px] cursor-pointer">
                                    <icon-plus/>
                                    <div>添加</div>
                                </div>
                            </add-material>
                        </div>
                    </a-form-item>

                    <a-form-item label="评论区内容">
                        <div class="flex-grow">
                            <div v-if="item.comment.length > 0" class="flex flex-col gap-[8px] w-full mb-[12px]">
                                <comment :data="item.comment" :hide-delete="detail.check_status !== 0"
                                         @success="getData(true)"></comment>
                            </div>
                            <add-comment
                                v-if="detail.check_status === 0"
                                @success="getData(true)"
                                :material="{id: id}"
                                :item="item">
                                <a-button>
                                    <icon-plus/>
                                    <div>添加评论</div>
                                </a-button>
                            </add-comment>
                        </div>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>

        <template #footer>
            <div class="flex items-center gap-[8px]">
                <a-checkbox v-model:model-value="checked">选中</a-checkbox>

                <template v-if="detail.check_status === 0">
                    <a-button @click="passTaskChildren" type="primary" class="ml-auto">通过
                    </a-button>
                    <RejectTaskModal
                        :api="Api.admin.refuseTaskChildren"
                        :id="detail.id"
                        @success="() => {
                            visible = false;
                            emits('success')
                        }">
                        <a-button>拒绝</a-button>
                    </RejectTaskModal>
                </template>
                <a-button v-else @click="visible=false" class="ml-auto">关闭</a-button>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss" scoped>
#tag-list {
    :deep(.arco-tag) {
        color: #000;
        background-color: #fff;
        border: 1px solid rgb(229, 230, 235);
        box-sizing: border-box;
    }
}
</style>