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";

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

watch(
    () => visible.value,
    (val) => {
        if (val) Api.admin.getTaskChildrenInfo(id).then(({data}) => {
            Object.assign(detail, data);
            console.log('我看看我看看', data);
        });
    },
    {deep: true}
)

const passTaskChildren = async () => {
    const {code, msg} = await Api.admin.passTaskChildren(id);
    if (code === 1) 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');
}
</script>

<template>
    <a-link :hoverable="false" @click="visible=true">预览</a-link>
    <div @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="标题">
                        <a-input :model-value="item.title"></a-input>
                    </a-form-item>
                    <a-form-item label="正文">
                        <a-textarea
                            auto-size
                            :max-length="1000"
                            show-word-limit
                            :model-value="item.content">
                        </a-textarea>
                    </a-form-item>
                    <a-form-item label="话题">
                        <div v-if="item.tags_arr.length > 0" id="tag-list"
                             class="w-full bg-[var(--color-neutral-2)] p-[4px]">
                            <a-tag v-for="v in item.tags_arr">#{{ v }}</a-tag>
                        </div>
                        <div v-else>
                            暂无话题
                        </div>
                    </a-form-item>

                    <a-form-item label="素材">
                        <div v-if="item.materia_arr.length > 0" class="flex flex-wrap gap-[16px]">
                            <x-image
                                v-for="(v, index) in item.materia_arr"
                                :hide-delete="true"
                                :key="index"
                                width="60px"
                                height="60px"
                                :src="v">
                            </x-image>
                        </div>
                        <div v-else>
                            暂无话题
                        </div>
                    </a-form-item>

                    <a-form-item label="评论区内容">
                        <div v-if="item.comment.length > 0" class="flex flex-col gap-[8px] w-full">
                            <comment :data="item.comment" :hide-delete="true"></comment>
                        </div>
                        <div v-else>
                            暂无评论区内容
                        </div>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>

        <template #footer>
            <div class="flex items-center gap-[8px]">
                <!--                <a-checkbox-group>-->
                <!--                    <template v-for="(item, index) in detail.content" :key="item">-->
                <!--                        <a-checkbox v-show="activeKey === index" :value="item">选中</a-checkbox>-->
                <!--                    </template>-->
                <!--                </a-checkbox-group>-->

                <template v-if="detail.check_status === 0">
                    <a-button @click="passTaskChildren" type="primary" class="ml-auto">通过
                    </a-button>
                    <a-button @click="refuseTaskChildren">拒绝</a-button>
                </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>