Commit e103fc9d authored by “yiyousong”'s avatar “yiyousong”

perf: 优化用户管理和角色管理新增、修改弹窗

parent f1f2f297
<template>
<div class="authorityMis">
<div class="header_box">
<!-- <button class="addRoles_btn" @click="showRoleEditModal(false)">
<span>新增角色</span>
</button> -->
<a-button
type="primary"
class="addclass"
......@@ -18,11 +15,6 @@
v-model="searchRoleName"
@search="getRoleList"
/>
<!-- <a-input v-model="searchRoleName" placeholder="请输入角色名称搜索">
<a-icon slot="prefix" type="search" />
</a-input> -->
<!-- <button class="search_btn" @click="getRoleList">搜索</button> -->
<!-- <a-button type="primary" class="addclass" @click="getRoleList">搜索</a-button> -->
</span>
</div>
<div class="main">
......@@ -57,7 +49,6 @@
</a-table>
<AddEditRole
ref="AddEditRole"
:sourceInfoForm="sourceInfoForm"
:formTitle="formTitle"
:roleDict="roleDict"
@getRoleList="getRoleList"
......@@ -123,8 +114,7 @@ export default {
},
],
tableSourceData: [],
formTitle: undefined, //表单title
sourceInfoForm: {},
formTitle: "", //表单title
roleDict: {},
};
},
......@@ -171,15 +161,11 @@ export default {
},
showRoleEditModal(isEdit, row) {
if (isEdit) {
this.sourceInfoForm = deepClone(row);
this.formTitle = "编辑";
this.$refs.AddEditRole.onEdit(row);
} else {
let obj = {
name: undefined, //姓名
remark: undefined, //描述
};
this.sourceInfoForm = obj;
this.formTitle = "添加";
this.$refs.AddEditRole.onAdd();
}
this.$refs.AddEditRole.roleEditModalVisible = true;
},
......@@ -192,16 +178,16 @@ export default {
content: "此操作将删除该角色及权限信息,是否继续?",
okText: "",
cancelText: "",
centered: true,
onOk() {
roleDelete({
id: row.id,
}).then((res) => {
// console.log(res);
if (res.code == 1) {
_this.$message.success("删除成功");
//重新获取table数据
_this.$nextTick(() => {
_this.getRoleList();
// _this.$message.success(res.data.message);
});
} else {
_this.$message.error(res.data.message);
......
......@@ -16,7 +16,7 @@
:label-col="{ span: 6 }"
:wrapper-col="{ span: 18 }"
>
<a-form-model-item label="用户名" prop="loginName">
<a-form-model-item label="用户名">
<a-input
disabled
v-model="form.loginName"
......@@ -35,7 +35,7 @@
</a-form-model>
<div slot="footer">
<a-button style="margin-left: 10px" @click="handleClose">取消</a-button>
<a-button style="margin-left: 10px" @click="handleReset">重置</a-button>
<a-button type="primary" class="addclass" @click="handleOk"
>确定</a-button
>
......@@ -117,6 +117,9 @@ export default {
}
});
},
handleReset() {
this.$refs.formData.resetFields();
},
handleClose() {
this.$refs.formData.resetFields();
this.Visible = false;
......@@ -125,5 +128,4 @@ export default {
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<style lang="less" scoped></style>
<template>
<div>
<a-modal
:destroyOnClose="true"
title="编辑"
:centered="true"
:visible="Visible"
@cancel="Visible = false"
@cancel="handelCancel"
:maskClosable="false"
>
<a-form-model
......@@ -29,7 +28,7 @@
@change="handleSelect"
/>
</a-form-model-item>
<a-form-model-item label="电话">
<a-form-model-item label="电话" prop="mobile">
<a-input placeholder="请输入电话号码" v-model="form.mobile" />
</a-form-model-item>
<a-form-model-item ref="realName" label="用户姓名" prop="realName">
......@@ -152,25 +151,24 @@ export default {
},
// 编辑
onEdit(row) {
this.form = { ...row };
try {
this.form.areaNames = JSON.parse(this.form.areaNames);
} catch (err) {
this.form.areaNames = this.form.areaNames;
console.log(typeof this.form.areaNames);
}
if (typeof this.form.areaNames == "string") {
this.selectAreaList = [this.form.areaNames];
} else {
if (this.form.areaNames.length) {
this.selectAreaList = this.form.areaNames.map((v) => v.label);
setTimeout(() => {
this.form = { ...row };
try {
this.form.areaNames = JSON.parse(this.form.areaNames);
} catch (err) {
this.form.areaNames = this.form.areaNames;
}
if (typeof this.form.areaNames == "string") {
this.selectAreaList = [this.form.areaNames];
} else {
this.selectAreaList = [];
if (this.form.areaNames.length) {
this.selectAreaList = this.form.areaNames.map((v) => v.label);
} else {
this.selectAreaList = [];
}
}
}
// this.form.areaCodes = this.form.areaCodes.split(",");
this.form.loginPwd && this.$delete(this.form, "loginPwd");
this.form.loginPwd && this.$delete(this.form, "loginPwd");
}, 10);
},
// 提交
onSubmit() {
......@@ -187,6 +185,10 @@ export default {
: (hash[next.areaCode] = true && item.push(next));
return item;
}, []);
if (!this.form.areaNames.length) {
this.$message.warning("请选择站点区域");
return;
}
let res = await userSave({
...this.form,
areaNames: JSON.stringify(this.form.areaNames),
......@@ -197,13 +199,19 @@ export default {
if (code === 1) {
this.$message.success(msg);
this.$emit("EditSuccess");
this.Visible = false;
this.handelCancel();
}
}
});
},
resetForm() {
this.$refs.ruleForm.resetFields();
this.selectAreaList = [];
},
handelCancel() {
this.$refs.ruleForm.resetFields();
this.selectAreaList = [];
this.Visible = false;
},
// 选中树节点
handleSelect(value, node, extra) {
......
......@@ -4,10 +4,9 @@
:title="formTitle"
:getContainer="() => $refs.roleEditModal_box"
:centered="true"
:destroyOnClose="true"
:visible="roleEditModalVisible"
:confirmLoading="roleEditModalLoading"
@cancel="roleEditModalVisible = false"
@cancel="handleCancel"
width="30%"
:maskClosable="false"
>
......@@ -41,22 +40,32 @@
</a-form-model>
<template slot="footer">
<a-button @click="resetForm">重置</a-button>
<a-button type="primary" class="addclass" @click="roleEditModal_Ok">确定</a-button>
<a-button type="primary" class="addclass" @click="roleEditModal_Ok"
>确定</a-button
>
</template>
</a-modal>
</div>
</template>
<script>
import { deepClone } from "@/utils/js/common.js";
import { roleSave } from "@/api/authorityMis.js";
export default {
name: "PortalAdminVueNewRole",
props: {
formTitle: {
type: String,
default: "编辑",
},
},
data() {
return {
roleEditModalVisible: false, //模态
roleEditModalLoading: false, //确定回调 loading
compileInfoForm: {}, //页面表单信息
compileInfoForm: {
name: "", //姓名
remark: "", //描述
}, //页面表单信息
roleRules: {
name: [
{
......@@ -65,10 +74,6 @@ export default {
message: "请输入角色名称",
trigger: "blur",
},
// {
// pattern: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/,
// message: "不能有特殊字符和数字、长度在1-20",
// },
],
remark: [
{
......@@ -81,57 +86,24 @@ export default {
},
};
},
props: {
roleDict: {
type: Object,
default: () => {
return {};
},
},
formTitle: {
type: String,
default: () => {
return "编辑";
},
},
sourceInfoForm: {
type: Object,
default: () => {
return {};
},
methods: {
onAdd() {
Object.assign(this.compileInfoForm, this.$options.data().compileInfoForm);
this.compileInfoForm.id && this.$delete(this.compileInfoForm, "id");
},
},
watch: {
sourceInfoForm: {
handler(newValue, oldValue) {
// console.log(newValue);
// console.log(oldValue);
this.compileInfoForm = deepClone(newValue);
for (let key in this.roleRules) {
this.roleRules[key][0].required = this.formTitle == "添加";
}
},
deep: true,
onEdit(row) {
setTimeout(() => {
this.compileInfoForm = { ...row };
}, 10);
},
},
mounted() {},
methods: {
roleEditModal_Ok() {
this.$refs.compileInfoForm.validate((valid) => {
if (valid) {
// this.roleEditModalLoading = true;
let submitObj = {
name: this.compileInfoForm.name,
remark: this.compileInfoForm.remark,
};
if (this.formTitle == "编辑") {
submitObj["id"] = this.compileInfoForm["id"];
}
roleSave(submitObj).then((res) => {
roleSave(this.compileInfoForm).then((res) => {
if (res.code == 1) {
this.$emit("getRoleList");
// this.$message.success(res.msg);
this.roleEditModalVisible = false;
this.$message.success(res.msg);
this.handleCancel();
}
});
} else {
......@@ -142,10 +114,12 @@ export default {
},
resetForm() {
// 重置还原表单信息内容
this.$set(this, "compileInfoForm", this.sourceInfoForm);
this.$nextTick(() => {
this.$refs.compileInfoForm.resetFields();
});
this.$refs.compileInfoForm.resetFields();
},
handleCancel() {
// 重置还原表单信息内容
this.$refs.compileInfoForm.resetFields();
this.roleEditModalVisible = false;
},
},
};
......@@ -158,30 +132,5 @@ export default {
max-height: 550px !important;
overflow-y: auto !important;
}
//.ant-modal-footer {
// text-align: left !important;
// }
//.ant-form-item-label > label::after {
// display: none !important;
// }
//.ant-form-item {
// .ant-form-item-label {
// &::after {
// content: ":";
// position: relative;
// top: -0.5px;
// margin: 0 8px 0 2px;
// }
// }
// }
//.ant-form-item:last-child {
// .ant-form-item-label {
// &::after {
// display: none !important;
// }
// }
// }
}
</style>
\ No newline at end of file
</style>
......@@ -17,13 +17,14 @@
>
<a-form-model-item label="站点授权" prop="areaCodes">
<a-tree-select
v-model="form.areaCodes"
v-model="changeSelect"
style="width: 100%"
:tree-data="treeData"
allowClear
:load-data="onLoadData"
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
tree-checkable
labelInValue
:show-checked-strategy="SHOW_PARENT"
placeholder="请选择站点区域"
:replaceFields="replaceFields"
......@@ -53,7 +54,7 @@
"
/>
</a-form-model-item>
<a-form-model-item label="电话">
<a-form-model-item label="电话" prop="mobile">
<a-input placeholder="请输入电话号码" v-model="form.mobile" />
</a-form-model-item>
<a-form-model-item ref="realName" label="用户姓名" prop="realName">
......@@ -101,6 +102,7 @@ export default {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
changeSelect: [],
form: {
loginName: undefined,
loginPwd: undefined,
......@@ -111,6 +113,9 @@ export default {
areaNames: undefined,
},
rules: {
areaCodes: [
{ required: true, message: "请选择站点区域", trigger: "change" },
],
loginName: [
{ required: true, validator: changeAccount, trigger: "blur" },
],
......@@ -188,10 +193,15 @@ export default {
onSubmit() {
this.$refs.ruleForm.validate(async (valid) => {
if (valid) {
let areas = this.changeSelect.map((v) => {
return {
areaCode: v.value,
label: v.label,
};
});
let res = await userSave({
...this.form,
areaCodes: this.form.areaCodes.join(","),
areaNames: JSON.stringify(this.changeSelect),
areaNames: JSON.stringify(areas),
loginName: encrypt(this.form.loginName),
loginPwd: encrypt(this.form.loginPwd),
});
......@@ -209,21 +219,8 @@ export default {
this.changeSelect = [];
},
// 选择区域
handleSelect(value, node, extra) {
let { allCheckedNodes } = extra;
this.changeSelect = allCheckedNodes.map((v) => {
if (v.node) {
return {
areaCode: v.node.data.props.areaCode,
label: v.node.data.props.label,
};
} else {
return {
areaCode: v.data.props.areaCode,
label: v.data.props.label,
};
}
});
handleSelect() {
this.form.areaCodes = this.changeSelect.map((v) => v.value).join(",");
},
},
};
......
......@@ -250,6 +250,7 @@ export default {
content: "此操作将删除该角色及权限信息,是否继续?",
okText: "",
cancelText: "",
centered: true,
onOk() {
userDelete({
id: val,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment