325 lines
11 KiB
Vue
325 lines
11 KiB
Vue
<template>
|
||
<a-drawer
|
||
:title="title"
|
||
:width="drawerWidth"
|
||
@close="handleCancel"
|
||
:visible="visible"
|
||
:confirmLoading="confirmLoading"
|
||
>
|
||
<div :style="{ width: '100%', border: '1px solid #e9e9e9', padding: '10px 16px', background: '#fff' }">
|
||
<a-spin :spinning="confirmLoading">
|
||
<a-form-model ref="form" :model="model" :rules="validatorRules">
|
||
<a-form-model-item label="Menu Type" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||
<a-radio-group @change="onChangeMenuType" v-model="model.menuType">
|
||
<a-radio :value="0">First Level Menu</a-radio>
|
||
<a-radio :value="1">Child Menu</a-radio>
|
||
<a-radio :value="2">Button/Permission</a-radio>
|
||
</a-radio-group>
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="menuLabel" prop="name" hasFeedback>
|
||
<a-input v-model="model.name" :readOnly="disableSubmit" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item
|
||
v-show="model.menuType != 0"
|
||
label="Parent Menu"
|
||
:labelCol="labelCol"
|
||
:wrapperCol="wrapperCol"
|
||
:validate-status="validateStatus"
|
||
:hasFeedback="true"
|
||
:required="true"
|
||
>
|
||
<span slot="help">{{ validateStatus == 'error' ? 'Please Select Parent Menu' : ' ' }}</span>
|
||
<a-tree-select
|
||
style="width: 100%"
|
||
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
|
||
:treeData="treeData"
|
||
v-model="model.parentId"
|
||
placeholder="Please Select Parent Menu"
|
||
:disabled="disableSubmit"
|
||
@change="handleParentIdChange"
|
||
>
|
||
</a-tree-select>
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="url" label="Menu Route">
|
||
<a-input v-model="model.url" :readOnly="disableSubmit" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item
|
||
v-show="show"
|
||
:labelCol="labelCol"
|
||
:wrapperCol="wrapperCol"
|
||
prop="component"
|
||
label="Component"
|
||
>
|
||
<a-input v-model="model.component" :readOnly="disableSubmit" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item
|
||
v-show="model.menuType == 0"
|
||
:labelCol="labelCol"
|
||
:wrapperCol="wrapperCol"
|
||
label="Redirect Params"
|
||
>
|
||
<a-input v-model="model.redirect" :readOnly="disableSubmit" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="!show" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="perms" label="Perms">
|
||
<a-input placeholder="Enter Perms, like: user:list" v-model="model.perms" :readOnly="disableSubmit" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="!show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Auth Category">
|
||
<j-dict-select-tag v-model="model.permsType" :type="'radio'" dictCode="global_perms_type" />
|
||
</a-form-model-item>
|
||
<a-form-model-item v-show="!show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Status">
|
||
<j-dict-select-tag v-model="model.status" :type="'radio'" dictCode="valid_status" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Icon">
|
||
<a-input placeholder="Click Select Icon" v-model="model.icon" :readOnly="disableSubmit">
|
||
<a-icon slot="addonAfter" type="setting" @click="selectIcons" />
|
||
</a-input>
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sortNo" label="Sort">
|
||
<a-input-number v-model="model.sortNo" style="width: 200px" :readOnly="disableSubmit" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Is Route Menu">
|
||
<a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.route" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Hidden">
|
||
<a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.hidden" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Keep Alive">
|
||
<a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.keepAlive" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Combine Route">
|
||
<a-switch checkedChildren="Yes" unCheckedChildren="No" v-model="model.alwaysShow" />
|
||
</a-form-model-item>
|
||
|
||
<a-form-model-item v-show="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="Open Type">
|
||
<a-switch checkedChildren="External" unCheckedChildren="Internal" v-model="model.internalOrExternal" />
|
||
</a-form-model-item>
|
||
</a-form-model>
|
||
|
||
<!-- 选择图标 -->
|
||
<icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
|
||
</a-spin>
|
||
<a-row :style="{ textAlign: 'right' }">
|
||
<a-button :style="{ marginRight: '8px' }" @click="handleCancel" type="warn"> Cancel </a-button>
|
||
<a-button :disabled="disableSubmit" @click="handleOk" type="primary">Ok</a-button>
|
||
</a-row>
|
||
</div>
|
||
</a-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
import { addPermission, editPermission, queryTreeList, duplicateCheck } from '@/api/api'
|
||
import Icons from './icon/Icons'
|
||
|
||
export default {
|
||
name: 'PermissionModal',
|
||
components: { Icons },
|
||
data() {
|
||
return {
|
||
drawerWidth: 700,
|
||
treeData: [],
|
||
title: '操作',
|
||
visible: false,
|
||
disableSubmit: false,
|
||
model: {},
|
||
show: true, //根据菜单类型，动态显示隐藏表单元素
|
||
menuLabel: 'Menu Name',
|
||
labelCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 5 },
|
||
},
|
||
wrapperCol: {
|
||
xs: { span: 24 },
|
||
sm: { span: 16 },
|
||
},
|
||
confirmLoading: false,
|
||
iconChooseVisible: false,
|
||
validateStatus: '',
|
||
}
|
||
},
|
||
computed: {
|
||
validatorRules: function () {
|
||
return {
|
||
name: [{ required: true, message: 'Please Enter Menu Name' }],
|
||
component: [{ required: this.show, message: 'Please Enter Component' }],
|
||
url: [{ required: this.show, message: 'Plaase Enter Route Path' }],
|
||
permsType: [{ required: true, message: 'Please Enter Auth Category' }],
|
||
perms: [{ required: false, message: 'Please Enter Perms' }, { validator: this.validatePerms }],
|
||
}
|
||
},
|
||
},
|
||
created() {},
|
||
methods: {
|
||
loadTree() {
|
||
var that = this
|
||
queryTreeList().then((res) => {
|
||
if (res.success) {
|
||
console.log(res)
|
||
that.treeData = []
|
||
let treeList = res.result.treeList
|
||
for (let a = 0; a < treeList.length; a++) {
|
||
let temp = treeList[a]
|
||
temp.isLeaf = temp.leaf
|
||
that.treeData.push(temp)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
add() {
|
||
//初始化默认值
|
||
this.edit({ status: '1', permsType: '1', sortNo: 1.0, route: true, menuType: 0, component: 'layouts/RouteView' })
|
||
},
|
||
edit(record) {
|
||
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
|
||
this.model = Object.assign({}, record)
|
||
|
||
//根据菜单类型，动态展示页面字段
|
||
console.log('record: ', record)
|
||
this.show = record.menuType == 2 ? false : true
|
||
this.menuLabel = record.menuType == 2 ? 'Button/Permission' : 'Menu Name'
|
||
|
||
this.visible = true
|
||
this.loadTree()
|
||
},
|
||
close() {
|
||
this.$emit('close')
|
||
this.disableSubmit = false
|
||
this.visible = false
|
||
this.$refs.form.resetFields()
|
||
},
|
||
handleOk() {
|
||
const that = this
|
||
// 触发表单验证
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
if ((this.model.menuType == 1 || this.model.menuType == 2) && !this.model.parentId) {
|
||
that.validateStatus = 'error'
|
||
that.$message.error('Please Check The Form')
|
||
return
|
||
} else {
|
||
that.validateStatus = 'success'
|
||
}
|
||
that.confirmLoading = true
|
||
let obj
|
||
if (!this.model.id) {
|
||
obj = addPermission(this.model)
|
||
} else {
|
||
obj = editPermission(this.model)
|
||
}
|
||
obj
|
||
.then((res) => {
|
||
if (res.success) {
|
||
that.$message.success(res.message)
|
||
that.$emit('ok')
|
||
} else {
|
||
that.$message.warning(res.message)
|
||
}
|
||
})
|
||
.finally(() => {
|
||
that.confirmLoading = false
|
||
that.close()
|
||
})
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
handleCancel() {
|
||
this.close()
|
||
},
|
||
validateNumber(rule, value, callback) {
|
||
if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
|
||
callback()
|
||
} else {
|
||
callback('Please Enter Positive Integer')
|
||
}
|
||
},
|
||
validatePerms(rule, value, callback) {
|
||
if (value && value.length > 0) {
|
||
//校验授权标识是否存在
|
||
var params = {
|
||
tableName: 'sys_permission',
|
||
fieldName: 'perms',
|
||
fieldVal: value,
|
||
dataId: this.model.id,
|
||
}
|
||
duplicateCheck(params).then((res) => {
|
||
if (res.success) {
|
||
callback()
|
||
} else {
|
||
callback('Perms Already Exist')
|
||
}
|
||
})
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
onChangeMenuType(e) {
|
||
if (this.model.menuType == 2) {
|
||
this.show = false
|
||
this.menuLabel = 'Menu/Permission'
|
||
} else {
|
||
this.show = true
|
||
this.menuLabel = 'Menu Name'
|
||
}
|
||
|
||
//update-begin---author:wangshuai ---date:20220729 for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空------------
|
||
if (!this.model.id) {
|
||
if (this.model.menuType === 1 && this.model.component === 'layouts/RouteView') {
|
||
this.model.component = ''
|
||
}
|
||
}
|
||
//update-end---author:wangshuai ---date:20220729 for：[VUEN-1834]只有一级菜单，才默认值，子菜单的时候，清空--------------
|
||
|
||
this.$nextTick(() => {
|
||
this.$refs.form.validateField(['url', 'component'])
|
||
})
|
||
},
|
||
selectIcons() {
|
||
this.iconChooseVisible = true
|
||
},
|
||
handleIconCancel() {
|
||
this.iconChooseVisible = false
|
||
},
|
||
handleIconChoose(value) {
|
||
console.log(value)
|
||
this.model.icon = value
|
||
this.iconChooseVisible = false
|
||
},
|
||
// 根据屏幕变化,设置抽屉尺寸
|
||
resetScreenSize() {
|
||
let screenWidth = document.body.clientWidth
|
||
if (screenWidth < 500) {
|
||
this.drawerWidth = screenWidth
|
||
} else {
|
||
this.drawerWidth = 700
|
||
}
|
||
},
|
||
handleParentIdChange(value) {
|
||
if (!value) {
|
||
this.validateStatus = 'error'
|
||
} else {
|
||
this.validateStatus = 'success'
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.ant-select-dropdown {
|
||
background-color: #03353f !important;
|
||
}
|
||
</style> |