| | |
| | | ref="leftTreeRef" |
| | | :defaultProps="{ |
| | | id: 'group_id', |
| | | label: 'group_name', |
| | | label: 'label', |
| | | children: 'children', |
| | | }" |
| | | :treedata="listTreeData" |
| | |
| | | <template #header> |
| | | <el-form ref="queryFormRef" :inline="true" :model="queryParams"> |
| | | <el-form-item label="标题" prop="title"> |
| | | <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="标题" clearable @input="debounceQueryTable"/> |
| | | <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="标题" clearable @input="debounceQueryTable" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | |
| | | deleteCurrentRow(scope.row, '页面', supervisorAdminApi.deleteSupervisor, () => { |
| | | const foundIndex = tableData.findIndex((item) => item === scope.row); |
| | | foundIndex > -1 && tableData.splice(foundIndex, 1); |
| | | setCurrentLen(-1); |
| | | }); |
| | | } |
| | | " |
| | |
| | | |
| | | <script setup lang="ts"> |
| | | import { useDraggable } from '@vueuse/core'; |
| | | import { debounce, travelTree } from '/@/utils/util'; |
| | | import { debounce, deleteCurrentRow, travelTree } from '/@/utils/util'; |
| | | |
| | | import { computed, onMounted, ref } from 'vue'; |
| | | import { usePageDisplay } from '/@/hooks/usePageDisplay'; |
| | |
| | | //#endregion |
| | | |
| | | //#region ====================== 表格数据,table init ====================== |
| | | |
| | | const setCurrentLen = (offset: 1 | -1) => { |
| | | currentNode.value.label = `${currentNode.value.group_name} (${tableData.value.length})`; |
| | | const pId = currentNode.value.p_group_id; |
| | | if (pId) { |
| | | travelTree(listTreeData.value, (value) => { |
| | | if (value.group_id === pId) { |
| | | value.len += offset; |
| | | value.label = `${value.group_name} (${value.len})`; |
| | | return true; |
| | | } |
| | | }); |
| | | } |
| | | // 修改名称后,不知道为什么会失去 current 选中 |
| | | setTimeout(() => { |
| | | leftTreeRef.value?.treeRef.setCurrentKey(currentListID.value); |
| | | }, 0); |
| | | }; |
| | | const setListLen = () => { |
| | | travelTree(listTreeData.value, (value, index, array, parent) => { |
| | | const id = value.group_id; |
| | | const len = allTableData.value.filter( |
| | | (item) => item.group_id === id || value.children?.some((treeItem) => treeItem.group_id === item.group_id) |
| | | ).length; |
| | | value.len = len; |
| | | value.label = `${value.group_name} (${len})`; |
| | | }); |
| | | // 修改名称后,不知道为什么会失去 current 选中 |
| | | setTimeout(() => { |
| | | leftTreeRef.value?.treeRef.setCurrentKey(currentListID.value); |
| | | }, 0); |
| | | }; |
| | | const tableLoading = ref(false); |
| | | const tableData = ref([]); |
| | | const isDragStatus = ref(false); |
| | |
| | | |
| | | return item; |
| | | }); |
| | | setListLen(); |
| | | } |
| | | tableData.value = allTableData.value.filter((item) => item.group_id === currentListID.value || currentNode.value.children?.some(treeItem=>treeItem.group_id===item.group_id)); |
| | | tableData.value = allTableData.value.filter( |
| | | (item) => |
| | | item.group_id === currentListID.value || currentNode.value.children?.some((treeItem) => treeItem.group_id === item.group_id) |
| | | ); |
| | | }; |
| | | //#endregion |
| | | |
| | |
| | | const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => { |
| | | displayTableData.value = tableData.value; |
| | | }); |
| | | const debounceQueryTable = debounce(handleQueryTable,400) |
| | | const debounceQueryTable = debounce(handleQueryTable, 400); |
| | | //#endregion |
| | | |
| | | //#region ====================== 查询快捷键 ====================== |
| | |
| | | |
| | | const insertOpt = (newData) => { |
| | | tableData.value.unshift({ ...newData, published: SupervisorPublished.N }); |
| | | allTableData.value.unshift({ ...newData, published: SupervisorPublished.N }); |
| | | |
| | | setCurrentLen(1); |
| | | }; |
| | | //#endregion |
| | | |