<template>
|
<el-dialog :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>
|
<AHMContainer type="card">
|
<template #aside>
|
<!-- 目录树 -->
|
<LeftTreeByMgr
|
v-loading="treeLoading"
|
class="h100"
|
ref="leftTreeRef"
|
:defaultProps="{
|
id: 'id',
|
label: 'title',
|
children: 'children',
|
}"
|
defaultExpandAll
|
:treedata="listTreeData"
|
title-name="场景列表"
|
:show-more-operate="false"
|
:show-add="false"
|
:current-node-key="currentListID"
|
:node-icon="() => 'ele-Document'"
|
@click="handleClickNode"
|
>
|
</LeftTreeByMgr>
|
</template>
|
<template #header>
|
<el-form ref="queryFormRef" :inline="true" class="relative">
|
<el-form-item :label="item.title" prop="title" v-for="item in filterColumns as any" :key="item.name">
|
<TableSearch v-model="item.value" :filter="item.filter" @input="debounceSearch(item)" />
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #main>
|
<div class="w100 h100">
|
<div class="h-full">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
class="h100"
|
border
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:data="tableData"
|
highlight-current-row
|
@sort-change="handleSortChange"
|
>
|
<el-table-column v-for="item in tableColumns" :prop="item.name" :label="item.title" show-overflow-tooltip>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
</AHMContainer>
|
<template v-slot:footer>
|
<div>
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts" name="BusinessTable">
|
import { computed, nextTick, ref, watch } from 'vue';
|
import TableSearch from './search/index.vue';
|
import * as attachApi from '/@/api/attach';
|
import AHMContainer from '/@/components/layout/AHMContainer.vue';
|
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
|
import { useCompRef } from '/@/utils/types';
|
import { convertListToTree, debounce, travelTree } from '/@/utils/util';
|
const dialogIsShow = defineModel({
|
type: Boolean,
|
});
|
|
const emit = defineEmits(['submit']);
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
};
|
const submitFormValue = () => {
|
emit('submit', tableData.value);
|
dialogIsShow.value = false;
|
};
|
//#region ====================== 左侧树数据，tree init ======================
|
const leftTreeRef = useCompRef(LeftTreeByMgr);
|
const treeLoading = ref(false);
|
const listData = ref([]);
|
const currentListID = computed(() => currentNode.value?.id);
|
const currentNode = ref(null);
|
const listTreeData = computed(() => {
|
const treeData = convertListToTree(listData.value, {
|
ID: 'id',
|
ParentID: 'group',
|
Children: 'children',
|
});
|
|
travelTree(treeData, (value, index, array, parent) => {
|
if (value.columns) {
|
value.columns = value.columns.map((item) => {
|
return {
|
...item,
|
// 初始查询值
|
value: '',
|
};
|
});
|
}
|
});
|
|
return treeData;
|
});
|
const handleClickNode = (data) => {
|
nextTick(() => {
|
leftTreeRef.value?.treeRef.setCurrentKey(data.id);
|
});
|
currentNode.value = data;
|
getTableData();
|
};
|
const getListTreeData = async () => {
|
const res = await attachApi.getAttachTableList();
|
listData.value = res.tables || [];
|
const firstListTreeNode = listTreeData.value[0];
|
if (firstListTreeNode) {
|
handleClickNode(firstListTreeNode);
|
} else {
|
tableData.value = [];
|
currentNode.value = null;
|
}
|
};
|
//#endregion
|
//#region ====================== 指标管理表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
|
const tableColumns = ref([]);
|
const getTableData = async () => {
|
// allTableData.value = (res.values || []).map((item) => {
|
// item.create_time = item.create_time?.slice(0, 10);
|
// return item;
|
// });
|
// travelTree(listTreeData.value, (value, index, array, parent) => {
|
// const len = getLenById(allTableData.value, value.id, value);
|
// value.title = `${value.title} (${len})`;
|
// });
|
tableColumns.value = currentNode.value.columns;
|
};
|
//#endregion
|
const indexMapItem = computed(() => {
|
return new Map(
|
tableColumns.value.map((item, index) => {
|
return [index, item];
|
})
|
);
|
});
|
//#region ====================== 查询 ======================
|
const handleSearchInput = async (item) => {
|
const params = {
|
id: currentNode.value.id,
|
} as any;
|
|
if (filterColumns.value && filterColumns.value.length) {
|
params.filter = filterColumns.value.map((item) => {
|
return {
|
col: item.name,
|
filter: item.filter,
|
value: item.value,
|
};
|
});
|
}
|
|
const res = await attachApi.queryAttachTableRecords(params);
|
tableData.value = (res.values || []).map((item, index) => {
|
const row = {} as any;
|
|
item?.forEach((item, index) => {
|
row[indexMapItem.value.get(index).name] = item;
|
});
|
return row;
|
});
|
};
|
|
const debounceSearch = debounce(handleSearchInput, 400);
|
//#endregion
|
|
const filterColumns = computed(() => {
|
return tableColumns.value.filter((item) => item.filter) as any[];
|
});
|
const orderMap = new Map();
|
|
const handleSortChange = ({ column, prop, order }) => {
|
// 恢复原状，更新后再显示排序状态
|
const curOrder = orderMap.get(prop) ?? null;
|
column.order = curOrder;
|
// 请求 order
|
let sendOrder;
|
if (order === 'descending') {
|
sendOrder = 'DESC';
|
} else if (order === 'ascending') {
|
sendOrder = 'ASC';
|
} else {
|
sendOrder = '';
|
}
|
};
|
|
watch(
|
() => dialogIsShow.value,
|
(val) => {
|
if (!val) return;
|
getListTreeData();
|
}
|
);
|
</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;
|
}
|
}
|
</style>
|
