From 09ffd9c027241e732a6f7dab4b1b3a1107198f23 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Thu, 24 Jul 2025 15:38:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8C=87=E4=BB=A4=E5=90=8C=E6=AD=A5=EF=BC=88?=
 =?UTF-8?q?=E4=B8=B4=E6=97=B6=E7=89=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../directive/orgCom/OrgListCom.vue           | 62 ++++++++++++++-----
 .../directive/syncStep/SyncStepList.vue       | 55 ++++++++++++----
 .../directive/syncStep/SyncStepListModal.vue  | 16 +++--
 3 files changed, 95 insertions(+), 38 deletions(-)

diff --git a/src/views/synchronization/directive/orgCom/OrgListCom.vue b/src/views/synchronization/directive/orgCom/OrgListCom.vue
index fcf121b..2f8b168 100644
--- a/src/views/synchronization/directive/orgCom/OrgListCom.vue
+++ b/src/views/synchronization/directive/orgCom/OrgListCom.vue
@@ -1,23 +1,24 @@
 <template>
   <div class="p-2">
-    <a-row>
-      <a-col v-for="item in orgTableList.records" :key="item.id" :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6"
+    <a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}">
+      <a-col v-for="item in orgTableList.records" :key="item.id" :xs="24" :sm="24" :md="props.layout == 'full' ? 12 : 8"
+        :lg="props.layout == 'full' ? 12 : 8" :xl="props.layout == 'full' ? 8 : 8" :xxl="props.layout == 'full' ? 6 : 8"
         style="padding: 8px;">
-        <a-card :class="{ 'selected-card': selectedOrgCodes.some(org => org.orgCode === item.orgCode) }"
+        <a-card :class="{ 'selected-card': selectedOrgs.some(org => org.orgCode === item.orgCode) }"
           style="width: 100%; border-radius: 8px; " :headStyle="{ height: '60px', padding: '0 24px' }"
           :style="{ cursor: showChoose ? 'pointer' : 'default' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"
           @click="handleCardClick(item)">
           <template #title>
             <a-row style="font-weight: normal;">
-              <a-col :span="22" style="font-size: 14px; padding-top: 4px;">
+              <a-col :span="props.layout == 'full' ? 22 : 21" style="font-size: 14px; padding-top: 4px;">
                 <div>
                   <span style="font-weight: bold;">{{ item.departName }}</span>
                   <!-- 如果是已选择，显示"已选择" -->
                   <span style="color: green; font-size: 12px; margin-left: 8px;"
-                    v-if="selectedOrgCodes.some(org => org.orgCode === item.orgCode)">已选择</span>
+                    v-if="selectedOrgs.some(org => org.orgCode === item.orgCode)">已选择</span>
                 </div>
               </a-col>
-              <a-col :span="2" style="text-align: center; padding-top: 4px;">
+              <a-col :span="props.layout == 'full' ? 2 : 3" style="text-align: center; padding-top: 4px;">
                 <div class="zxClass">{{ item.orgCode }}</div>
               </a-col>
             </a-row>
@@ -41,7 +42,7 @@
           </p>
         </a-card>
       </a-col>
-      <a-col v-if="orgTableList.total == 0">
+      <a-col v-if="orgTableList.length == 0">
         <div style="margin: 30px auto;">
           <a-empty />
         </div>
@@ -49,7 +50,8 @@
     </a-row>
 
     <div
-      style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
+      style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
+      v-show="props.layout == 'full'">
       <span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
       <Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
         show-quick-jumper :total="orgTableList.total" @change="reload" />
@@ -65,7 +67,8 @@ import { getOrgInfo } from '/@/views/admin/orgapplyinfo/OrgApplyInfo.api'
 const props = defineProps({
   showChoose: { type: Boolean, default: false },
   title: { type: String, default: '' },
-  allowMultipleSelection: { type: Boolean, default: false }, // 新增多选控制
+  allowMultipleSelection: { type: Boolean, default: false }, // 多选控制
+  layout: { type: String, default: 'full' },  // 控制布局: 'full' 或 'half'
 })
 
 const emit = defineEmits(['handleOrgDetail', 'handleOrgChoose'])
@@ -75,23 +78,23 @@ const queryParam = reactive<any>({})
 const pageParams = ref({ pageNo: 1, pageSize: 8 })
 
 // 当前选中的卡片 ID 数组
-const selectedOrgCodes = ref<string[]>([])
+const selectedOrgs = ref<string[]>([])
 
 /** 点击卡片选择 */
 function handleCardClick(item: any) {
   if (props.showChoose) { // 判断是否可以选择
     if (props.allowMultipleSelection) {
       // 多选模式：点击时添加或移除该卡片
-      if (selectedOrgCodes.value.some(selected => selected.orgCode === item.orgCode)) {
-        selectedOrgCodes.value = selectedOrgCodes.value.filter(selected => selected.orgCode !== item.orgCode)
+      if (selectedOrgs.value.some(selected => selected.orgCode === item.orgCode)) {
+        selectedOrgs.value = selectedOrgs.value.filter(selected => selected.orgCode !== item.orgCode)
       } else {
-        selectedOrgCodes.value.push(item) // 将整个机构信息添加到选中项
+        selectedOrgs.value.push(item) // 将整个机构信息添加到选中项
       }
     } else {
       // 单选模式：直接选中该卡片
-      selectedOrgCodes.value = [item] // 只保留当前选中的机构
+      selectedOrgs.value = [item] // 只保留当前选中的机构
     }
-    emit('handleOrgChoose', selectedOrgCodes.value) // 传递完整的选中机构信息
+    emit('handleOrgChoose', selectedOrgs.value) // 传递完整的选中机构信息
   }
 }
 
@@ -105,6 +108,9 @@ function reload() {
   queryParam.pageSize = pageParams.value.pageSize
   queryParam.pageNo = pageParams.value.pageNo
   queryParam.title = props.title
+  if (props.layout == 'half') {
+    queryParam.pageSize = -1
+  }
   getOrgInfo(queryParam).then(res => {
     orgTableList.value = res
   })
@@ -113,11 +119,33 @@ function reload() {
 /** 重置搜索条件 */
 function searchReset() {
   queryParam.title = null
+  if (props.layout == 'half') {
+    queryParam.pageSize = -1
+  }
   getOrgInfo(queryParam).then(res => {
     orgTableList.value = res
   })
 }
 
+//全选或清空
+function checkAllOrEmpty(isCheckAll = true) {
+  if (isCheckAll) {
+    // 全选
+    orgTableList.value.records.forEach(item => {
+      // 只将没有在 selectedOrgs 中的项加入
+      if (!selectedOrgs.value.some(selected => selected.orgCode === item.orgCode)) {
+        selectedOrgs.value.push(item);
+      }
+    });
+  } else {
+    // 清空已选择：将 selectedOrgs 设为空数组
+    selectedOrgs.value = [];
+  }
+  // 触发父组件的 handleOrgChoose 事件，传递选中的机构
+  emit('handleOrgChoose', selectedOrgs.value);
+}
+
+
 // 初始化
 onMounted(() => {
   reload()
@@ -125,7 +153,9 @@ onMounted(() => {
 
 defineExpose({
   reload,
-  searchReset
+  searchReset,
+  selectedOrgs,
+  checkAllOrEmpty,
 })
 </script>
 
diff --git a/src/views/synchronization/directive/syncStep/SyncStepList.vue b/src/views/synchronization/directive/syncStep/SyncStepList.vue
index 58241fe..e8d9fae 100644
--- a/src/views/synchronization/directive/syncStep/SyncStepList.vue
+++ b/src/views/synchronization/directive/syncStep/SyncStepList.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="p-2" style="padding: 10px;">
     <a-steps v-model:current="stepVal" size="small" style="margin: 0; width: 95%; margin: 0 auto;">
-      <a-step title="功能说明" />
-      <a-step title="选择源数据业务平台" />
-      <a-step title="选择服务指令" />
-      <a-step title="选择目标业务平台" />
+      <a-step title="功能说明" disabled/>
+      <a-step title="选择源数据业务平台" disabled/>
+      <a-step title="选择服务指令" disabled/>
+      <a-step title="选择目标业务平台" disabled/>
     </a-steps>
   </div>
 
@@ -17,7 +17,7 @@
         <li><b>作用：</b>将“服务指令”分发至业务平台。</li>
         <li><b>流程：</b>选择“源数据业务平台” — 选择“服务指令” — 选择“目标业务平台”。</li>
         <li><b>确认：</b>点击右下角“确认”按钮，开始自动同步。</li>
-        <li><b>注意：</b>如有不熟悉功能按键，可在对应界面左上方查看操作指引。</li>
+        <li><b>注意：</b>如有不熟悉功能按键，可在对应界面上方查看操作指引。</li>
       </ul>
     </div>
   </div>
@@ -25,7 +25,7 @@
   <div v-show="stepVal === 1">
     <div style="margin: 10px 0 16px 100px; display: flex; align-items: center; font-size: 16px; color: #8B0000;">
       <InfoCircleOutlined style="color: #1890ff; margin-right: 6px;" />
-      <span>操作指引：1、如何选择：点击对应机构卡片即可。2、点击页面右下方“下一步”，进入“选择服务指令”页面。3、详情按钮：查看对应平台现有服务指令。</span>
+      <span style="padding-right: 60px;">操作指引：1、如何选择“源数据”平台：点击对应机构卡片即可。2、如何进入“服务指令”选择页面：请点击页面右下方“下一步”按钮。3、详情按钮：查看对应平台现有服务指令。</span>
     </div>
     <OrgListCom class="step-content" ref="orgListComRef" :showChoose="true" @handleOrgDetail="handleDetail"
       @handleOrgChoose="orgSourceChangedFunc" />
@@ -34,7 +34,7 @@
   <div v-show="stepVal === 2">
     <div style="margin: 10px 0 16px 100px; display: flex; align-items: center; font-size: 16px; color: #8B0000;">
       <InfoCircleOutlined style="color: #1890ff; margin-right: 6px;" />
-      <span>操作指引：1、如何选择：将需要同步的“服务指令”，通过“选择”或“一键全选”按钮添加至右侧“已选择”列表中,如需移除请点击“移除”或“全部移除”按钮。2、搜索区域可对左侧列表进行筛选。3、左侧列表上方“全部/未选择”可快速切换源数据列表，便于更清晰的查看需要处理的“服务指令”。</span>
+      <span style="padding-right: 60px;">操作指引：1、如何选择“服务指令”：将需要同步的“服务指令”，通过“选择”或“一键全选”按钮添加至右侧“已选择”列表中,如需移除请点击“移除”或“全部移除”按钮。2、搜索区域可对左侧列表进行筛选。3、左侧列表上方“全部/未选择”可快速切换源数据列表，便于更清晰的查看需要处理的“服务指令”。</span>
     </div>
     <DirectiveChooseCom ref="directiveChooseRef"></DirectiveChooseCom>
   </div>
@@ -42,20 +42,33 @@
   <div v-show="stepVal === 3" style="overflow-x: hidden;">
     <div style="margin: 10px 0 16px 100px; display: flex; align-items: center; font-size: 16px; color: #8B0000;">
       <InfoCircleOutlined style="color: #1890ff; margin-right: 6px;" />
-      <span>1、操作指引：1、如果选择：在右侧卡片中通过“点击卡片”选择需要同步“指令”的目标平台（可多选）。2、左侧列表为“待同步”服务指令。3、点击右下方“确认”按钮开始自动同步，同步只会将对应平台“未有”指令进行新增，不会改变其原有指令字段。</span>
+      <span style="padding-right: 60px;">操作指引：1、如何选择“目标”业务平台：在右侧卡片中通过“点击卡片”方式选择需要同步“指令”的目标平台（可多选），也可通过全选/清空功能按钮进行快捷操作。2、左侧列表为“待同步”服务指令。3、点击右下方“确认”按钮开始自动同步，同步只会将对应平台“未有”指令进行新增，不会改变其原有指令字段。</span>
     </div>
     <a-row :gutter="24" style="padding-left: 20px;padding-right: 20px;">
       <a-col :lg="12" :sm="24">
         <!-- 引用表格 -->
-        <a-tag color="green" style="margin-left: 10px;margin-top: 10px;">已选择 {{ leftList?.length }} 条</a-tag>
-        <BasicTable :dataSource="leftList" :columns="columns" size="small" :scroll="{ y: '63vh' }"
+        <a-tag color="green" style="margin-left: 10px;margin-top: 10px;">待同步 {{ leftList?.length }} 条</a-tag>
+        <BasicTable :dataSource="leftList" :columns="columns" size="small" :scroll="{ y: '61vh' }"
           :showIndexColumn="false"
           :pagination="{ current: 1, pageSize: 50, total: leftList.length, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100'] }">
         </BasicTable>
       </a-col>
       <a-col :lg="12" :sm="24">
-        <a-tag color="green" style="margin-left: 10px;margin-top: 10px;">目标平台 - 已选择 3 个</a-tag>
-        <OrgListCom class="step-content" ref="orgListComRef" :allowMultipleSelection="true" :showChoose="true"
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
+          <!-- 目标平台标签，保持在当前位置 -->
+          <a-tag color="orange" style="margin-left: 20px;">
+            目标平台 - 已选择 {{ targetOrgListComRef?.selectedOrgs?.length }} 个
+          </a-tag>
+
+          <!-- 两个按钮靠右显示 -->
+          <div style="margin-right: 30px;">
+            <a-button type="primary" size="small" style="margin-left: 10px;"
+              @click="targetOrgListComRef?.checkAllOrEmpty(true)">全选</a-button>
+            <a-button type="primary" size="small" style="margin-left: 10px;"
+              @click="targetOrgListComRef?.checkAllOrEmpty(false)">清空</a-button>
+          </div>
+        </div>
+        <OrgListCom ref="targetOrgListComRef" :layout="'half'" :allowMultipleSelection="true" :showChoose="true"
           @handleOrgDetail="handleDetail" @handleOrgChoose="orgTargetChangedFunc" />
       </a-col>
     </a-row>
@@ -71,14 +84,16 @@ import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/
 import DirectiveChooseCom from '/@/views/synchronization/directive/serviceDirective/DirectiveChooseCom.vue'
 import { useMessage } from '/@/hooks/web/useMessage';
 import { columns } from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data';
-import { BasicTable, TableAction } from '/@/components/Table';
+import { BasicTable } from '/@/components/Table';
 
+const emit = defineEmits(['closeModal']);
 const stepVal = ref(0);
 const configServiceDirectiveListModal = ref();
 const orgInfo = ref([])
 const { createMessage } = useMessage();
 const directiveChooseRef = ref()
 const leftList = ref<any[]>([]);
+const targetOrgListComRef = ref()
 
 function init(record: any) {
 
@@ -126,13 +141,27 @@ watch(
     if (newstepVal == 2 && oldValue == 1) {
       directiveChooseRef?.value?.init({ orgInfo: orgInfo.value[0] })
     }
+    if (newstepVal == 3) {
+      targetOrgListComRef.value?.checkAllOrEmpty(false)
+    }
   }
 );
 
+//开始同步
+function syncFunc() {
+  if (!targetOrgListComRef.value?.selectedOrgs?.length) {
+    createMessage.warning('请选择业务平台')
+  } else {
+    createMessage.success('已开始自动同步')
+    emit('closeModal')
+  }
+}
+
 defineExpose({
   init,
   stepVal,
   changeStepVal,
+  syncFunc,
 });
 </script>
 
diff --git a/src/views/synchronization/directive/syncStep/SyncStepListModal.vue b/src/views/synchronization/directive/syncStep/SyncStepListModal.vue
index 6c9088d..e685404 100644
--- a/src/views/synchronization/directive/syncStep/SyncStepListModal.vue
+++ b/src/views/synchronization/directive/syncStep/SyncStepListModal.vue
@@ -7,10 +7,11 @@
         v-show="!!registerForm && (registerForm?.stepVal == 1 || registerForm?.stepVal == 2 || registerForm?.stepVal == 3)">上一步</a-button>
       <a-button @click="nextStep"
         v-show="!!registerForm && (registerForm?.stepVal == 0 || registerForm?.stepVal == 1 || registerForm?.stepVal == 2)">下一步</a-button>
-      <a-button type="primary" @click="handleOk" v-show="!!registerForm && registerForm?.stepVal == 3">确认</a-button>
+      <a-button @click="registerForm?.syncFunc" type="primary"
+        v-show="!!registerForm && registerForm?.stepVal == 3">确认</a-button>
     </template>
     <SyncStepList ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"
-      :fullscreen="true" style="height:100vh;" />
+      :fullscreen="true" style="height:100vh;" @closeModal="closeModal" />
   </j-modal>
 </template>
 
@@ -40,13 +41,6 @@ function init(record: any) {
   });
 }
 
-/**
- * 点击确定触发表单提交
- */
-function handleOk() {
-  // 调用子组件的提交方法
-}
-
 /**
  * 子组件提交完成回调
  */
@@ -76,6 +70,10 @@ function handleCancel() {
   visible.value = false;
 }
 
+function closeModal() {
+  visible.value = false;
+}
+
 defineExpose({
   init,
   disableSubmit,