指令同步（临时版）

2025-07-24 15:38:03 +08:00 · 2025-07-24 15:38:03 +08:00 · 09ffd9c027
parent 00c55e83be
commit 09ffd9c027
3 changed files with 95 additions and 38 deletions
--- 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>

--- 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>

--- 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,