mt-yd-ui/src/views/modules/sys/menu-add-or-update.vue

<template>
	<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
			<el-form-item prop="type" :label="$t('menu.type')" size="mini">
				<el-radio-group v-model="dataForm.type" :disabled="!!dataForm.id">
					<el-radio :label="0">{{ $t('menu.type0') }}</el-radio>
					<el-radio :label="1">{{ $t('menu.type1') }}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item prop="name" :label="$t('menu.name')">
				<el-input v-model="dataForm.name" :placeholder="$t('menu.name')"></el-input>
			</el-form-item>
			<el-form-item prop="parentName" :label="$t('menu.parentName')" class="menu-list">
				<el-popover v-model="menuListVisible" ref="menuListPopover" placement="bottom-start" trigger="click">
					<el-tree
						:data="menuList"
						:props="{ label: 'name', children: 'children' }"
						node-key="id"
						ref="menuListTree"
						:highlight-current="true"
						:expand-on-click-node="false"
						accordion
						@current-change="menuListTreeCurrentChangeHandle"
					>
					</el-tree>
				</el-popover>
				<el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" :placeholder="$t('menu.parentName')">
					<i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="deptListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i>
				</el-input>
			</el-form-item>
			<el-form-item v-if="dataForm.type === 0" prop="url" :label="$t('menu.url')">
				<el-input v-model="dataForm.url" :placeholder="$t('menu.url')"></el-input>
			</el-form-item>
			<el-form-item prop="sort" :label="$t('menu.sort')">
				<el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :label="$t('menu.sort')"></el-input-number>
			</el-form-item>
			<el-form-item prop="permissions" :label="$t('menu.permissions')">
				<el-input v-model="dataForm.permissions" :placeholder="$t('menu.permissionsTips')"></el-input>
			</el-form-item>
			<el-form-item v-if="dataForm.type === 0" prop="icon" :label="$t('menu.icon')" class="icon-list">
				<el-popover v-model="iconListVisible" ref="iconListPopover" placement="bottom-start" trigger="click" popper-class="mod-sys__menu-icon-popover">
					<div class="mod-sys__menu-icon-inner">
						<div class="mod-sys__menu-icon-list">
							<el-button v-for="(item, index) in iconList" :key="index" @click="iconListCurrentChangeHandle(item)" :class="{ 'is-active': dataForm.icon === item }">
								<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${item}`"></use></svg>
							</el-button>
						</div>
					</div>
				</el-popover>
				<el-input v-model="dataForm.icon" v-popover:iconListPopover :readonly="true" :placeholder="$t('menu.icon')"></el-input>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { getIconList } from '@/utils'
export default {
	data() {
		return {
			visible: false,
			menuList: [],
			menuListVisible: false,
			iconList: [],
			iconListVisible: false,
			dataForm: {
				id: '',
				type: 0,
				name: '',
				pid: '0',
				parentName: '',
				url: '',
				permissions: '',
				sort: 0,
				icon: ''
			}
		}
	},
	computed: {
		dataRule() {
			return {
				name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
				parentName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
			}
		}
	},
	watch: {
		'dataForm.type'(val) {
			this.$refs['dataForm'].clearValidate()
		}
	},
	methods: {
		init() {
			this.visible = true
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				this.iconList = getIconList()
				this.dataForm.parentName = this.$t('menu.parentNameDefault')
				this.getMenuList().then(() => {
					if (this.dataForm.id) {
						this.getInfo()
					}
				})
			})
		},
		// 获取菜单列表
		getMenuList() {
			return this.$http
				.get(this.$http.adornUrl('/sys/menu/list?type=0'))
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}
					this.menuList = res.data
				})
				.catch(() => {})
		},
		// 获取信息
		getInfo() {
			this.$http
				.get(this.$http.adornUrl(`/sys/menu/${this.dataForm.id}`))
				.then(({ data: res }) => {
					if (res.code !== 0) {
						return this.$message.error(res.msg)
					}
					this.dataForm = {
						...this.dataForm,
						...res.data
					}
					if (this.dataForm.pid === '0') {
						return this.deptListTreeSetDefaultHandle()
					}
					this.$refs.menuListTree.setCurrentKey(this.dataForm.pid)
				})
				.catch(() => {})
		},
		// 上级菜单树, 设置默认值
		deptListTreeSetDefaultHandle() {
			this.dataForm.pid = '0'
			this.dataForm.parentName = this.$t('menu.parentNameDefault')
		},
		// 上级菜单树, 选中
		menuListTreeCurrentChangeHandle(data) {
			this.dataForm.pid = data.id
			this.dataForm.parentName = data.name
			this.menuListVisible = false
		},
		// 图标, 选中
		iconListCurrentChangeHandle(icon) {
			this.dataForm.icon = icon
			this.iconListVisible = false
		},
		// 表单提交
		dataFormSubmitHandle: debounce(
			function() {
				this.$refs['dataForm'].validate(valid => {
					if (!valid) {
						return false
					}
					this.$http[!this.dataForm.id ? 'post' : 'put'](this.$http.adornUrl('/sys/menu'), this.dataForm)
						.then(({ data: res }) => {
							if (res.code !== 0) {
								return this.$message.error(res.msg)
							}
							this.$message({
								message: this.$t('prompt.success'),
								type: 'success',
								duration: 500,
								onClose: () => {
									this.visible = false
									this.$emit('refreshDataList')
								}
							})
						})
						.catch(() => {})
				})
			},
			1000,
			{ leading: true, trailing: false }
		)
	}
}
</script>

<style lang="scss">
.mod-sys__menu {
	.menu-list,
	.icon-list {
		.el-input__inner,
		.el-input__suffix {
			cursor: pointer;
		}
	}
	&-icon-popover {
		width: 458px;
		overflow: hidden;
	}
	&-icon-inner {
		width: 478px;
		max-height: 258px;
		overflow-x: hidden;
		overflow-y: auto;
	}
	&-icon-list {
		width: 458px;
		padding: 0;
		margin: -8px 0 0 -8px;
		> .el-button {
			padding: 8px;
			margin: 8px 0 0 8px;
			> span {
				display: inline-block;
				vertical-align: middle;
				width: 18px;
				height: 18px;
				font-size: 18px;
			}
		}
	}
}
</style>