xl-root/src/pages/merchant/pages/task-center/reward-mission.vue

<script setup>
import {reactive, computed} from 'vue';
import Filter from "../../../../components/Filter/index.vue";
import TooltipTag from "../../../../components/TooltipTag/index.vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import {toPath} from "../../../../utils/index.js";

const columns = [
    {
        title: '任务编号',
        dataIndex: 'name',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
    },
    {
        title: '发布渠道',
        dataIndex: 'name',
    },
    {
        title: '创建时间',
        dataIndex: 'name',
    },
    {
        title: '当前状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '子任务进度',
        dataIndex: 'name',
    },
    {
        title: '消耗金额',
        dataIndex: 'money',
        slotName: 'money',
    },
    {
        title: '是否开始',
        dataIndex: 'start',
        slotName: 'start',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 200,
    },
    {
        title: '',
        dataIndex: 'exp',
        slotName: 'exp'
    },
];
const FilterConfig = computed(() => [
    {
        key: 'wd',
        type: 'input',
        label: '任务编号',
        placeholder: '请输入集合编号'
    },
    {
        key: 'wd',
        type: 'input',
        label: '任务名称',
        placeholder: '请输入集合名称'
    },
    {
        key: 'wd',
        type: 'select',
        label: '任务渠道',
        placeholder: '全部',
        api: async () => ({
            data: [
                {
                    name: '选项一',
                    id: 1,
                },
                {
                    name: '选项二',
                    id: 2,
                },
                {
                    name: '选项三',
                    id: 3,
                },
            ]
        })
    },
    {
        key: 'wd',
        type: 'select',
        label: '任务状态',
        placeholder: '全部',
        api: async () => ({
            data: [
                {
                    name: '选项一',
                    id: 1,
                },
                {
                    name: '选项二',
                    id: 2,
                },
                {
                    name: '选项三',
                    id: 3,
                },
            ]
        })
    },
    {
        key: 'wd',
        type: 'datetime',
        label: '创建时间',
        placeholder: '全部',
    },
]);
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const po = reactive({
    wd: null,
});

const {loading, pagination, initFetchData} = useTableQuery({
    parameter: po,
    api: Api.system.getData,
    callback: (data) => {
        Object.assign(vo, data);
        console.log(vo);
    }
});
</script>

<template>
    <a-card>
        <!-- 悬赏任务 -->
        <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>

        <div class="flex gap-[16px] mb-[20px]">
            <a-button type="primary" @click="toPath('/home/task-center/new-task')">
                <template #icon>
                    <icon-plus/>
                </template>
                新建子任务
            </a-button>
            <a-button>
                <template #icon>
                    <icon-plus/>
                </template>
                从模板快速创建
            </a-button>
        </div>

        <div class="mt-[20px] flex-grow">
            <a-table
                class="h-full"
                :columns="columns"
                :data="vo.rows"
                :loading="loading"
                @page-change="(e) => pagination.current = e"
                :pagination="pagination">
                <template v-slot:status="{record}">
                    <TooltipTag v-if="record.status === 0" color="cyan">待完善</TooltipTag>
                    <TooltipTag v-if="record.status === 1" color="red">未通过</TooltipTag>
                    <TooltipTag v-if="record.status === 2" color="magenta">请完善子任务</TooltipTag>
                    <TooltipTag v-if="record.status === 3" color="magenta">待付款</TooltipTag>
                    <TooltipTag v-if="record.status === 4" color="blue">投放中</TooltipTag>
                    <TooltipTag v-if="record.status === 5" color="orangered">暂停中</TooltipTag>
                    <TooltipTag v-if="record.status === 6" color="purple">终止</TooltipTag>
                    <TooltipTag v-if="record.status === 7" color="green">已完成</TooltipTag>
                </template>
                <template v-slot:start="{record}">
                    <a-switch></a-switch>
                </template>
                <template v-slot:money>
                    <div class="flex flex-col gap-[8px]">
                        <div>120.00 / 600.00（元）</div>
                        <a-progress
                            :percent="200/600"
                            :show-text="false">
                        </a-progress>
                    </div>
                </template>
                <template v-slot:action>
                    <div class="flex gap-[16px]">
                        <a-link :hoverable="false">编辑</a-link>
                        <a-link :hoverable="false" @click="toPath('/home/task-center/look-min-task')">查看子任务
                        </a-link>
                        <a-link :hoverable="false" status="danger">终止</a-link>
                    </div>
                </template>
                <template v-slot:exp>
                    <a-trigger trigger="click" :unmount-on-close="false">
                        <a-link :hoverable="false">更多
                            <icon-down/>
                        </a-link>
                        <template #content>
                            <div class="demo-basic">
                                <a-button type="text">
                                    存为模版
                                </a-button>
                            </div>
                        </template>
                    </a-trigger>
                </template>
            </a-table>
        </div>
    </a-card>
</template>

<style scoped>

</style>