130 lines
3.6 KiB
Vue
130 lines
3.6 KiB
Vue
<template>
|
|
<custom-modal
|
|
:title="title"
|
|
:width="600"
|
|
v-model="visible"
|
|
:confirmLoading="confirmLoading"
|
|
:okHandler="handleOk"
|
|
wrapClassName="ant-modal-cust-warp"
|
|
style="top:5%;height: 85%;overflow-y: hidden">
|
|
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
|
|
<a-form-model-item label="Role Code" required prop="roleCode">
|
|
<a-input v-model="model.roleCode" :disabled="roleDisabled" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Role Name" required prop="roleName">
|
|
<a-input v-model="model.roleName" />
|
|
</a-form-model-item>
|
|
<a-form-model-item label="Description" prop="description">
|
|
<a-textarea :rows="5" v-model="model.description" />
|
|
</a-form-model-item>
|
|
</a-form-model>
|
|
</a-spin>
|
|
</custom-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import {addRole,editRole,duplicateCheck } from '@/api/api'
|
|
export default {
|
|
name: "RoleModal",
|
|
data () {
|
|
return {
|
|
title:"操作",
|
|
visible: false,
|
|
roleDisabled: false,
|
|
model: {},
|
|
layout: {
|
|
labelCol: { span: 5 },
|
|
wrapperCol: { span: 17 },
|
|
},
|
|
confirmLoading: false,
|
|
validatorRules:{
|
|
roleName: [
|
|
{ required: true, message: 'Please Enter Role Name' },
|
|
{ min: 2, max: 30, message: 'Length Between 2 And 30 Charactors', trigger: 'blur' }
|
|
],
|
|
roleCode: [
|
|
{ required: true, message: 'Please Enter Role Code'},
|
|
{ min: 0, max: 64, message: 'Not More Than 64 Charactors', trigger: 'blur' },
|
|
{ validator: this.validateRoleCode}
|
|
],
|
|
description: [
|
|
{ min: 0, max: 126, message: 'Not More Than 126 Charactors', trigger: 'blur' }
|
|
]
|
|
},
|
|
}
|
|
},
|
|
created () {
|
|
//备份model原始值
|
|
this.modelDefault = JSON.parse(JSON.stringify(this.model));
|
|
},
|
|
methods: {
|
|
add () {
|
|
this.edit(this.modelDefault);
|
|
},
|
|
edit (record) {
|
|
this.model = Object.assign({}, record);
|
|
this.visible = true;
|
|
//编辑页面禁止修改角色编码
|
|
if(this.model.id){
|
|
this.roleDisabled = true;
|
|
}else{
|
|
this.roleDisabled = false;
|
|
}
|
|
},
|
|
close () {
|
|
this.$refs.form.clearValidate();
|
|
this.$emit('close');
|
|
this.visible = false;
|
|
},
|
|
async handleOk () {
|
|
await this.$refs.form.validate()
|
|
this.confirmLoading = true;
|
|
let obj;
|
|
if(!this.model.id){
|
|
obj = addRole(this.model);
|
|
} else {
|
|
obj = editRole(this.model);
|
|
}
|
|
try {
|
|
const res = await obj
|
|
if(res.success) {
|
|
this.$message.success(res.message);
|
|
this.$emit('ok');
|
|
} else{
|
|
this.$message.warning(res.message);
|
|
}
|
|
} catch (error) {
|
|
return Promise.reject()
|
|
} finally {
|
|
this.confirmLoading = false;
|
|
}
|
|
},
|
|
|
|
validateRoleCode(rule, value, callback){
|
|
if(/[\u4E00-\u9FA5]/g.test(value)){
|
|
callback("角色编码不可输入汉字!");
|
|
}else{
|
|
let params = {
|
|
tableName: "sys_role",
|
|
fieldName: "role_code",
|
|
fieldVal: value,
|
|
dataId: this.model.id,
|
|
};
|
|
duplicateCheck(params).then((res)=>{
|
|
if(res.success){
|
|
callback();
|
|
}else{
|
|
callback(res.message);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |