update

src/components/LayoutSider/index.vue

@@ -17,13 +17,28 @@ const menuItemClick = (e) => {
 <template>
     <div class="w-full h-full box-border">
         <a-menu @menu-item-click="menuItemClick">
-            <a-sub-menu v-for="item in SystemStore.RoutesTemp" :key="item.name">
+            <template v-for="item in SystemStore.RoutesTemp" :key="item.name">
+                <template v-if="item.children?.length > 0">
+                    <a-sub-menu>
                         <template #icon>
                             <icon-apps></icon-apps>
                         </template>
                         <template #title>{{ item.title }}</template>
-                <a-menu-item v-for="k in item.children" :key="`/${item.path}/${k.path}`">{{ k.title }}</a-menu-item>
+                        <a-menu-item v-for="k in item.children" :key="`/${item.path}/${k.path}`">{{
+                                k.title
+                            }}
+                        </a-menu-item>
                     </a-sub-menu>
+                </template>
+                <template v-else>
+                    <a-menu-item :key="`/${item.path}`">
+                        <template #icon>
+                            <icon-apps></icon-apps>
+                        </template>
+                        {{ item.title }}
+                    </a-menu-item>
+                </template>
+            </template>
         </a-menu>
     </div>
 </template>

src/pages/merchant/pages/communication-center/index.vue

@@ -1,9 +1,154 @@
 <script setup>
+import Filter from "../../../../components/Filter/index.vue";
+import {reactive, computed} from "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',
+        align: 'center',
+    },
+    {
+        title: '沟通进度',
+        dataIndex: 'gtjd',
+        slotName: 'gtjd',
+        align: 'center',
+    },
+    {
+        title: '达人账号',
+        dataIndex: 'name',
+        align: 'center',
+    },
+    {
+        title: '回填数据',
+        dataIndex: 'htsj',
+        slotName: 'htsj',
+        align: 'center',
+    },
+    {
+        title: '达人反馈',
+        dataIndex: 'drfk',
+        slotName: 'drfk',
+        align: 'center',
+    },
+    {
+        title: '支付状态',
+        dataIndex: 'zfzt',
+        slotName: 'zfzt',
+        align: 'center',
+    },
+];
+const FilterConfig = computed(() => [
+    {
+        key: 'wd',
+        type: 'input',
+        label: '任务名称',
+        placeholder: '请输入任务名称'
+    },
+    {
+        key: 'wd',
+        type: 'select',
+        label: '支付状态',
+        placeholder: '请选择支付状态'
+    },
+    {   // 占位
+        key: 'wd',
+        type: 'custom',
+        label: '',
+    },
+    {
+        key: 'wd',
+        type: 'input',
+        label: '任务编号',
+        placeholder: '请输入任务编号'
+    },
+    {
+        key: 'wd',
+        type: 'input',
+        label: '子任务编号',
+        placeholder: '请输入子任务编号'
+    },
+    {
+        key: 'wd',
+        type: 'input',
+        label: '达人账号',
+        placeholder: '请输入达人账号'
+    },
+]);
+const po = reactive({
+    wd: null,
+});
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const {loading, pagination, initFetchData} = useTableQuery({
+    parameter: po,
+    api: Api.system.getData,
+    callback: (data) => {
+        Object.assign(vo, data);
+        console.log(vo);
+    }
+});
 </script>
 
 <template>
     <!-- 沟通中心 -->
+    <div id="Item-View" class="p-[20px] h-full">
+        <a-card>
+            <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>
+
+            <div class="py-[20px]">
+                <a-tabs type="rounded">
+                    <a-tab-pane title="待回复" :key="1">
+                    </a-tab-pane>
+                    <a-tab-pane title="已完成" :key="2">
+                    </a-tab-pane>
+                </a-tabs>
+
+                <a-table
+                    @page-change="(e) => pagination.current = e"
+                    :pagination="pagination"
+                    :loading="loading"
+                    :columns="columns"
+                    :data="vo.rows">
+                    <template v-slot:gtjd>
+                        <div class="flex items-center gap-[8px] justify-center">
+                            <div class="bg-[#165DFF] w-[6px] aspect-square rounded-[50%]"></div>
+                            待回复
+                        </div>
+                    </template>
+                    <template v-slot:htsj>
+                        <a-link :hoverable="false">查看回填</a-link>
+                    </template>
+                    <template v-slot:drfk>
+                        <a-badge :count="9" dot :dotStyle="{ width: '10px', height: '10px' }">
+                            <a-link :hoverable="false">沟通记录</a-link>
+                        </a-badge>
+                    </template>
+                    <template v-slot:zfzt="{rowIndex}">
+                        <a-link v-if="rowIndex%2===0" :hoverable="false" status="success">确认结算</a-link>
+                        <a-link v-else :hoverable="false" status="success" disabled>已结算</a-link>
+                    </template>
+                </a-table>
+            </div>
+        </a-card>
+    </div>
 </template>
 
 <style scoped>

src/pages/merchant/pages/task-center/index.vue

@@ -4,7 +4,7 @@
 
 <template>
     <!-- 任务中心 -->
-    <div id="Item-View" class="p-[20px]">
+    <div id="Item-View" class="p-[20px] h-full">
         <a-card>
             <router-view></router-view>
         </a-card>

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

@@ -136,7 +136,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
     <!-- 悬赏任务 -->
     <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>
 
-    <div class="my-[20px]">
+    <div class="my-[20px] flex-grow flex flex-col">
         <div class="flex gap-[16px] mb-[20px]">
             <a-button type="primary">
                 <template #icon>
@@ -153,9 +153,11 @@ const {loading, pagination, initFetchData} = useTableQuery({
         </div>
 
         <a-table
+            class="flex-grow"
             :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>

src/pinia/SystemStore/mock.js

@@ -22,6 +22,13 @@ const mockRoutes = [
             }
         ]
     },
+    {
+        path: 'communication-center',
+        name: 'communication-center',
+        title: '沟通中心',
+        icon: '',
+        component: 'communication-center',
+    }
 ];
 
 export default mockRoutes;

src/router/routes-map.js

@@ -2,6 +2,7 @@ const routesMap = {
     'task-center': () => import('../pages/merchant/pages/task-center/index.vue'),
     'reward-mission': () => import('../pages/merchant/pages/task-center/reward-mission.vue'),
     'appointed-task': () => import('../pages/merchant/pages/task-center/appointed-task.vue'),
+    'communication-center': () => import('../pages/merchant/pages/communication-center/index.vue'),
 };
 
 export default routesMap;

src/scss/global.scss

@@ -24,3 +24,17 @@ body {
 .arco-btn-text {
     color: var(--color-text-2) !important;
 }
+#Item-View {
+    .arco-card {
+        @apply h-full;
+        .arco-card-body {
+            @apply h-full flex flex-col;
+            .arco-table-container {
+                @apply h-full;
+                .arco-table-element {
+                    @apply h-full;
+                }
+            }
+        }
+    }
+}