Jcdm042-Mes.git

懒羊羊

2024-04-02 8f0f8d2d5e5492b1db16d5166a5e053511844522

提交 \| 用户 \| 时间
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="menuName">
	5	<el-input
	6	v-model="queryParams.menuName"
	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:menu: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="menuList"
	55	row-key="menuId"
	56	:default-expand-all="isExpandAll"
	57	:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
	58	>
	59	<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
	60	<el-table-column prop="icon" label="图标" align="center" width="100">
	61	<template slot-scope="scope">
	62	<svg-icon :icon-class="scope.row.icon" />
	63	</template>
	64	</el-table-column>
	65	<el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
	66	<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
	67	<el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
	68	<el-table-column prop="status" label="状态" width="80">
	69	<template slot-scope="scope">
	70	<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
	71	</template>
	72	</el-table-column>
	73	<el-table-column label="创建时间" align="center" prop="createTime">
	74	<template slot-scope="scope">
	75	<span>{{ parseTime(scope.row.createTime) }}</span>
	76	</template>
	77	</el-table-column>
	78	<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
	79	<template slot-scope="scope">
	80	<el-button
	81	size="mini"
	82	type="text"
	83	icon="el-icon-edit"
	84	@click="handleUpdate(scope.row)"
	85	v-hasPermi="['system:menu:edit']"
	86	>修改</el-button>
	87	<el-button
	88	size="mini"
	89	type="text"
	90	icon="el-icon-plus"
	91	@click="handleAdd(scope.row)"
	92	v-hasPermi="['system:menu:add']"
	93	>新增</el-button>
	94	<el-button
	95	size="mini"
	96	type="text"
	97	icon="el-icon-delete"
	98	@click="handleDelete(scope.row)"
	99	v-hasPermi="['system:menu:remove']"
	100	>删除</el-button>
	101	</template>
	102	</el-table-column>
	103	</el-table>
	104
	105	<!-- 添加或修改菜单对话框 -->
	106	<el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
	107	<el-form ref="form" :model="form" :rules="rules" label-width="100px">
	108	<el-row>
	109	<el-col :span="24">
	110	<el-form-item label="上级菜单" prop="parentId">
	111	<treeselect
	112	v-model="form.parentId"
	113	:options="menuOptions"
	114	:normalizer="normalizer"
	115	:show-count="true"
	116	placeholder="选择上级菜单"
	117	/>
	118	</el-form-item>
	119	</el-col>
	120	<el-col :span="24">
	121	<el-form-item label="菜单类型" prop="menuType">
	122	<el-radio-group v-model="form.menuType">
	123	<el-radio label="M">目录</el-radio>
	124	<el-radio label="C">菜单</el-radio>
	125	<el-radio label="F">按钮</el-radio>
	126	</el-radio-group>
	127	</el-form-item>
	128	</el-col>
	129	<el-col :span="24" v-if="form.menuType != 'F'">
	130	<el-form-item label="菜单图标" prop="icon">
	131	<el-popover
	132	placement="bottom-start"
	133	width="460"
	134	trigger="click"
	135	@show="$refs['iconSelect'].reset()"
	136	>
	137	<IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" />
	138	<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
	139	<svg-icon
	140	v-if="form.icon"
	141	slot="prefix"
	142	:icon-class="form.icon"
	143	style="width: 25px;"
	144	/>
	145	<i v-else slot="prefix" class="el-icon-search el-input__icon" />
	146	</el-input>
	147	</el-popover>
	148	</el-form-item>
	149	</el-col>
	150	<el-col :span="12">
	151	<el-form-item label="菜单名称" prop="menuName">
	152	<el-input v-model="form.menuName" placeholder="请输入菜单名称" />
	153	</el-form-item>
	154	</el-col>
	155	<el-col :span="12">
	156	<el-form-item label="显示排序" prop="orderNum">
	157	<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
	158	</el-form-item>
	159	</el-col>
	160	<el-col :span="12" v-if="form.menuType != 'F'">
	161	<el-form-item prop="isFrame">
	162	<span slot="label">
	163	<el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
	164	<i class="el-icon-question"></i>
	165	</el-tooltip>
	166	是否外链
	167	</span>
	168	<el-radio-group v-model="form.isFrame">
	169	<el-radio label="0">是</el-radio>
	170	<el-radio label="1">否</el-radio>
	171	</el-radio-group>
	172	</el-form-item>
	173	</el-col>
	174	<el-col :span="12" v-if="form.menuType != 'F'">
	175	<el-form-item prop="path">
	176	<span slot="label">
	177	<el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
	178	<i class="el-icon-question"></i>
	179	</el-tooltip>
	180	路由地址
	181	</span>
	182	<el-input v-model="form.path" placeholder="请输入路由地址" />
	183	</el-form-item>
	184	</el-col>
	185	<el-col :span="12" v-if="form.menuType == 'C'">
	186	<el-form-item prop="component">
	187	<span slot="label">
	188	<el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
	189	<i class="el-icon-question"></i>
	190	</el-tooltip>
	191	组件路径
	192	</span>
	193	<el-input v-model="form.component" placeholder="请输入组件路径" />
	194	</el-form-item>
	195	</el-col>
	196	<el-col :span="12" v-if="form.menuType != 'M'">
	197	<el-form-item prop="perms">
	198	<el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
	199	<span slot="label">
	200	<el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
	201	<i class="el-icon-question"></i>
	202	</el-tooltip>
	203	权限字符
	204	</span>
	205	</el-form-item>
	206	</el-col>
	207	<el-col :span="12" v-if="form.menuType == 'C'">
	208	<el-form-item prop="query">
	209	<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
	210	<span slot="label">
	211	<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
	212	<i class="el-icon-question"></i>
	213	</el-tooltip>
	214	路由参数
	215	</span>
	216	</el-form-item>
	217	</el-col>
	218	<el-col :span="12" v-if="form.menuType == 'C'">
	219	<el-form-item prop="isCache">
	220	<span slot="label">
	221	<el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
	222	<i class="el-icon-question"></i>
	223	</el-tooltip>
	224	是否缓存
	225	</span>
	226	<el-radio-group v-model="form.isCache">
	227	<el-radio label="0">缓存</el-radio>
	228	<el-radio label="1">不缓存</el-radio>
	229	</el-radio-group>
	230	</el-form-item>
	231	</el-col>
	232	<el-col :span="12" v-if="form.menuType != 'F'">
	233	<el-form-item prop="visible">
	234	<span slot="label">
	235	<el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
	236	<i class="el-icon-question"></i>
	237	</el-tooltip>
	238	显示状态
	239	</span>
	240	<el-radio-group v-model="form.visible">
	241	<el-radio
	242	v-for="dict in dict.type.sys_show_hide"
	243	:key="dict.value"
	244	:label="dict.value"
	245	>{{dict.label}}</el-radio>
	246	</el-radio-group>
	247	</el-form-item>
	248	</el-col>
	249	<el-col :span="12">
	250	<el-form-item prop="status">
	251	<span slot="label">
	252	<el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
	253	<i class="el-icon-question"></i>
	254	</el-tooltip>
	255	菜单状态
	256	</span>
	257	<el-radio-group v-model="form.status">
	258	<el-radio
	259	v-for="dict in dict.type.sys_normal_disable"
	260	:key="dict.value"
	261	:label="dict.value"
	262	>{{dict.label}}</el-radio>
	263	</el-radio-group>
	264	</el-form-item>
	265	</el-col>
	266	</el-row>
	267	</el-form>
	268	<div slot="footer" class="dialog-footer">
	269	<el-button type="primary" @click="submitForm">确定</el-button>
	270	<el-button @click="cancel">取消</el-button>
	271	</div>
	272	</el-dialog>
	273	</div>
	274	</template>
	275
	276	<script>
	277	import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
	278	import Treeselect from "@riophae/vue-treeselect";
	279	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	280	import IconSelect from "@/components/IconSelect";
	281
	282	export default {
	283	name: "Menu",
	284	dicts: ['sys_show_hide', 'sys_normal_disable'],
	285	components: { Treeselect, IconSelect },
	286	data() {
	287	return {
	288	// 遮罩层
	289	loading: true,
	290	// 显示搜索条件
	291	showSearch: true,
	292	// 菜单表格树数据
	293	menuList: [],
	294	// 菜单树选项
	295	menuOptions: [],
	296	// 弹出层标题
	297	title: "",
	298	// 是否显示弹出层
	299	open: false,
	300	// 是否展开，默认全部折叠
	301	isExpandAll: false,
	302	// 重新渲染表格状态
	303	refreshTable: true,
	304	// 查询参数
	305	queryParams: {
	306	menuName: undefined,
	307	visible: undefined
	308	},
	309	// 表单参数
	310	form: {},
	311	// 表单校验
	312	rules: {
	313	menuName: [
	314	{ required: true, message: "菜单名称不能为空", trigger: "blur" }
	315	],
	316	orderNum: [
	317	{ required: true, message: "菜单顺序不能为空", trigger: "blur" }
	318	],
	319	path: [
	320	{ required: true, message: "路由地址不能为空", trigger: "blur" }
	321	]
	322	}
	323	};
	324	},
	325	created() {
	326	this.getList();
	327	},
	328	methods: {
	329	// 选择图标
	330	selected(name) {
	331	this.form.icon = name;
	332	},
	333	/** 查询菜单列表 */
	334	getList() {
	335	this.loading = true;
	336	listMenu(this.queryParams).then(response => {
	337	this.menuList = this.handleTree(response.data, "menuId");
	338	this.loading = false;
	339	});
	340	},
	341	/** 转换菜单数据结构 */
	342	normalizer(node) {
	343	if (node.children && !node.children.length) {
	344	delete node.children;
	345	}
	346	return {
	347	id: node.menuId,
	348	label: node.menuName,
	349	children: node.children
	350	};
	351	},
	352	/** 查询菜单下拉树结构 */
	353	getTreeselect() {
	354	listMenu().then(response => {
	355	this.menuOptions = [];
	356	const menu = { menuId: 0, menuName: '主类目', children: [] };
	357	menu.children = this.handleTree(response.data, "menuId");
	358	this.menuOptions.push(menu);
	359	});
	360	},
	361	// 取消按钮
	362	cancel() {
	363	this.open = false;
	364	this.reset();
	365	},
	366	// 表单重置
	367	reset() {
	368	this.form = {
	369	menuId: undefined,
	370	parentId: 0,
	371	menuName: undefined,
	372	icon: undefined,
	373	menuType: "M",
	374	orderNum: undefined,
	375	isFrame: "1",
	376	isCache: "0",
	377	visible: "0",
	378	status: "0"
	379	};
	380	this.resetForm("form");
	381	},
	382	/** 搜索按钮操作 */
	383	handleQuery() {
	384	this.getList();
	385	},
	386	/** 重置按钮操作 */
	387	resetQuery() {
	388	this.resetForm("queryForm");
	389	this.handleQuery();
	390	},
	391	/** 新增按钮操作 */
	392	handleAdd(row) {
	393	this.reset();
	394	this.getTreeselect();
	395	if (row != null && row.menuId) {
	396	this.form.parentId = row.menuId;
	397	} else {
	398	this.form.parentId = 0;
	399	}
	400	this.open = true;
	401	this.title = "添加菜单";
	402	},
	403	/** 展开/折叠操作 */
	404	toggleExpandAll() {
	405	this.refreshTable = false;
	406	this.isExpandAll = !this.isExpandAll;
	407	this.$nextTick(() => {
	408	this.refreshTable = true;
	409	});
	410	},
	411	/** 修改按钮操作 */
	412	handleUpdate(row) {
	413	this.reset();
	414	this.getTreeselect();
	415	getMenu(row.menuId).then(response => {
	416	this.form = response.data;
	417	this.open = true;
	418	this.title = "修改菜单";
	419	});
	420	},
	421	/** 提交按钮 */
	422	submitForm: function() {
	423	this.$refs["form"].validate(valid => {
	424	if (valid) {
	425	if (this.form.menuId != undefined) {
	426	updateMenu(this.form).then(response => {
	427	this.$modal.msgSuccess("修改成功");
	428	this.open = false;
	429	this.getList();
	430	});
	431	} else {
	432	addMenu(this.form).then(response => {
	433	this.$modal.msgSuccess("新增成功");
	434	this.open = false;
	435	this.getList();
	436	});
	437	}
	438	}
	439	});
	440	},
	441	/** 删除按钮操作 */
	442	handleDelete(row) {
	443	this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
	444	return delMenu(row.menuId);
	445	}).then(() => {
	446	this.getList();
	447	this.$modal.msgSuccess("删除成功");
	448	}).catch(() => {});
	449	}
	450	}
	451	};
	452	</script>