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

<script setup>
import {reactive, ref, watch} from 'vue';
import Api from "../../api/index.ts";
import {Message} from "@arco-design/web-vue";

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

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);
    emits('success');
}

const refuseTaskChildren = async () => {
    const {code, msg} = await Api.admin.refuseTaskChildren(id);
    if (code === 1) Message.success(msg);
    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 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>
                    </a-form-item>

                    <a-form-item label="素材">
                        <div class="flex flex-wrap gap-[16px]">
                            <a-image
                                v-for="v in item.materia_arr"
                                width="60px"
                                height="60px"
                                :src="v">
                            </a-image>
                        </div>
                    </a-form-item>

                    <a-form-item label="评论区内容">
                        <div class="flex flex-col gap-[8px] w-full">
                            <div class="w-full flex gap-[10px] items-center" v-for="v in detail.comment">
                                {{ v.id }}.
                                <div class="flex-grow bg-[var(--color-neutral-2)] p-[4px] h-[40px] flex items-center">
                                    <div class="text-[#4E5969] text-[14px] mr-[4px]" v-if="v.pid !== 0">
                                        <icon-redo/>
                                        回复{{ v.pid }}：
                                    </div>
                                    <a-image
                                        v-if="v.image"
                                        class="mr-[12px]"
                                        width="30px"
                                        height="30px"
                                        :src="v.image">
                                    </a-image>
                                    第三个很好用，大家可以在网上搜同款
                                </div>
                            </div>
                        </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>

                <a-button @click="passTaskChildren" type="primary" class="ml-auto">通过</a-button>
                <a-button @click="refuseTaskChildren">拒绝</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>