| | |
| | | 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 /> |
| | | <el-input v-model="queryParams.title" style="width: 226.4px" placeholder="标题" clearable @input="debounceQueryTable" /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <!-- <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button> --> |
| | | <el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button> |
| | | <el-button icon="ele-Plus" @click="openOptDlg()"> 添加 </el-button> |
| | | </el-form-item> |
| | |
| | | class="flex-auto" |
| | | border |
| | | :row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'" |
| | | :data="showPageList" |
| | | :data="displayTableData" |
| | | highlight-current-row |
| | | > |
| | | <template v-for="item in columnList" :key="item.prop"> |
| | |
| | | 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, deleteCurrentRow, travelTree } from '/@/utils/util'; |
| | | |
| | | import { computed, onMounted, ref } from 'vue'; |
| | | import { usePageDisplay } from '/@/hooks/usePageDisplay'; |
| | | import { useQueryTable } from '/@/hooks/useQueryTable'; |
| | | // import { useTableSort } from '/@/hooks/useTableSort'; |
| | | // import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness'; |
| | | import axios, { CancelTokenSource } from 'axios'; |
| | | import type { FormInstance, FormRules } from 'element-plus'; |
| | | import { ElMessage, ElMessageBox } from 'element-plus'; |
| | | import { computed, nextTick, onMounted, ref, watch } from 'vue'; |
| | | import { nextTick } from 'vue'; |
| | | import SqlAmisEdit from './edit/SqlAmisEdit.vue'; |
| | | import OptDlg from './optDlg/OptDlg.vue'; |
| | | import { SupervisorPublished, supervisorPublishedMap } from './types'; |
| | |
| | | import ColFilter from '/@/components/table/colFilter/ColFilter.vue'; |
| | | import { TableCol } from '/@/components/table/colFilter/types'; |
| | | import LeftTreeByMgr from '/@/components/tree/leftTreeByMgr.vue'; |
| | | import { usePageDisplay } from '/@/hooks/usePageDisplay'; |
| | | import { useQueryTable } from '/@/hooks/useQueryTable'; |
| | | import { useSearch } from '/@/hooks/useSearch'; |
| | | import { useUpdateData } from '/@/hooks/useUpdateData'; |
| | | import emitter from '/@/utils/mitt'; |
| | | import { deepClone } from '/@/utils/other'; |
| | | import { gotoRoute } from '/@/utils/route'; |
| | | import { useCompRef } from '/@/utils/types'; |
| | | import { convertListToTree, debounce, travelTree } from '/@/utils/util'; |
| | | import { convertListToTree } from '/@/utils/util'; |
| | | import { OptClassificationMap, classificationEnum } from '/@/views/types/metrics'; |
| | | |
| | | const columnList = ref<TableCol[]>([ |
| | | { prop: 'title', label: '标题', width: 300, fixed: 'left' }, |
| | | { prop: 'published', label: '发布状态', width: 85 }, |
| | |
| | | const listData = ref([]); |
| | | const currentListID = computed(() => currentNode.value?.group_id); |
| | | const currentNode = ref(null); |
| | | |
| | | const listTreeData = computed(() => { |
| | | const byParentData = convertListToTree(listData.value, { |
| | | ID: 'group_id', |
| | |
| | | //#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 queryParams = ref({ |
| | | title: '', |
| | | }); |
| | | const { query: queryTerminology, queryData: showPageList } = useSearch(tableData, queryParams); |
| | | const pageQuery = debounce(queryTerminology); |
| | | watch( |
| | | () => queryParams.value.title, |
| | | (val) => { |
| | | pageQuery(); |
| | | } |
| | | ); |
| | | const { resetQuery, handleQueryTable } = useQueryTable(tableData, queryParams, () => { |
| | | showPageList.value = tableData.value; |
| | | const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, () => { |
| | | displayTableData.value = tableData.value; |
| | | }); |
| | | 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 |
| | | |
| | |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"></style> |
| | | , watch |