| | |
| | | <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"> |
| | |
| | | }" |
| | | defaultExpandAll |
| | | :treedata="listTreeData" |
| | | title-name="附件表" |
| | | title-name="业务表" |
| | | :show-more-operate="false" |
| | | :show-add="false" |
| | | :current-node-key="currentListID" |
| | |
| | | </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" |
| | |
| | | > |
| | | </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> |
| | |
| | | </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, |
| | | }); |
| | |
| | | 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'); |
| | |
| | | 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; |
| | | // }); |
| | | }), |
| | | }; |
| | | }); |
| | |
| | | } |
| | | }; |
| | | |
| | | const resetRight = () => { |
| | | showMode.value = DisplayModeType.List; |
| | | }; |
| | | |
| | | const handleClickNode = (data) => { |
| | | if (data.type === 'group') { |
| | | ElMessage.warning('请选择业务表'); |
| | |
| | | leftTreeRef.value?.treeRef.setCurrentKey(data.logicalId); |
| | | }); |
| | | currentNode.value = data; |
| | | resetRight(); |
| | | |
| | | setOrderMap(data); |
| | | getTableData(); |
| | | }; |
| | |
| | | |
| | | //#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); |
| | |
| | | .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; |
| | | } |
| | |
| | | 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; |
| | | }); |
| | |
| | | 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?) => { |