优化系统数据字典同步

src/views/system/dict/index.vue

@@ -1,7 +1,6 @@
 <template>
   <!--引用表格-->
   <BasicTable @register="registerTable" :rowSelection="rowSelection">
-    <!--插槽:table标题-->
     <template #tableTitle>
       <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
       <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
@@ -36,18 +35,58 @@
   <DictRecycleBinModal @register="registerModal1" @success="reload" />
 
   <a-modal v-model:open="showAsyncResult" title="同步结果" @ok="showAsyncResult = false" width="70vw">
-    <a-tabs v-model:activeKey="activeTabKey" style="margin-left: 10px;margin-right: 10px;margin-bottom: 10px;">
+    <a-tabs v-model:activeKey="activeTabKey" style="margin-left: 20px;margin-right: 20px;margin-bottom: 20px;">
-      <a-tab-pane key="error" :tab="`同步异常 (${errorList.length})`">
+      <template #rightExtra>
-        <a-table :dataSource="errorList" :columns="resultColumns" :pagination="false" size="small" bordered
+        <a-button type="primary" @click="AsyncResultFunc({ id: opeDictId })" size="small"
-          :scroll="{ y: '50vh' }" />
+          preIcon="ant-design:sync-outlined" style="margin-right: 10px;">刷新</a-button>
+      </template>
+      <a-tab-pane key="pending" :tab="`待同步 (${pendingList.length})`">
+        <a-table :dataSource="pendingList" :columns="resultColumns" :pagination="false" size="small" bordered
+          :scroll="{ y: '50vh' }">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <a-popconfirm title="确认同步？" @confirm="handleAsyncByOrgCode(record)">
+                <a href="#">同步</a>
+              </a-popconfirm>
+            </template>
+          </template>
+        </a-table>
       </a-tab-pane>
-      <a-tab-pane key="processing" :tab="`同步中/待同步 (${processingList.length})`">
+      <a-tab-pane key="error" :tab="`同步异常 (${errorList.length})`">
-        <a-table :dataSource="processingList" :columns="resultColumns" :pagination="false" size="small" bordered
+        <a-table :dataSource="errorList" :columns="resultColumnsCT" :pagination="false" size="small" bordered
-          :scroll="{ y: '50vh' }" />
+          :scroll="{ y: '50vh' }">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <a-popconfirm title="确认同步？" @confirm="handleAsyncByOrgCode(record)">
+                <a href="#">同步</a>
+              </a-popconfirm>
+            </template>
+          </template>
+        </a-table>
+      </a-tab-pane>
+      <a-tab-pane key="processing" :tab="`同步中 (${processingList.length})`">
+        <a-table :dataSource="processingList" :columns="resultColumnsCT" :pagination="false" size="small" bordered
+          :scroll="{ y: '50vh' }">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <a-popconfirm title="确认同步？" @confirm="handleAsyncByOrgCode(record)">
+                <a href="#">同步</a>
+              </a-popconfirm>
+            </template>
+          </template>
+        </a-table>
       </a-tab-pane>
       <a-tab-pane key="success" :tab="`同步完成 (${successList.length})`">
-        <a-table :dataSource="successList" :columns="resultColumns" :pagination="false" size="small" bordered
+        <a-table :dataSource="successList" :columns="resultColumnsCT" :pagination="false" size="small" bordered
-          :scroll="{ y: '50vh' }" />
+          :scroll="{ y: '50vh' }">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'action'">
+              <a-popconfirm title="确认同步？" @confirm="handleAsyncByOrgCode(record)">
+                <a href="#">同步</a>
+              </a-popconfirm>
+            </template>
+          </template>
+        </a-table>
       </a-tab-pane>
     </a-tabs>
   </a-modal>
@@ -74,6 +113,7 @@ const activeTabKey = ref('error');
 const errorList = ref<Recordable[]>([]);
 const processingList = ref<Recordable[]>([]);
 const successList = ref<Recordable[]>([]);
+const pendingList = ref<Recordable[]>([]);
 const resultColumns = [
   {
     title: '机构名称',
@@ -89,10 +129,45 @@ const resultColumns = [
     title: '备注',
     dataIndex: 'descr',
     key: 'descr',
-  }
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    align: 'center',
+    width: '100px'
+  },
 ];
-
+const resultColumnsCT = [
-const { createMessage } = useMessage();
+  {
+    title: '机构名称',
+    dataIndex: 'orgName',
+    key: 'orgName',
+  },
+  {
+    title: '机构编码',
+    dataIndex: 'orgCode',
+    key: 'orgCode',
+  },
+  {
+    title: '备注',
+    dataIndex: 'descr',
+    key: 'descr',
+  },
+  {
+    title: '同步开始时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    key: 'action',
+    align: 'center',
+    width: '100px'
+  },
+];
+const { createMessage, createConfirm } = useMessage();
 //字典model
 const [registerModal, { openModal }] = useModal();
 //字典配置drawer
@@ -235,12 +310,16 @@ function getTableAction(record) {
 function getTableDropDownAction(record) {
   return [
     {
-      label: '同步数据',
+      label: '同步',
+      onClick: AsyncResultFunc.bind(null, Object.assign({}, record, { tabAction: 'pending' })),
+    },
+    {
+      label: '全部同步',
       onClick: handleAsync.bind(null, record),
     },
     {
       label: '同步结果',
-      onClick: AsyncResultFunc.bind(null, record),
+      onClick: AsyncResultFunc.bind(null, Object.assign({}, record, { tabAction: 'error' })),
     },
   ]
 }
@@ -248,31 +327,63 @@ function getTableDropDownAction(record) {
  * 同步
  */
 function handleAsync(record) {
-  asyncData(record).then(res => {
+  createConfirm({
-    createMessage.success("操作成功，请在同步结果中进行查看！")
+    iconType: 'warning',
-  })
+    title: '确认同步',
+    content: '确定要同步该字典数据吗？',
+    onOk: () => {
+      return new Promise((resolve, reject) => {
+        asyncData(record)
+          .then(res => {
+            createMessage.success("操作成功，请在同步结果中进行查看！");
+            resolve(res);
+          })
+          .catch(err => {
+            createMessage.error('同步失败: ' + err.message);
+            reject(err);
+          });
+      });
+    },
+    onCancel: () => {
+      createMessage.info('已取消同步操作');
+    }
+  });
 }
 
+const opeDictId = ref('')
 /**
  * 同步结果
  */
 function AsyncResultFunc(record) {
+  console.log("🌊 ~ AsyncResultFunc ~ record:", record)
+  if (!record.id) {
+    return
+  }
+  opeDictId.value = record.id
+
   showAsyncResult.value = true;
-  activeTabKey.value = 'error';
+  activeTabKey.value = record.tabAction
 
   // 清空之前的数据
   errorList.value = [];
   processingList.value = [];
   successList.value = [];
-
+  pendingList.value = [];
   listByType({ primaryKey: record.id }).then(res => {
     if (res) {
       errorList.value = res.errorList || [];
       processingList.value = res.processingList || [];
       successList.value = res.successList || [];
+      pendingList.value = res.pendingList || [];
     }
   });
 }
+
+function handleAsyncByOrgCode(record) {
+  asyncData({ id: opeDictId.value, orgCode: record.orgCode }).then(res => {
+    createMessage.success("操作成功，请稍后刷新数据查看同步结果！")
+  })
+}
 </script>
 
 <style scoped></style>