From 254816a712847b099184d84ca8631a50fb32f39e Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 03 三月 2025 15:24:09 +0800
Subject: [PATCH] 初步对接
---
src/components/chat/components/playBar/businessTable/index.vue | 204 +++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 174 insertions(+), 30 deletions(-)
diff --git a/src/components/chat/components/playBar/businessTable/index.vue b/src/components/chat/components/playBar/businessTable/index.vue
index 696efef..427474e 100644
--- a/src/components/chat/components/playBar/businessTable/index.vue
+++ b/src/components/chat/components/playBar/businessTable/index.vue
@@ -1,12 +1,19 @@
<template>
- <el-dialog :destroy-on-close="true" v-model="dialogIsShow" width="70%" :close-on-click-modal="false" @closed="closeDialog">
+ <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>
- <AHMContainer type="card">
+ <AHMContainer type="card" class="h100" v-loading="submitLoading">
<template #aside>
<!-- 鐩綍鏍� -->
<LeftTreeByMgr
@@ -20,7 +27,7 @@
}"
defaultExpandAll
:treedata="listTreeData"
- title-name="鍦烘櫙鍒楄〃"
+ title-name="闄勪欢琛�"
:show-more-operate="false"
:show-add="false"
:current-node-key="currentListID"
@@ -32,7 +39,7 @@
<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)" />
+ <TableSearch v-model="item.values" :filter="item.filter" @input="debounceSearch()" />
</el-form-item>
</el-form>
</template>
@@ -49,7 +56,14 @@
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
+ v-for="item in tableColumns"
+ :prop="item.name"
+ sortable="custom"
+ :key="item.name"
+ :label="item.title"
+ show-overflow-tooltip
+ >
</el-table-column>
</el-table>
</div>
@@ -81,8 +95,29 @@
const closeDialog = () => {
dialogIsShow.value = false;
};
-const submitFormValue = () => {
- emit('submit', tableData.value);
+const submitLoading = ref(false);
+const getSubmitData = async () => {
+ submitLoading.value = true;
+ await getUnGetData().finally(() => {
+ submitLoading.value = false;
+ });
+ const tables = listTreeData.value.map((item) => {
+ return {
+ title: item.title,
+ columns: item.columns.map((item) => {
+ return item.title;
+ }),
+ values: item.tableData.map((item) => {
+ return Object.values(item);
+ }),
+ };
+ });
+
+ return tables;
+};
+const submitFormValue = async () => {
+ const data = await getSubmitData();
+ emit('submit', data);
dialogIsShow.value = false;
};
//#region ====================== 宸︿晶鏍戞暟鎹紝tree init ======================
@@ -104,7 +139,7 @@
return {
...item,
// 鍒濆鏌ヨ鍊�
- value: '',
+ values: [''],
};
});
}
@@ -112,31 +147,47 @@
return treeData;
});
+/**
+ * 璁板綍 orderMap
+ */
+const setOrderMap = (node) => {
+ if (!node.orderMap) {
+ node.orderMap = new Map();
+ }
+};
+
const handleClickNode = (data) => {
nextTick(() => {
leftTreeRef.value?.treeRef.setCurrentKey(data.id);
});
currentNode.value = data;
+ setOrderMap(data);
getTableData();
};
const getListTreeData = async () => {
- const res = await attachApi.getAttachTableList();
+ treeLoading.value = true;
+ const res = await attachApi.getAttachTableList().finally(() => {
+ treeLoading.value = false;
+ });
listData.value = res.tables || [];
const firstListTreeNode = listTreeData.value[0];
if (firstListTreeNode) {
handleClickNode(firstListTreeNode);
} else {
- tableData.value = [];
currentNode.value = null;
}
};
//#endregion
//#region ====================== 鎸囨爣绠＄悊琛ㄦ牸鏁版嵁锛宼able init ======================
const tableLoading = ref(false);
-const tableData = ref([]);
+const tableData = computed(() => {
+ return currentNode.value?.tableData || [];
+});
const isDragStatus = ref(false);
-const tableColumns = ref([]);
+const tableColumns = computed(() => {
+ return currentNode.value?.columns || [];
+});
const getTableData = async () => {
// allTableData.value = (res.values || []).map((item) => {
// item.create_time = item.create_time?.slice(0, 10);
@@ -146,10 +197,21 @@
// const len = getLenById(allTableData.value, value.id, value);
// value.title = `${value.title} (${len})`;
// });
- tableColumns.value = currentNode.value.columns;
+ if (!currentNode.value.tableData) {
+ handleSearchInput();
+ }
};
//#endregion
-const indexMapItem = computed(() => {
+
+const getIndexMapItem = (columns) => {
+ return new Map<number, any>(
+ columns.map((item, index) => {
+ return [index, item];
+ })
+ );
+};
+
+const indexMapItem = computed<Map<number, any>>(() => {
return new Map(
tableColumns.value.map((item, index) => {
return [index, item];
@@ -157,41 +219,111 @@
);
});
//#region ====================== 鏌ヨ ======================
-const handleSearchInput = async (item) => {
- const params = {
- id: currentNode.value.id,
- } as any;
+const getFilterColumns = (node) => {
+ return node?.columns?.filter((item) => item.filter) as any[];
+};
+const filterColumns = computed(() => {
+ return getFilterColumns(currentNode.value);
+});
- if (filterColumns.value && filterColumns.value.length) {
- params.filter = filterColumns.value.map((item) => {
+const getSearchParams = (node) => {
+ const params = {
+ id: node.id,
+ } as any;
+ const filterColumns = getFilterColumns(node);
+ if (filterColumns && filterColumns.length) {
+ params.filter = filterColumns.map((item) => {
return {
col: item.name,
filter: item.filter,
- value: item.value,
+ values: item.values,
};
});
}
+ setOrderMap(node);
+ const orderMap = node.orderMap;
+ const orderList = Array.from(orderMap.entries()).map(([key, value]) => {
+ return {
+ col: key,
+ order: value,
+ };
+ });
+ if (orderList?.length > 0) {
+ params.order = orderList;
+ }
+ return params;
+};
- const res = await attachApi.queryAttachTableRecords(params);
- tableData.value = (res.values || []).map((item, index) => {
+const parseRecordData = (res, columns) => {
+ const indexMapItem = getIndexMapItem(columns);
+ return (res.values || []).map((item, index) => {
const row = {} as any;
-
item?.forEach((item, index) => {
- row[indexMapItem.value.get(index).name] = item;
+ row[indexMapItem.get(index).name] = item;
});
return row;
});
};
+const handleSearchItem = async (node, prop?, order?, column?) => {
+ const params = getSearchParams(node);
+ // 淇涓哄綋鍓嶈淇敼鐨� order
+ if (prop) {
+ // const foundItem = params.order.find((item) => item.col === prop);
+ // if (foundItem) {
+ // foundItem.order = order;
+ // }
+ // 鎺掑簭鍙細鏈変竴涓瓧娈�
+ params.order = [
+ {
+ col: prop,
+ order: order,
+ },
+ ];
+ }
+ tableLoading.value = true;
+ const res = await attachApi.queryAttachTableRecords(params).finally(() => {
+ tableLoading.value = false;
+ });
+ if (prop) {
+ const orderMap = node.orderMap;
+ orderMap.clear();
+ orderMap.set(prop, order);
+ column.order = getEleOrder(order);
+ }
+ node.tableData = parseRecordData(res, tableColumns.value);
+};
+
+const handleSearchInput = async (prop?, order?, column?) => {
+ handleSearchItem(currentNode.value, prop, order, column);
+};
+
+const getUnGetData = async () => {
+ const getDataPromiseList = [];
+ for (const item of listTreeData.value) {
+ if (!item.tableData) {
+ getDataPromiseList.push(handleSearchItem(item));
+ }
+ }
+ // 绛夊緟鎵�鏈夋暟鎹幏鍙栧畬鎴�
+ await Promise.all(getDataPromiseList);
+};
+
const debounceSearch = debounce(handleSearchInput, 400);
//#endregion
-
-const filterColumns = computed(() => {
- return tableColumns.value.filter((item) => item.filter) as any[];
-});
-const orderMap = new Map();
+const getEleOrder = (order) => {
+ if (order === 'DESC') {
+ return 'descending';
+ } else if (order === 'ASC') {
+ return 'ascending';
+ } else {
+ return '';
+ }
+};
const handleSortChange = ({ column, prop, order }) => {
+ setOrderMap(currentNode.value);
+ const orderMap = currentNode.value.orderMap;
// 鎭㈠鍘熺姸锛屾洿鏂板悗鍐嶆樉绀烘帓搴忕姸鎬�
const curOrder = orderMap.get(prop) ?? null;
column.order = curOrder;
@@ -204,6 +336,7 @@
} else {
sendOrder = '';
}
+ handleSearchInput(prop, sendOrder, column);
};
watch(
@@ -230,4 +363,15 @@
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;
+ }
+}
</style>
--
Gitblit v1.9.3