修改样式
This commit is contained in:
parent
8f546e98fc
commit
a4c5ddc0c7
|
|
@ -5,88 +5,48 @@
|
|||
:disabled="loading">目标机构</a-button>
|
||||
</div>
|
||||
|
||||
<div class="table-card">
|
||||
<!-- 表头：两级 -->
|
||||
<div class="thead">
|
||||
<!-- 顶层 -->
|
||||
<div class="thead-top">
|
||||
<div class="th"></div>
|
||||
<div class="th"></div>
|
||||
<div class="th"></div>
|
||||
<div class="th"></div>
|
||||
<div class="th"></div>
|
||||
<div class="th th-org" style="grid-column:6 / span 2;">源机构</div>
|
||||
<div class="th th-org" style="grid-column:8 / span 2;">目标机构</div>
|
||||
</div>
|
||||
<!-- 次级 -->
|
||||
<div class="thead-sub">
|
||||
<div class="th">分类标签</div>
|
||||
<div class="th">服务类别</div>
|
||||
<div class="th">服务类型</div>
|
||||
<div class="th">服务指令</div>
|
||||
<div class="th">周期类型</div>
|
||||
|
||||
<div class="th th-name-sub">名称</div>
|
||||
<div class="th th-exist-sub">是否存在</div>
|
||||
|
||||
<div class="th th-name-sub">名称</div>
|
||||
<div class="th th-exist-sub">是否存在</div>
|
||||
</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>
|
||||
<a-table
|
||||
:columns="headChildColumns"
|
||||
:data-source="rows"
|
||||
bordered
|
||||
size="middle"
|
||||
:scroll="{ y: 640 }"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'ownOrgName'">
|
||||
{{ownOrgName}}
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'ownExist'">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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"
|
||||
|
|
@ -103,6 +63,7 @@
|
|||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { compareList } from '../ConfigServiceDirective.api';
|
||||
import { headChildColumns } from './ConfigServiceDirective.data';
|
||||
import OrgListCom from '/@/views/orgcom/OrgListCom.vue';
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -111,6 +72,8 @@ const props = defineProps({
|
|||
});
|
||||
const targetOrgInfo = ref('')//目标机构信息
|
||||
|
||||
|
||||
|
||||
type Row = {
|
||||
id?: string;
|
||||
instructionName?: string;
|
||||
|
|
@ -219,7 +182,7 @@ async function initData() {
|
|||
.thead-sub {
|
||||
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;
|
||||
|
|
@ -270,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 {
|
||||
|
|
|
|||
|
|
@ -167,3 +167,79 @@ export const superQuerySchema = {
|
|||
mp3File: { title: '语音文件', order: 18, view: 'file', type: 'string' },
|
||||
mp4File: { title: '视频文件', order: 19, view: 'file', type: 'string' },
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
//列表数据
|
||||
export const headChildColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '基础信息',
|
||||
children: [
|
||||
{
|
||||
title: '分类标签',
|
||||
align: 'center',
|
||||
dataIndex: 'instructionName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '服务类别',
|
||||
align: 'center',
|
||||
dataIndex: 'categoryName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '服务类型',
|
||||
align: 'center',
|
||||
dataIndex: 'typeName',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '服务指令',
|
||||
align: 'center',
|
||||
dataIndex: 'directiveName',
|
||||
},
|
||||
{
|
||||
title: '周期类型',
|
||||
align: 'center',
|
||||
dataIndex: 'cycleTypeName',
|
||||
width: 100,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
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,
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
];
|
||||
Loading…
Reference in New Issue