服务指令同步页面样式调整

src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveList.vue

@@ -50,13 +50,13 @@
                 placeholder="请选择情绪标签" allowClear />
             </a-form-item>
           </a-col> -->
-          <a-col :lg="6">
+          <!-- <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 />
             </a-form-item>
-          </a-col>
+          </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">
@@ -122,6 +122,7 @@ const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
       pageSizeOptions: ['10', '20', '50', '100'],
     },
     beforeFetch: async (params) => {
+      queryParam.izEnabled = '0'
       return Object.assign(params, queryParam);
     },
     actionColumn: {
@@ -163,9 +164,7 @@ function searchReset() {
 
 
 function init(record) {
-  console.log("🚀 ~ init ~ record:", record)
   queryParam.dataSourceCode = record.orgCode;
-  console.log("🚀 ~ init ~ queryParam:", queryParam)
   reload();
 }
 

src/views/synchronization/directive/syncList.vue

@@ -17,7 +17,12 @@
               style="margin-left: 8px">重置</a-button>
           </a-col>
           <a-col :lg="12" style="text-align: right;">
-            <a-button type="primary" preIcon="ant-design:cloud-sync-outlined" @click="handleJingxiang">镜像</a-button>
+            <a-button type="primary" preIcon="ant-design:cloud-sync-outlined" @click="handleJingxiang"
+              style="margin-right: 10px;">镜像</a-button>
+            <a-badge :count="609" style="margin-right: 10px;">
+              <a-button type="primary" preIcon="ant-design:eye-outlined" style="margin-right: 10px;"
+                @click="handleJingxiang">查看可新增指令</a-button>
+            </a-badge>
           </a-col>
         </a-row>
       </a-form>

src/views/synchronization/directive/syncStep/SyncStepList.vue

@@ -1,255 +1,123 @@
 <template>
-  <div class="p-2" style="padding: 10px;">
+  <div class="container2 jeecg-basic-table-form-container">
-    <a-steps v-model:current="stepVal" size="small" style="margin: 0; width: 95%; margin: 0 auto;">
+    <div class="left">
-      <a-step title="功能说明" disabled />
+      <a-card class="top">
-      <a-step title="选择源数据业务平台" disabled />
+        <div class="source-platform">
-      <a-step title="选择服务指令" disabled />
+          <span>源平台</span>
-      <a-step title="选择目标业务平台" disabled />
+          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="showOrgListModal"
-    </a-steps>
+            size="small">请选择</a-button>
         </div>
-
+      </a-card>
-  <!-- 第一步：功能说明 -->
+      <a-card class="bottom">
-  <div v-show="stepVal === 0" class="step1-container">
+        <div class="source-platform">
-    <div class="step1-box">
+          <span>目标平台</span>
-      <InfoCircleOutlined class="step1-icon" />
+          <a-button type="primary" preIcon="ant-design:plus-outlined" @click="showOrgListModal"
-      <h3 class="step1-heading">服务指令同步 · 镜像功能</h3>
+            size="small">请选择</a-button>
-      <ul class="step1-points">
-        <li><b>作用：</b>将“服务指令”分发至业务平台。</li>
-        <li><b>流程：</b>选择“源数据业务平台” — 选择“服务指令” — 选择“目标业务平台”。</li>
-        <li><b>确认：</b>点击右下角“确认”按钮，开始自动同步。</li>
-        <li><b>注意：</b>如有不熟悉功能按键，可在对应界面上方查看操作指引。</li>
-      </ul>
         </div>
+      </a-card>
     </div>
-  <!-- 第二步：选择源数据机构 -->
+    <a-card class="right">
-  <div v-show="stepVal === 1">
+      <div class="source-platform">
-    <div style="margin: 10px 0 16px 100px; display: flex; align-items: center; font-size: 16px; color: #8B0000;">
+        <span>指令镜像</span>
-      <InfoCircleOutlined style="color: #1890ff; margin-right: 6px;" />
-      <span
-        style="padding-right: 60px;">操作指引：1、如何选择“源数据”平台：点击对应机构卡片即可。2、如何进入“服务指令”选择页面：请点击页面右下方“下一步”按钮。3、详情按钮：查看对应平台现有服务指令。</span>
       </div>
-    <OrgListCom class="step-content" ref="orgListComRef" :showChoose="true" @handleOrgDetail="handleDetail"
+    </a-card>
-      @handleOrgChoose="orgSourceChangedFunc" />
+    <a-modal v-model:visible="orgListVisible" title="选择源平台" width="800px" :footer="null">
+      <OrgListCom class="step-content" ref="orgListComRef" :showChoose="true" @handleOrgChoose="handleOrgChoose" />
+    </a-modal>
   </div>
-  <!-- 第三步：选择服务指令 -->
-  <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
-        style="padding-right: 60px;">操作指引：1、如何选择“服务指令”：将需要同步的“服务指令”，通过“选择”或“一键全选”按钮添加至右侧“已选择”列表中,如需移除请点击“移除”或“全部移除”按钮。2、搜索区域可对左侧列表进行筛选。3、左侧列表上方“全部/未选择”可快速切换源数据列表，便于更清晰的查看需要处理的“服务指令”。</span>
-    </div>
-    <DirectiveChooseCom ref="directiveChooseRef"></DirectiveChooseCom>
-  </div>
-  <!-- 第四步：选择目标机构 -->
-  <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
-        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: '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">
-        <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'" :excludeOrgCode="orgInfo[0]?.orgCode"
-          :allowMultipleSelection="true" :showChoose="true" @handleOrgDetail="handleDetail"
-          @handleOrgChoose="orgTargetChangedFunc" />
-      </a-col>
-    </a-row>
-  </div>
-  <ConfigServiceDirectiveListModal class="step-content" ref="configServiceDirectiveListModal" />
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, toRaw } from 'vue';
+import { ref } from 'vue';
-import { InfoCircleOutlined } from '@ant-design/icons-vue';
 import OrgListCom from '/@/views/synchronization/directive/orgCom/OrgListCom.vue';
-import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue';
-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 } from '/@/components/Table';
-import { syncDirective } from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api';
 
-const emit = defineEmits(['closeModal']);
+const orgListVisible = ref(false);
-const stepVal = ref(0);
+const orgListComRef = ref();
-const configServiceDirectiveListModal = ref();
-const orgInfo = ref([])
-const { createMessage } = useMessage();
-const directiveChooseRef = ref()
-const leftList = ref<any[]>([]);
-const targetOrgListComRef = ref()
-const syncOrgs = ref([])
-
-function init(record: any) {
 
+// 显示机构列表弹窗
+function showOrgListModal() {
+  orgListVisible.value = true;
 }
 
-function handleDetail(record: any) {
+// 处理机构选择
-  configServiceDirectiveListModal.value.init(record);
+function handleOrgChoose(orgInfo_) {
-  configServiceDirectiveListModal.value.disableSubmit = true;
+  orgListVisible.value = false;
+  // 这里可以处理选择的机构信息
 }
-
-function changeStepVal(isAdd) {
-  if (isAdd) {
-    if (stepVal.value == 1 && orgInfo.value.length < 1) {
-      createMessage.warning('请选择源数据机构！');
-      return
-    }
-    if (stepVal.value == 2) {
-      if (toRaw(directiveChooseRef.value?.rightList).length == 0) {
-
-        createMessage.warning('请选择服务指令！');
-        return
-      } else {
-        leftList.value = [...directiveChooseRef.value?.rightList];
-      }
-    }
-
-    stepVal.value = stepVal.value + 1
-  } else {
-    stepVal.value = stepVal.value - 1
-  }
-}
-
-//源数据机构被选择/变更
-function orgSourceChangedFunc(orgInfo_) {
-  orgInfo.value = orgInfo_
-  directiveChooseRef.value?.controlShowJSCom()
-  targetOrgListComRef.value?.reload()
-  directiveChooseRef?.value?.init({ orgInfo: orgInfo.value[0] })
-}
-
-//目标机构被选择/变更
-function orgTargetChangedFunc(orgInfo_) {
-  syncOrgs.value = orgInfo_
-}
-
-watch(
-  () => stepVal.value,
-  (newstepVal, oldValue) => {
-    if (newstepVal == 2 && oldValue == 1) {
-      // targetOrgListComRef.value?.reload()
-      // directiveChooseRef?.value?.init({ orgInfo: orgInfo.value[0] })
-    }
-    if (newstepVal == 3) {
-      targetOrgListComRef.value?.checkAllOrEmpty(false)
-    }
-  }
-);
-
-//开始同步
-function syncFunc() {
-  if (!targetOrgListComRef.value?.selectedOrgs?.length) {
-    createMessage.warning('请选择业务平台')
-  } else {
-    syncDirective({
-      dataSourceCode: orgInfo.value[0].orgCode,
-      syncIds: leftList.value.map(d => d.id).join(','),
-      syncOrgCodes: syncOrgs.value.map(o => o.orgCode).join(','),
-    })
-    createMessage.success('已开始自动同步')
-    emit('closeModal')
-  }
-}
-
-defineExpose({
-  init,
-  stepVal,
-  changeStepVal,
-  syncFunc,
-});
 </script>
 
 <style lang="less" scoped>
-.step1-container {
+.jeecg-basic-table-form-container {
-  display: flex;
+  padding: 0;
-  justify-content: center;
+
-  align-items: center;
+  .table-page-search-submitButtons {
-  margin-top: 120px;
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
   }
 
-.step1-box {
+  .query-group-cust {
-  background: #fff;
+    min-width: 100px !important;
-  padding: 24px;
+  }
-  border-radius: 8px;
+
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  .query-group-split-cust {
-  text-align: center;
+    width: 30px;
-  max-width: 500px;
+    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%;
   }
-
-.step1-icon {
-  font-size: 48px;
-  color: #1890FF;
-  margin-bottom: 16px;
 }
 
-.step1-heading {
+.container2 {
-  font-size: 22px;
+  display: flex;
-  margin-bottom: 16px;
+  margin: 1%;
-  color: #333;
+  max-height: 85vh;
 }
 
-.step1-points {
+.left {
-  list-style: none;
+  display: flex;
-  padding: 0;
+  flex-direction: column;
-  margin: 0;
+  width: 18%;
-  text-align: left;
+  margin-right: 1%;
 }
 
-.step1-points li {
+.source-platform {
-  font-size: 16px;
+  display: flex;
-  line-height: 1.8;
+  align-items: center;
-  padding-left: 24px;
+  justify-content: space-between;
-  position: relative;
-  margin-bottom: 12px;
 }
 
-.step1-points li::before {
+.left .top {
-  content: counter(item) ".";
+  flex: 0 0 28%;
-  counter-increment: item;
+  margin-bottom: 1%;
-  position: absolute;
+  //background-color: lightblue;
-  left: 0;
+  /* 可根据需要修改 */
-  top: 0;
-  font-weight: bold;
-  color: #1890FF;
 }
 
-ul.step1-points {
+.left .bottom {
-  counter-reset: item;
+  flex: 1;
+  /* 占剩余部分 */
+  margin-bottom: 1%;
+  //background-color: lightgreen;
+  /* 可根据需要修改 */
 }
 
-.step-content {
+.right {
-  padding: 0 100px;
+  flex: 1;
+  width: 80%;
+  max-height: 85vh;
 }
 
-/* 步骤条样式 */
+:deep .ant-card-body{
-:deep(.ant-steps) {
+  padding:8px;
-  padding: 0;
-}
-
-:deep(.ant-steps-item) {
-  margin: 0;
 }
 </style>

src/views/synchronization/directive/syncStep/SyncStepListModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <j-modal :title="title" :visible="visible" :fullscreen="true" width="80vw" :bodyStyle="{ padding: 0 }"
+  <j-modal :title="title" :visible="visible" :fullscreen="true" width="100vw" :bodyStyle="{ padding: 0 }"
     :maskClosable="false" :keyboard="false" wrapClassName="modal-fullscreen" @cancel="handleCancel">
     <template #footer>
       <a-button @click="handleCancel">关闭</a-button>
@@ -34,7 +34,7 @@ const registerForm = ref<InstanceType<typeof SyncStepList>>();
  * 编辑或初始化弹窗
  */
 function init(record: any) {
-  title.value = '详情';
+  title.value = '镜像';
   visible.value = true;
   nextTick(() => {
     registerForm.value?.init(record);

src/views/synchronization/directive/syncStep/SyncStepList分步骤源_指令_目标.vue

@@ -0,0 +1,255 @@
+<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="功能说明" disabled />
+      <a-step title="选择源数据业务平台" disabled />
+      <a-step title="选择服务指令" disabled />
+      <a-step title="选择目标业务平台" disabled />
+    </a-steps>
+  </div>
+
+  <!-- 第一步：功能说明 -->
+  <div v-show="stepVal === 0" class="step1-container">
+    <div class="step1-box">
+      <InfoCircleOutlined class="step1-icon" />
+      <h3 class="step1-heading">服务指令同步 · 镜像功能</h3>
+      <ul class="step1-points">
+        <li><b>作用：</b>将“服务指令”分发至业务平台。</li>
+        <li><b>流程：</b>选择“源数据业务平台” — 选择“服务指令” — 选择“目标业务平台”。</li>
+        <li><b>确认：</b>点击右下角“确认”按钮，开始自动同步。</li>
+        <li><b>注意：</b>如有不熟悉功能按键，可在对应界面上方查看操作指引。</li>
+      </ul>
+    </div>
+  </div>
+  <!-- 第二步：选择源数据机构 -->
+  <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
+        style="padding-right: 60px;">操作指引：1、如何选择“源数据”平台：点击对应机构卡片即可。2、如何进入“服务指令”选择页面：请点击页面右下方“下一步”按钮。3、详情按钮：查看对应平台现有服务指令。</span>
+    </div>
+    <OrgListCom class="step-content" ref="orgListComRef" :showChoose="true" @handleOrgDetail="handleDetail"
+      @handleOrgChoose="orgSourceChangedFunc" />
+  </div>
+  <!-- 第三步：选择服务指令 -->
+  <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
+        style="padding-right: 60px;">操作指引：1、如何选择“服务指令”：将需要同步的“服务指令”，通过“选择”或“一键全选”按钮添加至右侧“已选择”列表中,如需移除请点击“移除”或“全部移除”按钮。2、搜索区域可对左侧列表进行筛选。3、左侧列表上方“全部/未选择”可快速切换源数据列表，便于更清晰的查看需要处理的“服务指令”。</span>
+    </div>
+    <DirectiveChooseCom ref="directiveChooseRef"></DirectiveChooseCom>
+  </div>
+  <!-- 第四步：选择目标机构 -->
+  <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
+        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: '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">
+        <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'" :excludeOrgCode="orgInfo[0]?.orgCode"
+          :allowMultipleSelection="true" :showChoose="true" @handleOrgDetail="handleDetail"
+          @handleOrgChoose="orgTargetChangedFunc" />
+      </a-col>
+    </a-row>
+  </div>
+  <ConfigServiceDirectiveListModal class="step-content" ref="configServiceDirectiveListModal" />
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, toRaw } from 'vue';
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
+import OrgListCom from '/@/views/synchronization/directive/orgCom/OrgListCom.vue';
+import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue';
+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 } from '/@/components/Table';
+import { syncDirective } from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api';
+
+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()
+const syncOrgs = ref([])
+
+function init(record: any) {
+
+}
+
+function handleDetail(record: any) {
+  configServiceDirectiveListModal.value.init(record);
+  configServiceDirectiveListModal.value.disableSubmit = true;
+}
+
+function changeStepVal(isAdd) {
+  if (isAdd) {
+    if (stepVal.value == 1 && orgInfo.value.length < 1) {
+      createMessage.warning('请选择源数据机构！');
+      return
+    }
+    if (stepVal.value == 2) {
+      if (toRaw(directiveChooseRef.value?.rightList).length == 0) {
+
+        createMessage.warning('请选择服务指令！');
+        return
+      } else {
+        leftList.value = [...directiveChooseRef.value?.rightList];
+      }
+    }
+
+    stepVal.value = stepVal.value + 1
+  } else {
+    stepVal.value = stepVal.value - 1
+  }
+}
+
+//源数据机构被选择/变更
+function orgSourceChangedFunc(orgInfo_) {
+  orgInfo.value = orgInfo_
+  directiveChooseRef.value?.controlShowJSCom()
+  targetOrgListComRef.value?.reload()
+  directiveChooseRef?.value?.init({ orgInfo: orgInfo.value[0] })
+}
+
+//目标机构被选择/变更
+function orgTargetChangedFunc(orgInfo_) {
+  syncOrgs.value = orgInfo_
+}
+
+watch(
+  () => stepVal.value,
+  (newstepVal, oldValue) => {
+    if (newstepVal == 2 && oldValue == 1) {
+      // targetOrgListComRef.value?.reload()
+      // directiveChooseRef?.value?.init({ orgInfo: orgInfo.value[0] })
+    }
+    if (newstepVal == 3) {
+      targetOrgListComRef.value?.checkAllOrEmpty(false)
+    }
+  }
+);
+
+//开始同步
+function syncFunc() {
+  if (!targetOrgListComRef.value?.selectedOrgs?.length) {
+    createMessage.warning('请选择业务平台')
+  } else {
+    syncDirective({
+      dataSourceCode: orgInfo.value[0].orgCode,
+      syncIds: leftList.value.map(d => d.id).join(','),
+      syncOrgCodes: syncOrgs.value.map(o => o.orgCode).join(','),
+    })
+    createMessage.success('已开始自动同步')
+    emit('closeModal')
+  }
+}
+
+defineExpose({
+  init,
+  stepVal,
+  changeStepVal,
+  syncFunc,
+});
+</script>
+
+<style lang="less" scoped>
+.step1-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 120px;
+}
+
+.step1-box {
+  background: #fff;
+  padding: 24px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+}
+
+.step1-icon {
+  font-size: 48px;
+  color: #1890FF;
+  margin-bottom: 16px;
+}
+
+.step1-heading {
+  font-size: 22px;
+  margin-bottom: 16px;
+  color: #333;
+}
+
+.step1-points {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: left;
+}
+
+.step1-points li {
+  font-size: 16px;
+  line-height: 1.8;
+  padding-left: 24px;
+  position: relative;
+  margin-bottom: 12px;
+}
+
+.step1-points li::before {
+  content: counter(item) ".";
+  counter-increment: item;
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-weight: bold;
+  color: #1890FF;
+}
+
+ul.step1-points {
+  counter-reset: item;
+}
+
+.step-content {
+  padding: 0 100px;
+}
+
+/* 步骤条样式 */
+:deep(.ant-steps) {
+  padding: 0;
+}
+
+:deep(.ant-steps-item) {
+  margin: 0;
+}
+</style>