优化

components.d.ts

@@ -26,7 +26,6 @@ declare module '@vue/runtime-core' {
     ElCheckbox: typeof import('element-plus/es/el-checkbox')['default']
     ElCheckboxGroup: typeof import('element-plus/es/el-checkbox-group')['default']
     ElCol: typeof import('element-plus/es/el-col')['default']
-    ElConfigProvider: typeof import('element-plus/es/el-config-provider')['default']
     ElDatePicker: typeof import('element-plus/es/el-date-picker')['default']
     ElDialog: typeof import('element-plus/es/el-dialog')['default']
     ElDropdown: typeof import('element-plus/es/el-dropdown')['default']

src/pages/dataFilter/combine/components/current-scatter-chart.vue

@@ -139,8 +139,8 @@ export default {
           },
           formatter(params) {
             return params.name
-              ? `${params.seriesName}<br />风速：${params.name}米/s<br />功率：${params.value}KW`
+              ? `${params.seriesName}<br />风速：${params.name}m/s<br />功率：${params.value}kW`
-              : `${params.seriesName}<br />风速：${params.data[0]}米/s<br />功率：${params.data[1]}KW`;
+              : `${params.seriesName}<br />风速：${params.data[0]}m/s<br />功率：${params.data[1]}kW`;
           },
         },
         brush: {

src/pages/dataFilter/combine/components/tree.vue

@@ -1,157 +1,204 @@
 <template>
-	<div class="shadow rounded-[6px] shadow-blue-500"
+	<div
-		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
+	  class="shadow rounded-[6px] shadow-blue-500"
-		<el-input class="pb-[10px]" v-model="filterText" placeholder="输入关键字过滤" @input="funfilterChange" />
+	  :style="{
-		<el-tree ref="treeRef" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
+	    height:
-			highlight-current :props="defaultProps" :current-node-key="''" @check="funCheckChange"
+		 typeof props.height === 'string' ? props.height : props.height + 'px',
-			:expand-on-click-node="false" @node-click="funCurrentChange" :filter-node-method="funTreeFilter">
+	  }"
-			<template #default="{ node, data }">
+	>
-				<span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
+	  <el-input
-				<el-dropdown ref="dropdown1" v-else size="small" trigger="contextmenu" @command="funCommand"
+	    class="pb-[10px]"
-					style="margin-right: 30px">
+	    v-model="filterText"
-					<span class="el-dropdown-link">{{ node.label }} </span>
+	    placeholder="输入关键字过滤"
-					<template #dropdown>
+	    @input="funfilterChange"
-						<el-dropdown-menu>
+	  />
-							<el-dropdown-item v-if="data.childs && data.childs.length" :command="{ type: 'export', data, node }">导出
+	  <el-tree
-							</el-dropdown-item>
+	    ref="treeRef"
-							<el-dropdown-item :command="{ type: 'delete', data, node }">删除</el-dropdown-item>
+	    :data="props.data"
-						</el-dropdown-menu>
+	    :show-checkbox="props.showCheckbox"
-					</template>
+	    default-expand-all
-				</el-dropdown>
+	    node-key="id"
-			</template>
+	    highlight-current
-		</el-tree>
+	    :props="defaultProps"
-
+	    :current-node-key="''"
-
+	    @check="funCheckChange"
-		<!--
+	    :expand-on-click-node="false"
-			<div class="buttons">
+	    @node-click="funCurrentChange"
-				<el-button @click="getCheckedNodes">get by node</el-button>
+	    :filter-node-method="funTreeFilter"
-				<el-button @click="getCheckedKeys">get by key</el-button>
+	  >
-				<el-button @click="setCheckedNodes">set by node</el-button>
+	    <template #default="{ node, data }">
-				<el-button @click="setCheckedKeys">set by key</el-button>
+		 <span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
-				<el-button @click="resetChecked">reset</el-button>
+		 <el-dropdown
-			</div>
+		   ref="dropdown1"
-		-->
+		   v-else
-	</div>
+		   size="small"
-</template>
+		   trigger="contextmenu"
-<script lang="ts" setup name="search">
+		   @command="funCommand"
-import { ref } from 'vue'
+		   style="margin-right: 30px"
-import type Node from 'element-plus/es/components/tree/src/model/node'
+		 >
-import { emit } from 'process';
+		   <span class="el-dropdown-link">{{ node.label }} </span>
-import { ElMessage, ElMessageBox } from 'element-plus';
+		   <template #dropdown>
-import config from '../../../../api/config';
+			<el-dropdown-menu>
-import request from '../../../../api/axios.js';
+			  <el-dropdown-item
-const emits = defineEmits(['currentChange', 'checkChange', 'refresh'])
+			    v-if="data.childs && data.childs.length"
-interface Tree {
+			    :command="{ type: 'export', data, node }"
-	id: string
+			    >导出
-	label: string
+			  </el-dropdown-item>
-	children?: Tree[]
+			  <el-dropdown-item :command="{ type: 'delete', data, node }"
-}
+			    >删除</el-dropdown-item
-const props = withDefaults(defineProps<{
+			  >
-	data: Tree[],
+			</el-dropdown-menu>
-	height?: number | string,
+		   </template>
-	showCheckbox?: boolean,
+		 </el-dropdown>
-}>(), {
+	    </template>
-	data: () => [],
+	  </el-tree>
-	height: 400,
+   
-	showCheckbox: false,
+	  <!--
-})
+			   <div class="buttons">
-
+				   <el-button @click="getCheckedNodes">get by node</el-button>
-const treeRef = ref()
+				   <el-button @click="getCheckedKeys">get by key</el-button>
-const filterText = ref('')
+				   <el-button @click="setCheckedNodes">set by node</el-button>
-/**输入框过滤 */
+				   <el-button @click="setCheckedKeys">set by key</el-button>
-const funfilterChange = () => {
+				   <el-button @click="resetChecked">reset</el-button>
-	treeRef.value!.filter(filterText.value)
+			   </div>
-}
+		   --></div>
-const funTreeFilter = (value: string, data: Tree) => {
+   </template>
-	if (!value) return true
+   <script lang="ts" setup name="search">
-	return data.label.includes(value)
+   import { ref } from "vue";
-}
+   import type Node from "element-plus/es/components/tree/src/model/node";
-/**选中节点变化 */
+   import { emit } from "process";
-const funCurrentChange = (current: Tree, currentNode: Node) => {
+   import { ElMessage, ElMessageBox } from "element-plus";
-	emits('currentChange', { current, currentNode })
+   import config from "../../../../api/config";
-}
+   import request from "../../../../api/axios.js";
-/**复选框选中变化 */
+   const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-const funCheckChange = (current: Tree, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {
+   interface Tree {
-	emits('checkChange', { current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })
+	id: string;
-}
+	label: string;
-//右键时, command菜单
+	children?: Tree[];
-const funCommand = async ({ type, data, node }) => {
+   }
-	console.log(type, data, node)
+   const props = withDefaults(
+	defineProps<{
+	  data: Tree[];
+	  height?: number | string;
+	  showCheckbox?: boolean;
+	}>(),
+	{
+	  data: () => [],
+	  height: 400,
+	  showCheckbox: false,
+	}
+   );
+   
+   const treeRef = ref();
+   const filterText = ref("");
+   /**输入框过滤 */
+   const funfilterChange = () => {
+	treeRef.value!.filter(filterText.value);
+   };
+   const funTreeFilter = (value: string, data: Tree) => {
+	if (!value) return true;
+	return data.label.includes(value);
+   };
+   /**选中节点变化 */
+   const funCurrentChange = (current: Tree, currentNode: Node) => {
+	emits("currentChange", { current, currentNode });
+   };
+   /**复选框选中变化 */
+   const funCheckChange = (
+	current: Tree,
+	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
+   ) => {
+	emits("checkChange", {
+	  current,
+	  checkedNodes,
+	  checkedKeys,
+	  halfCheckedNodes,
+	  halfCheckedKeys,
+	});
+   };
+   //右键时, command菜单
+   const funCommand = async ({ type, data, node }) => {
+	console.log(type, data, node);
 	switch (type) {
-		case 'export':
+	  case "export":
-			ElMessageBox.confirm(
+	    ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
-				'确认导出当前节点的所有数据?',
+		 confirmButtonText: "确认",
-				'导出',
+		 cancelButtonText: "取消",
-				{
+		 type: "warning",
-					confirmButtonText: '确认',
+	    }).then(() => {
-					cancelButtonText: '取消',
+		 const a = document.createElement("a");
-					type: 'warning',
+		 const childs = data.childs.map((o) => o.id);
-				}
+		 a.href =
-			)
+		   config.baseURL + "/data/option/download?ids=" + childs.join(",");
-				.then(() => {
+		 a.download = "";
-					const a = document.createElement('a')
+		 a.click();
-					const childs = data.childs.map(o => o.id)
+	    });
-					a.href = config.baseURL + '/data/option/download?ids=' + childs.join(',')
+	    break;
-					a.download = ''
+	  case "delete":
-					a.click()
+	    ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
-				})
+		 confirmButtonText: "确认",
-			break;
+		 cancelButtonText: "取消",
-		case 'delete':
+		 type: "warning",
-			let deleteArr = []
+	    }).then(async () => {
-			const repeatArr = (arr, deleteArr) => {
+		 let deleteArr = [];
-				for (const unit of arr) {
+		 const repeatArr = (arr, deleteArr) => {
-					if (unit.childs?.length) {
+		   for (const unit of arr) {
-						deleteArr.push(...unit.childs.map(o => o.id))
+			if (unit.childs?.length) {
-					} else if (unit.children?.length) {
+			  deleteArr.push(...unit.childs.map((o) => o.id));
-						repeatArr(unit.children, deleteArr)
+			} else if (unit.children?.length) {
-					}
+			  repeatArr(unit.children, deleteArr);
-				}
-			}
-			if (data.childs?.length) {
-				deleteArr = data.childs.map(o => o.id)
-			} else if (data.children?.length) {
-				repeatArr(data.children, deleteArr)
-			}
-			console.log(deleteArr)
-			const res = await request.get('/data/option/delete', { params: { ids: deleteArr.join(',') } })  //删除当前节点
-			if (res.code === 200) {
-				ElMessage.success(res.msg)
-				emits('refresh')
 			}
-			break;
+		   }
+		 };
+		 if (data.childs?.length) {
+		   deleteArr = data.childs.map((o) => o.id);
+		 } else if (data.children?.length) {
+		   repeatArr(data.children, deleteArr);
+		 }
+		 console.log(deleteArr);
+		 const res = await request.get("/data/option/delete", {
+		   params: { ids: deleteArr.join(",") },
+		 }); //删除当前节点
+		 if (res.code === 200) {
+		   ElMessage.success(res.msg);
+		   emits("refresh");
+		 }
+	    });
+   
+	    break;
 	}
-}
+   };
-
+   
-const getCheckedNodes = () => {
+   const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false))
+	console.log(treeRef.value!.getCheckedNodes(false, false));
-}
+   };
-const getCheckedKeys = () => {
+   const getCheckedKeys = () => {
-	console.log(treeRef.value!.getCheckedKeys(false))
+	console.log(treeRef.value!.getCheckedKeys(false));
-}
+   };
-const setCheckedNodes = () => {
+   const setCheckedNodes = () => {
 	treeRef.value!.setCheckedNodes(
-		[
+	  [
-			{
+	    {
-				id: 5,
+		 id: 5,
-				label: 'Level two 2-1',
+		 label: "Level two 2-1",
-			},
+	    },
-			{
+	    {
-				id: 9,
+		 id: 9,
-				label: 'Level three 1-1-1',
+		 label: "Level three 1-1-1",
-			},
+	    },
-		],
+	  ],
-		false
+	  false
-	)
+	);
-}
+   };
-const setCheckedKeys = () => {
+   const setCheckedKeys = () => {
-	treeRef.value!.setCheckedKeys([3], false)
+	treeRef.value!.setCheckedKeys([3], false);
-}
+   };
-const resetChecked = () => {
+   const resetChecked = () => {
-	treeRef.value!.setCheckedKeys([], false)
+	treeRef.value!.setCheckedKeys([], false);
-}
+   };
-
+   
-const defaultProps = {
+   const defaultProps = {
-	children: 'children',
+	children: "children",
-	label: 'label',
+	label: "label",
-}
+   };
-</script>
+   </script>

src/pages/dataFilter/combine/index.vue

@@ -17,6 +17,7 @@ const excelType = ref('')
 const excelCheckIds = ref<string[]>([])
 const excelList = ref<{ id: string, name: string }[]>([])
 const funExcelChange = async (obj: any) => { //点击excel项时
+	activeTab.value = '1'
 	tableShowId.value = obj.id
 	tableName.value = obj.name
 	excelType.value = obj.type // 接收excel的type 用于控制右侧tab展示
@@ -249,9 +250,9 @@ funGetProcessTree()
 		<el-row :gutter="20">
 			<el-col :span="5">
 				<tree-cop :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true" :height="treeHeight"
-					@currentChange="funCurrentChange"></tree-cop>
+					@currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
 				<tree-cop class="mt-[10px]" :data="processTreeData" :height="treeHeight"
-					@currentChange="funProcessCurrentChange"></tree-cop>
+					@currentChange="funProcessCurrentChange" @refresh="funGetProcessTree"></tree-cop>
 			</el-col>
 			<el-col :span="3">
 				<excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList" :height="excelHeight"

src/pages/dataFilter/prepare/components/tree.vue

@@ -1,157 +1,204 @@
 <template>
-	<div class="shadow rounded-[6px] shadow-blue-500"
+	<div
-		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
+	  class="shadow rounded-[6px] shadow-blue-500"
-		<el-input class="pb-[10px]" v-model="filterText" placeholder="输入关键字过滤" @input="funfilterChange" />
+	  :style="{
-		<el-tree ref="treeRef" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
+	    height:
-			highlight-current :props="defaultProps" :current-node-key="''" @check="funCheckChange"
+		 typeof props.height === 'string' ? props.height : props.height + 'px',
-			:expand-on-click-node="false" @node-click="funCurrentChange" :filter-node-method="funTreeFilter">
+	  }"
-			<template #default="{ node, data }">
+	>
-				<span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
+	  <el-input
-				<el-dropdown ref="dropdown1" v-else size="small" trigger="contextmenu" @command="funCommand"
+	    class="pb-[10px]"
-					style="margin-right: 30px">
+	    v-model="filterText"
-					<span class="el-dropdown-link">{{ node.label }} </span>
+	    placeholder="输入关键字过滤"
-					<template #dropdown>
+	    @input="funfilterChange"
-						<el-dropdown-menu>
+	  />
-							<el-dropdown-item v-if="data.childs && data.childs.length" :command="{ type: 'export', data, node }">导出
+	  <el-tree
-							</el-dropdown-item>
+	    ref="treeRef"
-							<el-dropdown-item :command="{ type: 'delete', data, node }">删除</el-dropdown-item>
+	    :data="props.data"
-						</el-dropdown-menu>
+	    :show-checkbox="props.showCheckbox"
-					</template>
+	    default-expand-all
-				</el-dropdown>
+	    node-key="id"
-			</template>
+	    highlight-current
-		</el-tree>
+	    :props="defaultProps"
-
+	    :current-node-key="''"
-
+	    @check="funCheckChange"
-		<!--
+	    :expand-on-click-node="false"
-			<div class="buttons">
+	    @node-click="funCurrentChange"
-				<el-button @click="getCheckedNodes">get by node</el-button>
+	    :filter-node-method="funTreeFilter"
-				<el-button @click="getCheckedKeys">get by key</el-button>
+	  >
-				<el-button @click="setCheckedNodes">set by node</el-button>
+	    <template #default="{ node, data }">
-				<el-button @click="setCheckedKeys">set by key</el-button>
+		 <span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
-				<el-button @click="resetChecked">reset</el-button>
+		 <el-dropdown
-			</div>
+		   ref="dropdown1"
-		-->
+		   v-else
-	</div>
+		   size="small"
-</template>
+		   trigger="contextmenu"
-<script lang="ts" setup name="search">
+		   @command="funCommand"
-import { ref } from 'vue'
+		   style="margin-right: 30px"
-import type Node from 'element-plus/es/components/tree/src/model/node'
+		 >
-import { emit } from 'process';
+		   <span class="el-dropdown-link">{{ node.label }} </span>
-import { ElMessage, ElMessageBox } from 'element-plus';
+		   <template #dropdown>
-import config from '../../../../api/config';
+			<el-dropdown-menu>
-import request from '../../../../api/axios.js';
+			  <el-dropdown-item
-const emits = defineEmits(['currentChange', 'checkChange', 'refresh'])
+			    v-if="data.childs && data.childs.length"
-interface Tree {
+			    :command="{ type: 'export', data, node }"
-	id: string
+			    >导出
-	label: string
+			  </el-dropdown-item>
-	children?: Tree[]
+			  <el-dropdown-item :command="{ type: 'delete', data, node }"
-}
+			    >删除</el-dropdown-item
-const props = withDefaults(defineProps<{
+			  >
-	data: Tree[],
+			</el-dropdown-menu>
-	height?: number | string,
+		   </template>
-	showCheckbox?: boolean,
+		 </el-dropdown>
-}>(), {
+	    </template>
-	data: () => [],
+	  </el-tree>
-	height: 400,
+   
-	showCheckbox: false,
+	  <!--
-})
+			   <div class="buttons">
-
+				   <el-button @click="getCheckedNodes">get by node</el-button>
-const treeRef = ref()
+				   <el-button @click="getCheckedKeys">get by key</el-button>
-const filterText = ref('')
+				   <el-button @click="setCheckedNodes">set by node</el-button>
-/**输入框过滤 */
+				   <el-button @click="setCheckedKeys">set by key</el-button>
-const funfilterChange = () => {
+				   <el-button @click="resetChecked">reset</el-button>
-	treeRef.value!.filter(filterText.value)
+			   </div>
-}
+		   --></div>
-const funTreeFilter = (value: string, data: Tree) => {
+   </template>
-	if (!value) return true
+   <script lang="ts" setup name="search">
-	return data.label.includes(value)
+   import { ref } from "vue";
-}
+   import type Node from "element-plus/es/components/tree/src/model/node";
-/**选中节点变化 */
+   import { emit } from "process";
-const funCurrentChange = (current: Tree, currentNode: Node) => {
+   import { ElMessage, ElMessageBox } from "element-plus";
-	emits('currentChange', { current, currentNode })
+   import config from "../../../../api/config";
-}
+   import request from "../../../../api/axios.js";
-/**复选框选中变化 */
+   const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-const funCheckChange = (current: Tree, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {
+   interface Tree {
-	emits('checkChange', { current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })
+	id: string;
-}
+	label: string;
-//右键时, command菜单
+	children?: Tree[];
-const funCommand = async ({ type, data, node }) => {
+   }
-	console.log(type, data, node)
+   const props = withDefaults(
+	defineProps<{
+	  data: Tree[];
+	  height?: number | string;
+	  showCheckbox?: boolean;
+	}>(),
+	{
+	  data: () => [],
+	  height: 400,
+	  showCheckbox: false,
+	}
+   );
+   
+   const treeRef = ref();
+   const filterText = ref("");
+   /**输入框过滤 */
+   const funfilterChange = () => {
+	treeRef.value!.filter(filterText.value);
+   };
+   const funTreeFilter = (value: string, data: Tree) => {
+	if (!value) return true;
+	return data.label.includes(value);
+   };
+   /**选中节点变化 */
+   const funCurrentChange = (current: Tree, currentNode: Node) => {
+	emits("currentChange", { current, currentNode });
+   };
+   /**复选框选中变化 */
+   const funCheckChange = (
+	current: Tree,
+	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
+   ) => {
+	emits("checkChange", {
+	  current,
+	  checkedNodes,
+	  checkedKeys,
+	  halfCheckedNodes,
+	  halfCheckedKeys,
+	});
+   };
+   //右键时, command菜单
+   const funCommand = async ({ type, data, node }) => {
+	console.log(type, data, node);
 	switch (type) {
-		case 'export':
+	  case "export":
-			ElMessageBox.confirm(
+	    ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
-				'确认导出当前节点的所有数据?',
+		 confirmButtonText: "确认",
-				'导出',
+		 cancelButtonText: "取消",
-				{
+		 type: "warning",
-					confirmButtonText: '确认',
+	    }).then(() => {
-					cancelButtonText: '取消',
+		 const a = document.createElement("a");
-					type: 'warning',
+		 const childs = data.childs.map((o) => o.id);
-				}
+		 a.href =
-			)
+		   config.baseURL + "/data/option/download?ids=" + childs.join(",");
-				.then(() => {
+		 a.download = "";
-					const a = document.createElement('a')
+		 a.click();
-					const childs = data.childs.map(o => o.id)
+	    });
-					a.href = config.baseURL + '/data/option/download?ids=' + childs.join(',')
+	    break;
-					a.download = ''
+	  case "delete":
-					a.click()
+	    ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
-				})
+		 confirmButtonText: "确认",
-			break;
+		 cancelButtonText: "取消",
-		case 'delete':
+		 type: "warning",
-			let deleteArr = []
+	    }).then(async () => {
-			const repeatArr = (arr, deleteArr) => {
+		 let deleteArr = [];
-				for (const unit of arr) {
+		 const repeatArr = (arr, deleteArr) => {
-					if (unit.childs?.length) {
+		   for (const unit of arr) {
-						deleteArr.push(...unit.childs.map(o => o.id))
+			if (unit.childs?.length) {
-					} else if (unit.children?.length) {
+			  deleteArr.push(...unit.childs.map((o) => o.id));
-						repeatArr(unit.children, deleteArr)
+			} else if (unit.children?.length) {
-					}
+			  repeatArr(unit.children, deleteArr);
-				}
-			}
-			if (data.childs?.length) {
-				deleteArr = data.childs.map(o => o.id)
-			} else if (data.children?.length) {
-				repeatArr(data.children, deleteArr)
-			}
-			console.log(deleteArr)
-			const res = await request.get('/data/option/delete', { params: { ids: deleteArr.join(',') } })  //删除当前节点
-			if (res.code === 200) {
-				ElMessage.success(res.msg)
-				emits('refresh')
 			}
-			break;
+		   }
+		 };
+		 if (data.childs?.length) {
+		   deleteArr = data.childs.map((o) => o.id);
+		 } else if (data.children?.length) {
+		   repeatArr(data.children, deleteArr);
+		 }
+		 console.log(deleteArr);
+		 const res = await request.get("/data/option/delete", {
+		   params: { ids: deleteArr.join(",") },
+		 }); //删除当前节点
+		 if (res.code === 200) {
+		   ElMessage.success(res.msg);
+		   emits("refresh");
+		 }
+	    });
+   
+	    break;
 	}
-}
+   };
-
+   
-const getCheckedNodes = () => {
+   const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false))
+	console.log(treeRef.value!.getCheckedNodes(false, false));
-}
+   };
-const getCheckedKeys = () => {
+   const getCheckedKeys = () => {
-	console.log(treeRef.value!.getCheckedKeys(false))
+	console.log(treeRef.value!.getCheckedKeys(false));
-}
+   };
-const setCheckedNodes = () => {
+   const setCheckedNodes = () => {
 	treeRef.value!.setCheckedNodes(
-		[
+	  [
-			{
+	    {
-				id: 5,
+		 id: 5,
-				label: 'Level two 2-1',
+		 label: "Level two 2-1",
-			},
+	    },
-			{
+	    {
-				id: 9,
+		 id: 9,
-				label: 'Level three 1-1-1',
+		 label: "Level three 1-1-1",
-			},
+	    },
-		],
+	  ],
-		false
+	  false
-	)
+	);
-}
+   };
-const setCheckedKeys = () => {
+   const setCheckedKeys = () => {
-	treeRef.value!.setCheckedKeys([3], false)
+	treeRef.value!.setCheckedKeys([3], false);
-}
+   };
-const resetChecked = () => {
+   const resetChecked = () => {
-	treeRef.value!.setCheckedKeys([], false)
+	treeRef.value!.setCheckedKeys([], false);
-}
+   };
-
+   
-const defaultProps = {
+   const defaultProps = {
-	children: 'children',
+	children: "children",
-	label: 'label',
+	label: "label",
-}
+   };
-</script>
+   </script>

src/pages/dataFilter/prepare/index.vue

@@ -87,7 +87,7 @@ funGetTree()
 		<search-cop></search-cop>
 		<el-row :gutter="20">
 			<el-col :span="5">
-				<tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange"></tree-cop>
+				<tree-cop :data="treeData" :height="treeHeight" @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
 			</el-col>
 			<el-col :span="3">
 				<excel-cop :data="excelList" :height="excelHeight" @excelChange="funExcelChange"></excel-cop>

src/pages/dataFilter/process/components/tree.vue

@@ -1,157 +1,204 @@
 <template>
-	<div class="shadow rounded-[6px] shadow-blue-500"
+	<div
-		:style="{ height: typeof props.height === 'string' ? props.height : props.height + 'px' }">
+	  class="shadow rounded-[6px] shadow-blue-500"
-		<el-input class="pb-[10px]" v-model="filterText" placeholder="输入关键字过滤" @input="funfilterChange" />
+	  :style="{
-		<el-tree ref="treeRef" :data="props.data" :show-checkbox="props.showCheckbox" default-expand-all node-key="id"
+	    height:
-			highlight-current :props="defaultProps" :current-node-key="''" @check="funCheckChange"
+		 typeof props.height === 'string' ? props.height : props.height + 'px',
-			:expand-on-click-node="false" @node-click="funCurrentChange" :filter-node-method="funTreeFilter">
+	  }"
-			<template #default="{ node, data }">
+	>
-				<span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
+	  <el-input
-				<el-dropdown ref="dropdown1" v-else size="small" trigger="contextmenu" @command="funCommand"
+	    class="pb-[10px]"
-					style="margin-right: 30px">
+	    v-model="filterText"
-					<span class="el-dropdown-link">{{ node.label }} </span>
+	    placeholder="输入关键字过滤"
-					<template #dropdown>
+	    @input="funfilterChange"
-						<el-dropdown-menu>
+	  />
-							<el-dropdown-item v-if="data.childs && data.childs.length" :command="{ type: 'export', data, node }">导出
+	  <el-tree
-							</el-dropdown-item>
+	    ref="treeRef"
-							<el-dropdown-item :command="{ type: 'delete', data, node }">删除</el-dropdown-item>
+	    :data="props.data"
-						</el-dropdown-menu>
+	    :show-checkbox="props.showCheckbox"
-					</template>
+	    default-expand-all
-				</el-dropdown>
+	    node-key="id"
-			</template>
+	    highlight-current
-		</el-tree>
+	    :props="defaultProps"
-
+	    :current-node-key="''"
-
+	    @check="funCheckChange"
-		<!--
+	    :expand-on-click-node="false"
-			<div class="buttons">
+	    @node-click="funCurrentChange"
-				<el-button @click="getCheckedNodes">get by node</el-button>
+	    :filter-node-method="funTreeFilter"
-				<el-button @click="getCheckedKeys">get by key</el-button>
+	  >
-				<el-button @click="setCheckedNodes">set by node</el-button>
+	    <template #default="{ node, data }">
-				<el-button @click="setCheckedKeys">set by key</el-button>
+		 <span v-if="node.level == 1" class="text-[14px]">{{ node.label }}</span>
-				<el-button @click="resetChecked">reset</el-button>
+		 <el-dropdown
-			</div>
+		   ref="dropdown1"
-		-->
+		   v-else
-	</div>
+		   size="small"
-</template>
+		   trigger="contextmenu"
-<script lang="ts" setup name="search">
+		   @command="funCommand"
-import { ref } from 'vue'
+		   style="margin-right: 30px"
-import type Node from 'element-plus/es/components/tree/src/model/node'
+		 >
-import { emit } from 'process';
+		   <span class="el-dropdown-link">{{ node.label }} </span>
-import { ElMessage, ElMessageBox } from 'element-plus';
+		   <template #dropdown>
-import config from '../../../../api/config';
+			<el-dropdown-menu>
-import request from '../../../../api/axios.js';
+			  <el-dropdown-item
-const emits = defineEmits(['currentChange', 'checkChange', 'refresh'])
+			    v-if="data.childs && data.childs.length"
-interface Tree {
+			    :command="{ type: 'export', data, node }"
-	id: string
+			    >导出
-	label: string
+			  </el-dropdown-item>
-	children?: Tree[]
+			  <el-dropdown-item :command="{ type: 'delete', data, node }"
-}
+			    >删除</el-dropdown-item
-const props = withDefaults(defineProps<{
+			  >
-	data: Tree[],
+			</el-dropdown-menu>
-	height?: number | string,
+		   </template>
-	showCheckbox?: boolean,
+		 </el-dropdown>
-}>(), {
+	    </template>
-	data: () => [],
+	  </el-tree>
-	height: 400,
+   
-	showCheckbox: false,
+	  <!--
-})
+			   <div class="buttons">
-
+				   <el-button @click="getCheckedNodes">get by node</el-button>
-const treeRef = ref()
+				   <el-button @click="getCheckedKeys">get by key</el-button>
-const filterText = ref('')
+				   <el-button @click="setCheckedNodes">set by node</el-button>
-/**输入框过滤 */
+				   <el-button @click="setCheckedKeys">set by key</el-button>
-const funfilterChange = () => {
+				   <el-button @click="resetChecked">reset</el-button>
-	treeRef.value!.filter(filterText.value)
+			   </div>
-}
+		   --></div>
-const funTreeFilter = (value: string, data: Tree) => {
+   </template>
-	if (!value) return true
+   <script lang="ts" setup name="search">
-	return data.label.includes(value)
+   import { ref } from "vue";
-}
+   import type Node from "element-plus/es/components/tree/src/model/node";
-/**选中节点变化 */
+   import { emit } from "process";
-const funCurrentChange = (current: Tree, currentNode: Node) => {
+   import { ElMessage, ElMessageBox } from "element-plus";
-	emits('currentChange', { current, currentNode })
+   import config from "../../../../api/config";
-}
+   import request from "../../../../api/axios.js";
-/**复选框选中变化 */
+   const emits = defineEmits(["currentChange", "checkChange", "refresh"]);
-const funCheckChange = (current: Tree, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => {
+   interface Tree {
-	emits('checkChange', { current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })
+	id: string;
-}
+	label: string;
-//右键时, command菜单
+	children?: Tree[];
-const funCommand = async ({ type, data, node }) => {
+   }
-	console.log(type, data, node)
+   const props = withDefaults(
+	defineProps<{
+	  data: Tree[];
+	  height?: number | string;
+	  showCheckbox?: boolean;
+	}>(),
+	{
+	  data: () => [],
+	  height: 400,
+	  showCheckbox: false,
+	}
+   );
+   
+   const treeRef = ref();
+   const filterText = ref("");
+   /**输入框过滤 */
+   const funfilterChange = () => {
+	treeRef.value!.filter(filterText.value);
+   };
+   const funTreeFilter = (value: string, data: Tree) => {
+	if (!value) return true;
+	return data.label.includes(value);
+   };
+   /**选中节点变化 */
+   const funCurrentChange = (current: Tree, currentNode: Node) => {
+	emits("currentChange", { current, currentNode });
+   };
+   /**复选框选中变化 */
+   const funCheckChange = (
+	current: Tree,
+	{ checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }
+   ) => {
+	emits("checkChange", {
+	  current,
+	  checkedNodes,
+	  checkedKeys,
+	  halfCheckedNodes,
+	  halfCheckedKeys,
+	});
+   };
+   //右键时, command菜单
+   const funCommand = async ({ type, data, node }) => {
+	console.log(type, data, node);
 	switch (type) {
-		case 'export':
+	  case "export":
-			ElMessageBox.confirm(
+	    ElMessageBox.confirm("确认导出当前节点的所有数据?", "导出", {
-				'确认导出当前节点的所有数据?',
+		 confirmButtonText: "确认",
-				'导出',
+		 cancelButtonText: "取消",
-				{
+		 type: "warning",
-					confirmButtonText: '确认',
+	    }).then(() => {
-					cancelButtonText: '取消',
+		 const a = document.createElement("a");
-					type: 'warning',
+		 const childs = data.childs.map((o) => o.id);
-				}
+		 a.href =
-			)
+		   config.baseURL + "/data/option/download?ids=" + childs.join(",");
-				.then(() => {
+		 a.download = "";
-					const a = document.createElement('a')
+		 a.click();
-					const childs = data.childs.map(o => o.id)
+	    });
-					a.href = config.baseURL + '/data/option/download?ids=' + childs.join(',')
+	    break;
-					a.download = ''
+	  case "delete":
-					a.click()
+	    ElMessageBox.confirm("确认删除当前节点的所有数据?", "删除", {
-				})
+		 confirmButtonText: "确认",
-			break;
+		 cancelButtonText: "取消",
-		case 'delete':
+		 type: "warning",
-			let deleteArr = []
+	    }).then(async () => {
-			const repeatArr = (arr, deleteArr) => {
+		 let deleteArr = [];
-				for (const unit of arr) {
+		 const repeatArr = (arr, deleteArr) => {
-					if (unit.childs?.length) {
+		   for (const unit of arr) {
-						deleteArr.push(...unit.childs.map(o => o.id))
+			if (unit.childs?.length) {
-					} else if (unit.children?.length) {
+			  deleteArr.push(...unit.childs.map((o) => o.id));
-						repeatArr(unit.children, deleteArr)
+			} else if (unit.children?.length) {
-					}
+			  repeatArr(unit.children, deleteArr);
-				}
-			}
-			if (data.childs?.length) {
-				deleteArr = data.childs.map(o => o.id)
-			} else if (data.children?.length) {
-				repeatArr(data.children, deleteArr)
-			}
-			console.log(deleteArr)
-			const res = await request.get('/data/option/delete', { params: { ids: deleteArr.join(',') } })  //删除当前节点
-			if (res.code === 200) {
-				ElMessage.success(res.msg)
-				emits('refresh')
 			}
-			break;
+		   }
+		 };
+		 if (data.childs?.length) {
+		   deleteArr = data.childs.map((o) => o.id);
+		 } else if (data.children?.length) {
+		   repeatArr(data.children, deleteArr);
+		 }
+		 console.log(deleteArr);
+		 const res = await request.get("/data/option/delete", {
+		   params: { ids: deleteArr.join(",") },
+		 }); //删除当前节点
+		 if (res.code === 200) {
+		   ElMessage.success(res.msg);
+		   emits("refresh");
+		 }
+	    });
+   
+	    break;
 	}
-}
+   };
-
+   
-const getCheckedNodes = () => {
+   const getCheckedNodes = () => {
-	console.log(treeRef.value!.getCheckedNodes(false, false))
+	console.log(treeRef.value!.getCheckedNodes(false, false));
-}
+   };
-const getCheckedKeys = () => {
+   const getCheckedKeys = () => {
-	console.log(treeRef.value!.getCheckedKeys(false))
+	console.log(treeRef.value!.getCheckedKeys(false));
-}
+   };
-const setCheckedNodes = () => {
+   const setCheckedNodes = () => {
 	treeRef.value!.setCheckedNodes(
-		[
+	  [
-			{
+	    {
-				id: 5,
+		 id: 5,
-				label: 'Level two 2-1',
+		 label: "Level two 2-1",
-			},
+	    },
-			{
+	    {
-				id: 9,
+		 id: 9,
-				label: 'Level three 1-1-1',
+		 label: "Level three 1-1-1",
-			},
+	    },
-		],
+	  ],
-		false
+	  false
-	)
+	);
-}
+   };
-const setCheckedKeys = () => {
+   const setCheckedKeys = () => {
-	treeRef.value!.setCheckedKeys([3], false)
+	treeRef.value!.setCheckedKeys([3], false);
-}
+   };
-const resetChecked = () => {
+   const resetChecked = () => {
-	treeRef.value!.setCheckedKeys([], false)
+	treeRef.value!.setCheckedKeys([], false);
-}
+   };
-
+   
-const defaultProps = {
+   const defaultProps = {
-	children: 'children',
+	children: "children",
-	label: 'label',
+	label: "label",
-}
+   };
-</script>
+   </script>