wujingjing
2025-03-10 0159386060edb946f29b5adcd9659dbfac06d6e1
src/components/chat/components/playBar/businessTable/index.vue
@@ -10,10 +10,18 @@
      <template #header>
         <div style="color: #fff">
            <SvgIcon name="ele-Document" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
            <span>业务表关联</span>
            <span>选择业务表数据</span>
         </div>
      </template>
      <AHMContainer type="card" class="h100" v-loading="submitLoading">
      <div class="flex-0 mb-3 flex items-center gap-2 justify-between font-bold">
         <div class="">请勾选下方的业务表,按条件筛选数据</div>
         <!-- bug -->
         <!-- <div class="flex items-center gap-2">
            <p>已选择 {{ checkedCount }} 张业务表,共 {{ totalRecordCount }} 条记录</p>
            <el-button link type="primary" @click="clearSelected">清空</el-button>
         </div> -->
      </div>
      <AHMContainer class="flex-auto" type="card" v-loading="submitLoading">
         <template #aside>
            <!-- 目录树 -->
            <LeftTreeByMgr
@@ -26,9 +34,10 @@
                  label: 'title',
                  children: 'children',
               }"
               @check="handleCheck"
               defaultExpandAll
               :treedata="listTreeData"
               title-name="附件表"
               :show-title="false"
               :show-more-operate="false"
               :show-add="false"
               :current-node-key="currentListID"
@@ -39,7 +48,7 @@
         </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">
               <el-form-item :label="item.title" prop="title" v-for="item in filterColumns as any" :key="item.name" class="items-center">
                  <TableSearch v-model="item.values" :filter="item.filter" @input="debounceSearch()" />
               </el-form-item>
            </el-form>
@@ -50,6 +59,7 @@
                  <div class="flex-0 flex-items-center flex-wrap">
                     <div class="ml-auto space-x-2 flex-items-center">
                        <DisplayMode
                           v-if="isChart"
                           :order="modeChangeOrder"
                           v-model="showMode"
                           :modeTypeMap="displayModeTypeMap"
@@ -59,7 +69,7 @@
                     </div>
                  </div>
                  <el-table
                     v-show="showMode === DisplayModeType.List"
                     v-show="showTable"
                     v-loading="tableLoading"
                     ref="draggableTableRef"
                     class="flex-auto"
@@ -102,25 +112,60 @@
<script setup lang="ts" name="BusinessTable">
import { ElMessage } from 'element-plus';
import { computed, nextTick, ref, watch } from 'vue';
import { DisplayModeType, displayModeTypeMap } from '../../../chatComponents/summaryCom/components/recordSet/components/types';
import ChartDisplay from './ChartDisplay.vue';
import TableSearch from './search/index.vue';
import * as attachApi from '/@/api/attach';
import DisplayMode from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/DisplayMode.vue';
import AHMContainer from '/@/components/layout/AHMContainer.vue';
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue';
import { useCompRef } from '/@/utils/types';
import { convertListToTree, debounce, travelTree } from '/@/utils/util';
import { DisplayModeType } from '../../../chatComponents/summaryCom/components/recordSet/components/types';
import { displayModeTypeMap } from '../../../chatComponents/summaryCom/components/recordSet/components/types';
import DisplayMode from '/@/components/chat/chatComponents/summaryCom/components/recordSet/components/DisplayMode.vue';
import ChartDisplay from './ChartDisplay.vue';
const dialogIsShow = defineModel({
   type: Boolean,
});
const checkedNodes = ref([]);
const clearSelected = () => {
   leftTreeRef.value?.treeRef.setCheckedKeys([]);
   checkedNodes.value = [];
};
const checkedItemNodes = computed(() => {
   return checkedNodes.value.filter((item) => item.type === 'item');
});
const checkedCount = computed(() => {
   return checkedItemNodes.value.length;
});
const totalRecordCount = computed(() => {
   return checkedItemNodes.value.reduce((acc, item) => acc + (item.tableData?.length ?? 0), 0);
});
const resetBusinessTable = () => {
   checkedNodes.value = [];
};
const emit = defineEmits(['submit']);
const closeDialog = () => {
   dialogIsShow.value = false;
   resetBusinessTable();
};
const handleCheck = async (data, obj) => {
   checkedNodes.value = obj?.checkedNodes ?? [];
   await getUnGetData(checkedItemNodes.value);
   if (data.type === 'item') {
      handleClickNode(data);
   }
};
const isChart = computed(() => {
   return !!currentNode.value?.is_chart;
});
const showTable = computed(() => {
   return !isChart.value || (isChart.value && showMode.value === DisplayModeType.List);
});
//#region ====================== 模式切换 ======================
const showMode = ref(DisplayModeType.List);
@@ -136,9 +181,7 @@
};
//#endregion
const submitLoading = ref(false);
const getSubmitData = async () => {
   const checkedList = leftTreeRef.value?.treeRef.getCheckedNodes().filter((item) => item.type === 'item');
const getSubmitData = async (checkedList: any[]) => {
   submitLoading.value = true;
   await getUnGetData(checkedList).finally(() => {
      submitLoading.value = false;
@@ -148,16 +191,14 @@
      return {
         title: item.title,
         columns: item.columns
            // .filter((item) => item.isShow)
            .filter((item) => item.isShow)
            .map((item) => {
               return item.title;
            }),
         values: item.tableData.map((item) => {
            return Object.values(item);
            // .filter((item, index) => {
            //    return indexMapItem.get(index).isShow;
            // });
            return Object.values(item).filter((item, index) => {
               return indexMapItem.get(index).isShow;
            });
         }),
      };
   });
@@ -165,7 +206,12 @@
   return tables;
};
const submitFormValue = async () => {
   const data = await getSubmitData();
   const checkedList = leftTreeRef.value?.treeRef.getCheckedNodes().filter((item) => item.type === 'item');
   if (!checkedList?.length) {
      ElMessage.warning('请勾选业务表!');
      return;
   }
   const data = await getSubmitData(checkedList);
   emit('submit', data);
   dialogIsShow.value = false;
};
@@ -229,6 +275,10 @@
   }
};
const resetRight = () => {
   showMode.value = DisplayModeType.List;
};
const handleClickNode = (data) => {
   if (data.type === 'group') {
      ElMessage.warning('请选择业务表');
@@ -238,6 +288,8 @@
      leftTreeRef.value?.treeRef.setCurrentKey(data.logicalId);
   });
   currentNode.value = data;
   resetRight();
   setOrderMap(data);
   getTableData();
};
@@ -330,13 +382,10 @@
         // values 不能为空
      })
      .filter((item) => {
         return item.values.every((item) => !!item);
         if (item.filter === 'like') {
            return item.values.every((item) => !!item);
         } else if (item.filter === 'time_range') {
            item.values = ['2025-02-11 00:07:00', '2025-02-11 01:09:00'];
            console.log('🚀 ~ item.filter:', item.filter);
            return !!item.values?.some((item) => !!item);
         } else {
            return true;
         }
@@ -347,6 +396,7 @@
const getSearchParams = (node) => {
   const params = {
      id: node.id,
      limit:100
   } as any;
   const filterColumns = getFilterColumns(node);
   const unEmptyFilterColumns = getUnEmptyFilter(filterColumns);
@@ -373,8 +423,10 @@
   const indexMapItem = getIndexMapItem(columns);
   return (res.values || []).map((item, index) => {
      const row = {} as any;
      item?.forEach((item, index) => {
         row[indexMapItem.get(index).name] = item;
      item?.forEach((item, index, array) => {
         if (indexMapItem.get(index)) {
            row[indexMapItem.get(index).name] = item;
         }
      });
      return row;
   });
@@ -410,7 +462,7 @@
      orderMap.set(prop, order);
      column.order = getEleOrder(order);
   }
   node.tableData = parseRecordData(res, tableColumns.value);
   node.tableData = parseRecordData(res, node.columns ?? []);
};
const handleSearchInput = async (prop?, order?, column?) => {
@@ -491,6 +543,9 @@
.limit-height {
   .el-dialog__body {
      height: calc(90vh - 111px) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
   }
}