<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,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" /> </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>