You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
22 KiB
578 lines
22 KiB
4 months ago
|
<template>
|
||
|
|
<div class="ns-view">
|
||
|
|
<ns-page-header class="ns-page-header">
|
||
|
|
<template #title>
|
||
|
|
<div class="title" @click="onBack">
|
||
|
|
<!-- <left-outlined style="color: rgba(0, 0, 0, 0.4)" /> {{ title }} -->
|
||
|
|
<ns-icon name="left" /> <div class="text">{{ title }}</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #extra>
|
||
|
|
<template v-for="item in getActions" :key="item.name">
|
||
|
|
<template v-if="item.children">
|
||
|
|
<template v-if="getDropdownActions(item.children).length > 0">
|
||
|
|
<a-dropdown :trigger="['hover']" :dropMenuList="item.children">
|
||
|
|
<a class="ant-dropdown-link" @click.prevent>
|
||
|
|
{{ item.label }}
|
||
|
|
<CaretDownOutlined />
|
||
|
|
</a>
|
||
|
|
<template #overlay>
|
||
|
|
<a-menu>
|
||
|
|
<a-menu-item
|
||
|
|
style="padding: 2px 5px"
|
||
|
|
v-for="itemChild in getDropdownActions(item.children)"
|
||
|
|
:key="itemChild.name"
|
||
|
|
@click="itemChild.finalHandle(data, itemChild.name)">
|
||
|
|
<a-button type="link" :disabled="itemChild.dynamicDisabled">
|
||
|
|
{{ itemChild.label }}
|
||
|
|
</a-button>
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<ns-button
|
||
|
|
:type="item.type || 'default'"
|
||
|
|
:danger="item.danger"
|
||
|
|
:disabled="item.dynamicDisabled"
|
||
|
|
@click="item.finalHandle(data, item.name)">
|
||
|
|
<ns-v-node :content="item.label" />
|
||
|
|
</ns-button>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</ns-page-header>
|
||
|
|
<div class="ns-detail-content">
|
||
|
|
<Skeleton
|
||
|
|
active
|
||
|
|
v-for="(detailGroup, index) in getDetail"
|
||
|
|
:key="index"
|
||
|
|
:loading="loading"
|
||
|
|
:paragraph="detailGroup.SkeletonParagraphProps"
|
||
|
|
:title="SkeletonTitleProps">
|
||
|
|
<div class="ns-detail">
|
||
|
|
<a-descriptions>
|
||
|
|
<template #title>
|
||
|
|
<div class="descriptions-title" v-if="detailGroup.title">
|
||
|
|
<span>{{ detailGroup.title }}</span>
|
||
|
|
<div class="titleFloor"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-if="detailGroup.items">
|
||
|
|
<template v-for="(item, index) in detailGroup.items" :key="index">
|
||
|
|
<a-descriptions-item v-bind="item" v-if="item.ifShow">
|
||
|
|
<!--默认-->
|
||
|
|
|
||
|
|
<template v-if="!item.type">
|
||
|
|
<span class="ns-detail-text">{{ item.value ? item.value : '-' }}</span>
|
||
|
|
</template>
|
||
|
|
<!--富文本-->
|
||
|
|
<template v-if="item.type == 'html'">
|
||
|
|
<div class="ns-detail-html" v-html="item.value"></div>
|
||
|
|
</template>
|
||
|
|
<!--链接-->
|
||
|
|
|
||
|
|
<template v-if="item.type == 'link'">
|
||
|
|
<a class="ns-detail-link" target="_blank" :href="item.value">发票链接 </a>
|
||
|
|
</template>
|
||
|
|
<!--图片 值为数组则为图片列表 可继续扩展-->
|
||
|
|
|
||
|
|
<template v-if="item.type === 'image'">
|
||
|
|
<template v-if="typeof item.value == 'object'">
|
||
|
|
<div
|
||
|
|
class="ns-detail-image-list"
|
||
|
|
v-for="src in item.value"
|
||
|
|
:key="src"
|
||
|
|
style="display: inline-block; margin: 0 5px 5px 0">
|
||
|
|
<a-image
|
||
|
|
:width="100"
|
||
|
|
v-if="src"
|
||
|
|
:src="src"
|
||
|
|
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<a-image
|
||
|
|
class="ns-detail-image"
|
||
|
|
:width="64"
|
||
|
|
v-if="item.value"
|
||
|
|
:src="item.value"
|
||
|
|
fallback="data:image/png;base64,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" />
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!--表格-->
|
||
|
|
<template v-else-if="item.type === 'table'">
|
||
|
|
<ns-basic-table
|
||
|
|
:scroll="{ x: '100%' }"
|
||
|
|
class="ns-detail-table"
|
||
|
|
:dataSource="dataRef[item.props.listField]"
|
||
|
|
:columns="item.props.columns"
|
||
|
|
:pagination="false"
|
||
|
|
:rowKey="item.props.rowKey">
|
||
|
|
<template #bodyCell="data" v-if="!Object.keys($slots).includes('bodyCell')">
|
||
|
|
<template v-if="data.column.textEllipsis">
|
||
|
|
<!-- :style="{ width: `${data.column.width}px` }" -->
|
||
|
|
<span class="tool-tips">
|
||
|
|
<ns-tooltip
|
||
|
|
placement="top"
|
||
|
|
v-if="
|
||
|
|
data.column.customRender
|
||
|
|
? data.column.customRender(data)
|
||
|
|
: data.record[data.column.dataIndex]
|
||
|
|
">
|
||
|
|
<template #title>
|
||
|
|
<span>{{
|
||
|
|
data.column.customRender
|
||
|
|
? data.column.customRender(data)
|
||
|
|
: data.record[data.column.dataIndex] || '-'
|
||
|
|
}}</span>
|
||
|
|
</template>
|
||
|
|
<span class="text-ellipsis">{{
|
||
|
|
data.column.customRender
|
||
|
|
? data.column.customRender(data)
|
||
|
|
: data.record[data.column.dataIndex] || '-'
|
||
|
|
}}</span>
|
||
|
|
</ns-tooltip>
|
||
|
|
<span class="text-ellipsis" v-else> - </span>
|
||
|
|
</span>
|
||
|
|
</template>
|
||
|
|
<template v-if="data.column.edit">
|
||
|
|
<ns-table-cell
|
||
|
|
:value="data.text"
|
||
|
|
:record="data.record"
|
||
|
|
:column="data.column"
|
||
|
|
:index="data.index" />
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</ns-basic-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<!--表格-->
|
||
|
|
<template v-else-if="item.type === 'NsViewListTable'">
|
||
|
|
<NsViewListTable
|
||
|
|
class="ns-detail-NsViewListTable"
|
||
|
|
v-bind="item.props.tableConfig" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-else-if="item.type === 'map'">
|
||
|
|
<NsMapV2 :value="item['value']" :viewOnly="true" />
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template v-for="slot in Object.keys($slots)" :key="slot">
|
||
|
|
<div v-if="item.type === slot" :style="item.style" :class="`ns-detail-${slot}`">
|
||
|
|
<slot :name="slot" v-bind="item || {}"> </slot>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</a-descriptions-item>
|
||
|
|
</template>
|
||
|
|
</template>
|
||
|
|
</a-descriptions>
|
||
|
|
</div>
|
||
|
|
</Skeleton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { computed, defineComponent, ref, watch, PropType, reactive } from 'vue';
|
||
|
|
import { http } from '/nerv-lib/util/http';
|
||
|
|
import { useRoute } from 'vue-router';
|
||
|
|
import { cloneDeep, get, isFunction, isUndefined } from 'lodash-es';
|
||
|
|
import { Skeleton } from 'ant-design-vue';
|
||
|
|
import { LeftOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { Action, useAction } from '/nerv-lib/use';
|
||
|
|
import { useNavigate } from '/nerv-lib/use/use-navigate';
|
||
|
|
import { any } from 'vue-types';
|
||
|
|
export interface DetailItem {
|
||
|
|
label: string;
|
||
|
|
name: string;
|
||
|
|
value?: string;
|
||
|
|
ifShow?: Boolean | Function;
|
||
|
|
format?: Function;
|
||
|
|
type?: string; // 现支持image
|
||
|
|
class?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface DetailGroup {
|
||
|
|
title: string;
|
||
|
|
items: Array<DetailItem>;
|
||
|
|
}
|
||
|
|
interface ColumnActions {
|
||
|
|
back: Boolean;
|
||
|
|
actions: Action[];
|
||
|
|
}
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'NsViewDetail',
|
||
|
|
props: {
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: '查看',
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
type: Array as PropType<DetailGroup[]>,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
api: {
|
||
|
|
type: String,
|
||
|
|
require: true,
|
||
|
|
},
|
||
|
|
headActions: {
|
||
|
|
type: Object as PropType<ColumnActions>,
|
||
|
|
default: () => ({
|
||
|
|
actions: [],
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
dataHandle: Function,
|
||
|
|
customDataApi: {
|
||
|
|
type: Function,
|
||
|
|
},
|
||
|
|
requersConfig: {
|
||
|
|
type: any,
|
||
|
|
},
|
||
|
|
customBack: {
|
||
|
|
type: String || Function,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: { Skeleton, LeftOutlined },
|
||
|
|
setup(props) {
|
||
|
|
const { navigateBackV2: navigateBack } = useNavigate();
|
||
|
|
const SkeletonTitleProps = ref({
|
||
|
|
width: 150,
|
||
|
|
});
|
||
|
|
const route = useRoute();
|
||
|
|
const dataRef = ref();
|
||
|
|
const getData = computed(() => {
|
||
|
|
return {
|
||
|
|
...route.query,
|
||
|
|
...route.params,
|
||
|
|
dataRef: dataRef,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
let loading = ref<boolean>(true);
|
||
|
|
|
||
|
|
function request() {
|
||
|
|
const { query } = route;
|
||
|
|
|
||
|
|
if (props.customDataApi) {
|
||
|
|
props.customDataApi(props.api, query).then((res) => {
|
||
|
|
dataRef.value = res.data;
|
||
|
|
loading.value = false;
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
http.get(props.api, query, props.requersConfig).then((res) => {
|
||
|
|
dataRef.value = props.dataHandle ? props.dataHandle(res.data) : res.data;
|
||
|
|
loading.value = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
request();
|
||
|
|
|
||
|
|
const getDetail = computed(() => {
|
||
|
|
const detail = cloneDeep(props.detail);
|
||
|
|
return (detail as Array<DetailGroup>).map((group: DetailGroup) => {
|
||
|
|
const SkeletonWidth = [];
|
||
|
|
for (let i = 0; i < group.items.length; i++) {
|
||
|
|
if (group.items[i].type === 'table') {
|
||
|
|
SkeletonWidth.push('80%');
|
||
|
|
} else {
|
||
|
|
SkeletonWidth.push('30%');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const { title, items } = group;
|
||
|
|
return {
|
||
|
|
title: title,
|
||
|
|
items: items.map((item) => {
|
||
|
|
if (!loading.value) {
|
||
|
|
const { ifShow } = item;
|
||
|
|
item.value = get(dataRef.value, item.name);
|
||
|
|
item.ifShow = isFunction(ifShow)
|
||
|
|
? ifShow(dataRef.value)
|
||
|
|
: isUndefined(ifShow)
|
||
|
|
? true
|
||
|
|
: ifShow;
|
||
|
|
if (item.format) {
|
||
|
|
item.value = item.format(item.value, dataRef.value);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return item;
|
||
|
|
}),
|
||
|
|
SkeletonParagraphProps: {
|
||
|
|
rows: items.length,
|
||
|
|
width: SkeletonWidth,
|
||
|
|
},
|
||
|
|
SkeletonTitleProps: {
|
||
|
|
width: 150,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
//支持自定义按钮
|
||
|
|
const { transformAction, filterActionNoAuth } = useAction();
|
||
|
|
const getActions = computed(() => {
|
||
|
|
let actions = cloneDeep(props.headActions.actions);
|
||
|
|
actions = actions
|
||
|
|
.filter((action: Action) => {
|
||
|
|
return filterActionNoAuth(action, getData.value);
|
||
|
|
})
|
||
|
|
.map((action) => {
|
||
|
|
return transformAction(action, getData.value);
|
||
|
|
});
|
||
|
|
return actions;
|
||
|
|
});
|
||
|
|
const getDropdownActions = (actions) => {
|
||
|
|
actions = actions.map((action) => {
|
||
|
|
return transformAction(action, getData.value);
|
||
|
|
});
|
||
|
|
return actions;
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
getDetail,
|
||
|
|
loading,
|
||
|
|
dataRef,
|
||
|
|
SkeletonTitleProps,
|
||
|
|
getActions,
|
||
|
|
getDropdownActions,
|
||
|
|
navigateBack,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
onBack() {
|
||
|
|
//debugger;
|
||
|
|
|
||
|
|
if (this.customBack) {
|
||
|
|
this.customBack();
|
||
|
|
} else {
|
||
|
|
this.navigateBack();
|
||
|
|
}
|
||
|
|
// this.$router.go(-1);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.ns-view {
|
||
|
|
min-height: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #e5ebf0;
|
||
|
|
}
|
||
|
|
.ns-detail-content {
|
||
|
|
border-top: 16px solid #e5ebf0;
|
||
|
|
padding: 16px 21px;
|
||
|
|
background: #fff;
|
||
|
|
height: calc(100% - 50px);
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-skeleton-paragraph) {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-skeleton-paragraph li:nth-child(n)) {
|
||
|
|
display: block;
|
||
|
|
margin-right: 4%;
|
||
|
|
margin-top: 16px;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-skeleton-paragraph li:nth-child(3n + 3)) {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-skeleton-content) {
|
||
|
|
padding: 0 8px 10px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-descriptions-item-label) {
|
||
|
|
color: rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-descriptions-item-label),
|
||
|
|
:deep(.ant-descriptions-item-content) {
|
||
|
|
line-height: 22px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-descriptions-view) {
|
||
|
|
padding-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-descriptions-item) {
|
||
|
|
padding-right: 20px;
|
||
|
|
|
||
|
|
&:nth-child(2n) {
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:nth-child(3n) {
|
||
|
|
padding-left: 20px;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.descriptions-title {
|
||
|
|
&:after {
|
||
|
|
content: '';
|
||
|
|
width: 75px;
|
||
|
|
height: 7px;
|
||
|
|
display: block;
|
||
|
|
background: linear-gradient(90deg, @primary-color 0%, #fff 82.67%);
|
||
|
|
margin-left: 2px;
|
||
|
|
margin-top: -2px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ns-page-header {
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
padding: 7px 16px !important;
|
||
|
|
width: calc(100% + 32px);
|
||
|
|
margin-left: -16px;
|
||
|
|
.title {
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 18px !important;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.text {
|
||
|
|
margin-left: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ns-detail {
|
||
|
|
border-bottom: 1px solid #ecedef;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
border-bottom-width: 0;
|
||
|
|
}
|
||
|
|
&:first-child {
|
||
|
|
:deep(.ant-descriptions-header) {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-descriptions-header) {
|
||
|
|
margin-top: 12px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
|
||
|
|
.ant-descriptions-title {
|
||
|
|
line-height: 16px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-image) {
|
||
|
|
width: 64px;
|
||
|
|
height: 64px;
|
||
|
|
img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ns-detail-html {
|
||
|
|
:deep(table) {
|
||
|
|
border-top: 1px solid #ffffff;
|
||
|
|
border-left: 1px solid #ffffff;
|
||
|
|
|
||
|
|
:deep(p) {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #898e91;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(th) {
|
||
|
|
border-right: 1px solid #ffffff;
|
||
|
|
font-size: 13px;
|
||
|
|
padding-top: 5px;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
font-weight: normal;
|
||
|
|
background: #eff0f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(td) {
|
||
|
|
border-top: 1px solid #ffffff;
|
||
|
|
border-right: 1px solid #ffffff;
|
||
|
|
padding-top: 5px;
|
||
|
|
padding-bottom: 5px;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #606060;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
:deep(text) {
|
||
|
|
border-bottom: 1px solid #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
background: rgba(240, 242, 245, 0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.ns-detail-content {
|
||
|
|
.ns-detail-table {
|
||
|
|
:deep(.ns-basic-table) {
|
||
|
|
padding-top: 0;
|
||
|
|
.ant-table-wrapper {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.ns-detail-NsViewListTable {
|
||
|
|
background-color: #fff !important;
|
||
|
|
:deep(.ns-table-search) {
|
||
|
|
border-top: 0;
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
:deep(.ns-table-header) {
|
||
|
|
// margin-bottom: 16px;
|
||
|
|
padding-top: 0;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
:deep(.ns-table-main) {
|
||
|
|
border-top: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ns-detail-tableConfig) {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-descriptions-row > td) {
|
||
|
|
padding-bottom: 8px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ns-detail-tablefullcontent) {
|
||
|
|
.ant-descriptions-item-content {
|
||
|
|
width: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-ellipsis {
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: top;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
.tool-tips {
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 0;
|
||
|
|
word-wrap: break-word;
|
||
|
|
word-break: break-word;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|