<template>
|
<slot name="title"></slot>
|
<PortraitTable v-bind="portraitTableProps" :label-width="labelWidth"> </PortraitTable>
|
<div class="enclosure-list-title">附件列表</div>
|
<ProTableV2
|
:table-data="annexList"
|
:columns="CommonAnnexTableColumns"
|
:operation-btns="operationListBtns"
|
:show-pagination="false"
|
:show-no-data="false"
|
:auto-height="false"
|
:show-table-column-setting="false"
|
:table-props="{ maxHeight: '400px' }"
|
:column-render-map="columnsRenderProps"
|
>
|
</ProTableV2>
|
</template>
|
|
<script setup lang="ts" generic="TAnnexItem">
|
import { downloadFileByUrl } from '@bole-core/core';
|
import { CommonAnnexTableColumns } from '@/constants';
|
import { ProTableV2, ProTableV2Props } from '@bole-core/components';
|
|
defineOptions({
|
name: 'PortraitTableWithAttachment',
|
});
|
|
type Props = {
|
annexList: TAnnexItem[];
|
customDownLoad?: (row: TAnnexItem) => Promise<any>;
|
labelWidth?: string;
|
portraitTableProps: any;
|
columnsRenderProps?: ProTableV2Props['columnRenderMap'];
|
downloadFileKey?: keyof TAnnexItem;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
labelWidth: '180px',
|
columnsRenderProps: () => ({}),
|
downloadFileKey: 'url' as any,
|
});
|
|
const operationListBtns = [
|
{
|
data: {
|
enCode: 'downloadBtn',
|
name: '下载',
|
},
|
emits: {
|
onClick: (row) => handleDownload(row),
|
},
|
},
|
];
|
|
function handleDownload(row: TAnnexItem) {
|
if (props.customDownLoad) {
|
props.customDownLoad(row);
|
} else {
|
downloadFileByUrl(row[props.downloadFileKey] as any);
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.enclosure-list-title {
|
padding: 16px 0;
|
font-size: 14px;
|
color: getCssVar('text-color', 'primary');
|
line-height: 19px;
|
}
|
</style>
|
