<template>
|
<el-dialog
|
class="limit-height"
|
:destroy-on-close="true"
|
v-model="dialogIsShow"
|
width="70%"
|
:close-on-click-modal="false"
|
@closed="closeDialog"
|
>
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon name="ele-Document" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span>查看业务表</span>
|
</div>
|
</template>
|
<div class="w100 h100">
|
<div class="h-full flex-column">
|
<ColFilter class="flex-0 ml-auto mb-2" :column-list="tableCheckData" />
|
<el-table v-loading="tableLoading" ref="draggableTableRef" class="flex-auto" border :data="tableData" highlight-current-row>
|
<el-table-column
|
v-for="item in visibleTableColumns"
|
:prop="item.name"
|
sortable
|
:key="item.name"
|
:label="item.title"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts" name="BusinessTablePreview">
|
import type { PropType } from 'vue';
|
import { computed, ref, watch } from 'vue';
|
// import TableSearch from './search/index.vue';
|
import type { Attach } from '../hook/useAttach';
|
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
|
const dialogIsShow = defineModel({
|
type: Boolean,
|
});
|
const props = defineProps({
|
data: {
|
type: Object as PropType<Attach>,
|
default: () => {},
|
},
|
});
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
tableData.value = [];
|
tableColumns.value = [];
|
};
|
|
//#region ====================== 指标管理表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
|
const tableColumns = ref([]);
|
|
const tableCheckData = computed(() => {
|
return tableColumns.value.map((item) => {
|
return {
|
prop: item.name,
|
label: item.title,
|
get isShow() {
|
return item.isShow;
|
},
|
set isShow(value) {
|
item.isShow = value;
|
},
|
};
|
});
|
});
|
|
const visibleTableColumns = computed(() => {
|
return tableColumns.value.filter((item) => item.isShow);
|
});
|
|
//#endregion
|
|
const getIndexMapItem = (columns) => {
|
return new Map<number, any>(
|
columns.map((item, index) => {
|
return [index, item];
|
})
|
);
|
};
|
|
//#region ====================== 查询 ======================
|
|
const parseRecordData = (values, columns) => {
|
const indexMapItem = getIndexMapItem(columns);
|
return (values || []).map((item, index) => {
|
const row = {} as any;
|
item?.forEach((item, index) => {
|
row[indexMapItem.get(index).name] = item;
|
});
|
return row;
|
});
|
};
|
|
//#endregion
|
watch(
|
() => dialogIsShow.value,
|
(val) => {
|
if (!val) return;
|
tableColumns.value = (props.data?.model?.columns || []).map((item) => {
|
return {
|
name: item,
|
title: item,
|
isShow: true,
|
};
|
});
|
tableData.value = parseRecordData(props.data?.model?.values || [], tableColumns.value);
|
}
|
);
|
</script>
|
<style scoped lang="scss">
|
.set-permission {
|
padding-block: 16px;
|
padding-block-end: 0;
|
}
|
.set-form {
|
display: block;
|
box-sizing: border-box;
|
height: 100%;
|
padding-block: 16px;
|
.set-form-item {
|
font-weight: 500;
|
color: #667085;
|
font-size: 14px;
|
}
|
}
|
|
:deep(.el-dialog__body) {
|
height: calc(90vh - 111px) !important;
|
}
|
</style>
|
<style lang="scss">
|
.limit-height {
|
.el-dialog__body {
|
height: calc(90vh - 111px) !important;
|
}
|
}
|
|
.yw-layout-main {
|
.el-card__body {
|
padding: 10px;
|
}
|
}
|
</style>
|
