WL/laws_weilai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改路由的授权标识

Browse Source
This commit is contained in:
qq787203167
2022-04-15 14:03:34 +08:00
parent 1ce2e8e0f1
commit ea000f123a
1 changed files with 277 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/views/system/modules/PermissionModal.vue
+277 -268
View File
@@ -7,170 +7,179 @@
:confirmLoading="confirmLoading">
<div :style="{width: '100%',border: '1px solid #e9e9e9',padding: '10px 16px',background: '#fff',}">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item :label="$t('MenuType')" :labelCol="labelCol" :wrapperCol="wrapperCol" >
<a-radio-group @change="onChangeMenuType" v-decorator="['menuType',{'initialValue':localMenuType}]">
<a-radio :value="0">{{$t('FirstLevelMenu')}}</a-radio>
<a-radio :value="1">{{$t('Submenu')}}</a-radio>
<a-radio :value="2">{{$t('ButtonsPermissions')}}</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item :label="$t('MenuType')" :labelCol="labelCol" :wrapperCol="wrapperCol">
<a-radio-group @change="onChangeMenuType" v-decorator="['menuType',{'initialValue':localMenuType}]">
<a-radio :value="0">{{$t('FirstLevelMenu')}}</a-radio>
<a-radio :value="1">{{$t('Submenu')}}</a-radio>
<a-radio :value="2">{{$t('ButtonsPermissions')}}</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="menuLabel"
hasFeedback >
<a-input :placeholder="$t('enterMenuName')" v-decorator="[ 'name', validatorRules.name]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="menuLabel"
hasFeedback>
<a-input :placeholder="$t('enterMenuName')" v-decorator="[ 'name', validatorRules.name]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('MenuEnName')"
hasFeedback >
<a-input :placeholder="$t('enterMenuEnName')" v-decorator="[ 'menuEn', validatorRules.menuEn]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('MenuEnName')"
hasFeedback>
<a-input :placeholder="$t('enterMenuEnName')" v-decorator="[ 'menuEn', validatorRules.menuEn]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="localMenuType!=0"
:label="$t('SuperiorMenu')"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:validate-status="validateStatus"
:hasFeedback="true"
:required="true">
<span slot="help">{{ validateStatus=='error'? $t('selectSuperiorMenu'):'&nbsp;&nbsp;' }}</span>
<a-tree-select
style="width:100%"
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
:treeData="treeData"
v-model="model.parentId"
:placeholder="$t('selectParentMenu')"
:disabled="disableSubmit"
@change="handleParentIdChange">
</a-tree-select>
</a-form-item>
<a-form-item
v-show="localMenuType!=0"
:label="$t('SuperiorMenu')"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:validate-status="validateStatus"
:hasFeedback="true"
:required="true">
<span slot="help">{{ validateStatus=='error'? $t('selectSuperiorMenu'):'&nbsp;&nbsp;' }}</span>
<a-tree-select
style="width:100%"
:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
:treeData="treeData"
v-model="model.parentId"
:placeholder="$t('selectParentMenu')"
:disabled="disableSubmit"
@change="handleParentIdChange">
</a-tree-select>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('MenuPath')">
<a-input :placeholder="$t('enterMenuPath')" v-decorator="[ 'url',validatorRules.url]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('MenuPath')">
<a-input :placeholder="$t('enterMenuPath')" v-decorator="[ 'url',validatorRules.url]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('FrontAssembly')">
<a-input :placeholder="$t('enterFrontComponents')" v-decorator="[ 'component',validatorRules.component]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('FrontAssembly')">
<a-input :placeholder="$t('enterFrontComponents')" v-decorator="[ 'component',validatorRules.component]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="localMenuType==0"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('DefaultJumpAddress')">
<a-input :placeholder="$t('enterRoutingParameters')+' redirect'" v-decorator="[ 'redirect',{}]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="localMenuType==0"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('DefaultJumpAddress')">
<a-input :placeholder="$t('enterRoutingParameters')+' redirect'" v-decorator="[ 'redirect',{}]"
:readOnly="disableSubmit"/>
</a-form-item>
<!-- v-show="!show"-->
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('AuthorizationID')">
<a-input :placeholder="$t('enterAuthorizationID')+' user:list'"
v-decorator="[ 'perms', {rules:[{ required: false, message: $t('PleaseEnterAuthorizationID') },{validator: this.validatePerms }]}]"
:readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('AuthorizationID')">
<a-input :placeholder="$t('enterAuthorizationID')+' user:list'" v-decorator="[ 'perms', {rules:[{ required: false, message: $t('PleaseEnterAuthorizationID') },{validator: this.validatePerms }]}]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('AuthorizationPolicy')">
<j-dict-select-tag v-decorator="['permsType', {}]" :placeholder="$t('selectAuthorizationPolicy')" :type="'radio'" :triggerChange="true" dictCode="global_perms_type"/>
<a-form-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('AuthorizationPolicy')">
<j-dict-select-tag v-decorator="['permsType', {}]" :placeholder="$t('selectAuthorizationPolicy')"
:type="'radio'" :triggerChange="true" dictCode="global_perms_type"/>
</a-form-item>
<a-form-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('status')">
<j-dict-select-tag v-decorator="['status', {}]" :placeholder="$t('selectStatus')" :type="'radio'" :triggerChange="true" dictCode="valid_status"/>
</a-form-item>
<a-form-item
v-show="!show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('status')">
<j-dict-select-tag v-decorator="['status', {}]" :placeholder="$t('selectStatus')" :type="'radio'"
:triggerChange="true" dictCode="valid_status"/>
</a-form-item>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('MenuIcon')">
<a-input :placeholder="$t('ClickSelectIcon')" v-model="model.icon" :readOnly="disableSubmit">
<a-icon slot="addonAfter" type="setting" @click="selectIcons" />
</a-input>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('MenuIcon')">
<a-input :placeholder="$t('ClickSelectIcon')" v-model="model.icon" :readOnly="disableSubmit">
<a-icon slot="addonAfter" type="setting" @click="selectIcons"/>
</a-input>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('sort')">
<a-input-number :placeholder="$t('enterMenuSort')" style="width: 200px" v-decorator="[ 'sortNo',validatorRules.sortNo]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('sort')">
<a-input-number :placeholder="$t('enterMenuSort')" style="width: 200px"
v-decorator="[ 'sortNo',validatorRules.sortNo]" :readOnly="disableSubmit"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('RouteMenu')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="routeSwitch"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('RouteMenu')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="routeSwitch"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('HideRoute')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="menuHidden"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('HideRoute')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="menuHidden"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('CacheRoute')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="isKeepalive"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('CacheRoute')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="isKeepalive"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('AggregateRouting')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="alwaysShow"/>
</a-form-item>
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('AggregateRouting')">
<a-switch :checkedChildren="$t('yes')" :unCheckedChildren="$t('not')" v-model="alwaysShow"/>
</a-form-item>
<!--update_begin author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('OpenMode')">
<a-switch :checkedChildren="$t('external')" :unCheckedChildren="$t('inside')" v-model="internalOrExternal"/>
</a-form-item>
<!--update_end author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
<!--update_begin author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
<a-form-item
v-show="show"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
:label="$t('OpenMode')">
<a-switch :checkedChildren="$t('external')" :unCheckedChildren="$t('inside')" v-model="internalOrExternal"/>
</a-form-item>
<!--update_end author:wuxianquan date:20190908 for:增加组件，外链打开方式可选 -->
</a-form>
</a-form>
<!-- 选择图标 -->
<icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
</a-spin>
<!-- 选择图标 -->
<icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
</a-spin>
<a-row :style="{textAlign:'right'}">
<a-button :style="{marginRight: '8px'}" @click="handleCancel">
{{$t('close')}}
@@ -182,194 +191,194 @@
</template>
<script>
import {addPermission,editPermission,queryTreeList, duplicateCheck} from '@/api/api'
import { addPermission, editPermission, queryTreeList, duplicateCheck } from '@/api/api'
import Icons from './icon/Icons'
import pick from 'lodash.pick'
export default {
name: "PermissionModal",
components: {Icons},
data () {
name: 'PermissionModal',
components: { Icons },
data() {
return {
drawerWidth:700,
treeData:[],
drawerWidth: 700,
treeData: [],
treeValue: '0-0-4',
title:this.$t('operation'),
title: this.$t('operation'),
visible: false,
disableSubmit:false,
disableSubmit: false,
model: {},
localMenuType:0,
alwaysShow:false,//表单元素-聚合路由
menuHidden:false,//表单元素-隐藏路由
routeSwitch:true, //是否路由菜单
localMenuType: 0,
alwaysShow: false,//表单元素-聚合路由
menuHidden: false,//表单元素-隐藏路由
routeSwitch: true, //是否路由菜单
/*update_begin author:wuxianquan date:20190908 for:定义变量，初始值代表内部打开*/
internalOrExternal:false,//菜单打开方式
internalOrExternal: false,//菜单打开方式
/*update_end author:wuxianquan date:20190908 for:定义变量，初始值代表内部打开*/
isKeepalive:true, //是否缓存路由
show:true,//根据菜单类型，动态显示隐藏表单元素
menuLabel:this.$t('MenuName'),
isRequrie:true, // 是否需要验证
isKeepalive: true, //是否缓存路由
show: true,//根据菜单类型，动态显示隐藏表单元素
menuLabel: this.$t('MenuName'),
isRequrie: true, // 是否需要验证
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
sm: { span: 16 }
},
confirmLoading: false,
form: this.$form.createForm(this),
iconChooseVisible: false,
validateStatus:""
validateStatus: ''
}
},
computed:{
validatorRules:function() {
computed: {
validatorRules: function() {
return {
name:{rules: [{ required: true, message: this.$t('enterMenuTitle') }]},
menuEn:{rules: [{ required: true, message: this.$t('enterMenuEnName') }]},
component:{rules: [{ required: this.show, message: this.$t('enterFrontComponents') }]},
url:{rules: [{ required: this.show, message: this.$t('enterMenuPath') }]},
permsType:{rules: [{ required: true, message: this.$t('enterAuthorizationPolicy') }]},
sortNo:{initialValue:1.0},
name: { rules: [{ required: true, message: this.$t('enterMenuTitle') }] },
menuEn: { rules: [{ required: true, message: this.$t('enterMenuEnName') }] },
component: { rules: [{ required: this.show, message: this.$t('enterFrontComponents') }] },
url: { rules: [{ required: this.show, message: this.$t('enterMenuPath') }] },
permsType: { rules: [{ required: true, message: this.$t('enterAuthorizationPolicy') }] },
sortNo: { initialValue: 1.0 }
}
}
},
created () {
this.initDictConfig();
created() {
this.initDictConfig()
},
methods: {
loadTree(){
var that = this;
queryTreeList().then((res)=>{
if(res.success){
that.treeData = [];
loadTree() {
var that = this
queryTreeList().then((res) => {
if (res.success) {
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);
for (let a = 0; a < treeList.length; a++) {
let temp = treeList[a]
temp.isLeaf = temp.leaf
that.treeData.push(temp)
}
}
});
})
},
add () {
add() {
// 默认值
this.edit({status:'1',permsType:'1',route:true});
this.edit({ status: '1', permsType: '1', route: true })
},
edit (record) {
this.resetScreenSize(); // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
this.form.resetFields();
this.model = Object.assign({}, record);
edit(record) {
this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
this.form.resetFields()
this.model = Object.assign({}, record)
//--------------------------------------------------------------------------------------------------
//根据菜单类型，动态展示页面字段
this.alwaysShow = !record.alwaysShow?false:true;
this.menuHidden = !record.hidden?false:true;
this.alwaysShow = !record.alwaysShow ? false : true
this.menuHidden = !record.hidden ? false : true
if(record.route!=null){
this.routeSwitch = record.route?true:false;
if (record.route != null) {
this.routeSwitch = record.route ? true : false
}
if(record.keepAlive!=null){
this.isKeepalive = record.keepAlive?true:false;
}else{
this.isKeepalive = false; // 升级兼容 如果没有（后台没有传过来、或者是新建）默认为false
if (record.keepAlive != null) {
this.isKeepalive = record.keepAlive ? true : false
} else {
this.isKeepalive = false // 升级兼容 如果没有（后台没有传过来、或者是新建）默认为false
}
/*update_begin author:wuxianquan date:20190908 for:编辑初始化数据*/
if(record.internalOrExternal!=null){
this.internalOrExternal = record.internalOrExternal?true:false;
}else{
this.internalOrExternal = false;
if (record.internalOrExternal != null) {
this.internalOrExternal = record.internalOrExternal ? true : false
} else {
this.internalOrExternal = false
}
/*update_end author:wuxianquan date:20190908 for:编辑初始化数据*/
this.show = record.menuType==2?false:true;
this.menuLabel = record.menuType==2?this.$t('ButtonsPermissions'):this.$t('MenuName');
this.show = record.menuType == 2 ? false : true
this.menuLabel = record.menuType == 2 ? this.$t('ButtonsPermissions') : this.$t('MenuName')
if(this.model.parentId){
this.localMenuType = 1;
}else{
this.localMenuType = 0;
if (this.model.parentId) {
this.localMenuType = 1
} else {
this.localMenuType = 0
}
//----------------------------------------------------------------------------------------------
this.visible = true;
this.loadTree();
let fieldsVal = pick(this.model,'name','menuEn','perms','permsType','component','redirect','url','sortNo','menuType','status');
this.visible = true
this.loadTree()
let fieldsVal = pick(this.model, 'name', 'menuEn', 'perms', 'permsType', 'component', 'redirect', 'url', 'sortNo', 'menuType', 'status')
this.$nextTick(() => {
this.form.setFieldsValue(fieldsVal)
});
})
},
close () {
this.$emit('close');
this.disableSubmit = false;
this.visible = false;
close() {
this.$emit('close')
this.disableSubmit = false
this.visible = false
},
handleOk () {
const that = this;
handleOk() {
const that = this
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
this.model.alwaysShow = this.alwaysShow;
this.model.hidden = this.menuHidden;
this.model.route = this.routeSwitch;
this.model.keepAlive = this.isKeepalive;
this.model.alwaysShow = this.alwaysShow
this.model.hidden = this.menuHidden
this.model.route = this.routeSwitch
this.model.keepAlive = this.isKeepalive
/*update_begin author:wuxianquan date:20190908 for:获取值*/
this.model.internalOrExternal = this.internalOrExternal;
this.model.internalOrExternal = this.internalOrExternal
/*update_end author:wuxianquan date:20190908 for:获取值*/
let formData = Object.assign(this.model, values);
let formData = Object.assign(this.model, values)
if ((formData.menuType == 1 || formData.menuType == 2) && !formData.parentId) {
that.validateStatus = 'error';
that.$message.error("请检查你填的类型以及信息是否正确！");
return;
that.validateStatus = 'error'
that.$message.error('请检查你填的类型以及信息是否正确！')
return
} else {
that.validateStatus = 'success';
that.validateStatus = 'success'
}
that.confirmLoading = true;
let obj;
that.confirmLoading = true
let obj
if (!this.model.id) {
obj = addPermission(formData);
obj = addPermission(formData)
} else {
obj = editPermission(formData);
obj = editPermission(formData)
}
obj.then((res) => {
if (res.success) {
that.$message.success(res.message);
that.$emit('ok');
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message);
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false;
that.close();
});
that.confirmLoading = false
that.close()
})
}
})
},
handleCancel () {
handleCancel() {
this.close()
},
validateNumber(rule, value, callback){
if(!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)){
callback();
}else{
callback(this.$t('enterPositiveInteger'));
validateNumber(rule, value, callback) {
if (!value || new RegExp(/^[0-9]*[1-9][0-9]*$/).test(value)) {
callback()
} else {
callback(this.$t('enterPositiveInteger'))
}
},
validatePerms(rule, value, callback){
if(value && value.length>0){
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()
@@ -377,50 +386,50 @@
callback(this.$t('AuthorizationIDExists'))
}
})
}else{
} else {
callback()
}
},
onChangeMenuType(e) {
this.localMenuType=e.target.value
if(e.target.value == 2){
this.show = false;
this.menuLabel = this.$t('ButtonsPermissions');
}else{
this.show = true;
this.menuLabel = this.$t('MenuName');
this.localMenuType = e.target.value
if (e.target.value == 2) {
this.show = false
this.menuLabel = this.$t('ButtonsPermissions')
} else {
this.show = true
this.menuLabel = this.$t('MenuName')
}
this.$nextTick(() => {
this.form.validateFields(['url','component'], { force: true });
});
this.form.validateFields(['url', 'component'], { force: true })
})
},
selectIcons(){
selectIcons() {
this.iconChooseVisible = true
},
handleIconCancel () {
handleIconCancel() {
this.iconChooseVisible = false
},
handleIconChoose (value) {
handleIconChoose(value) {
this.model.icon = value
this.form.icon = value
this.iconChooseVisible = false
},
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize(){
let screenWidth = document.body.clientWidth;
if(screenWidth < 500){
this.drawerWidth = screenWidth;
}else{
this.drawerWidth = 700;
resetScreenSize() {
let screenWidth = document.body.clientWidth
if (screenWidth < 500) {
this.drawerWidth = screenWidth
} else {
this.drawerWidth = 700
}
},
initDictConfig() {
},
handleParentIdChange(value){
if(!value){
this.validateStatus="error"
}else{
this.validateStatus="success"
handleParentIdChange(value) {
if (!value) {
this.validateStatus = 'error'
} else {
this.validateStatus = 'success'
}
}
}