长者标签差异比对

src/views/elder/eldertag/ElderTagList.vue

@@ -47,8 +47,8 @@
         <a-button type="primary" @click="handleEditRep" preIcon="ant-design:plus-outlined"> 引用</a-button> -->
         <a-button type="primary" class="btnPrivate" @click="handleDirectiveMainOpen" v-show="isShowETM"
           preIcon="ant-design:profile-outlined">标准标签库</a-button>
-        <!-- <a-button type="primary" preIcon="ant-design:eye-outlined" v-show="ownOrgCode == mainOrgCode"
+        <a-button type="primary" preIcon="ant-design:eye-outlined" v-show="ownOrgCode == mainOrgCode"
-          @click="handleCompare">差异比对</a-button> -->
+          @click="handleCompare">差异比对</a-button>
         <a-button type="primary" preIcon="ant-design:eye-outlined" style="margin-right: 10px;"
           v-show="ownOrgCode == mainOrgCode" @click="handleLookNewDirectives">差异标签</a-button>
       </template>
@@ -96,7 +96,7 @@
 
     <!-- 差异比对 -->
     <a-drawer title="差异比对" width="80vw" :open="compareListOpen" @close="onCompareListClose"
-      :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '14px' }">
+      :footer-style="{ textAlign: 'right' }" :bodyStyle="{ padding: '0px' }">
       <template #footer>
         <a-button type="primary" @click="onCompareListClose" style="margin-right: 10px;">关闭</a-button>
       </template>

src/views/elder/eldertag/components/CompareElderTagList.vue

@@ -5,84 +5,48 @@
                 :disabled="loading">目标机构</a-button>
         </div>
 
-        <div class="table-card">
+        <a-table
-            <!-- 表头：两级 -->
+            :columns="headChildColumns"
-            <div class="thead">
+            :data-source="rows"
-                <!-- 顶层 -->
+            bordered
-                <div class="thead-top">
+            size="middle"
-                    <div class="th"></div>
+            :scroll="{  y: 640 }"
-                    <div class="th"></div>
+            :pagination="false"
-                    <div class="th"></div>
+        >
-                    <div class="th th-org" style="grid-column:4 / span 2;">源机构</div>
+            <template #bodyCell="{ column, text, record }">
-                    <div class="th th-org" style="grid-column:6 / span 2;">目标机构</div>
+                <template v-if="column.dataIndex === 'ownOrgName'">
-                </div>
+                    {{ownOrgName}}
-                <!-- 次级 -->
+                </template>
-                <div class="thead-sub">
+                <template v-else-if="column.dataIndex === 'ownExist'">
-                    <div class="th">标签类型</div>
+                    <div class="org-badge">
-                    <div class="th">标签名称</div>
+                        <svg v-if="text" class="icon check" viewBox="0 0 24 24" aria-hidden="true">
-                    <div class="th">标签说明</div>
+                            <path
-
+                                d="M20.285 6.709l-11.39 11.39-5.18-5.18 1.414-1.414 3.766 3.766 9.976-9.976z" />
-                    <div class="th th-name-sub">名称</div>
+                        </svg>
-                    <div class="th th-exist-sub">是否存在</div>
+                        <svg v-else class="icon cross" viewBox="0 0 24 24" aria-hidden="true">
-
+                            <path
-                    <div class="th th-name-sub">名称</div>
+                                d="M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.42 4.29 19.72 5.7 21.13 12 14.83 18.3 21.13 19.71 19.72 13.41 13.42 19.71 7.12z" />
-                    <div class="th th-exist-sub">是否存在</div>
+                        </svg>
-                </div>
-            </div>
-
-            <!-- 表体 -->
-            <div v-if="!targetOrgInfo && !loading" class="status">未选择目标机构</div>
-
-            <div v-else class="body-div">
-                <div v-if="loading" class="status">加载中…</div>
-                <div v-else-if="rows.length === 0" class="status">暂无数据</div>
-                <div v-else class="tbody">
-                    <div class="tr" v-for="item in rows" :key="item.id || item.directiveName || item.instructionName"
-                        :data-rank="rank(item)">
-                        <div class="td td-tag" :title="item.instructionName || '-'">{{ item.instructionName || '-' }}
-                        </div>
-                        <div class="td td-category" :title="item.categoryName || '-'">{{ item.categoryName || '-' }}
-                        </div>
-                        <div class="td td-type" :title="item.typeName || '-'">{{ item.typeName || '-' }}</div>
-                        <div class="td td-name" :title="item.directiveName || '-'">{{ item.directiveName || '-' }}</div>
-                        <div class="td td-cycle" :title="item.cycleTypeName || '-'">{{ item.cycleTypeName || '-' }}
-                        </div>
-
-                        <!-- 源机构 -->
-                        <div class="td td-org-name" :title="ownOrgName || '-'">{{ ownOrgName || '-' }}</div>
-                        <div class="td td-org-exist center" :title="item.ownExist ? '源机构已存在' : '源机构不存在'">
-                            <div class="org-badge">
-                                <svg v-if="item.ownExist" class="icon check" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path
-                                        d="M20.285 6.709l-11.39 11.39-5.18-5.18 1.414-1.414 3.766 3.766 9.976-9.976z" />
-                                </svg>
-                                <svg v-else class="icon cross" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path
-                                        d="M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.42 4.29 19.72 5.7 21.13 12 14.83 18.3 21.13 19.71 19.72 13.41 13.42 19.71 7.12z" />
-                                </svg>
-                            </div>
-                        </div>
-
-                        <!-- 目标机构 -->
-                        <div class="td td-org-name" :title="targetOrgInfo.comName || '-'">{{ targetOrgInfo.comName ||
-                            '-' }}</div>
-                        <div class="td td-org-exist center" :title="item.targetExist ? '目标机构已存在' : '目标机构不存在'">
-                            <div class="org-badge">
-                                <svg v-if="item.targetExist" class="icon check" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path
-                                        d="M20.285 6.709l-11.39 11.39-5.18-5.18 1.414-1.414 3.766 3.766 9.976-9.976z" />
-                                </svg>
-                                <svg v-else class="icon cross" viewBox="0 0 24 24" aria-hidden="true">
-                                    <path
-                                        d="M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.42 4.29 19.72 5.7 21.13 12 14.83 18.3 21.13 19.71 19.72 13.41 13.42 19.71 7.12z" />
-                                </svg>
-                            </div>
-                        </div>
                     </div>
-                </div>
+                </template>
-            </div>
+                <template v-else-if="column.dataIndex === 'own2OrgName'">
+                    {{targetOrgInfo.comName}}
+                </template>
+                <template v-else-if="column.dataIndex === 'targetExist'">
+                    <div class="org-badge">
+                        <svg v-if="text" class="icon check" viewBox="0 0 24 24" aria-hidden="true">
+                            <path
+                                d="M20.285 6.709l-11.39 11.39-5.18-5.18 1.414-1.414 3.766 3.766 9.976-9.976z" />
+                        </svg>
+                        <svg v-else class="icon cross" viewBox="0 0 24 24" aria-hidden="true">
+                            <path
+                                d="M18.3 5.71L12 12.01 5.7 5.71 4.29 7.12 10.59 13.42 4.29 19.72 5.7 21.13 12 14.83 18.3 21.13 19.71 19.72 13.41 13.42 19.71 7.12z" />
+                        </svg>
+                    </div>
+                </template>
+            </template>
+        </a-table>
          
-        </div>
     </div>
 
     <a-modal v-model:visible="targetOrgListVisible" title="请选择目标机构" width="90vw" @cancel="handleCancelTarget"
@@ -99,6 +63,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { compareList } from '../ElderTag.api';
+import { headChildColumns } from './ElderTag.data';
 import OrgListCom from '/@/views/orgcom/OrgListCom.vue';
 
 const props = defineProps({
@@ -107,6 +72,8 @@ const props = defineProps({
 });
 const targetOrgInfo = ref('')//目标机构信息
 
+
+
 type Row = {
     id?: string;
     instructionName?: string;
@@ -206,16 +173,16 @@ async function initData() {
 }
 
 .thead-top {
-    grid-template-columns: 1fr 2fr 3fr 2fr 1fr 2fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
     padding: 12px 14px 0px 14px;
     font-weight: 600;
     color: #374151;
 }
 
 .thead-sub {
-    grid-template-columns: 1fr 2fr 3fr 2fr 1fr 2fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
     padding: 0px 14px 8px 14px;
-    border-bottom: 1px solid #e6eef8;
+    // border-bottom: 1px solid #e6eef8;
     color: #374151;
     font-size: 13px;
     font-weight: 600;
@@ -232,7 +199,7 @@ async function initData() {
 }
 
 .tr {
-    grid-template-columns: 1fr 2fr 3fr 2fr 1fr 2fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr;
     padding: 12px 14px;
     background: #fff;
     border-bottom: 1px solid #eef6fb;
@@ -266,13 +233,14 @@ async function initData() {
 }
 
 .org-badge {
-    width: 36px;
+    // width: 36px;
     height: 36px;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fbfdff;
+    text-align: center;
 }
 
 .icon {

src/views/elder/eldertag/components/ElderTag.data.ts

@@ -37,6 +37,69 @@ export const columns: BasicColumn[] = [
   },
 ];
 
+//列表数据
+export const headChildColumns: BasicColumn[] = [
+  {
+    title: '基础信息',
+    children: [
+      {
+        title: '标签类型',
+        align: 'center',
+        dataIndex: 'type',
+      },
+      {
+        title: '标签名称',
+        align: 'center',
+        dataIndex: 'tagName',
+      },
+      {
+        title: '说明',
+        align: 'center',
+        dataIndex: 'describ',
+      },
+      {
+        title: '价格(元)',
+        align: 'center',
+        dataIndex: 'price',
+      },
+    ],
+  },
+  {
+    title: '源机构',
+    children: [
+      {
+        title: '名称',
+        align: 'center',
+        dataIndex: 'ownOrgName',
+        width: 200,
+      },
+      {
+        title: '是否存在',
+        align: 'center',
+        dataIndex: 'ownExist',
+        width: 100,
+      },
+    ],
+  },
+  {
+    title: '目标机构',
+    children: [
+      {
+        title: '名称',
+        align: 'center',
+        dataIndex: 'own2OrgName',
+        width: 200,
+      },
+      {
+        title: '是否存在',
+        align: 'center',
+        dataIndex: 'targetExist',
+        width: 100,
+      },
+    ],
+  },
+];
+
 // 高级查询数据
 export const superQuerySchema = {
   type: { title: '标签类型', order: 0, view: 'text', type: 'string' },