<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
defineOptions({ inheritAttrs: false, name: 'ExtraRelationInfo' });
|
const props = defineProps({
|
data: { default: () => ({}), type: Object },
|
extraOptions: { default: () => [], type: Array },
|
});
|
|
const indexColumn = { align: 'center', customRender: ({ index }) => index + 1, dataIndex: 'index', fixed: 'left', key: 'index', title: '序号', width: 50 };
|
|
const getExtraList = computed(() => {
|
const extraOptions = (props.extraOptions as any).filter((o) => !!o.value);
|
const list: any[] = [];
|
for (const e of extraOptions) {
|
if (e.value.includes('-')) {
|
const value = e.value.split('-')[0];
|
const childValue = e.value.split('-')[1];
|
const label = e.label.split('-')[0];
|
const childLabel = e.label.replace(`${label}-`, '');
|
const newItem = {
|
dataIndex: value,
|
jnpfKey: 'table',
|
label,
|
title: label,
|
value,
|
children: [indexColumn],
|
};
|
e.dataIndex = childValue;
|
e.title = childLabel;
|
e.width = 200;
|
if (!list.some((o) => o.value === value)) list.push(newItem);
|
for (const element of list) {
|
if (element.value === value) {
|
element.children.push(e);
|
break;
|
}
|
}
|
} else {
|
list.push(e);
|
}
|
}
|
return list;
|
});
|
</script>
|
|
<template>
|
<a-row v-if="getExtraList.length > 0" :gutter="15" class="extra-relation-info">
|
<template v-for="(item, index) in getExtraList" :key="index">
|
<a-col v-if="item.jnpfKey === 'table'" :span="24" class="extra-relation-info-cell-table">
|
<div class="extra-cell-label my-[6px]">{{ item.label }}</div>
|
<a-table :columns="item.children" :data-source="data[item.value] || []" :pagination="false" :scroll="{ y: '300px' }" class="flex-1" size="small">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex !== 'index'">{{ record[column.dataIndex] }}</template>
|
</template>
|
<template #emptyText>
|
<p class="leading-[30px]">暂无数据</p>
|
</template>
|
</a-table>
|
</a-col>
|
<a-col v-else :span="12" class="extra-relation-info-cell">
|
<div class="extra-cell-label">{{ item.label }}</div>
|
<div class="extra-cell-value">{{ data[item.value] || '' }}</div>
|
</a-col>
|
</template>
|
</a-row>
|
</template>
|
<style lang="scss" scoped>
|
.extra-relation-info {
|
.extra-relation-info-cell {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
margin-top: 10px;
|
overflow: hidden;
|
font-size: 14px;
|
line-height: 32px;
|
}
|
|
.extra-cell-label {
|
flex-shrink: 0;
|
font-size: 14px;
|
}
|
|
.extra-cell-value {
|
flex: 1;
|
min-width: 20px;
|
margin-left: 10px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
</style>
|
