wujingjing
2025-03-05 c56ba92667b2b5dded272fb60ad0c2af4983cd43
src/components/chat/components/playBar/businessTable/index.vue
@@ -10,7 +10,7 @@
      <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">
@@ -28,7 +28,7 @@
               }"
               defaultExpandAll
               :treedata="listTreeData"
               title-name="附件表"
               title-name="业务表"
               :show-more-operate="false"
               :show-add="false"
               :current-node-key="currentListID"
@@ -39,16 +39,28 @@
         </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>
         </template>
         <template #main>
            <div class="w100 h100">
               <div class="h-full flex-column">
                  <ColFilter class="flex-0 ml-auto mb-2" :column-list="tableCheckData" />
               <div class="h-full flex-column gap-2">
                  <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"
                           @change="displayModeChange"
                        />
                        <ColFilter class="flex-0 ml-auto" :column-list="tableCheckData" />
                     </div>
                  </div>
                  <el-table
                     v-show="showTable"
                     v-loading="tableLoading"
                     ref="draggableTableRef"
                     class="flex-auto"
@@ -67,6 +79,14 @@
                     >
                     </el-table-column>
                  </el-table>
                  <template v-if="isRendered">
                     <ChartDisplay
                        class="flex-auto"
                        v-show="showMode === DisplayModeType.Chart"
                        :table-schema="currentNode"
                        :records="tableData"
                     />
                  </template>
               </div>
            </div>
         </template>
@@ -81,15 +101,19 @@
</template>
<script setup lang="ts" name="BusinessTable">
import { ElMessage } from 'element-plus';
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 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 { ElMessage } from 'element-plus';
import ColFilter from '/@/components/table/colFilter/ColFilter.vue';
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,
});
@@ -98,6 +122,28 @@
const closeDialog = () => {
   dialogIsShow.value = false;
};
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);
const modeChangeOrder = [DisplayModeType.List, DisplayModeType.Chart];
const isRendered = ref(false);
const displayModeChange = (val: DisplayModeType) => {
   if (val === DisplayModeType.Chart) {
      nextTick(() => {
         isRendered.value = true;
      });
   }
};
//#endregion
const submitLoading = ref(false);
const getSubmitData = async () => {
   const checkedList = leftTreeRef.value?.treeRef.getCheckedNodes().filter((item) => item.type === 'item');
@@ -111,14 +157,16 @@
      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;
            // });
         }),
      };
   });
@@ -190,6 +238,10 @@
   }
};
const resetRight = () => {
   showMode.value = DisplayModeType.List;
};
const handleClickNode = (data) => {
   if (data.type === 'group') {
      ElMessage.warning('请选择业务表');
@@ -199,6 +251,8 @@
      leftTreeRef.value?.treeRef.setCurrentKey(data.logicalId);
   });
   currentNode.value = data;
   resetRight();
   setOrderMap(data);
   getTableData();
};
@@ -275,7 +329,7 @@
//#region ====================== 查询 ======================
const getFilterColumns = (node) => {
   return node?.columns?.filter((item) => item.filter && item.isShow) as any[];
   return node?.columns?.filter((item) => item.filter) as any[];
};
const filterColumns = computed(() => {
   return getFilterColumns(currentNode.value);
@@ -293,6 +347,8 @@
      .filter((item) => {
         if (item.filter === 'like') {
            return item.values.every((item) => !!item);
         } else if (item.filter === 'time_range') {
            return !!item.values?.some((item) => !!item);
         } else {
            return true;
         }
@@ -329,8 +385,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;
   });
@@ -366,7 +424,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?) => {