Jcdm042-Mes.git

懒羊羊

2024-01-31 e57a8990ae56f657a59c435a0613c5f7a8728003

提交 \| 用户 \| 时间
e57a89	1	<template>
懒	2	<div class="app-container">
	3	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
	4	<el-form-item label="部门名称" prop="deptName">
	5	<el-input
	6	v-model="queryParams.deptName"
	7	placeholder="请输入部门名称"
	8	clearable
	9	@keyup.enter.native="handleQuery"
	10	/>
	11	</el-form-item>
	12	<el-form-item label="状态" prop="status">
	13	<el-select v-model="queryParams.status" placeholder="部门状态" clearable>
	14	<el-option
	15	v-for="dict in dict.type.sys_normal_disable"
	16	:key="dict.value"
	17	:label="dict.label"
	18	:value="dict.value"
	19	/>
	20	</el-select>
	21	</el-form-item>
	22	<el-form-item>
	23	<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
	24	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	25	</el-form-item>
	26	</el-form>
	27
	28	<el-row :gutter="10" class="mb8">
	29	<el-col :span="1.5">
	30	<el-button
	31	type="primary"
	32	plain
	33	icon="el-icon-plus"
	34	size="mini"
	35	@click="handleAdd"
	36	v-hasPermi="['system:dept:add']"
	37	>新增</el-button>
	38	</el-col>
	39	<el-col :span="1.5">
	40	<el-button
	41	type="info"
	42	plain
	43	icon="el-icon-sort"
	44	size="mini"
	45	@click="toggleExpandAll"
	46	>展开/折叠</el-button>
	47	</el-col>
	48	<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
	49	</el-row>
	50
	51	<el-table
	52	v-if="refreshTable"
	53	v-loading="loading"
	54	:data="deptList"
	55	row-key="deptId"
	56	:default-expand-all="isExpandAll"
	57	:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	58	>
	59	<el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
	60	<el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
	61	<el-table-column prop="status" label="状态" width="100">
	62	<template slot-scope="scope">
	63	<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
	64	</template>
	65	</el-table-column>
	66	<el-table-column label="创建时间" align="center" prop="createTime" width="200">
	67	<template slot-scope="scope">
	68	<span>{{ parseTime(scope.row.createTime) }}</span>
	69	</template>
	70	</el-table-column>
	71	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	72	<template slot-scope="scope">
	73	<el-button
	74	size="mini"
	75	type="text"
	76	icon="el-icon-edit"
	77	@click="handleUpdate(scope.row)"
	78	v-hasPermi="['system:dept:edit']"
	79	>修改</el-button>
	80	<el-button
	81	size="mini"
	82	type="text"
	83	icon="el-icon-plus"
	84	@click="handleAdd(scope.row)"
	85	v-hasPermi="['system:dept:add']"
	86	>新增</el-button>
	87	<el-button
	88	v-if="scope.row.parentId != 0"
	89	size="mini"
	90	type="text"
	91	icon="el-icon-delete"
	92	@click="handleDelete(scope.row)"
	93	v-hasPermi="['system:dept:remove']"
	94	>删除</el-button>
	95	</template>
	96	</el-table-column>
	97	</el-table>
	98
	99	<!-- 添加或修改部门对话框 -->
	100	<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
	101	<el-form ref="form" :model="form" :rules="rules" label-width="80px">
	102	<el-row>
	103	<el-col :span="24" v-if="form.parentId !== 0">
	104	<el-form-item label="上级部门" prop="parentId">
	105	<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
	106	</el-form-item>
	107	</el-col>
	108	</el-row>
	109	<el-row>
	110	<el-col :span="12">
	111	<el-form-item label="部门名称" prop="deptName">
	112	<el-input v-model="form.deptName" placeholder="请输入部门名称" />
	113	</el-form-item>
	114	</el-col>
	115	<el-col :span="12">
	116	<el-form-item label="显示排序" prop="orderNum">
	117	<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
	118	</el-form-item>
	119	</el-col>
	120	</el-row>
	121	<el-row>
	122	<el-col :span="12">
	123	<el-form-item label="负责人" prop="leader">
	124	<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
	125	</el-form-item>
	126	</el-col>
	127	<el-col :span="12">
	128	<el-form-item label="联系电话" prop="phone">
	129	<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
	130	</el-form-item>
	131	</el-col>
	132	</el-row>
	133	<el-row>
	134	<el-col :span="12">
	135	<el-form-item label="邮箱" prop="email">
	136	<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
	137	</el-form-item>
	138	</el-col>
	139	<el-col :span="12">
	140	<el-form-item label="部门状态">
	141	<el-radio-group v-model="form.status">
	142	<el-radio
	143	v-for="dict in dict.type.sys_normal_disable"
	144	:key="dict.value"
	145	:label="dict.value"
	146	>{{dict.label}}</el-radio>
	147	</el-radio-group>
	148	</el-form-item>
	149	</el-col>
	150	</el-row>
	151	</el-form>
	152	<div slot="footer" class="dialog-footer">
	153	<el-button type="primary" @click="submitForm">确定</el-button>
	154	<el-button @click="cancel">取消</el-button>
	155	</div>
	156	</el-dialog>
	157	</div>
	158	</template>
	159
	160	<script>
	161	import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
	162	import Treeselect from "@riophae/vue-treeselect";
	163	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	164
	165	export default {
	166	name: "Dept",
	167	dicts: ['sys_normal_disable'],
	168	components: { Treeselect },
	169	data() {
	170	return {
	171	// 遮罩层
	172	loading: true,
	173	// 显示搜索条件
	174	showSearch: true,
	175	// 表格树数据
	176	deptList: [],
	177	// 部门树选项
	178	deptOptions: [],
	179	// 弹出层标题
	180	title: "",
	181	// 是否显示弹出层
	182	open: false,
	183	// 是否展开，默认全部展开
	184	isExpandAll: true,
	185	// 重新渲染表格状态
	186	refreshTable: true,
	187	// 查询参数
	188	queryParams: {
	189	deptName: undefined,
	190	status: undefined
	191	},
	192	// 表单参数
	193	form: {},
	194	// 表单校验
	195	rules: {
	196	parentId: [
	197	{ required: true, message: "上级部门不能为空", trigger: "blur" }
	198	],
	199	deptName: [
	200	{ required: true, message: "部门名称不能为空", trigger: "blur" }
	201	],
	202	orderNum: [
	203	{ required: true, message: "显示排序不能为空", trigger: "blur" }
	204	],
	205	email: [
	206	{
	207	type: "email",
	208	message: "请输入正确的邮箱地址",
	209	trigger: ["blur", "change"]
	210	}
	211	],
	212	phone: [
	213	{
	214	pattern: /^1[3\|4\|5\|6\|7\|8\|9][0-9]\d{8}$/,
	215	message: "请输入正确的手机号码",
	216	trigger: "blur"
	217	}
	218	]
	219	}
	220	};
	221	},
	222	created() {
	223	this.getList();
	224	},
	225	methods: {
	226	/** 查询部门列表 */
	227	getList() {
	228	this.loading = true;
	229	listDept(this.queryParams).then(response => {
	230	this.deptList = this.handleTree(response.data, "deptId");
	231	this.loading = false;
	232	});
	233	},
	234	/** 转换部门数据结构 */
	235	normalizer(node) {
	236	if (node.children && !node.children.length) {
	237	delete node.children;
	238	}
	239	return {
	240	id: node.deptId,
	241	label: node.deptName,
	242	children: node.children
	243	};
	244	},
	245	// 取消按钮
	246	cancel() {
	247	this.open = false;
	248	this.reset();
	249	},
	250	// 表单重置
	251	reset() {
	252	this.form = {
	253	deptId: undefined,
	254	parentId: undefined,
	255	deptName: undefined,
	256	orderNum: undefined,
	257	leader: undefined,
	258	phone: undefined,
	259	email: undefined,
	260	status: "0"
	261	};
	262	this.resetForm("form");
	263	},
	264	/** 搜索按钮操作 */
	265	handleQuery() {
	266	this.getList();
	267	},
	268	/** 重置按钮操作 */
	269	resetQuery() {
	270	this.resetForm("queryForm");
	271	this.handleQuery();
	272	},
	273	/** 新增按钮操作 */
	274	handleAdd(row) {
	275	this.reset();
	276	if (row != undefined) {
	277	this.form.parentId = row.deptId;
	278	}
	279	this.open = true;
	280	this.title = "添加部门";
	281	listDept().then(response => {
	282	this.deptOptions = this.handleTree(response.data, "deptId");
	283	});
	284	},
	285	/** 展开/折叠操作 */
	286	toggleExpandAll() {
	287	this.refreshTable = false;
	288	this.isExpandAll = !this.isExpandAll;
	289	this.$nextTick(() => {
	290	this.refreshTable = true;
	291	});
	292	},
	293	/** 修改按钮操作 */
	294	handleUpdate(row) {
	295	this.reset();
	296	getDept(row.deptId).then(response => {
	297	this.form = response.data;
	298	this.open = true;
	299	this.title = "修改部门";
	300	listDeptExcludeChild(row.deptId).then(response => {
	301	this.deptOptions = this.handleTree(response.data, "deptId");
	302	if (this.deptOptions.length == 0) {
	303	const noResultsOptions = { deptId: this.form.parentId, deptName: this.form.parentName, children: [] };
	304	this.deptOptions.push(noResultsOptions);
	305	}
	306	});
	307	});
	308	},
	309	/** 提交按钮 */
	310	submitForm: function() {
	311	this.$refs["form"].validate(valid => {
	312	if (valid) {
	313	if (this.form.deptId != undefined) {
	314	updateDept(this.form).then(response => {
	315	this.$modal.msgSuccess("修改成功");
	316	this.open = false;
	317	this.getList();
	318	});
	319	} else {
	320	addDept(this.form).then(response => {
	321	this.$modal.msgSuccess("新增成功");
	322	this.open = false;
	323	this.getList();
	324	});
	325	}
	326	}
	327	});
	328	},
	329	/** 删除按钮操作 */
	330	handleDelete(row) {
	331	this.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项？').then(function() {
	332	return delDept(row.deptId);
	333	}).then(() => {
	334	this.getList();
	335	this.$modal.msgSuccess("删除成功");
	336	}).catch(() => {});
	337	}
	338	}
	339	};
	340	</script>