From 589ddf5954c814ebdf5d487c0c0cc8861adc033c Mon Sep 17 00:00:00 2001
From: z9130 <984661593@qq.com>
Date: Thu, 10 Oct 2024 17:53:43 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=90=88=E5=90=8C=E5=BE=85?=
 =?UTF-8?q?=E5=8A=9E=E5=B7=B2=E5=8A=9E=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/contract/approval/todo/index.vue    |   5 +-
 .../components/todo-page/todo-page.vue        | 176 +++++++++++-------
 .../src/views/user-center/todo/index.vue      | 151 +--------------
 3 files changed, 121 insertions(+), 211 deletions(-)

diff --git a/apps/web-contract/src/views/contract/approval/todo/index.vue b/apps/web-contract/src/views/contract/approval/todo/index.vue
index 44845865..da3cec00 100644
--- a/apps/web-contract/src/views/contract/approval/todo/index.vue
+++ b/apps/web-contract/src/views/contract/approval/todo/index.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { Page } from '@vben/common-ui';
 import TodoPage from '../../components/todo-page/todo-page.vue';
 </script>
 
 <template>
-  <TodoPage :module="['contractSetup']" />
+  <Page content-class="h-full">
+    <TodoPage :module="['contractSetup']" />
+  </Page>
 </template>
 
 <style scoped></style>
diff --git a/apps/web-contract/src/views/contract/components/todo-page/todo-page.vue b/apps/web-contract/src/views/contract/components/todo-page/todo-page.vue
index af48ab8d..c1806586 100644
--- a/apps/web-contract/src/views/contract/components/todo-page/todo-page.vue
+++ b/apps/web-contract/src/views/contract/components/todo-page/todo-page.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
@@ -26,6 +26,46 @@ const { xGridRef: xGrid2Ref, triggerProxy: triggerProxy2 } = useVxeTable({
   ref: 'xGrid2Ref',
 });
 
+// emit 用于发出事件
+const emit = defineEmits<{
+  (e: 'update:module', value: string[]): void;
+}>();
+// 创建一个本地的 module 值，作为双向绑定的中间值
+const localModule = ref((props.module || []).slice()); // 创建一个本地副本
+
+// 防止无限循环的标志
+let isInternalUpdate = false;
+
+// 监听 props.module 的变化，并同步到 localModule
+watch(
+  () => props.module,
+  (newVal) => {
+    if (!isInternalUpdate) {
+      // 如果不是内部触发的，则同步更新 localModule
+      localModule.value = newVal?.slice() || [];
+      triggerProxy('reload'); // 触发其他操作
+      triggerProxy2('reload'); // 触发其他操作
+      console.log('module prop changed:', newVal);
+    }
+    // 重置标志
+    isInternalUpdate = false;
+  },
+  { immediate: true, deep: true },
+);
+
+// 监听 localModule 的变化，并向父组件发出更新事件
+watch(
+  localModule,
+  (newValue) => {
+    // 只有当 localModule 和 props.module 不同时才触发 emit
+    if (JSON.stringify(newValue) !== JSON.stringify(props.module)) {
+      isInternalUpdate = true; // 标记此次更新是内部更新
+      emit('update:module', newValue); // 发出更新事件
+    }
+  },
+  { deep: true },
+);
+
 /** Hooks - 表格 */
 const gridOptions = reactive(
   gridProps({
@@ -98,77 +138,75 @@ function toDetail(type: string, id: string, row?: any) {
 
 onMounted(() => {});
 
-// 页面打开后获取列表数据
+defineExpose({});
 </script>
 
 <template>
-  <Page content-class="h-full flex flex-col">
-    <a-space class="flex h-full flex-col" direction="vertical" size="small">
-      <a-card
-        :body-style="{ flex: '1' }"
-        class="flex h-full flex-col"
-        size="small"
-        title="待办"
-      >
-        <vxe-grid ref="xGridRef" v-bind="gridOptions">
-          <template #toolbar_buttons> </template>
-          <template #title_slot="{ row }">
-            <span
-              class="cursor-pointer text-blue-500 hover:underline"
-              @click="toDetail(row.module, row.businessId, row)"
-            >
-              {{ row.contractName }}
-            </span>
-          </template>
-          <template #operate="{ row }">
-            <a-button
-              class="text-blue-500"
-              size="small"
-              type="text"
-              @click="
-                toDetailPage('approval', '', {
-                  contractId: row.contractId,
-                  flowInstanceId: row.flowInstanceId,
-                })
-              "
-            >
-              查看
-            </a-button>
-          </template>
-        </vxe-grid>
-      </a-card>
-      <a-card
-        :body-style="{ flex: '1' }"
-        class="flex h-full flex-col"
-        size="small"
-        title="已办"
-      >
-        <vxe-grid ref="xGrid2Ref" v-bind="grid2Options">
-          <template #toolbar_buttons> </template>
-          <template #title_slot="{ row }">
-            <span>
-              {{ row.contractName }}
-            </span>
-          </template>
-          <template #operate="{ row }">
-            <a-button
-              class="text-blue-500"
-              size="small"
-              type="text"
-              @click="
-                toDetailPage('approval', '', {
-                  contractId: row.contractId,
-                  flowInstanceId: row.flowInstanceId,
-                })
-              "
-            >
-              查看
-            </a-button>
-          </template>
-        </vxe-grid>
-      </a-card>
-    </a-space>
-  </Page>
+  <a-space class="flex h-full flex-col" direction="vertical" size="small">
+    <a-card
+      :body-style="{ flex: '1' }"
+      class="flex h-full flex-col"
+      size="small"
+      title="待办"
+    >
+      <vxe-grid ref="xGridRef" v-bind="gridOptions">
+        <template #toolbar_buttons> </template>
+        <template #title_slot="{ row }">
+          <span
+            class="cursor-pointer text-blue-500 hover:underline"
+            @click="toDetail(row.module, row.businessId, row)"
+          >
+            {{ row.contractName }}
+          </span>
+        </template>
+        <template #operate="{ row }">
+          <a-button
+            class="text-blue-500"
+            size="small"
+            type="text"
+            @click="
+              toDetailPage('approval', '', {
+                contractId: row.contractId,
+                flowInstanceId: row.flowInstanceId,
+              })
+            "
+          >
+            查看
+          </a-button>
+        </template>
+      </vxe-grid>
+    </a-card>
+    <a-card
+      :body-style="{ flex: '1' }"
+      class="flex h-full flex-col"
+      size="small"
+      title="已办"
+    >
+      <vxe-grid ref="xGrid2Ref" v-bind="grid2Options">
+        <template #toolbar_buttons> </template>
+        <template #title_slot="{ row }">
+          <span>
+            {{ row.contractName }}
+          </span>
+        </template>
+        <template #operate="{ row }">
+          <a-button
+            class="text-blue-500"
+            size="small"
+            type="text"
+            @click="
+              toDetailPage('approval', '', {
+                contractId: row.contractId,
+                flowInstanceId: row.flowInstanceId,
+              })
+            "
+          >
+            查看
+          </a-button>
+        </template>
+      </vxe-grid>
+    </a-card>
+  </a-space>
 </template>
 
 <style scoped>
diff --git a/apps/web-contract/src/views/user-center/todo/index.vue b/apps/web-contract/src/views/user-center/todo/index.vue
index ffafd402..3c8e35b3 100644
--- a/apps/web-contract/src/views/user-center/todo/index.vue
+++ b/apps/web-contract/src/views/user-center/todo/index.vue
@@ -5,84 +5,25 @@ import { Page } from '@vben/common-ui';
 
 import Apis from '#/api';
 import { useVxeTable } from '#/hooks/vxeTable';
-import { DICT_TYPE, getDictOptions } from '#/utils/dict';
-import { getTodoColumns } from '#/views/contract/schema';
-import { toDetailPage } from '#/views/contract/utils';
-import { useRouter } from 'vue-router';
+import { DICT_TYPE, getDictDatasAsync, getDictOptions } from '#/utils/dict';
+import TodoPage from '#/views/contract/components/todo-page/todo-page.vue';
 
-const router = useRouter();
-
-const { xGridRef, triggerProxy, gridProps } = useVxeTable({ ref: 'xGridRef' });
-const { xGridRef: xGrid2Ref, triggerProxy: triggerProxy2 } = useVxeTable({
-  ref: 'xGrid2Ref',
-});
 const treeData = ref();
-
+const todoPageRef = ref();
 const selectedKeys = ref<string[]>([]);
 
-/** Hooks - 表格 */
-const gridOptions = reactive(
-  gridProps({
-    columns: getTodoColumns({ type: 'todo' }),
-    proxyConfig: {
-      autoLoad: true,
-      ajax: {
-        query: ({ page }) => {
-          return Apis.home.get_todo({
-            params: {
-              pageNum: page.currentPage,
-              pageSize: page.pageSize,
-              moduleId: selectedKeys.value[0],
-            },
-          });
-        },
-      },
-    },
-    pagerConfig: {
-      enabled: true,
-    },
-    toolbarConfig: {
-      enabled: false,
-    },
-  }),
-);
+let treeKeys = ref([]);
 
-/** Hooks - 表格 */
-const grid2Options = reactive(
-  gridProps({
-    columns: getTodoColumns({ type: 'done' }),
-    proxyConfig: {
-      autoLoad: true,
-      ajax: {
-        query: ({ page }) => {
-          return Apis.home.get_done({
-            params: {
-              pageNum: page.currentPage,
-              pageSize: page.pageSize,
-              moduleId: selectedKeys.value[0],
-            },
-          });
-        },
-      },
-    },
-    pagerConfig: {
-      enabled: true,
-    },
-    toolbarConfig: {
-      enabled: false,
-    },
-  }),
-);
-function onTreeSelect() {
-  triggerProxy('reload');
-  triggerProxy2('reload');
+function onTreeSelect(e) {
+  console.log(e);
+  treeKeys.value = e;
 }
 
 const expandedKeys = ref<string[]>([]);
 
 async function loadDataByDictType() {
-  const data = getDictOptions(DICT_TYPE.contract_todo_type);
-
+  const dictMap = await getDictDatasAsync([DICT_TYPE.contract_todo_type]);
+  const data = dictMap[DICT_TYPE.contract_todo_type] || [];
   data.forEach((item) => {
     item.key = item.value;
     item.title = item.label;
@@ -92,22 +33,6 @@ async function loadDataByDictType() {
   treeData.value = [{ title: '全部', key: 'all', children: data }];
 }
 
-function toDetail(type: string, id: string, row?: any) {
-  switch (type) {
-    case 'contractSetup': {
-      router.push(`/contract/approval/edit/${id}`);
-      break;
-    }
-    case 'selectMerchant': {
-      router.push(`/contract/business/edit/${row.contractId}`);
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
 onMounted(() => {
   loadDataByDictType();
 });
@@ -131,63 +56,7 @@ onMounted(() => {
         </a-card>
       </a-col>
       <a-col :span="19" class="min-w-700px flex flex-col">
-        <a-card
-          :body-style="{ flex: '1' }"
-          class="flex h-full flex-col"
-          size="small"
-          title="待办"
-        >
-          <vxe-grid ref="xGridRef" v-bind="gridOptions" class="flex-1">
-            <template #toolbar_buttons> </template>
-            <template #title_slot="{ row }">
-              <span
-                class="cursor-pointer text-blue-500 hover:underline"
-                @click="toDetail(row.module, row.businessId, row)"
-              >
-                {{ row.contractName }}
-              </span>
-            </template>
-            <template #operate="{ row }">
-              <a-button
-                class="text-blue-500"
-                size="small"
-                type="text"
-                @click="
-                  toDetailPage('approval', '', { contractId: row.contractId })
-                "
-              >
-                查看
-              </a-button>
-            </template>
-          </vxe-grid>
-        </a-card>
-        <a-card
-          :body-style="{ flex: '1' }"
-          class="flex h-full flex-col"
-          size="small"
-          title="已办"
-        >
-          <vxe-grid ref="xGrid2Ref" v-bind="grid2Options" class="flex-1">
-            <template #toolbar_buttons> </template>
-            <template #title_slot="{ row }">
-              <span class="">
-                {{ row.contractName }}
-              </span>
-            </template>
-            <template #operate="{ row }">
-              <a-button
-                class="text-blue-500"
-                size="small"
-                type="text"
-                @click="
-                  toDetailPage('approval', '', { contractId: row.contractId })
-                "
-              >
-                查看
-              </a-button>
-            </template>
-          </vxe-grid>
-        </a-card>
+        <TodoPage ref="todoPageRef" v-model:module="treeKeys"></TodoPage>
       </a-col>
     </a-row>
   </Page>