update

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

@@ -1,10 +1,207 @@
 <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";
 
+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: '全部',
+        options: [
+            {
+                label: '选项一',
+                value: 1,
+            },
+            {
+                label: '选项二',
+                value: 2,
+            },
+            {
+                label: '选项三',
+                value: 3,
+            },
+        ]
+    },
+    {
+        key: 'wd',
+        type: 'select',
+        label: '任务状态',
+        placeholder: '全部',
+        options: [
+            {
+                label: '选项一',
+                value: 1,
+            },
+            {
+                label: '选项二',
+                value: 2,
+            },
+            {
+                label: '选项三',
+                value: 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>
     <!-- 悬赏任务 -->
-    悬赏任务
+    <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>
+
+    <div class="my-[20px]">
+        <div class="flex gap-[16px] mb-[20px]">
+            <a-button type="primary">
+                <template #icon>
+                    <icon-plus/>
+                </template>
+                新建子任务
+            </a-button>
+            <a-button>
+                <template #icon>
+                    <icon-plus/>
+                </template>
+                从模板快速创建
+            </a-button>
+        </div>
+
+        <a-table
+            :columns="columns"
+            :data="vo.rows"
+            :loading="loading"
+            :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">查看子任务</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>
 </template>
 
 <style scoped>