初步对接

wujingjing

2025-03-03 254816a712847b099184d84ca8631a50fb32f39e

 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 ====================== 指标管理表格数据，table 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>