| | |
| | | <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 |
| | |
| | | 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" |
| | |
| | | </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> |
| | |
| | | <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" |
| | |
| | | </div> |
| | | </div> |
| | | <el-table |
| | | v-show="showMode === DisplayModeType.List" |
| | | v-show="showTable" |
| | | v-loading="tableLoading" |
| | | ref="draggableTableRef" |
| | | class="flex-auto" |
| | |
| | | <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); |
| | |
| | | }; |
| | | //#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; |
| | |
| | | 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; |
| | | }); |
| | | }), |
| | | }; |
| | | }); |
| | |
| | | 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; |
| | | }; |
| | |
| | | } |
| | | }; |
| | | |
| | | 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(); |
| | | }; |
| | |
| | | // 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; |
| | | } |
| | |
| | | const getSearchParams = (node) => { |
| | | const params = { |
| | | id: node.id, |
| | | limit:100 |
| | | } as any; |
| | | const filterColumns = getFilterColumns(node); |
| | | const unEmptyFilterColumns = getUnEmptyFilter(filterColumns); |
| | |
| | | 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?) => { |
| | |
| | | .limit-height { |
| | | .el-dialog__body { |
| | | height: calc(90vh - 111px) !important; |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | } |
| | | } |
| | | |