From 0864404b0da886a0961413f1710f204717f4f586 Mon Sep 17 00:00:00 2001
From: "1378012178@qq.com" <1378012178@qq.com>
Date: Mon, 21 Apr 2025 14:00:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=8C=87=E4=BB=A4=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=90=8C=E6=AD=A5=EF=BC=88=E4=B8=B4=E6=97=B6=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/success.svg                  |   1 +
 .../ConfigServiceDirectiveListCom.vue         |  20 +-
 src/views/synchronization/directive/index.vue | 345 +++++++++++++++---
 3 files changed, 323 insertions(+), 43 deletions(-)
 create mode 100644 src/assets/icons/success.svg

diff --git a/src/assets/icons/success.svg b/src/assets/icons/success.svg
new file mode 100644
index 0000000..c18877a
--- /dev/null
+++ b/src/assets/icons/success.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743498900165" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32026" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M491.290329 814.099433 172.772972 485.118769l81.634252-66.460668 184.189999 146.68992c75.488275-91.145883 243.049548-271.999904 474.234885-415.849126l19.469424 45.569872C720.102618 393.022235 546.356482 671.686932 491.290329 814.099433L491.290329 814.099433 491.290329 814.099433 491.290329 814.099433zM893.493667 454.874955c3.400446 20.849864 5.203512 42.24515 5.203512 64.047712 0 217.08213-175.971827 393.063167-393.06419 393.063167-217.055524 0-393.063167-175.981037-393.063167-393.063167 0-217.065757 176.007643-393.059074 393.063167-393.059074 52.423977 0 102.419647 10.275018 148.147108 28.90533L653.780097 76.133981c-47.586808-15.926738-97.265254-23.992437-148.147108-23.992437-62.9671 0-124.107599 12.342096-181.694155 36.7019-55.605436 23.538089-105.513102 57.198723-148.365072 100.008738-42.836621 42.850947-76.481905 92.748381-100.010785 148.365072C51.220568 394.814044 38.85289 455.934077 38.85289 518.922666c0 62.978357 12.367679 124.113739 36.710087 181.720761 23.528879 55.584969 57.173141 105.497753 100.010785 148.343583 42.850947 42.841737 92.759637 76.481905 148.365072 100.010785 57.586556 24.343431 118.732172 36.699853 181.694155 36.699853 62.989613 0 124.145461-12.356422 181.730994-36.699853 55.585993-23.528879 105.488543-57.162908 148.334373-100.010785 42.850947-42.845831 76.501348-92.759637 100.010785-148.343583 24.373107-57.605999 36.70497-118.742405 36.70497-181.720761 0-21.583574-1.436722-42.944068-4.328585-64.047712L893.493667 454.874955 893.493667 454.874955 893.493667 454.874955zM893.493667 454.874955" fill="#81C784" p-id="32027"></path></svg>
\ No newline at end of file
diff --git a/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveListCom.vue b/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveListCom.vue
index 8ee0356..b9a3dae 100644
--- a/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveListCom.vue
+++ b/src/views/serviceDirective/serviceDirective/ConfigServiceDirectiveListCom.vue
@@ -209,8 +209,26 @@ const closeVideoModal = () => {
   videoUrl.value = '';
 };
 
+// 子组件中添加以下方法
+const updateSelection = (selectedRecords: any[]) => {
+    selectedRowIds.value.clear();
+    allSelectedItems.value.clear();
+
+    selectedRecords.forEach(record => {
+        selectedRowIds.value.add(record.id);
+        allSelectedItems.value.set(record.id, record);
+    });
+
+    // 更新表格的选中状态
+    if (registerTable) {
+        registerTable.toggleRowSelection?.(Array.from(selectedRowIds.value), true);
+    }
+};
+
+// 暴露给父组件的方法
 defineExpose({
-  removeSelectedItem
+    removeSelectedItem,
+    updateSelection
 });
 </script>
 
diff --git a/src/views/synchronization/directive/index.vue b/src/views/synchronization/directive/index.vue
index ffabd08..7fefbe9 100644
--- a/src/views/synchronization/directive/index.vue
+++ b/src/views/synchronization/directive/index.vue
@@ -2,19 +2,77 @@
     <div class="p-2">
         <a-card @click="toggleSearchStatus = true" :class="{ 'base-con-class': toggleSearchStatus == false }">
             <a-row>
-                <a-col :span="23">
-                    <span>机构信息</span>
-                </a-col>
-                <a-divider v-show="toggleSearchStatus" />
-                <a-col :span="24" v-show="toggleSearchStatus">
-                    <span>筛选条件及功能操作按钮</span>
-                    <a-form></a-form>
+                <a-col :span="24">
+                    <span class="base-info-label">机构信息:</span>
+                    <span v-if="!orgData" class="base-info-dn" style="color: red;"> 请先选择机构</span>
+                    <template v-else>
+                        <span class="base-info-dn" style="margin-left: 10px;"> {{ orgData?.departName }}</span>
+                        <a-button type="primary" size="small" @click.stop="handleResetOrg" style="margin-left: 10px;">
+                            <span class="base-info-dn">重新选择</span>
+                        </a-button>
+                    </template>
                 </a-col>
             </a-row>
+            <a-row>
+                <a-col :span="24" v-show="toggleSearchStatus && !!orgData">
+                    <a-row :gutter="16">
+                        <a-col :span="8">
+                            <div class="org-info-item">
+                                <span class="label">机构编码：</span>
+                                <span class="value">{{ orgData?.orgCode || '-' }}</span>
+                            </div>
+                        </a-col>
+                        <a-col :span="8">
+                            <div class="org-info-item">
+                                <span class="label">运营时间：</span>
+                                <span class="value">
+                                    {{ orgData?.operationStartTime || '-' }}
+                                    至
+                                    {{ orgData?.operationEndTime || '-' }}
+                                </span>
+                            </div>
+                        </a-col>
+                        <a-col :span="8">
+                            <div class="org-info-item">
+                                <span class="label">合同时间：</span>
+                                <span class="value">
+                                    {{ orgData?.contractStartTime || '-' }}
+                                    至
+                                    {{ orgData?.contractEndTime || '-' }}
+                                </span>
+                            </div>
+                        </a-col>
+                        <a-col :span="8">
+                            <div class="org-info-item">
+                                <span class="label">电话：</span>
+                                <span class="value">{{ orgData?.mobile || '-' }}</span>
+                            </div>
+                        </a-col>
+                        <a-col :span="8">
+                            <div class="org-info-item">
+                                <span class="label">传真：</span>
+                                <span class="value">{{ orgData?.fax || '-' }}</span>
+                            </div>
+                        </a-col>
+                        <a-col :span="8">
+                            <div class="org-info-item">
+                                <span class="label">地址：</span>
+                                <span class="value">{{ orgData?.address || '-' }}</span>
+                            </div>
+                        </a-col>
+                    </a-row>
+                </a-col>
+            </a-row>
+            <a-divider v-show="toggleSearchStatus" />
+            <a-col :span="24" v-show="toggleSearchStatus">
+                <span>筛选条件及功能操作按钮</span>
+                <a-form></a-form>
+            </a-col>
         </a-card>
     </div>
-    <div class="p-2">
-        <a-card>
+
+    <div class="p-2" style="margin-top: -10px;">
+        <a-card v-show="!orgSelectedCon">
             <a-row>
                 <a-col :span="5" :push="19">
                     <a-radio-group v-model:value="splitVal" button-style="solid" size="small"
@@ -88,11 +146,53 @@
                 </a-col>
             </a-row>
         </a-card>
+
+        <a-card v-show="orgSelectedCon">
+            <div class="org-cards-container">
+                <a-row :gutter="16">
+                    <a-col :span="8" v-for="org in orgTable" :key="org.id">
+                        <a-card :title="org.departName" class="org-card" :class="{ 'selected': org.id == orgData?.id }"
+                            hoverable @click="handleOrgSelected(org)">
+                            <div class="org-info-item">
+                                <span class="label">机构编码：</span>
+                                <span class="value">{{ org.orgCode || '-' }}</span>
+                            </div>
+                            <div class="org-info-item">
+                                <span class="label">运营时间：</span>
+                                <span class="value">{{ org.operationStartTime || '-' }} 至 {{ org.operationEndTime || '-'
+                                }}</span>
+                            </div>
+                            <div class="org-info-item">
+                                <span class="label">合同时间：</span>
+                                <span class="value">{{ org.contractStartTime || '-' }} 至 {{ org.contractEndTime || '-'
+                                }}</span>
+                            </div>
+                            <div class="org-info-item">
+                                <span class="label">电话：</span>
+                                <span class="value">{{ org.mobile || '-' }}</span>
+                            </div>
+                            <div class="org-info-item">
+                                <span class="label">传真：</span>
+                                <span class="value">{{ org.fax || '-' }}</span>
+                            </div>
+                            <div class="org-info-item">
+                                <span class="label">地址：</span>
+                                <span class="value">{{ org.address || '-' }}</span>
+                            </div>
+                        </a-card>
+                    </a-col>
+                </a-row>
+            </div>
+        </a-card>
+
+        <a-card v-show="orgSelectedCon && (!orgTable || orgTable?.length == 0)">
+            <a-empty description="暂无数据" :image="simpleImage" />
+        </a-card>
     </div>
 
     <a-modal v-model:visible="showVideoModal" title="视频播放" :footer="null" @cancel="closeVideoModal"
         :bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }">
-        <video controls style="width: 100%; max-height: 70vh; display: block; margin: 0 auto;">
+        <video controls style="width: 100%; max-height: '70vh'; display: block; margin: 0 auto;">
             <source :src="videoUrl">
             您的浏览器不支持视频播放。
         </video>
@@ -100,42 +200,28 @@
 </template>
 
 <script lang="ts" name="synchronization-directive" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import ConfigServiceDirectiveListCom from '@/views/serviceDirective/serviceDirective/ConfigServiceDirectiveListCom.vue'
+import { list } from '@/views/serviceDirective/serviceDirective/ConfigServiceDirective.api';
 import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
-import { render } from '/@/utils/common/renderUtils';
+import { queryDepartTreeSync } from '/@/api/common/api';
+import { Empty } from 'ant-design-vue';
+import { Modal } from 'ant-design-vue';
+import { useMessage } from "/@/hooks/web/useMessage";
 
+const { createMessage } = useMessage();
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
 const toggleSearchStatus = ref<boolean>(true);
 const splitVal = ref<string>('sc1sed1');
 const sourceScreenSpan = ref(12);
 const selectedScreenSpan = ref(12);
-
-function splitScreenChanged(val) {
-    let v_ = val.target.value;
-    if (v_ == 'sc') {
-        sourceScreenSpan.value = 24;
-        selectedScreenSpan.value = 0;
-    }
-    if (v_ == 'sc2sed1') {
-        sourceScreenSpan.value = 16;
-        selectedScreenSpan.value = 8;
-    }
-    if (v_ == 'sc1sed1') {
-        sourceScreenSpan.value = 12;
-        selectedScreenSpan.value = 12;
-    }
-    if (v_ == 'sc1sed2') {
-        sourceScreenSpan.value = 8;
-        selectedScreenSpan.value = 16;
-    }
-    if (v_ == 'sed') {
-        sourceScreenSpan.value = 0;
-        selectedScreenSpan.value = 24;
-    }
-}
-
+const orgTable = ref([]);
+const orgData = ref(null);
+const showVideoModal = ref(false);
+const videoUrl = ref('');
 const selectedItems = ref(new Map<string | number, any>());
 const listComRef = ref();
+const orgSelectedCon = ref(true)
 
 const selectedColumns = [
     {
@@ -220,19 +306,40 @@ const selectedColumns = [
     }
 ];
 
+// 原有方法保持不变...
+const splitScreenChanged = (val) => {
+    let v_ = val.target.value;
+    if (v_ == 'sc') {
+        sourceScreenSpan.value = 24;
+        selectedScreenSpan.value = 0;
+    }
+    if (v_ == 'sc2sed1') {
+        sourceScreenSpan.value = 16;
+        selectedScreenSpan.value = 8;
+    }
+    if (v_ == 'sc1sed1') {
+        sourceScreenSpan.value = 12;
+        selectedScreenSpan.value = 12;
+    }
+    if (v_ == 'sc1sed2') {
+        sourceScreenSpan.value = 8;
+        selectedScreenSpan.value = 16;
+    }
+    if (v_ == 'sed') {
+        sourceScreenSpan.value = 0;
+        selectedScreenSpan.value = 24;
+    }
+};
+
 const handleSelectChange = (items: Map<string | number, any>) => {
     selectedItems.value = new Map(items);
 };
 
 const handleRemoveFromRight = (key: string | number) => {
-    console.log("🌊 ~ handleRemoveFromRight ~ selectedItems.value:", selectedItems.value)
     selectedItems.value.delete(key);
-    listComRef.value?.removeSelectedItem?.(key); // 添加了额外的安全调用
+    listComRef.value?.removeSelectedItem?.(key);
 };
 
-const showVideoModal = ref(false);
-const videoUrl = ref('');
-
 const openVideoModal = (url: string) => {
     videoUrl.value = getFileAccessHttpUrl(url);
     showVideoModal.value = true;
@@ -242,6 +349,85 @@ const closeVideoModal = () => {
     showVideoModal.value = false;
     videoUrl.value = '';
 };
+
+const handleOrgSelected = async (org) => {
+    if (!!orgData.value && orgData.value.id != org.id) {
+        Modal.confirm({
+            title: '变更机构',
+            content: '是否变更机构',
+            okText: '确认',
+            cancelText: '取消',
+            onOk: async () => {
+                try {
+                    const res = await list({ dataSourceCode: org.orgCode });
+                    console.log("🌊 ~ list ~ res:", res);
+
+                    // 获取已选择的数据
+                    const selectedIds = new Set(selectedItems.value.keys());
+
+                    // 过滤掉已选择的数据
+                    const newRecords = res.records.filter(record => !selectedIds.has(record.id));
+
+                    // 更新右侧列表数据
+                    selectedItems.value.clear(); // 清空已选择的数据
+                    newRecords.forEach(record => {
+                        selectedItems.value.set(record.id, record); // 将新查询到的数据添加到已选择列表中
+                    });
+
+                    // 更新机构数据并切换视图
+                    orgData.value = org;
+                    orgSelectedCon.value = false;
+
+                    // 更新左侧列表的选中状态
+                    updateLeftListSelection(newRecords);
+                } catch (err) {
+                    createMessage.error('机构数据查询失败');
+                }
+            },
+        });
+    } else {
+        try {
+            const res = await list({ dataSourceCode: org.orgCode });
+            console.log("🌊 ~ list ~ res:", res);
+
+            // 获取已选择的数据
+            const selectedIds = new Set(selectedItems.value.keys());
+
+            // 过滤掉已选择的数据
+            const newRecords = res.records.filter(record => !selectedIds.has(record.id));
+
+            // 更新右侧列表数据
+            selectedItems.value.clear(); // 清空已选择的数据
+            newRecords.forEach(record => {
+                selectedItems.value.set(record.id, record); // 将新查询到的数据添加到已选择列表中
+            });
+
+            // 更新机构数据并切换视图
+            orgData.value = org;
+            orgSelectedCon.value = false;
+
+            // 更新左侧列表的选中状态
+            updateLeftListSelection(newRecords);
+        } catch (err) {
+            createMessage.error('机构数据查询失败');
+        }
+    }
+};
+
+// 更新左侧列表的选中状态
+const updateLeftListSelection = (newRecords: any[]) => {
+    listComRef.value?.updateSelection?.(Array.from(selectedItems.value.values()));
+};
+
+const handleResetOrg = () => {
+    orgSelectedCon.value = true
+}
+
+onMounted(() => {
+    queryDepartTreeSync().then(res => {
+        orgTable.value = res;
+    });
+});
 </script>
 
 <style lang="less" scoped>
@@ -266,4 +452,79 @@ const closeVideoModal = () => {
         padding: 8px !important;
     }
 }
+
+/* 新增的机构卡片样式 */
+.org-cards-container {
+    max-height: 66vh;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.org-card {
+    margin-bottom: 16px;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+
+    &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+        background: radial-gradient(circle at center,
+                #a7d7ff 0%,
+                #b8e1ff 70%,
+                #d1e5ff 100%);
+    }
+
+    :deep(.ant-card-head) {
+        border-bottom: 1px solid #f0f0f0;
+        padding: 0 16px;
+        min-height: 48px;
+
+        .ant-card-head-title {
+            padding: 12px 0;
+            font-weight: 500;
+        }
+    }
+
+    :deep(.ant-card-body) {
+        padding: 16px;
+    }
+}
+
+.org-info-item {
+    display: flex;
+    margin-bottom: 12px;
+    font-size: 13px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    .label {
+        font-weight: bold;
+        font-size: 13px;
+    }
+
+    .value {
+        color: #333;
+        word-break: break-all;
+    }
+}
+
+.base-info-label,
+.base-info-dn {
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.org-card-choosed {
+    background-color: red;
+}
+
+.selected {
+    background: url("@/assets/icons/success.svg") no-repeat;
+    background-position: calc(100% - 5px) calc(100% - 5px);
+    background-size: auto 40%;
+    transition: none !important;
+}
 </style>
\ No newline at end of file