From 51f72af404a37ce4f712594c974b53be7f173122 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Wed, 30 Jul 2025 13:40:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=8C=87=E4=BB=A4=E5=90=8C?=
 =?UTF-8?q?=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../directive/orgCom/OrgListCom.vue           |  22 +-
 .../ConfigServiceDirective.api.ts             |  12 +-
 .../ConfigServiceDirective.data.ts            | 246 +++++++++++-
 .../serviceDirective/DirectiveChooseCom.vue   | 264 +++++++++++--
 .../DirectiveChooseCom分步骤版本.vue          | 373 ++++++++++++++++++
 .../directive/syncStep/SyncStepList.vue       | 328 +++++++++++++--
 6 files changed, 1155 insertions(+), 90 deletions(-)
 create mode 100644 src/views/synchronization/directive/serviceDirective/DirectiveChooseCom分步骤版本.vue

diff --git a/src/views/synchronization/directive/orgCom/OrgListCom.vue b/src/views/synchronization/directive/orgCom/OrgListCom.vue
index 399644b..95babf6 100644
--- a/src/views/synchronization/directive/orgCom/OrgListCom.vue
+++ b/src/views/synchronization/directive/orgCom/OrgListCom.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="p-2">
-    <a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}">
+    <!-- <a-row :style="props.layout === 'half' ? { height: '68vh', overflow: 'auto' } : {}"> -->
+    <a-row>
       <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;">
@@ -29,7 +30,7 @@
           <p class="ellipsis-one-lines" :title="item.comRegisterAddress">机构地址：{{ item.comRegisterAddress }}</p>
           <a-divider />
           <p style="text-align:center;">
-            <span style="display:inline-block;cursor: pointer;" @click.stop="handleDetail(item)">
+            <span v-show="showDetail" style="display:inline-block;cursor: pointer;" @click.stop="handleDetail(item)">
               <span class="tbClass"><img src="/@/assets/images/a14.png" style="width:20px;" /></span><br />
               <span class="antTitle">详情</span>
             </span>
@@ -51,7 +52,7 @@
 
     <div
       style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;"
-      v-show="props.layout == 'full'">
+      v-show="props.layout == 'full' && pageSize != -1">
       <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" />
@@ -66,6 +67,8 @@ import { getOrgInfo } from '/@/views/admin/orgapplyinfo/OrgApplyInfo.api'
 
 const props = defineProps({
   showChoose: { type: Boolean, default: false },
+  pageSize: { type: Number, default: 8 },
+  showDetail: { type: Boolean, default: false },
   title: { type: String, default: '' },
   allowMultipleSelection: { type: Boolean, default: false }, // 多选控制
   layout: { type: String, default: 'full' },  // 控制布局: 'full' 或 'half'
@@ -76,7 +79,7 @@ const emit = defineEmits(['handleOrgDetail', 'handleOrgChoose'])
 
 const orgTableList = ref<any>({ records: [], total: 0 })
 const queryParam = reactive<any>({})
-const pageParams = ref({ pageNo: 1, pageSize: 8 })
+const pageParams = ref({ pageNo: 1, pageSize: props.pageSize })
 
 // 当前选中的卡片 ID 数组
 const selectedOrgs = ref<string[]>([])
@@ -95,10 +98,12 @@ function handleCardClick(item: any) {
       // 单选模式：直接选中该卡片
       selectedOrgs.value = [item] // 只保留当前选中的机构
     }
-    emit('handleOrgChoose', selectedOrgs.value) // 传递完整的选中机构信息
+    // emit('handleOrgChoose', selectedOrgs.value) // 传递完整的选中机构信息
   }
 }
-
+function commitOrgsInfo() {
+  emit('handleOrgChoose', selectedOrgs.value) // 传递完整的选中机构信息
+}
 /** 点击详情 */
 function handleDetail(item: any) {
   emit('handleOrgDetail', item)
@@ -148,6 +153,9 @@ function checkAllOrEmpty(isCheckAll = true) {
   emit('handleOrgChoose', selectedOrgs.value);
 }
 
+function resetSeleted(orgs) {
+  selectedOrgs.value = [...orgs]
+}
 
 // 初始化
 onMounted(() => {
@@ -159,6 +167,8 @@ defineExpose({
   searchReset,
   selectedOrgs,
   checkAllOrEmpty,
+  commitOrgsInfo,
+  resetSeleted
 })
 </script>
 
diff --git a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts
index be0673f..62bd7ef 100644
--- a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts
+++ b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts
@@ -1,5 +1,5 @@
 import { defHttp } from '/@/utils/http/axios';
-import { useMessage } from "/@/hooks/web/useMessage";
+import { useMessage } from '/@/hooks/web/useMessage';
 
 const { createConfirm } = useMessage();
 
@@ -25,9 +25,9 @@ export const listByDS = (params) => defHttp.get({ url: Api.listByDS, params });
 
 /**
  * 同步
- * @param params 
- * @returns 
+ * @param params
+ * @returns
  */
-export const syncDirective = (params) => {
-  return defHttp.get({ url: Api.syncDirective, params });
-};
\ No newline at end of file
+export const syncDirective = (dataSourceCode: string, params: any) => {
+  return defHttp.post({ url: `${Api.syncDirective}?dataSourceCode=${encodeURIComponent(dataSourceCode)}`, params });
+};
diff --git a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts
index 970dc5f..a6708d9 100644
--- a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts
+++ b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts
@@ -106,6 +106,13 @@ export const columns: BasicColumn[] = [
 ];
 
 export const sourceColumns: BasicColumn[] = [
+  {
+    title: '状态',
+    align: 'center',
+    dataIndex: 'izExist',
+    width: 70,
+    fixed: 'left',
+  },
   {
     title: '分类标签',
     align: 'center',
@@ -146,28 +153,28 @@ export const sourceColumns: BasicColumn[] = [
     align: 'center',
     dataIndex: 'bodyTagList',
     ellipsis: false,
-    defaultHidden: true,
-    // format(text, record, index) {
-    //   if (!!text) {
-    //     return text.map((item) => item.tagName).join('、');
-    //   } else {
-    //     return '-';
-    //   }
-    // },
+    // defaultHidden: true,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
   },
   {
     title: '情绪标签',
     align: 'center',
     dataIndex: 'emotionTagList',
     ellipsis: false,
-    defaultHidden: true,
-    // format(text, record, index) {
-    //   if (!!text) {
-    //     return text.map((item) => item.tagName).join('、');
-    //   } else {
-    //     return '-';
-    //   }
-    // },
+    // defaultHidden: true,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
   },
   {
     title: '收费价格',
@@ -205,6 +212,213 @@ export const sourceColumns: BasicColumn[] = [
   },
 ];
 
+export const targetSourceColumns: BasicColumn[] = [
+  {
+    title: '分类标签',
+    align: 'center',
+    dataIndex: 'instructionTagId_dictText',
+    customCell: (record, index, column) => {
+      if (record.instructionRowSpan != null) {
+        return { rowSpan: record.instructionRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类别',
+    align: 'center',
+    dataIndex: 'categoryId_dictText',
+    customCell: (record, index, column) => {
+      if (record.categoryRowSpan != null) {
+        return { rowSpan: record.categoryRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类型',
+    align: 'center',
+    dataIndex: 'typeId_dictText',
+    customCell: (record, index, column) => {
+      if (record.typeRowSpan != null) {
+        return { rowSpan: record.typeRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务指令',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '体型标签',
+    align: 'center',
+    dataIndex: 'bodyTagList',
+    ellipsis: false,
+    // defaultHidden: true,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
+  },
+  {
+    title: '情绪标签',
+    align: 'center',
+    dataIndex: 'emotionTagList',
+    ellipsis: false,
+    // defaultHidden: true,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
+  },
+  {
+    title: '收费价格',
+    align: 'center',
+    dataIndex: 'tollPrice',
+    defaultHidden: true,
+  },
+  {
+    title: '提成价格',
+    align: 'center',
+    dataIndex: 'comPrice',
+    defaultHidden: true,
+  },
+  {
+    title: '医保报销',
+    align: 'center',
+    dataIndex: 'izReimbursement_dictText',
+    defaultHidden: true,
+  },
+  {
+    title: '机构优惠',
+    align: 'center',
+    dataIndex: 'izPreferential_dictText',
+    defaultHidden: true,
+  },
+  {
+    title: '周期类型',
+    align: 'center',
+    dataIndex: 'cycleType_dictText',
+  },
+  {
+    title: '服务时长（分钟）',
+    align: 'center',
+    dataIndex: 'serviceDuration',
+  },
+];
+
+export const targetColumns: BasicColumn[] = [
+  {
+    title: '分类标签',
+    align: 'center',
+    dataIndex: 'instructionTagId_dictText',
+    customCell: (record, index, column) => {
+      if (record.instructionRowSpan != null) {
+        return { rowSpan: record.instructionRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类别',
+    align: 'center',
+    dataIndex: 'categoryId_dictText',
+    customCell: (record, index, column) => {
+      if (record.categoryRowSpan != null) {
+        return { rowSpan: record.categoryRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类型',
+    align: 'center',
+    dataIndex: 'typeId_dictText',
+    customCell: (record, index, column) => {
+      if (record.typeRowSpan != null) {
+        return { rowSpan: record.typeRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务指令',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '体型标签',
+    align: 'center',
+    dataIndex: 'bodyTagList',
+    ellipsis: false,
+    // defaultHidden: true,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
+  },
+  {
+    title: '情绪标签',
+    align: 'center',
+    dataIndex: 'emotionTagList',
+    ellipsis: false,
+    // defaultHidden: true,
+    format(text, record, index) {
+      if (!!text) {
+        return text.map((item) => item.tagName).join('、');
+      } else {
+        return '-';
+      }
+    },
+  },
+  {
+    title: '收费价格',
+    align: 'center',
+    dataIndex: 'tollPrice',
+    defaultHidden: true,
+  },
+  {
+    title: '提成价格',
+    align: 'center',
+    dataIndex: 'comPrice',
+    defaultHidden: true,
+  },
+  {
+    title: '医保报销',
+    align: 'center',
+    dataIndex: 'izReimbursement_dictText',
+    defaultHidden: true,
+  },
+  {
+    title: '机构优惠',
+    align: 'center',
+    dataIndex: 'izPreferential_dictText',
+    defaultHidden: true,
+  },
+  {
+    title: '周期类型',
+    align: 'center',
+    dataIndex: 'cycleType_dictText',
+  },
+  {
+    title: '服务时长（分钟）',
+    align: 'center',
+    dataIndex: 'serviceDuration',
+  },
+  {
+    title: '同步类型',
+    align: 'center',
+    dataIndex: 'izExist',
+    width: 80,
+    fixed: 'right',
+  },
+];
+
 // 高级查询数据
 export const superQuerySchema = {
   categoryId: { title: '服务类别', order: 0, view: 'list', type: 'string', dictCode: '' },
diff --git a/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom.vue b/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom.vue
index 4289ce6..4cdc7c9 100644
--- a/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom.vue
+++ b/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom.vue
@@ -5,7 +5,7 @@
       <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
         :wrapper-col="wrapperCol">
         <a-row :gutter="24">
-          <a-col :lg="6">
+          <a-col :lg="5">
             <a-form-item name="instructionTagId">
               <template #label><span title="分类标签">分类标签</span></template>
               <j-dict-select-tag v-model:value="queryParam.instructionTagId" v-if="showJSCom"
@@ -15,7 +15,7 @@
             </a-form-item>
           </a-col>
 
-          <a-col :lg="6">
+          <a-col :lg="5">
             <a-form-item name="categoryId">
               <template #label><span title="服务类别">服务类别</span></template>
               <j-dict-select-tag type="list" v-model:value="queryParam.categoryId" v-if="showJSCom"
@@ -25,7 +25,7 @@
             </a-form-item>
           </a-col>
 
-          <a-col :lg="6">
+          <a-col :lg="5">
             <a-form-item name="typeId">
               <template #label><span title="服务类型">服务类型</span></template>
               <j-dict-select-tag type="list" v-model:value="queryParam.typeId" v-if="showJSCom"
@@ -34,7 +34,7 @@
                 placeholder="请选择服务类型" allowClear :ignoreDisabled="true" @select="reload()" />
             </a-form-item>
           </a-col>
-          <a-col :lg="6">
+          <a-col :lg="5">
             <a-form-item name="directiveName">
               <template #label><span title="服务指令">服务指令</span></template>
               <JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
@@ -63,7 +63,7 @@
                 :ignoreDisabled="true" placeholder="请选择是否启用" allowClear @select="reload()" />
             </a-form-item>
           </a-col> -->
-          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+          <a-col :xl="4" :lg="4" :md="4" :sm="4">
             <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
               <a-col :lg="6">
                 <!-- <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> -->
@@ -75,67 +75,130 @@
         </a-row>
       </a-form>
     </div>
-    <a-row :gutter="24" style="margin-top: -10px;padding-left: 20px;padding-right: 20px;">
-      <a-col :lg="3" :push="21">
-        <a-button type="primary" @click="selectAll">一键全选</a-button>
-        <a-button type="default" @click="removeAll" style="margin-left: 8px">全部移除</a-button>
-      </a-col>
-    </a-row>
     <a-row :gutter="24" style="padding-left: 20px;padding-right: 20px;">
       <a-col :lg="12" :sm="24">
         <!-- 引用表格 -->
-        <a-tag color="blue" style="margin-left: 10px;margin-top: 10px;">源数据 - {{ sourceOrgInfo.departName }}</a-tag>
+        <a-tag color="blue" style="margin-left: 10px;margin-top: 10px;">源平台 - {{ sourceOrgInfo.departName }}</a-tag>
+        <a-divider type="vertical" style="background-color: #CDCDCF" />
         <a-radio-group v-model:value="sourceType" size="small" @change="sourceTypeChanged">
           <a-radio-button value="all">全部</a-radio-button>
-          <a-radio-button value="unsel">未选择</a-radio-button>
+          <a-radio-button value="unsel">可同步</a-radio-button>
         </a-radio-group>
+        <a-divider type="vertical" style="background-color: #CDCDCF" />
+        <a-button type="primary" @click="selectAll" size="small">一键全选</a-button>
         <BasicTable @register="registerTable" :dataSource="leftList" size="small" :rowClassName="rowClassName"
-          :scroll="{ y: '46vh' }">
+          :columns="targetChooseType == 'one' ? sourceColumns : targetSourceColumns" :scroll="{ y: '57vh' }">
           <template #tableTitle></template>
           <template v-slot:bodyCell="{ column, record, index, text }">
-            <template v-if="column.dataIndex === 'bodyTagList'">
+            <!-- <template v-if="column.dataIndex === 'bodyTagList'">
               <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
                 item.tagName).join('、')}}</span>
             </template>
-            <template v-if="column.dataIndex === 'emotionTagList'">
+      <template v-if="column.dataIndex === 'emotionTagList'">
               <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
                 item.tagName).join('、')}}</span>
+            </template> -->
+            <template v-if="column.dataIndex === 'izExist'">
+              <a-tag v-if="rightSourceList.some(item => item.id === record.id)" color="orange">已存在</a-tag>
+              <a-tag v-else>可新增</a-tag>
+              <!-- <span v-if="rightSourceList.some(item => item.id === record.id)" style="color: #EFBD48;">已存在</span>
+              <span v-else>可新增</span> -->
             </template>
           </template>
           <template #action="{ record }">
             <a-button type="link" v-if="!selectedRecordIds.includes(record.id)" @click="selectRecord(record)"
               size="small">选择</a-button>
+            <!-- :disabled="rightSourceList.some(item => item.id === record.id)" -->
             <a-button type="link" v-else @click="removeRecord(record)" size="small">移除</a-button>
           </template>
         </BasicTable>
       </a-col>
       <a-col :lg="12" :sm="24">
-        <a-tag color="green" style="margin-left: 10px;margin-top: 10px;">已选择 {{ rightList.length }} 条</a-tag>
-        <BasicTable :dataSource="rightList" :columns="sourceColumns" size="small" :scroll="{ y: '46vh' }"
-          :pagination="{ current: 1, pageSize: 50, total: rightList.length, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100'] }">
+        <a-tag v-if="targetChooseType == 'one'" color="green" style="margin-left: 10px;margin-top: 10px;">
+          目标平台 - {{ targetOrgs[0]?.departName }} - 已选择 {{ rightNeedAddList.length }} 条
+        </a-tag>
+        <a-tag v-else color="green" style="margin-left: 10px;margin-top: 10px;">
+          已选择 {{ rightNeedAddList.length }} 条
+        </a-tag>
+        <a-divider v-if="targetChooseType == 'one'" type="vertical" style="background-color: #CDCDCF" />
+        <a-radio-group v-if="targetChooseType == 'one'" v-model:value="targetType" size="small"
+          @change="targetTypeChanged">
+          <a-radio-button value="exist">已有</a-radio-button>
+          <a-radio-button value="needsync">待同步</a-radio-button>
+        </a-radio-group>
+        <a-divider type="vertical" style="background-color: #CDCDCF" />
+        <a-button type="primary" @click="removeAll" size="small">全部移除</a-button>
+        <a-divider type="vertical" style="background-color: #CDCDCF" />
+        <a-button type="warning" @click="syncFunc" size="small">同步</a-button>
+        <BasicTable
+          :dataSource="targetChooseType == 'one' ? (targetType == 'needsync' ? rightNeedAddList : rightSourceList) : rightNeedAddList"
+          :columns="targetChooseType == 'one' ? (targetType == 'needsync' ? targetColumns : targetSourceColumns) : targetSourceColumns"
+          size="small" :scroll="{ y: '57vh' }"
+          :pagination="{ current: 1, pageSize: 50, total: rightNeedAddList.length, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100'] }">
+          <template v-slot:bodyCell="{ column, record, index, text }">
+            <template v-if="column.dataIndex === 'izExist'">
+              <a-tag v-if="rightSourceList.some(item => item.id === record.id)" color="orange">更新</a-tag>
+              <a-tag v-else color="green">新增</a-tag>
+              <!-- <span v-if="rightSourceList.some(item => item.id === record.id)" style="color: #EFBD48;">待更新</span>
+              <span v-else>待新增</span> -->
+            </template>
+          </template>
         </BasicTable>
       </a-col>
     </a-row>
-
   </div>
+  <a-modal v-model:visible="visible" width="30vw" title="数据同步确认" :ok-text="'确认'" :cancel-text="'取消'" @ok="handleOk"
+    @cancel="handleCancel">
+    <!-- 指定机构同步 -->
+    <div style="padding: 20px;" v-if="targetChooseType == 'one'">
+      <p>目标机构 ：{{ targetOrg?.departName }}</p>
+      <p>新增服务指令： {{ getNewCount() }} 条</p>
+      <p>更新服务指令： {{ getUpdateCount() }} 条</p>
+      <span>请选择"新增指令"需要同步的内容：</span>
+      <a-radio-group v-model:value="syncOption">
+        <a-radio value="all">全部</a-radio>
+        <a-radio value="business">业务字段</a-radio>
+        <a-radio value="media">指令资源</a-radio>
+      </a-radio-group>
+    </div>
+    <!-- 批量同步 -->
+    <div style="padding: 20px;" v-else>
+      <p>同步服务指令： {{ rightNeedAddList.length }} 条</p>
+      <span>请选择"服务指令"需要同步的内容：</span>
+      <a-radio-group v-model:value="syncOption">
+        <a-radio value="all">全部</a-radio>
+        <a-radio value="business">业务字段</a-radio>
+        <a-radio value="media">指令资源</a-radio>
+      </a-radio-group>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts" name="serviceDirective-configServiceDirective" setup>
 import { ref, reactive, onMounted, watch } from 'vue';
 import { BasicTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
-import { columns, sourceColumns, superQuerySchema } from './ConfigServiceDirective.data';
+import { columns, sourceColumns, superQuerySchema, targetSourceColumns, targetColumns } from './ConfigServiceDirective.data';
 import { listByDS } from './ConfigServiceDirective.api';
 import { useUserStore } from '/@/store/modules/user';
 import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
 import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
 import { cloneDeep } from "lodash-es";
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { syncDirective } from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api';
 
+const { createConfirm } = useMessage();
+const props = defineProps({
+  targetOrgs: [],//已选择目标机构
+  targetChooseType: '',
+})
 const leftList = ref<any[]>([]);  // 左侧列表的数据
-const rightList = ref<any[]>([]);  // 右侧列表的数据
+const rightSourceList = ref<any[]>([]);  // 右侧列表已同步的数据
+const rightNeedAddList = ref<any[]>([]);  // 右侧列表待同步的数据
 const sourceOrgInfo = ref({})//源数据机构信息
-const sourceType = ref('all')
+const sourceType = ref('all')//源平台列表单选
+const targetType = ref('needsync')//目标平台列表单选
 const showJSCom = ref(false)
 const selectedRecordIds = ref<string[]>([]);  // 存储已选择记录的 ID
 const formRef = ref();
@@ -143,12 +206,15 @@ const queryParam = reactive<any>({});
 const toggleSearchStatus = ref<boolean>(false);
 const registerModal = ref();
 const userStore = useUserStore();
+const targetOrg = ref()//目标机构 仅“指定”时可用
+const { createMessage } = useMessage();
+const visible = ref(false);
+const syncOption = ref('all');
 //注册table数据
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   tableProps: {
     title: '服务指令',
     api: listByDS,
-    columns: sourceColumns,
     canResize: false,
     useSearchForm: false,
     showIndexColumn: true,
@@ -164,7 +230,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
       return Object.assign(params, queryParam);
     },
     actionColumn: {
-      width: 80,
+      width: 60,
       fixed: 'right',
     },
   },
@@ -202,35 +268,72 @@ function init(record) {
   sourceOrgInfo.value = record.orgInfo
   //初始化各参数
   {
-    rightList.value = []
+    rightNeedAddList.value = []
     leftList.value = []
     selectedRecordIds.value = []
     formRef.value.resetFields();
     selectedRowKeys.value = [];
     sourceType.value = 'all'
+    targetType.value = 'needsync'
   }
   queryParam.dataSourceCode = record.orgInfo.orgCode;
   reload();
 }
 
+function resetTargetData() {
+  //初始化各参数
+  {
+    rightNeedAddList.value = []
+    selectedRecordIds.value = []
+    formRef.value.resetFields();
+    selectedRowKeys.value = [];
+    sourceType.value = 'all'
+    targetType.value = 'needsync'
+  }
+}
+
+function initTargetList(record) {
+  targetOrg.value = {}
+  //传值了说明是指定平台同步 - 重置数据+查询更新数据
+  if (!!record.orgCode) {
+    targetOrg.value = record
+    resetTargetData()
+    listByDS({
+      dataSourceCode: record.orgCode,
+      pageNo: 1,
+      pageSize: -1,
+    }).then(res => {
+      rightNeedAddList.value = []
+      selectedRecordIds.value = []
+      rightSourceList.value = res.records
+      // selectedRecordIds.value = rightSourceList.value?.map(d => d.id)
+    })
+  }
+}
+
+
 // 选择记录
 function selectRecord(record: any) {
   if (!selectedRecordIds.value.includes(record.id)) {
     selectedRecordIds.value.push(record.id);  // 记录 ID
-    rightList.value.push(record);              // 将记录添加到右侧
+    rightNeedAddList.value.push(record);              // 将记录添加到右侧
     leftList.value = leftList.value.filter(item => item.id !== record.id);  // 从左侧移除
-    rightList.value = [...rightList.value];    // 强制更新引用，确保视图更新
+    rightNeedAddList.value = [...rightNeedAddList.value];    // 强制更新引用，确保视图更新
     leftList.value = [...leftList.value];      // 强制更新引用，确保视图更新
   }
 }
 
 // 移除记录
 function removeRecord(record: any) {
+  // 如果记录在rightSourceList中，不允许移除
+  // if (rightSourceList.value.some(item => item.id === record.id)) {
+  //   return;
+  // }
   if (selectedRecordIds.value.includes(record.id)) {
     selectedRecordIds.value = selectedRecordIds.value.filter(id => id !== record.id);  // 移除记录 ID
     leftList.value.push(record);  // 添加回左侧
-    rightList.value = rightList.value.filter(item => item.id !== record.id);  // 从右侧移除
-    rightList.value = [...rightList.value];    // 强制更新引用，确保视图更新
+    rightNeedAddList.value = rightNeedAddList.value.filter(item => item.id !== record.id);  // 从右侧移除
+    rightNeedAddList.value = [...rightNeedAddList.value];    // 强制更新引用，确保视图更新
     leftList.value = [...leftList.value];      // 强制更新引用，确保视图更新
   }
 }
@@ -250,15 +353,18 @@ function selectAll() {
     pageSize: -1,
   }).then(res => {
     const allRecords = res.records || [];
-    // 只添加没有选择的记录到右侧
-    const unselectedRecords = allRecords.filter(record => !selectedRecordIds.value.includes(record.id));
+    // 只添加没有选择的记录到右侧，并且不在rightSourceList中
+    const unselectedRecords = allRecords.filter(record =>
+      !selectedRecordIds.value.includes(record.id)
+      // && !rightSourceList.value.some(item => item.id === record.id)
+    );
     if (unselectedRecords.length) {
       // 把新记录推到右侧列表
-      rightList.value.push(...unselectedRecords);
+      rightNeedAddList.value.push(...unselectedRecords);
       // 把新记录的 id 推入已选 id 列表
       selectedRecordIds.value.push(...unselectedRecords.map(r => r.id));
       // 刷新引用，确保视图更新
-      rightList.value = [...rightList.value];
+      rightNeedAddList.value = [...rightNeedAddList.value];
       selectedRecordIds.value = [...selectedRecordIds.value];
     }
   })
@@ -268,10 +374,12 @@ function selectAll() {
  * 全部移除，将右侧数据移回左侧
  */
 function removeAll() {
-  rightList.value = [];  // 清空右侧列表
+  rightNeedAddList.value = [];  // 清空右侧列表
+  // selectedRecordIds.value = rightSourceList.value?.map(d => d.id)
   selectedRecordIds.value = []
 }
 
+//源平台查看全部all/可同步unsel
 function sourceTypeChanged(val_) {
   if (val_.target.value == 'all') {
     //全部
@@ -283,6 +391,12 @@ function sourceTypeChanged(val_) {
   reload()
 }
 
+//目标平台查看已有exist/待同步needsync
+function targetTypeChanged(val_) {
+
+}
+
+
 watch(
   () => queryParam.directiveName,
   (newVal) => {
@@ -297,10 +411,88 @@ function controlShowJSCom() {
   }, 1000)
 }
 
+function cleanTargetSourceData() {
+  if (rightSourceList.value?.length) {
+    rightSourceList.value = []
+    selectedRecordIds.value = []
+  }
+}
+
+//开始同步
+function syncFunc() {
+  if (props.targetChooseType == 'one') {
+    if (!targetOrg.value || !targetOrg.value.orgCode) {
+      createMessage.warning('请选择业务平台')
+      return
+    }
+  } else {
+    if (!props.targetOrgs.length) {
+      createMessage.warning('请选择业务平台')
+      return
+    }
+  }
+  if (!rightNeedAddList.value?.length) {
+    createMessage.warning('请选择需要同步的指令')
+    return
+  } else {
+    visible.value = true
+  }
+}
+//开始同步
+function handleOk() {
+  let params = {}
+  if (props.targetChooseType == 'one') {
+    params = {
+      syncIds: rightNeedAddList.value
+        .filter(item => !rightSourceList.value.some(sourceItem => sourceItem.id === item.id))
+        .map(item => item.id)
+        .join(','),
+      upIds: rightNeedAddList.value
+        .filter(item => rightSourceList.value.some(sourceItem => sourceItem.id === item.id))
+        .map(item => item.id)
+        .join(','),
+      syncOrgCodes: targetOrg.value.orgCode,
+      syncOption:syncOption.value,
+    }
+  } else {
+    params = {
+      syncIds: rightNeedAddList.value.map(item => item.id).join(','),
+      upIds: '',
+      syncOrgCodes: props.targetOrgs.map(item => item.orgCode).join(','),
+      syncOption:syncOption.value,
+    }
+  }
+  
+  syncDirective(sourceOrgInfo.value.orgCode,params)
+  createMessage.success('已开始自动同步!')
+  visible.value = false
+}
+//取消同步
+function handleCancel() {
+  visible.value = false
+}
+
+// 计算新增数量
+function getNewCount() {
+  if (!rightNeedAddList.value || !rightSourceList.value) return 0;
+  return rightNeedAddList.value.filter(item =>
+    !rightSourceList.value.some(sourceItem => sourceItem.id === item.id)
+  ).length;
+}
+
+// 计算更新数量
+function getUpdateCount() {
+  if (!rightNeedAddList.value || !rightSourceList.value) return 0;
+  return rightNeedAddList.value.filter(item =>
+    rightSourceList.value.some(sourceItem => sourceItem.id === item.id)
+  ).length;
+}
 defineExpose({
   init,
-  rightList,
+  rightNeedAddList,
   controlShowJSCom,
+  initTargetList,
+  cleanTargetSourceData,
 });
 </script>
 
diff --git a/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom分步骤版本.vue b/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom分步骤版本.vue
new file mode 100644
index 0000000..4289ce6
--- /dev/null
+++ b/src/views/synchronization/directive/serviceDirective/DirectiveChooseCom分步骤版本.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="p-2" style="overflow-x: hidden;">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
+        :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <a-col :lg="6">
+            <a-form-item name="instructionTagId">
+              <template #label><span title="分类标签">分类标签</span></template>
+              <j-dict-select-tag v-model:value="queryParam.instructionTagId" v-if="showJSCom"
+                :orgCode="sourceOrgInfo?.orgCode"
+                :dictCode="`nu_config_service_instruction_tag,instruction_name,id,del_flag = 0 order by sort asc`"
+                placeholder="请选择分类标签" allowClear :ignoreDisabled="true" @select="reload()" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6">
+            <a-form-item name="categoryId">
+              <template #label><span title="服务类别">服务类别</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.categoryId" v-if="showJSCom"
+                :orgCode="sourceOrgInfo?.orgCode"
+                :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 and instruction_id = '${queryParam.instructionTagId || ''}' order by sort asc`"
+                placeholder="请选择服务类别" allowClear :ignoreDisabled="true" @select="reload()" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="6">
+            <a-form-item name="typeId">
+              <template #label><span title="服务类型">服务类型</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.typeId" v-if="showJSCom"
+                :orgCode="sourceOrgInfo?.orgCode"
+                :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and category_id = '${queryParam.categoryId || ''}' order by sort asc`"
+                placeholder="请选择服务类型" allowClear :ignoreDisabled="true" @select="reload()" />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="directiveName">
+              <template #label><span title="服务指令">服务指令</span></template>
+              <JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
+            </a-form-item>
+          </a-col>
+          <!-- <a-col :lg="6">
+            <a-form-item name="bodyTags">
+              <template #label><span title="体型标签">体型标签</span></template>
+              <j-dict-select-tag type='list' v-model:value="queryParam.bodyTags"
+                :dictCode="`nu_config_body_tag,tag_name,id,del_flag = '0' order by sort asc`" :ignoreDisabled="true"
+                placeholder="请选择体型标签" allowClear />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="emotionTags">
+              <template #label><span title="情绪标签">情绪标签</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.emotionTags"
+                :dictCode="`nu_config_emotion_tag,tag_name,id,del_flag = '0' order by sort asc`" :ignoreDisabled="true"
+                placeholder="请选择情绪标签" allowClear />
+            </a-form-item>
+          </a-col> -->
+          <!-- <a-col :lg="6">
+            <a-form-item name="izEnabled">
+              <template #label><span title="是否启用">是否启用</span></template>
+              <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
+                :ignoreDisabled="true" placeholder="请选择是否启用" allowClear @select="reload()" />
+            </a-form-item>
+          </a-col> -->
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <!-- <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> -->
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
+                  style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-row :gutter="24" style="margin-top: -10px;padding-left: 20px;padding-right: 20px;">
+      <a-col :lg="3" :push="21">
+        <a-button type="primary" @click="selectAll">一键全选</a-button>
+        <a-button type="default" @click="removeAll" style="margin-left: 8px">全部移除</a-button>
+      </a-col>
+    </a-row>
+    <a-row :gutter="24" style="padding-left: 20px;padding-right: 20px;">
+      <a-col :lg="12" :sm="24">
+        <!-- 引用表格 -->
+        <a-tag color="blue" style="margin-left: 10px;margin-top: 10px;">源数据 - {{ sourceOrgInfo.departName }}</a-tag>
+        <a-radio-group v-model:value="sourceType" size="small" @change="sourceTypeChanged">
+          <a-radio-button value="all">全部</a-radio-button>
+          <a-radio-button value="unsel">未选择</a-radio-button>
+        </a-radio-group>
+        <BasicTable @register="registerTable" :dataSource="leftList" size="small" :rowClassName="rowClassName"
+          :scroll="{ y: '46vh' }">
+          <template #tableTitle></template>
+          <template v-slot:bodyCell="{ column, record, index, text }">
+            <template v-if="column.dataIndex === 'bodyTagList'">
+              <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
+                item.tagName).join('、')}}</span>
+            </template>
+            <template v-if="column.dataIndex === 'emotionTagList'">
+              <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
+                item.tagName).join('、')}}</span>
+            </template>
+          </template>
+          <template #action="{ record }">
+            <a-button type="link" v-if="!selectedRecordIds.includes(record.id)" @click="selectRecord(record)"
+              size="small">选择</a-button>
+            <a-button type="link" v-else @click="removeRecord(record)" size="small">移除</a-button>
+          </template>
+        </BasicTable>
+      </a-col>
+      <a-col :lg="12" :sm="24">
+        <a-tag color="green" style="margin-left: 10px;margin-top: 10px;">已选择 {{ rightList.length }} 条</a-tag>
+        <BasicTable :dataSource="rightList" :columns="sourceColumns" size="small" :scroll="{ y: '46vh' }"
+          :pagination="{ current: 1, pageSize: 50, total: rightList.length, showSizeChanger: true, pageSizeOptions: ['10', '20', '50', '100'] }">
+        </BasicTable>
+      </a-col>
+    </a-row>
+
+  </div>
+</template>
+
+<script lang="ts" name="serviceDirective-configServiceDirective" setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { BasicTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { columns, sourceColumns, superQuerySchema } from './ConfigServiceDirective.data';
+import { listByDS } from './ConfigServiceDirective.api';
+import { useUserStore } from '/@/store/modules/user';
+import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { cloneDeep } from "lodash-es";
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+
+const leftList = ref<any[]>([]);  // 左侧列表的数据
+const rightList = ref<any[]>([]);  // 右侧列表的数据
+const sourceOrgInfo = ref({})//源数据机构信息
+const sourceType = ref('all')
+const showJSCom = ref(false)
+const selectedRecordIds = ref<string[]>([]);  // 存储已选择记录的 ID
+const formRef = ref();
+const queryParam = reactive<any>({});
+const toggleSearchStatus = ref<boolean>(false);
+const registerModal = ref();
+const userStore = useUserStore();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '服务指令',
+    api: listByDS,
+    columns: sourceColumns,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    showTableSetting: false,
+    immediate: false,
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '20', '50', '100'],
+    },
+    beforeFetch: async (params) => {
+      queryParam.izEnabled = '0'
+      return Object.assign(params, queryParam);
+    },
+    actionColumn: {
+      width: 80,
+      fixed: 'right',
+    },
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+const labelCol = reactive({
+  xs: 24,
+  sm: 6,
+  xl: 6,
+  xxl: 6
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 18,
+});
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  formRef.value.resetFields();
+  selectedRowKeys.value = [];
+  //刷新数据
+  reload();
+}
+
+function init(record) {
+  sourceOrgInfo.value = record.orgInfo
+  //初始化各参数
+  {
+    rightList.value = []
+    leftList.value = []
+    selectedRecordIds.value = []
+    formRef.value.resetFields();
+    selectedRowKeys.value = [];
+    sourceType.value = 'all'
+  }
+  queryParam.dataSourceCode = record.orgInfo.orgCode;
+  reload();
+}
+
+// 选择记录
+function selectRecord(record: any) {
+  if (!selectedRecordIds.value.includes(record.id)) {
+    selectedRecordIds.value.push(record.id);  // 记录 ID
+    rightList.value.push(record);              // 将记录添加到右侧
+    leftList.value = leftList.value.filter(item => item.id !== record.id);  // 从左侧移除
+    rightList.value = [...rightList.value];    // 强制更新引用，确保视图更新
+    leftList.value = [...leftList.value];      // 强制更新引用，确保视图更新
+  }
+}
+
+// 移除记录
+function removeRecord(record: any) {
+  if (selectedRecordIds.value.includes(record.id)) {
+    selectedRecordIds.value = selectedRecordIds.value.filter(id => id !== record.id);  // 移除记录 ID
+    leftList.value.push(record);  // 添加回左侧
+    rightList.value = rightList.value.filter(item => item.id !== record.id);  // 从右侧移除
+    rightList.value = [...rightList.value];    // 强制更新引用，确保视图更新
+    leftList.value = [...leftList.value];      // 强制更新引用，确保视图更新
+  }
+}
+
+// 行样式
+function rowClassName(record: any) {
+  return selectedRecordIds.value.includes(record.id) ? 'selected-row' : '';
+}
+
+/**
+ * 一键全选，将所有左侧数据移至右侧
+ */
+function selectAll() {
+  listByDS({
+    ...queryParam,
+    pageNo: 1,
+    pageSize: -1,
+  }).then(res => {
+    const allRecords = res.records || [];
+    // 只添加没有选择的记录到右侧
+    const unselectedRecords = allRecords.filter(record => !selectedRecordIds.value.includes(record.id));
+    if (unselectedRecords.length) {
+      // 把新记录推到右侧列表
+      rightList.value.push(...unselectedRecords);
+      // 把新记录的 id 推入已选 id 列表
+      selectedRecordIds.value.push(...unselectedRecords.map(r => r.id));
+      // 刷新引用，确保视图更新
+      rightList.value = [...rightList.value];
+      selectedRecordIds.value = [...selectedRecordIds.value];
+    }
+  })
+}
+
+/**
+ * 全部移除，将右侧数据移回左侧
+ */
+function removeAll() {
+  rightList.value = [];  // 清空右侧列表
+  selectedRecordIds.value = []
+}
+
+function sourceTypeChanged(val_) {
+  if (val_.target.value == 'all') {
+    //全部
+    queryParam.excludeIds = null
+  } else {
+    //未选择
+    queryParam.excludeIds = selectedRecordIds.value.join(',')
+  }
+  reload()
+}
+
+watch(
+  () => queryParam.directiveName,
+  (newVal) => {
+    reload()
+  }
+);
+
+function controlShowJSCom() {
+  showJSCom.value = false
+  setTimeout(() => {
+    showJSCom.value = true
+  }, 1000)
+}
+
+defineExpose({
+  init,
+  rightList,
+  controlShowJSCom,
+});
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+.btnPrivate {
+  height: 34px;
+  margin-left: 4px;
+}
+
+/* 添加深度选择器确保样式能穿透组件 */
+:deep(.ant-table-tbody) {
+  tr.selected-row {
+    td {
+      background-color: #e6f7ff !important;
+    }
+
+    &:hover td {
+      background-color: #e6f7ff !important;
+    }
+  }
+}
+
+:deep .ant-table-title {
+  display: none;
+}
+
+:deep .jeecg-basic-table-form-container .ant-form {
+  padding: 0px;
+  padding-right: 20px;
+}
+</style>
diff --git a/src/views/synchronization/directive/syncStep/SyncStepList.vue b/src/views/synchronization/directive/syncStep/SyncStepList.vue
index fd9d40e..e6c5eab 100644
--- a/src/views/synchronization/directive/syncStep/SyncStepList.vue
+++ b/src/views/synchronization/directive/syncStep/SyncStepList.vue
@@ -3,46 +3,255 @@
     <div class="left">
       <a-card class="top">
         <div class="source-platform">
-          <span>源平台</span>
-          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="showOrgListModal"
-            size="small">请选择</a-button>
+          <span class="section-title">源平台</span>
+          <a-button type="link" @click="showSourceOrgListModal" size="small">请选择</a-button>
         </div>
+        <div class="selected-orgs" v-if="!!orgInfo.length">
+          <a-card class="org-card" :headStyle="{ height: '60px', padding: '0 24px' }"
+            :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+            <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="21" style="font-size: 14px; padding-top: 4px;">
+                  <div>
+                    <span style="font-weight: bold;">{{ orgInfo[0]?.departName }}</span>
+                  </div>
+                </a-col>
+                <a-col :span="3" style="text-align: center; padding-top: 4px;">
+                  <div class="zxClass">{{ orgInfo[0]?.orgCode }}</div>
+                </a-col>
+              </a-row>
+            </template>
+            <p>加盟时间：{{ orgInfo[0]?.franchiseTime?.substring(0, 10) }}</p>
+            <p>机构负责人：{{ orgInfo[0]?.orgLeader }}</p>
+            <p>负责人电话：{{ orgInfo[0]?.orgLeaderPhone }}</p>
+            <p class="ellipsis-one-lines" :title="orgInfo[0]?.comRegisterAddress">机构地址：{{ orgInfo[0]?.comRegisterAddress
+            }}</p>
+          </a-card>
+        </div>
+        <a-empty v-else :description="'暂未选择'" />
       </a-card>
       <a-card class="bottom">
         <div class="source-platform">
-          <span>目标平台</span>
-          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="showOrgListModal"
-            size="small">请选择</a-button>
+          <span class="section-title">目标平台</span>
+          <div>
+            <a-radio-group v-model:value="targetChooseType" size="small" @change="targetChooseTypeChanged">
+              <a-radio-button value="one">指定</a-radio-button>
+              <a-radio-button value="multi">批量</a-radio-button>
+            </a-radio-group>
+            <a-divider type="vertical" style="background-color: #CDCDCF" />
+            <a-button type="link" @click="showTargetOrgListModal" size="small">请选择</a-button>
+          </div>
         </div>
+        <div class="selected-orgs" ref="selectedOrgsContainer" style="height: 46vh; overflow: auto;"
+          v-if="!!syncOrgs.length">
+          <a-card v-for="orgItem of syncOrgs" class="org-card"
+            :class="{ 'selected-card': selectedTargetOrgs.some(org => org.orgCode === orgItem.orgCode) }"
+            :headStyle="{ height: '60px', padding: '0 24px' }" :bodyStyle="{ padding: '24px 24px 4px 24px' }"
+            @click="handleTargetOrgChange(orgItem)">
+            <template #title>
+              <a-row style="font-weight: normal;">
+                <a-col :span="21" style="font-size: 14px; padding-top: 4px;">
+                  <div>
+                    <span style="font-weight: bold;">{{ orgItem?.departName }}</span>
+                    <span v-show="selectedTargetOrgs.some(org => org.orgCode === orgItem.orgCode)"
+                      style="color: green; font-size: 12px; margin-left: 8px;">已选择</span>
+                  </div>
+                </a-col>
+                <a-col :span="3" style="text-align: center; padding-top: 4px;">
+                  <div class="zxClass">{{ orgItem?.orgCode }}</div>
+                </a-col>
+              </a-row>
+            </template>
+            <p>加盟时间：{{ orgItem?.franchiseTime?.substring(0, 10) }}</p>
+            <p>机构负责人：{{ orgItem?.orgLeader }}</p>
+            <p>负责人电话：{{ orgItem?.orgLeaderPhone }}</p>
+            <p class="ellipsis-one-lines" :title="orgItem?.comRegisterAddress">机构地址：{{ orgItem?.comRegisterAddress
+            }}</p>
+          </a-card>
+        </div>
+        <a-empty style="margin-top: 50px;" v-else :description="'暂未选择'" />
       </a-card>
     </div>
     <a-card class="right">
-      <div class="source-platform">
-        <span>指令镜像</span>
+      <div class="zljx-platform">
+        <span class="section-title">指令镜像</span>
+        <div class="directive-choose-wrapper">
+          <DirectiveChooseCom v-show="!!orgInfo.length" ref="directiveChooseRef" :targetChooseType="targetChooseType" :targetOrgs="selectedTargetOrgs">
+          </DirectiveChooseCom>
+        </div>
       </div>
     </a-card>
-    <a-modal v-model:visible="orgListVisible" title="选择源平台" width="800px" :footer="null">
-      <OrgListCom class="step-content" ref="orgListComRef" :showChoose="true" @handleOrgChoose="handleOrgChoose" />
+    <a-modal v-model:visible="sourceOrgListVisible" title="选择源平台" width="90vw"
+      :bodyStyle="{ padding: '0', height: '70vh', display: 'flex', flexDirection: 'column', overflow: 'hidden' }"
+      wrapClassName="org-list-modal" @cancel="handleCancelSource">
+      <template #footer>
+        <a-button @click="handleCancelSource" type="primary">取消</a-button>
+        <a-button @click="handleGetSource" type="primary">确认</a-button>
+      </template>
+      <OrgListCom class="step-content" ref="sourceOrgListComRef" @handleOrgChoose="handleSourceOrgChoose"
+        :showChoose="true" />
+    </a-modal>
+    <a-modal v-model:visible="targetOrgListVisible" title="选择源平台" width="90vw" @cancel="handleCancelTarget">
+      <template #footer>
+        <a-button @click="handleCancelTarget" type="primary">取消</a-button>
+        <a-button @click="handleGetTarget" type="primary">确认</a-button>
+      </template>
+      <OrgListCom class="step-content" ref="targetOrgListComRef" @handleOrgChoose="handleTargetOrgChoose"
+        :showChoose="true" :allowMultipleSelection="true" :pageSize="-1" :excludeOrgCode="orgInfo[0]?.orgCode" />
     </a-modal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, nextTick, watch } from 'vue';
 import OrgListCom from '/@/views/synchronization/directive/orgCom/OrgListCom.vue';
+import DirectiveChooseCom from '/@/views/synchronization/directive/serviceDirective/DirectiveChooseCom.vue'
 
-const orgListVisible = ref(false);
-const orgListComRef = ref();
+const sourceOrgListVisible = ref(false);
+const targetOrgListVisible = ref(false);
+const sourceOrgListComRef = ref();
+const targetOrgListComRef = ref();
+const orgInfo = ref([])
+const syncOrgs = ref([])
+const directiveChooseRef = ref()
+const selectedTargetOrgs = ref([])//已选择目标平台
+const targetChooseType = ref('one')
+const selectedOrgsContainer = ref<HTMLElement>();
 
 // 显示机构列表弹窗
-function showOrgListModal() {
-  orgListVisible.value = true;
+function showSourceOrgListModal() {
+  sourceOrgListComRef.value?.reload()
+  targetOrgListComRef.value?.reload()
+  sourceOrgListVisible.value = true;
 }
 
-// 处理机构选择
-function handleOrgChoose(orgInfo_) {
-  orgListVisible.value = false;
-  // 这里可以处理选择的机构信息
+// 显示机构列表弹窗
+function showTargetOrgListModal() {
+  sourceOrgListComRef.value?.reload()
+  targetOrgListComRef.value?.reload()
+  targetOrgListVisible.value = true;
+}
+
+//重置目标平台数据
+function resetTargetOrgs(orgInfo_) {
+  // 检查是否已存在该机构
+  const syncOrgsIndex = syncOrgs.value.findIndex(
+    org => org.orgCode === orgInfo_.orgCode
+  );
+
+  if (syncOrgsIndex >= 0) {
+    // 如果已存在，则移除
+    syncOrgs.value.splice(syncOrgsIndex, 1);
+  }
+  syncOrgs.value = [...syncOrgs.value];
+  //处理已选择数据
+  const selectedTargetOrgsIndex = selectedTargetOrgs.value.findIndex(
+    org => org.orgCode === orgInfo_.orgCode
+  );
+
+  if (selectedTargetOrgsIndex >= 0) {
+    // 如果已存在，则移除
+    selectedTargetOrgs.value.splice(selectedTargetOrgsIndex, 1);
+  }
+  selectedTargetOrgs.value = [...selectedTargetOrgs.value];
+  //如果是"指定"且“已选机构仍有值”且"已被选中" 则 默认选中第一个并定位
+  if (targetChooseType.value == 'one' && !!syncOrgs.value?.length && selectedTargetOrgsIndex >= 0) {
+    selectedTargetOrgs.value = [{ ...syncOrgs.value?.[0] }]
+    // 滚动到顶部
+    nextTick(() => {
+      if (selectedOrgsContainer.value) {
+        selectedOrgsContainer.value.scrollTop = 0;
+      }
+    });
+  }
+}
+
+// 处理源数据机构选择
+function handleSourceOrgChoose(orgInfo_) {
+  //重置目标平台数据
+  resetTargetOrgs(orgInfo_[0])
+  orgInfo.value = orgInfo_
+  //重置目标平台数据
+  targetOrgListComRef.value?.resetSeleted(syncOrgs.value)
+  directiveChooseRef.value?.controlShowJSCom()
+  //是否已选择目标平台 否则为初始化原平台
+  if (selectedTargetOrgs.value.length) {
+    if (targetChooseType.value == 'one') {
+      directiveChooseRef.value?.initTargetList(selectedTargetOrgs.value[0])
+    }
+  } else {
+    directiveChooseRef?.value?.init({ orgInfo: orgInfo.value[0] })
+  }
+}
+
+// 处理目标平台机构选择
+function handleTargetOrgChoose(orgInfo_) {
+  if (!syncOrgs.value || syncOrgs.value.length == 0) {
+    if (targetChooseType.value == 'one' && orgInfo_.length > 0) {
+      selectedTargetOrgs.value = [{ ...orgInfo_[0] }]
+      directiveChooseRef.value?.initTargetList(orgInfo_[0])
+    }
+  }
+  syncOrgs.value = orgInfo_
+}
+
+function handleCancelSource() {
+  sourceOrgListVisible.value = false;
+  sourceOrgListComRef.value?.resetSeleted(orgInfo.value)
+}
+
+function handleCancelTarget() {
+  targetOrgListVisible.value = false;
+  targetOrgListComRef.value?.resetSeleted(syncOrgs.value)
+}
+
+//目标平台被点击（选中/移除）
+function handleTargetOrgChange(org_) {
+  if (targetChooseType.value == 'one') {
+    selectedTargetOrgs.value = [{ ...org_ }]
+    directiveChooseRef.value?.initTargetList(org_)
+  } else {
+    // 检查是否已存在该机构
+    const index = selectedTargetOrgs.value.findIndex(
+      org => org.orgCode === org_.orgCode
+    );
+
+    if (index >= 0) {
+      // 如果已存在，则移除
+      selectedTargetOrgs.value.splice(index, 1);
+    } else {
+      // 如果不存在，则添加
+      selectedTargetOrgs.value.push(org_);
+    }
+    //响应式刷新
+    selectedTargetOrgs.value = [...selectedTargetOrgs.value];
+    // directiveChooseRef.value?.cleanTargetSourceData()
+  }
+}
+
+//目标平台选取方式 单个/多个
+function targetChooseTypeChanged(val_) {
+  if (val_.target.value == 'one' && !!syncOrgs.value?.length) {
+    selectedTargetOrgs.value = [{ ...syncOrgs.value?.[0] }]
+    // 滚动到顶部
+    nextTick(() => {
+      if (selectedOrgsContainer.value) {
+        selectedOrgsContainer.value.scrollTop = 0;
+      }
+    });
+  }
+}
+
+//源平台机构变更确认
+function handleGetSource() {
+  sourceOrgListComRef.value?.commitOrgsInfo()
+  handleCancelSource()
+}
+
+//目标平台机构变更确认
+function handleGetTarget() {
+  targetOrgListComRef.value?.commitOrgsInfo()
+  handleCancelTarget()
 }
 </script>
 
@@ -96,19 +305,43 @@ function handleOrgChoose(orgInfo_) {
   justify-content: space-between;
 }
 
+.zljx-platform {
+  display: flex;
+  flex-direction: column;
+  /* 改为垂直排列 */
+  gap: 8px;
+  /* 添加间距 */
+
+  .section-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+    position: relative;
+    padding-left: 12px;
+  }
+
+  .directive-choose-wrapper {
+    width: 100%;
+    /* 可以根据需要添加其他样式 */
+  }
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  position: relative;
+  padding-left: 12px;
+}
+
 .left .top {
   flex: 0 0 28%;
   margin-bottom: 1%;
-  //background-color: lightblue;
-  /* 可根据需要修改 */
 }
 
 .left .bottom {
   flex: 1;
-  /* 占剩余部分 */
   margin-bottom: 1%;
-  //background-color: lightgreen;
-  /* 可根据需要修改 */
 }
 
 .right {
@@ -117,7 +350,50 @@ function handleOrgChoose(orgInfo_) {
   max-height: 85vh;
 }
 
-:deep .ant-card-body{
-  padding:8px;
+:deep .ant-card-body {
+  padding: 12px;
+}
+
+.step-content {
+  overflow: auto;
+  height: 70vh;
+}
+
+.zxClass {
+  font-size: 12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 25px;
+  color: white;
+  line-height: 25px;
+}
+
+.tbClass {
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+
+.antTitle {
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+.ellipsis-one-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.selected-card {
+  border: 2px solid #1890ff;
+  box-shadow: 0 0 2px rgba(24, 144, 255, 0.3);
+}
+
+.org-card {
+  margin-top: 8px;
 }
 </style>
\ No newline at end of file