~admin/dl-wms.git

2024-06-14 722af26bc6fec32bb289b1df51a9016a4935610f

提交 \| 用户 \| 时间
722af2	1	<template>
X	2	<div class="app-container">
	3	<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
	4	<el-form-item label="树节点名" prop="treeName">
	5	<el-input
	6	v-model="queryParams.treeName"
	7	placeholder="请输入树节点名"
	8	clearable
	9	size="small"
	10	@keyup.enter.native="handleQuery"
	11	/>
	12	</el-form-item>
	13	<el-form-item label="创建时间">
	14	<el-date-picker
	15	v-model="daterangeCreateTime"
	16	size="small"
	17	style="width: 240px"
	18	value-format="yyyy-MM-dd HH:mm:ss"
	19	type="daterange"
	20	range-separator="-"
	21	start-placeholder="开始日期"
	22	end-placeholder="结束日期"
	23	:default-time="['00:00:00', '23:59:59']"
	24	></el-date-picker>
	25	</el-form-item>
	26	<el-form-item>
	27	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	28	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	29	</el-form-item>
	30	</el-form>
	31
	32	<el-row :gutter="10" class="mb8">
	33	<el-col :span="1.5">
	34	<el-button
	35	type="primary"
	36	plain
	37	icon="el-icon-plus"
	38	size="mini"
	39	@click="handleAdd"
	40	v-hasPermi="['demo:tree:add']"
	41	>新增</el-button>
	42	</el-col>
	43	<el-col :span="1.5">
	44	<el-button
	45	type="info"
	46	plain
	47	icon="el-icon-sort"
	48	size="mini"
	49	@click="toggleExpandAll"
	50	>展开/折叠</el-button>
	51	</el-col>
	52	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	53	</el-row>
	54
	55	<el-table
	56	v-if="refreshTable"
	57	v-loading="loading"
	58	:data="treeList"
	59	row-key="id"
	60	:default-expand-all="isExpandAll"
	61	:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	62	>
	63	<el-table-column label="父id" prop="parentId" />
	64	<el-table-column label="部门id" align="center" prop="deptId" />
	65	<el-table-column label="用户id" align="center" prop="userId" />
	66	<el-table-column label="树节点名" align="center" prop="treeName" />
	67	<el-table-column label="创建时间" align="center" prop="createTime" width="180">
	68	<template #default="scope">
	69	<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
	70	</template>
	71	</el-table-column>
	72	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	73	<template #default="scope">
	74	<el-button
	75	size="mini"
	76	type="text"
	77	icon="el-icon-edit"
	78	@click="handleUpdate(scope.row)"
	79	v-hasPermi="['demo:tree:edit']"
	80	>修改</el-button>
	81	<el-button
	82	size="mini"
	83	type="text"
	84	icon="el-icon-plus"
	85	@click="handleAdd(scope.row)"
	86	v-hasPermi="['demo:tree:add']"
	87	>新增</el-button>
	88	<el-button
	89	size="mini"
	90	type="text"
	91	icon="el-icon-delete"
	92	@click="handleDelete(scope.row)"
	93	v-hasPermi="['demo:tree:remove']"
	94	>删除</el-button>
	95	</template>
	96	</el-table-column>
	97	</el-table>
	98
	99	<!-- 添加或修改测试树表对话框 -->
	100	<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
	101	<el-form ref="form" :model="form" :rules="rules" label-width="80px">
	102	<el-form-item label="父id" prop="parentId">
	103	<treeselect v-model="form.parentId" :options="treeOptions" :normalizer="normalizer" placeholder="请选择父id" />
	104	</el-form-item>
	105	<el-form-item label="部门id" prop="deptId">
	106	<el-input v-model="form.deptId" placeholder="请输入部门id" />
	107	</el-form-item>
	108	<el-form-item label="用户id" prop="userId">
	109	<el-input v-model="form.userId" placeholder="请输入用户id" />
	110	</el-form-item>
	111	<el-form-item label="树节点名" prop="treeName">
	112	<el-input v-model="form.treeName" placeholder="请输入树节点名" />
	113	</el-form-item>
	114	</el-form>
	115	<div slot="footer" class="dialog-footer">
	116	<el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
	117	<el-button @click="cancel">取消</el-button>
	118	</div>
	119	</el-dialog>
	120	</div>
	121	</template>
	122
	123	<script>
	124	import { listTree, getTree, delTree, addTree, updateTree } from "@/api/demo/tree";
	125	import Treeselect from "@riophae/vue-treeselect";
	126	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	127
	128	export default {
	129	name: "Tree",
	130	components: {
	131	Treeselect
	132	},
	133	data() {
	134	return {
	135	//按钮loading
	136	buttonLoading: false,
	137	// 遮罩层
	138	loading: true,
	139	// 显示搜索条件
	140	showSearch: true,
	141	// 测试树表表格数据
	142	treeList: [],
	143	// 测试树表树选项
	144	treeOptions: [],
	145	// 弹出层标题
	146	title: "",
	147	// 是否显示弹出层
	148	open: false,
	149	// 是否展开，默认全部展开
	150	isExpandAll: true,
	151	// 重新渲染表格状态
	152	refreshTable: true,
	153	// 创建时间时间范围
	154	daterangeCreateTime: [],
	155	// 查询参数
	156	queryParams: {
	157	treeName: null,
	158	createTime: null,
	159	},
	160	// 表单参数
	161	form: {},
	162	// 表单校验
	163	rules: {
	164	treeName: [
	165	{ required: true, message: "树节点名不能为空", trigger: "blur" }
	166	],
	167	}
	168	};
	169	},
	170	created() {
	171	this.getList();
	172	},
	173	methods: {
	174	/** 查询测试树表列表 */
	175	getList() {
	176	this.loading = true;
	177	this.queryParams.params = {};
	178	if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
	179	this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
	180	this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
	181	}
	182	listTree(this.queryParams).then(response => {
	183	this.treeList = this.handleTree(response.data, "id", "parentId");
	184	this.loading = false;
	185	});
	186	},
	187	/** 转换测试树表数据结构 */
	188	normalizer(node) {
	189	if (node.children && !node.children.length) {
	190	delete node.children;
	191	}
	192	return {
	193	id: node.id,
	194	label: node.treeName,
	195	children: node.children
	196	};
	197	},
	198	/** 查询测试树表下拉树结构 */
	199	getTreeselect() {
	200	listTree().then(response => {
	201	this.treeOptions = [];
	202	const data = { id: 0, treeName: '顶级节点', children: [] };
	203	data.children = this.handleTree(response.data, "id", "parentId");
	204	this.treeOptions.push(data);
	205	});
	206	},
	207	// 取消按钮
	208	cancel() {
	209	this.open = false;
	210	this.reset();
	211	},
	212	// 表单重置
	213	reset() {
	214	this.form = {
	215	id: null,
	216	parentId: null,
	217	deptId: null,
	218	userId: null,
	219	treeName: null,
	220	version: null,
	221	createTime: null,
	222	createBy: null,
	223	updateTime: null,
	224	updateBy: null,
	225	delFlag: null
	226	};
	227	this.resetForm("form");
	228	},
	229	/** 搜索按钮操作 */
	230	handleQuery() {
	231	this.getList();
	232	},
	233	/** 重置按钮操作 */
	234	resetQuery() {
	235	this.daterangeCreateTime = [];
	236	this.resetForm("queryForm");
	237	this.handleQuery();
	238	},
	239	/** 新增按钮操作 */
	240	handleAdd(row) {
	241	this.reset();
	242	this.getTreeselect();
	243	if (row != null && row.id) {
	244	this.form.parentId = row.id;
	245	} else {
	246	this.form.parentId = 0;
	247	}
	248	this.open = true;
	249	this.title = "添加测试树表";
	250	},
	251	/** 展开/折叠操作 */
	252	toggleExpandAll() {
	253	this.refreshTable = false;
	254	this.isExpandAll = !this.isExpandAll;
	255	this.$nextTick(() => {
	256	this.refreshTable = true;
	257	});
	258	},
	259	/** 修改按钮操作 */
	260	handleUpdate(row) {
	261	this.loading = true;
	262	this.reset();
	263	this.getTreeselect();
	264	if (row != null) {
	265	this.form.parentId = row.id;
	266	}
	267	getTree(row.id).then(response => {
	268	this.loading = false;
	269	this.form = response.data;
	270	this.open = true;
	271	this.title = "修改测试树表";
	272	});
	273	},
	274	/** 提交按钮 */
	275	submitForm() {
	276	this.$refs["form"].validate(valid => {
	277	if (valid) {
	278	this.buttonLoading = true;
	279	if (this.form.id != null) {
	280	updateTree(this.form).then(response => {
	281	this.$modal.msgSuccess("修改成功");
	282	this.open = false;
	283	this.getList();
	284	}).finally(() => {
	285	this.buttonLoading = false;
	286	});
	287	} else {
	288	addTree(this.form).then(response => {
	289	this.$modal.msgSuccess("新增成功");
	290	this.open = false;
	291	this.getList();
	292	}).finally(() => {
	293	this.buttonLoading = false;
	294	});
	295	}
	296	}
	297	});
	298	},
	299	/** 删除按钮操作 */
	300	handleDelete(row) {
	301	this.$modal.confirm('是否确认删除测试树表编号为"' + row.id + '"的数据项？').then(() => {
	302	this.loading = true;
	303	return delTree(row.id);
	304	}).then(() => {
	305	this.loading = false;
	306	this.getList();
	307	this.$modal.msgSuccess("删除成功");
	308	}).finally(() => {
	309	this.loading = false;
	310	});
	311	}
	312	}
	313	};
	314	</script>