服务指令同步（非终版）

src/views/admin/orgapplyinfo/OrgApplyInfo.api.ts

@@ -12,6 +12,7 @@ enum Api {
   deleteBatch = '/admin/orgapplyinfo/orgApplyInfo/deleteBatch',
   importExcel = '/admin/orgapplyinfo/orgApplyInfo/importExcel',
   exportXls = '/admin/orgapplyinfo/orgApplyInfo/exportXls',
+  getOrgInfo = '/admin/orgapplyinfo/orgApplyInfo/getOrgInfo',
 }
 
 /**
@@ -31,6 +32,13 @@ export const getImportUrl = Api.importExcel;
  */
 export const list = (params) => defHttp.get({ url: Api.list, params });
 
+/**
+ * 获取机构详细信息（包含sys_depart信息）
+ * @param params orgCode部门编码 不传查所有
+ * @returns 
+ */
+export const getOrgInfo = (params) => defHttp.get({ url: Api.getOrgInfo, params });
+
 /**
  * 删除单个
  * @param params

src/views/synchronization/directive/orgCom/OrgListCom.vue

@@ -0,0 +1,166 @@
+<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"
+        style="padding: 8px;">
+        <a-card :class="{ 'selected-card': selectedOrgCodes.includes(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;">
+                <div>
+                  <span style="font-weight: bold;">{{ item.departName }}</span>
+                  <!-- 如果是已选择，显示"已选择" -->
+                  <span v-if="selectedOrgCodes.includes(item.orgCode)"
+                    style="color: green; font-size: 12px; margin-left: 8px;">已选择</span>
+                </div>
+              </a-col>
+              <a-col :span="2" style="text-align: center; padding-top: 4px;">
+                <div class="zxClass">{{ item.orgCode }}</div>
+              </a-col>
+            </a-row>
+          </template>
+          <p>加盟时间：{{ item.franchiseTime?.substring(0, 10) }}</p>
+          <p>机构负责人：{{ item.orgLeader }}</p>
+          <p>负责人电话：{{ item.orgLeaderPhone }}</p>
+          <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 class="tbClass"><img src="/@/assets/images/a14.png" style="width:20px;" /></span><br />
+              <span class="antTitle">详情</span>
+            </span>
+            <!-- 根据 showChoose 判断是否显示选择按钮 -->
+            <!-- <span v-if="showChoose" style="display:inline-block; cursor: pointer; margin-left: 20px;"
+              @click.stop="handleCardClick(item)">
+              <span class="tbClass"><img src="/@/assets/images/choose.png" style="width:20px;" /></span><br />
+              <span class="antTitle">选择</span>
+            </span> -->
+          </p>
+        </a-card>
+      </a-col>
+      <a-col v-if="orgTableList.total == 0">
+        <div style="margin: 30px auto;">
+          <a-empty />
+        </div>
+      </a-col>
+    </a-row>
+
+    <div
+      style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
+      <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" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="synchronization-directive2">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { Pagination } from 'ant-design-vue'
+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 }, // 新增多选控制
+})
+
+const emit = defineEmits(['handleOrgDetail', 'handleOrgChoose'])
+
+const orgTableList = ref<any>({ records: [], total: 0 })
+const queryParam = reactive<any>({})
+const pageParams = ref({ pageNo: 1, pageSize: 8 })
+
+// 当前选中的卡片 ID 数组
+const selectedOrgCodes = ref<string[]>([])
+
+/** 点击卡片选择 */
+function handleCardClick(item: any) {
+  if (props.showChoose) { // 判断是否可以选择
+    if (props.allowMultipleSelection) {
+      // 多选模式：点击时添加或移除该卡片
+      if (selectedOrgCodes.value.includes(item.orgCode)) {
+        selectedOrgCodes.value = selectedOrgCodes.value.filter(code => code !== item.orgCode)
+      } else {
+        selectedOrgCodes.value.push(item.orgCode)
+      }
+    } else {
+      // 单选模式：直接选中该卡片
+      selectedOrgCodes.value = [item.orgCode]
+    }
+    emit('handleOrgChoose', selectedOrgCodes.value)
+  }
+}
+
+/** 点击详情 */
+function handleDetail(item: any) {
+  emit('handleOrgDetail', item)
+}
+
+/** 数据加载 */
+function reload() {
+  queryParam.pageSize = pageParams.value.pageSize
+  queryParam.pageNo = pageParams.value.pageNo
+  queryParam.title = props.title
+  getOrgInfo(queryParam).then(res => {
+    orgTableList.value = res
+  })
+}
+
+/** 重置搜索条件 */
+function searchReset() {
+  queryParam.title = null
+  getOrgInfo(queryParam).then(res => {
+    orgTableList.value = res
+  })
+}
+
+// 初始化
+onMounted(() => {
+  reload()
+})
+
+defineExpose({
+  reload,
+  searchReset
+})
+</script>
+
+<style lang="less" scoped>
+.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 8px rgba(24, 144, 255, 0.3);
+}
+</style>

src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts

@@ -5,10 +5,19 @@ const { createConfirm } = useMessage();
 
 enum Api {
   list = '/services/serviceDirective/list',
+  listByDS = '/services/serviceDirective/listByDS',
+  queryById = '/services/serviceDirective/queryById',
 }
 
 /**
  * 列表接口
  * @param params
  */
-export const list = (params) => defHttp.get({ url: Api.list, params });
+export const list = (params) => defHttp.get({ url: Api.list, params });
+export const queryById = (params) => defHttp.get({ url: Api.queryById, params });
+
+/**
+ * 列表接口 - 变更数据源
+ * @param params
+ */
+export const listByDS = (params) => defHttp.get({ url: Api.listByDS, params });

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

@@ -8,26 +8,26 @@
           <!-- <a-col :lg="6">
             <a-form-item name="instructionTagId">
               <template #label><span title="分类标签">分类标签</span></template>
-              <j-dict-select-tag v-model:value="queryParam.instructionTagId" dictCode="instruction_tag"
-                :ignoreDisabled="true" placeholder="请选分类标签" allowClear />
-            </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"
-                :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`"
-                :ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
-            </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"
-                :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and category_id = ${queryParam.categoryId || -1} order by sort asc`"
-                placeholder="请选择服务类型" :ignoreDisabled="true" allowClear />
-            </a-form-item>
-          </a-col> -->
+<j-dict-select-tag v-model:value="queryParam.instructionTagId" dictCode="instruction_tag" :ignoreDisabled="true"
+  placeholder="请选分类标签" allowClear />
+</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"
+      :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`" :ignoreDisabled="true"
+      placeholder="请选择服务类别" allow-clear />
+  </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"
+      :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and category_id = ${queryParam.categoryId || -1} order by sort asc`"
+      placeholder="请选择服务类型" :ignoreDisabled="true" allowClear />
+  </a-form-item>
+</a-col> -->
           <a-col :lg="6">
             <a-form-item name="directiveName">
               <template #label><span title="服务指令">服务指令</span></template>
@@ -93,7 +93,7 @@ import { ref, reactive, onMounted } from 'vue';
 import { BasicTable, TableAction } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { columns, superQuerySchema } from './ConfigServiceDirective.data';
-import { list} from './ConfigServiceDirective.api';
+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';
@@ -109,7 +109,7 @@ const userStore = useUserStore();
 const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
   tableProps: {
     title: '服务指令',
-    api: list,
+    api: listByDS,
     columns,
     canResize: false,
     useSearchForm: false,
@@ -160,18 +160,18 @@ function searchReset() {
   reload();
 }
 
- 
 
-function init(record){
-console.log("🚀 ~ init ~ record:", record)
-queryParam.dataSourceCode = record.orgCode;
-console.log("🚀 ~ init ~ queryParam:", queryParam)
-reload();
+
+function init(record) {
+  console.log("🚀 ~ init ~ record:", record)
+  queryParam.dataSourceCode = record.orgCode;
+  console.log("🚀 ~ init ~ queryParam:", queryParam)
+  reload();
 }
 
-  defineExpose({
-    init,
-  });
+defineExpose({
+  init,
+});
 </script>
 
 <style lang="less" scoped>

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

@@ -0,0 +1,318 @@
+<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" dictCode="instruction_tag"
+                :ignoreDisabled="true" placeholder="请选分类标签" allowClear />
+            </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"
+                :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`"
+                :ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
+            </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"
+                :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and category_id = ${queryParam.categoryId || -1} order by sort asc`"
+                placeholder="请选择服务类型" :ignoreDisabled="true" allowClear />
+            </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 />
+            </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;">源数据</a-tag>
+        <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="columns" size="small" :scroll="{ y: '46vh' }">
+        </BasicTable>
+      </a-col>
+    </a-row>
+
+  </div>
+</template>
+
+<script lang="ts" name="serviceDirective-configServiceDirective" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { BasicTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { columns, 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 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,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    showTableSetting: false,
+    immediate: false,
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '20', '50', '100'],
+    },
+    beforeFetch: async (params) => {
+      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) {
+  queryParam.dataSourceCode = record.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({
+    dataSourceCode: queryParam.dataSourceCode,
+    pageNo: 1,
+    pageSize: -1,
+    instructionTagId: queryParam.instructionTagId,
+    categoryId: queryParam.categoryId,
+    typeId: queryParam.typeId,
+    directiveName: queryParam.directiveName,
+    izEnabled: queryParam.izEnabled
+  }).then(res => {
+    rightList.value = [...res.records];  // 将所有左侧数据移至右侧
+    leftList.value = [];
+
+  })
+}
+
+/**
+ * 全部移除，将右侧数据移回左侧
+ */
+function removeAll() {
+  leftList.value = [...rightList.value];  // 将右侧数据移回左侧
+  rightList.value = [];  // 清空右侧列表
+}
+
+defineExpose({
+  init,
+});
+</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>

src/views/synchronization/directive/syncList.vue

@@ -23,47 +23,9 @@
       </a-form>
     </div>
 
-    <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"
-        style="padding: 8px;">
-        <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"
-          :bodyStyle="{ padding: '24px 24px 4px 24px' }">
-          <template #title>
-            <a-row style="font-weight: normal;">
-              <a-col :span="22" style="font-size: 14px;padding-top: 4px;">
-                <div><span style="font-weight: bold;">{{ item.departName }}</span></div>
-              </a-col>
-              <a-col :span="2" style="text-align: center;padding-top: 4px;">
-                <div class="zxClass">{{ item.orgCode }}</div>
-              </a-col>
-            </a-row>
-          </template>
-          <p>加盟时间：{{ item.operationStartTime.substring(0, 10) }}</p>
-          <p>机构负责人：{{ item.createBy }}</p>
-          <p>负责人电话：{{ item.mobile }}</p>
-          <p class="ellipsis-one-lines" :title="item.address">机构地址：{{ item.address }}</p>
-          <a-divider />
-          <p style="text-align:center;">
-            <span style="display:inline-block;cursor: pointer;" @click="handleDetail(item)">
-              <span class="tbClass"><img src="../../../assets/images/a14.png" style="width:20px;" /></span><br />
-              <span class="antTitle">详情</span>
-            </span>
-          </p>
-        </a-card>
-      </a-col>
-      <a-col v-if="orgTableList.total == 0">
-        <div style="margin: 30px auto;">
-          <a-empty />
-        </div>
-      </a-col>
+    <OrgListCom ref="orgListComRef" :title="queryParam.title" @handleOrgDetail="handleDetail">
+    </OrgListCom>
 
-    </a-row>
-    <div
-      style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
-      <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" />
-    </div>
     <ConfigServiceDirectiveListModal ref="configServiceDirectiveListModal" />
     <SyncStepListModal ref="syncStepListModal" />
   </div>
@@ -72,12 +34,15 @@
 <script setup name="synchronization-directive2" lang="ts">
 import { ref, reactive, computed, onMounted } from 'vue'
 import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
-import { getOrgInfo } from '/@/api/common/api';
 // 以下为服务指令引用：
 import { list, asyncFunc, departList } from '@/views/services/serviceDirective/ConfigServiceDirective.api';
 import { Pagination } from 'ant-design-vue';
 import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue';
 import SyncStepListModal from '/@/views/synchronization/directive/syncStep/SyncStepListModal.vue';
+//机构信息
+import { getOrgInfo } from '/@/views/admin/orgapplyinfo/OrgApplyInfo.api';
+//机构列表
+import OrgListCom from '/@/views/synchronization/directive/orgCom/OrgListCom.vue'
 
 const formRef = ref();
 const configServiceDirectiveListModal = ref();
@@ -85,7 +50,7 @@ const syncStepListModal = ref();
 const orgTableList = ref<any>([]);
 const queryParam = reactive<any>({});
 const pageParams = ref({ pageNo: 1, pageSize: 8 })
-
+const orgListComRef = ref()
 
 const labelCol = reactive({
   xs: 24,
@@ -117,14 +82,14 @@ function handleDetail(record) {
  * 查询
  */
 function searchQuery() {
-  reload();
+  orgListComRef.value?.reload();
 }
 
 function reload() {
   //刷新数据
   queryParam.pageSize = pageParams.value.pageSize;
   queryParam.pageNo = pageParams.value.pageNo;
-  departList(queryParam).then(res => {
+  getOrgInfo(queryParam).then(res => {
     orgTableList.value = res;
   });
 }
@@ -133,9 +98,8 @@ function reload() {
  * 重置
  */
 function searchReset() {
-  formRef.value.resetFields();
-  //刷新数据
-  reload();
+  queryParam.title = null
+  orgListComRef.value?.searchReset()
 }
 
 // 自动请求并暴露内部方法

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

@@ -1,77 +1,184 @@
 <template>
   <div class="p-2" style="padding: 10px;">
-      <a-steps :current="1" style="margin: 40px 20px 20px 20px;width: 90%;margin-left: 5%;">
-        <!-- <template #progressDot="{ index, status, prefixCls }">
-          <a-popover>
-            <template #content>
-              <span>step {{ index }} status: {{ status }}</span>
-            </template>
-            <span :class="`${prefixCls}-icon-dot`" />
-          </a-popover>
-        </template> -->
-        <a-step title="第一步" description="同步服务指令用于各护理机构间服务指令的相互镜像同步"/>
-        <a-step title="第二步" description="请选择同步服务指令的源护理机构" />
-        <a-step title="第三步" description="请选择同步服务指令的目标护理机构" />
-        <a-step title="第四步" sub-title="同步服务指令" description="页面分左右两部分：左侧为源护理机构，右侧为目标护理机构；" />
-      </a-steps>
+    <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-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>操作指引：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>操作指引：</span>
+    </div>
+    <DirectiveChooseCom ref="directiveChooseRef"></DirectiveChooseCom>
+  </div>
+  <!-- 第四步：选择目标机构 -->
+  <div v-show="stepVal === 3">
+    <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、详情按钮：可查看对应平台现有服务指令。</span>
+    </div>
+    <OrgListCom class="step-content" ref="orgListComRef" :allowMultipleSelection="true" :showChoose="true"
+      @handleOrgDetail="handleDetail" @handleOrgChoose="orgTargetChangedFunc" />
+  </div>
+  <ConfigServiceDirectiveListModal class="step-content" ref="configServiceDirectiveListModal" />
 </template>
 
-<script lang="ts" name="serviceDirective-configServiceDirective" setup>
-import { ref, reactive, onMounted } from 'vue';
- 
+<script lang="ts" setup>
+import { ref, watch } 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';
 
-function init(record){
-console.log("🚀 ~ init ~ record:", record)
+const stepVal = ref(0);
+const configServiceDirectiveListModal = ref();
+const orgInfo = ref([])
+const { createMessage } = useMessage();
+const directiveChooseRef = ref()
+
+function init(record: any) {
+  console.log('init:', record);
 }
 
-  defineExpose({
-    init,
-  });
+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
+    }
+    stepVal.value = stepVal.value + 1
+  } else {
+    stepVal.value = stepVal.value - 1
+  }
+}
+
+//源数据机构被选择/变更
+function orgSourceChangedFunc(orgInfo_) {
+  orgInfo.value = orgInfo_
+}
+//目标机构被选择/变更
+function orgTargetChangedFunc(orgInfo_) {
+
+}
+
+watch(
+  () => stepVal.value,
+  (newstepVal) => {
+    if (newstepVal == 2) {
+      directiveChooseRef?.value?.init({ orgCode: orgInfo.value[0] })
+    }
+  }
+);
+
+defineExpose({
+  init,
+  stepVal,
+  changeStepVal,
+});
 </script>
 
 <style lang="less" scoped>
-.jeecg-basic-table-form-container {
+.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;
-
-  .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%;
-  }
+  margin: 0;
+  text-align: left;
 }
 
-audio::-webkit-media-controls-timeline {
-  display: none;
+.step1-points li {
+  font-size: 16px;
+  line-height: 1.8;
+  padding-left: 24px;
+  position: relative;
+  margin-bottom: 12px;
 }
 
-audio::-webkit-media-controls-current-time-display,
-audio::-webkit-media-controls-time-remaining-display {
-  display: none;
+.step1-points li::before {
+  content: counter(item) ".";
+  counter-increment: item;
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-weight: bold;
+  color: #1890FF;
 }
 
-.btnPrivate {
-  height: 34px;
-  margin-left: 4px;
+ul.step1-points {
+  counter-reset: item;
 }
-</style>
+
+.step-content {
+  padding: 0 100px;
+}
+
+/* 步骤条样式 */
+:deep(.ant-steps) {
+  padding: 0;
+}
+
+:deep(.ant-steps-item) {
+  margin: 0;
+}
+</style>

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

@@ -1,63 +1,97 @@
 <template>
-  <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :maskClosable="false">
-    <SyncStepList ref="registerForm"  v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></SyncStepList>
+  <j-modal :title="title" :visible="visible" :fullscreen="true" width="80vw" :bodyStyle="{ padding: 0 }"
+    :maskClosable="false" :keyboard="false" wrapClassName="modal-fullscreen" @cancel="handleCancel">
+    <template #footer>
+      <a-button @click="handleCancel">关闭</a-button>
+      <a-button @click="previousStep"
+        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>
+    </template>
+    <SyncStepList ref="registerForm" v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"
+      :fullscreen="true" style="height:100vh;" />
   </j-modal>
 </template>
 
 <script lang="ts" setup>
-  import { ref, nextTick, defineExpose , defineProps} from 'vue';
-  import SyncStepList from './SyncStepList.vue'
-  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
-  
-  const props = defineProps({
-    sysUrlValue: { type: String, default: '' },
+import { ref, nextTick, defineExpose, defineProps } from 'vue';
+import SyncStepList from './SyncStepList.vue';
+import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+
+const props = defineProps({
+  sysUrlValue: { type: String, default: '' },
+});
+const emit = defineEmits(['register', 'success']);
+
+const title = ref<string>('');
+const visible = ref<boolean>(false);
+const disableSubmit = ref<boolean>(false);
+const registerForm = ref<InstanceType<typeof SyncStepList>>();
+
+/**
+ * 编辑或初始化弹窗
+ */
+function init(record: any) {
+  title.value = '详情';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value?.init(record);
   });
-  const title = ref<string>('');
-  const visible = ref<boolean>(false);
-  const disableSubmit = ref<boolean>(false);
-  const registerForm = ref();
-  const emit = defineEmits(['register', 'success']);
+}
 
+/**
+ * 点击确定触发表单提交
+ */
+function handleOk() {
+  // 调用子组件的提交方法
+}
 
-  
-  /**
-   * 编辑
-   * @param record
-   */
-  function init(record) {
-    title.value = '详情';
-    visible.value = true;
-    nextTick(() => {
-      registerForm.value.init(record);
-    });
-  }
-  
+/**
+ * 子组件提交完成回调
+ */
+function submitCallback() {
+  visible.value = false;
+  emit('success');
+}
 
-  /**
-   * form保存回调事件
-   */
-  function submitCallback() {
-    handleCancel();
-    emit('success');
-  }
+/**
+ * 上一步
+ */
+function previousStep() {
+  registerForm.value?.changeStepVal(false)
+}
 
-  /**
-   * 取消按钮回调事件
-   */
-  function handleCancel() {
-    visible.value = false;
-  }
+/**
+ * 下一步
+ */
+function nextStep() {
+  registerForm.value?.changeStepVal(true)
+}
 
-  defineExpose({
-    init,
-    disableSubmit,
-  });
+/**
+ * 取消按钮回调
+ */
+function handleCancel() {
+  visible.value = false;
+}
+
+defineExpose({
+  init,
+  disableSubmit,
+});
 </script>
 
-<style lang="less">
-  /**隐藏样式-modal确定按钮 */
-  .jee-hidden {
-    display: none !important;
-  }
+<style lang="less" scoped>
+.modal-fullscreen :deep(.ant-modal) {
+  max-width: 100vw !important;
+  width: 100vw !important;
+  top: 0 !important;
+  margin: 0 !important;
+}
+
+.modal-fullscreen :deep(.ant-modal-body) {
+  padding: 0 !important;
+  height: 100vh !important;
+}
 </style>
-<style lang="less" scoped></style>