mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-13 12:28:54 +08:00
refactor: 四端完成 Options API → script setup + vuex → pinia 迁移
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录） - util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md） - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
This commit is contained in:
lifenlong
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
|
||||
<el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
|
||||
<el-form-item label="店员名称">
|
||||
<el-input
|
||||
type="text"
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
<br>
|
||||
<el-table
|
||||
ref="table"
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
@@ -178,9 +178,10 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { computed, nextTick, onMounted, reactive, ref } from "vue";
|
||||
import {
|
||||
checkClerk,
|
||||
checkClerk as fetchCheckClerk,
|
||||
getUserListData,
|
||||
getAllRoleList,
|
||||
addUser,
|
||||
@@ -190,442 +191,441 @@ import {
|
||||
resetPassword,
|
||||
getClerk
|
||||
} from "@/api/index";
|
||||
import {validateMobile} from "@/libs/validate";
|
||||
import { validateMobile } from "@/libs/validate";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import { Message, Modal } from "@/utils/message";
|
||||
import { md5 } from "@/utils/md5.js";
|
||||
import departmentChoose from "@/views/my-components/lili/department-choose";
|
||||
import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
|
||||
|
||||
export default {
|
||||
name: "clerk-manage",
|
||||
components: {
|
||||
Search,
|
||||
departmentChoose,
|
||||
departmentTreeChoose,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
open:0,
|
||||
loading: true, // 加载状态
|
||||
selectCount: 0, // 已选数量
|
||||
selectList: [], // 已选数据列表
|
||||
searchForm: { // 请求参数
|
||||
clerkName: "",
|
||||
departmentId: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
sort: "createTime",
|
||||
order: "desc"
|
||||
},
|
||||
modalType: 0, // 新增编辑标识
|
||||
userModalVisible: false, // 用户modal显隐
|
||||
userEditModalVisible:false,
|
||||
modalTitle: "", // modal标题
|
||||
form: { // 表单
|
||||
username: "",
|
||||
mobile: 0,
|
||||
sex: "",
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
},
|
||||
defineOptions({ name: "clerk-manage" });
|
||||
|
||||
editForm: { // 表单
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
},
|
||||
mobile: "",
|
||||
clerkName: "",
|
||||
const searchFormRef = ref(null);
|
||||
const tableRef = ref(null);
|
||||
const dep = ref(null);
|
||||
const editFormRef = ref(null);
|
||||
const editDepTree = ref(null);
|
||||
const addForm = ref(null);
|
||||
const addDepTree = ref(null);
|
||||
|
||||
newMember: false,
|
||||
oldMember: false,
|
||||
memberCheck: false,
|
||||
roleList: [], // 角色列表
|
||||
errorPass: "", // 错误提示
|
||||
formValidate: { // 验证规则
|
||||
username: [
|
||||
{required: true, message: "用户名不能为空", trigger: "blur"}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "密码不能为空", trigger: "blur"}
|
||||
],
|
||||
mobile: [
|
||||
{required: true, message: "手机号不能为空", trigger: "blur"},
|
||||
{validator: validateMobile, trigger: "blur"}
|
||||
]
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
data: [], // 用户数据
|
||||
total: 0, // 总数
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
addFormRules() {
|
||||
const rules = {
|
||||
username: this.formValidate.username,
|
||||
mobile: this.formValidate.mobile,
|
||||
};
|
||||
if (this.newMember) {
|
||||
rules.password = this.formValidate.password;
|
||||
}
|
||||
return rules;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getUserList();
|
||||
},
|
||||
checkClerks() {
|
||||
this.open = this.form.mobile.length;
|
||||
const open = ref(0);
|
||||
const loading = ref(true); // 加载状态
|
||||
const selectCount = ref(0); // 已选数量
|
||||
const selectList = ref([]); // 已选数据列表
|
||||
const searchForm = reactive({ // 请求参数
|
||||
clerkName: "",
|
||||
departmentId: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
sort: "createTime",
|
||||
order: "desc"
|
||||
});
|
||||
const modalType = ref(0); // 新增编辑标识
|
||||
const userModalVisible = ref(false); // 用户modal显隐
|
||||
const userEditModalVisible = ref(false);
|
||||
const modalTitle = ref(""); // modal标题
|
||||
const form = ref({ // 表单
|
||||
username: "",
|
||||
mobile: 0,
|
||||
sex: "",
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
});
|
||||
|
||||
if(this.open == 11 ){
|
||||
this.checkClerk();
|
||||
}
|
||||
if(this.open < 11){
|
||||
this.checkAgainClerk()
|
||||
}
|
||||
},
|
||||
// 选择部门回调
|
||||
handleSelectDepTree(v) {
|
||||
if (v) {
|
||||
this.form.departmentId = v.departmentId;
|
||||
this.form.departmentTitle = v.departmentTitle;
|
||||
} else {
|
||||
this.form.departmentId = "";
|
||||
this.form.departmentTitle = "";
|
||||
}
|
||||
},
|
||||
// 选择部门回调
|
||||
handleEditSelectDepTree(v) {
|
||||
if (v) {
|
||||
this.editForm.departmentId = v.departmentId;
|
||||
this.editForm.departmentTitle = v.departmentTitle;
|
||||
} else {
|
||||
this.editForm.departmentId = "";
|
||||
this.editForm.departmentTitle = "";
|
||||
}
|
||||
},
|
||||
//重新校验会员
|
||||
checkAgainClerk() {
|
||||
this.memberCheck = false;
|
||||
this.newMember = false;
|
||||
this.oldMember = false;
|
||||
this.form.username = "";
|
||||
this.form.password = "";
|
||||
this.form.isSuper = 0;
|
||||
this.form.roles = [];
|
||||
this.errorPass = "";
|
||||
},
|
||||
// 检测当前手机号对应会员：无 id 为新建会员，有 id 为已有会员
|
||||
checkClerk() {
|
||||
if (!this.form.mobile) {
|
||||
return;
|
||||
}
|
||||
this.newMember = false;
|
||||
this.oldMember = false;
|
||||
this.form.username = "";
|
||||
this.form.password = "";
|
||||
this.errorPass = "";
|
||||
checkClerk(this.form.mobile).then((res) => {
|
||||
if (!res.success) {
|
||||
return;
|
||||
}
|
||||
if (!res.result || !res.result.id) {
|
||||
// 平台无此会员，需新建账号并设置密码
|
||||
this.newMember = true;
|
||||
this.oldMember = false;
|
||||
} else {
|
||||
// 已有会员，仅绑定为店员，不需要也不应展示/回填密码
|
||||
this.newMember = false;
|
||||
this.oldMember = true;
|
||||
this.form.username = res.result.username || "";
|
||||
this.form.password = "";
|
||||
}
|
||||
this.form.isSuper = 0;
|
||||
this.memberCheck = true;
|
||||
const editForm = reactive({ // 表单
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
});
|
||||
const mobile = ref("");
|
||||
const clerkName = ref("");
|
||||
|
||||
const newMember = ref(false);
|
||||
const oldMember = ref(false);
|
||||
const memberCheck = ref(false);
|
||||
const roleList = ref([]); // 角色列表
|
||||
const errorPass = ref(""); // 错误提示
|
||||
const formValidate = { // 验证规则
|
||||
username: [
|
||||
{required: true, message: "用户名不能为空", trigger: "blur"}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "密码不能为空", trigger: "blur"}
|
||||
],
|
||||
mobile: [
|
||||
{required: true, message: "手机号不能为空", trigger: "blur"},
|
||||
{validator: validateMobile, trigger: "blur"}
|
||||
]
|
||||
};
|
||||
const submitLoading = ref(false); // 提交状态
|
||||
const data = ref([]); // 用户数据
|
||||
const total = ref(0); // 总数
|
||||
|
||||
const addFormRules = computed(() => {
|
||||
const rules = {
|
||||
username: formValidate.username,
|
||||
mobile: formValidate.mobile,
|
||||
};
|
||||
if (newMember.value) {
|
||||
rules.password = formValidate.password;
|
||||
}
|
||||
return rules;
|
||||
});
|
||||
|
||||
// 初始化数据
|
||||
function init() {
|
||||
getUserList();
|
||||
}
|
||||
function checkClerks() {
|
||||
open.value = form.value.mobile.length;
|
||||
|
||||
if (open.value == 11) {
|
||||
checkClerk();
|
||||
}
|
||||
if (open.value < 11) {
|
||||
checkAgainClerk();
|
||||
}
|
||||
}
|
||||
// 选择部门回调
|
||||
function handleSelectDepTree(v) {
|
||||
if (v) {
|
||||
form.value.departmentId = v.departmentId;
|
||||
form.value.departmentTitle = v.departmentTitle;
|
||||
} else {
|
||||
form.value.departmentId = "";
|
||||
form.value.departmentTitle = "";
|
||||
}
|
||||
}
|
||||
// 选择部门回调
|
||||
function handleEditSelectDepTree(v) {
|
||||
if (v) {
|
||||
editForm.departmentId = v.departmentId;
|
||||
editForm.departmentTitle = v.departmentTitle;
|
||||
} else {
|
||||
editForm.departmentId = "";
|
||||
editForm.departmentTitle = "";
|
||||
}
|
||||
}
|
||||
//重新校验会员
|
||||
function checkAgainClerk() {
|
||||
memberCheck.value = false;
|
||||
newMember.value = false;
|
||||
oldMember.value = false;
|
||||
form.value.username = "";
|
||||
form.value.password = "";
|
||||
form.value.isSuper = 0;
|
||||
form.value.roles = [];
|
||||
errorPass.value = "";
|
||||
}
|
||||
// 检测当前手机号对应会员：无 id 为新建会员，有 id 为已有会员
|
||||
function checkClerk() {
|
||||
if (!form.value.mobile) {
|
||||
return;
|
||||
}
|
||||
newMember.value = false;
|
||||
oldMember.value = false;
|
||||
form.value.username = "";
|
||||
form.value.password = "";
|
||||
errorPass.value = "";
|
||||
fetchCheckClerk(form.value.mobile).then((res) => {
|
||||
if (!res.success) {
|
||||
return;
|
||||
}
|
||||
if (!res.result || !res.result.id) {
|
||||
// 平台无此会员，需新建账号并设置密码
|
||||
newMember.value = true;
|
||||
oldMember.value = false;
|
||||
} else {
|
||||
// 已有会员，仅绑定为店员，不需要也不应展示/回填密码
|
||||
newMember.value = false;
|
||||
oldMember.value = true;
|
||||
form.value.username = res.result.username || "";
|
||||
form.value.password = "";
|
||||
}
|
||||
form.value.isSuper = 0;
|
||||
memberCheck.value = true;
|
||||
});
|
||||
}
|
||||
// 搜索项部门选择
|
||||
function handleSelectDep(v) {
|
||||
searchForm.departmentId = v;
|
||||
}
|
||||
// 分页 修改页码
|
||||
function changePage(v) {
|
||||
searchForm.pageNumber = v;
|
||||
getUserList();
|
||||
clearSelectAll();
|
||||
}
|
||||
// 分页 修改页数
|
||||
function changePageSize(v) {
|
||||
searchForm.pageSize = v;
|
||||
searchForm.pageNumber = 1;
|
||||
getUserList();
|
||||
}
|
||||
function getUserList() {
|
||||
// 多条件搜索用户列表
|
||||
loading.value = true;
|
||||
getUserListData(searchForm).then(res => {
|
||||
loading.value = false;
|
||||
if (res.success) {
|
||||
data.value = res.result.records;
|
||||
total.value = res.result.total;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
searchForm.pageNumber = 1;
|
||||
searchForm.pageSize = 10;
|
||||
getUserList();
|
||||
}
|
||||
// 排序
|
||||
function changeSort(e) {
|
||||
searchForm.sort = e.prop;
|
||||
searchForm.order =
|
||||
e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
getUserList();
|
||||
}
|
||||
// 获取角色列表
|
||||
function getRoleList() {
|
||||
let params = {
|
||||
pageSize: 100
|
||||
}
|
||||
getAllRoleList(params).then(res => {
|
||||
if (res.success) {
|
||||
roleList.value = res.result.records;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 重置密码
|
||||
function resetPass() {
|
||||
if (selectCount.value == 0) {
|
||||
Message.warning('请选中数据后重试!');
|
||||
return
|
||||
}
|
||||
Modal.confirm({
|
||||
title: "确认重置",
|
||||
content:
|
||||
"您确认要重置所选的 " +
|
||||
selectCount.value +
|
||||
" 条用户数据密码为【123456】?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
selectList.value.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
},
|
||||
// 搜索项部门选择
|
||||
handleSelectDep(v) {
|
||||
this.searchForm.departmentId = v;
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getUserList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getUserList();
|
||||
},
|
||||
getUserList() {
|
||||
// 多条件搜索用户列表
|
||||
this.loading = true;
|
||||
getUserListData(this.searchForm).then(res => {
|
||||
this.loading = false;
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
|
||||
resetPassword(ids).then(res => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getUserList();
|
||||
},
|
||||
// 排序
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.prop;
|
||||
this.searchForm.order =
|
||||
e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
this.getUserList();
|
||||
},
|
||||
// 获取角色列表
|
||||
getRoleList() {
|
||||
let params = {
|
||||
pageSize: 100
|
||||
}
|
||||
getAllRoleList(params).then(res => {
|
||||
if (res.success) {
|
||||
this.roleList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置密码
|
||||
resetPass() {
|
||||
if (this.selectCount == 0) {
|
||||
this.$Message.warning('请选中数据后重试!');
|
||||
return
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认重置",
|
||||
content:
|
||||
"您确认要重置所选的 " +
|
||||
this.selectCount +
|
||||
" 条用户数据密码为【123456】?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
|
||||
resetPassword(ids).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.clearSelectAll();
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
updateSubmit(){
|
||||
this.submitLoading = true;
|
||||
|
||||
editOtherUser(this.editForm.id,this.editForm).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
this.userEditModalVisible = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 确认提交
|
||||
submitUser() {
|
||||
this.$refs.addForm?.validate(valid => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(this.form));
|
||||
delete params.id;
|
||||
delete params.status;
|
||||
if (this.newMember) {
|
||||
if (params.password == "" || params.password == undefined) {
|
||||
this.errorPass = "密码不能为空";
|
||||
return;
|
||||
}
|
||||
if (params.password.length < 6) {
|
||||
this.errorPass = "密码长度不得少于6位";
|
||||
return;
|
||||
}
|
||||
params.password = this.md5(params.password);
|
||||
} else if (this.oldMember) {
|
||||
// 后端 ClerkAddDTO 对 username/password 有 @NotEmpty 校验；
|
||||
// 已有会员走 findByMobile 分支，不会使用该 password，仅用于通过参数校验
|
||||
params.username = this.form.username;
|
||||
params.password = params.password || "000000";
|
||||
}
|
||||
this.submitLoading = true;
|
||||
addUser(params).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
this.userModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加用户
|
||||
add() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加店员";
|
||||
this.form = {
|
||||
username: "",
|
||||
mobile: "",
|
||||
password: "",
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: "",
|
||||
};
|
||||
this.oldMember = false;
|
||||
this.newMember = false;
|
||||
this.memberCheck = false;
|
||||
this.userModalVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addForm?.resetFields();
|
||||
this.$refs.addDepTree?.clearSelect?.();
|
||||
});
|
||||
},
|
||||
// 编辑用户
|
||||
edit(v) {
|
||||
getClerk(v.id).then(res => {
|
||||
if (!res.success || !res.result) {
|
||||
return;
|
||||
}
|
||||
this.mobile = res.result.mobile;
|
||||
this.clerkName = res.result.clerkName;
|
||||
this.editForm.isSuper = res.result.isSuper ? 1 : 0;
|
||||
this.editForm.id = res.result.id;
|
||||
this.editForm.departmentId = res.result.departmentId;
|
||||
const selectRolesId = [];
|
||||
if (res.result.roles) {
|
||||
res.result.roles.forEach(function (e) {
|
||||
selectRolesId.push(e.id);
|
||||
});
|
||||
}
|
||||
this.editForm.roles = selectRolesId;
|
||||
this.modalTitle = "修改店员";
|
||||
this.userEditModalVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editDepTree?.setData(
|
||||
res.result.departmentId,
|
||||
res.result.departmentTitle
|
||||
);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 启用
|
||||
enable(v) {
|
||||
let params = {
|
||||
status: true
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认启用",
|
||||
content: "您确认要启用用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableClerk(v.id, params).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 禁用
|
||||
disable(v) {
|
||||
let params = {
|
||||
status: false
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认禁用",
|
||||
content: "您确认要禁用用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableClerk(v.id, params).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除用户
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteClerk(v.id).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选中状态
|
||||
showSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 清除选中状态
|
||||
clearSelectAll() {
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条店员?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteClerk(ids).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.clearSelectAll();
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
Message.success("操作成功");
|
||||
clearSelectAll();
|
||||
getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.getRoleList();
|
||||
});
|
||||
}
|
||||
function updateSubmit() {
|
||||
submitLoading.value = true;
|
||||
|
||||
editOtherUser(editForm.id, editForm).then(res => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
getUserList();
|
||||
userEditModalVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
// 确认提交
|
||||
function submitUser() {
|
||||
addForm.value?.validate(valid => {
|
||||
if (valid) {
|
||||
const params = JSON.parse(JSON.stringify(form.value));
|
||||
delete params.id;
|
||||
delete params.status;
|
||||
if (newMember.value) {
|
||||
if (params.password == "" || params.password == undefined) {
|
||||
errorPass.value = "密码不能为空";
|
||||
return;
|
||||
}
|
||||
if (params.password.length < 6) {
|
||||
errorPass.value = "密码长度不得少于6位";
|
||||
return;
|
||||
}
|
||||
params.password = md5(params.password);
|
||||
} else if (oldMember.value) {
|
||||
// 后端 ClerkAddDTO 对 username/password 有 @NotEmpty 校验；
|
||||
// 已有会员走 findByMobile 分支，不会使用该 password，仅用于通过参数校验
|
||||
params.username = form.value.username;
|
||||
params.password = params.password || "000000";
|
||||
}
|
||||
submitLoading.value = true;
|
||||
addUser(params).then(res => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
getUserList();
|
||||
userModalVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 添加用户
|
||||
function add() {
|
||||
modalType.value = 0;
|
||||
modalTitle.value = "添加店员";
|
||||
form.value = {
|
||||
username: "",
|
||||
mobile: "",
|
||||
password: "",
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: "",
|
||||
};
|
||||
oldMember.value = false;
|
||||
newMember.value = false;
|
||||
memberCheck.value = false;
|
||||
userModalVisible.value = true;
|
||||
nextTick(() => {
|
||||
addForm.value?.resetFields();
|
||||
addDepTree.value?.clearSelect?.();
|
||||
});
|
||||
}
|
||||
// 编辑用户
|
||||
function edit(v) {
|
||||
getClerk(v.id).then(res => {
|
||||
if (!res.success || !res.result) {
|
||||
return;
|
||||
}
|
||||
mobile.value = res.result.mobile;
|
||||
clerkName.value = res.result.clerkName;
|
||||
editForm.isSuper = res.result.isSuper ? 1 : 0;
|
||||
editForm.id = res.result.id;
|
||||
editForm.departmentId = res.result.departmentId;
|
||||
const selectRolesId = [];
|
||||
if (res.result.roles) {
|
||||
res.result.roles.forEach(function (e) {
|
||||
selectRolesId.push(e.id);
|
||||
});
|
||||
}
|
||||
editForm.roles = selectRolesId;
|
||||
modalTitle.value = "修改店员";
|
||||
userEditModalVisible.value = true;
|
||||
nextTick(() => {
|
||||
editDepTree.value?.setData(
|
||||
res.result.departmentId,
|
||||
res.result.departmentTitle
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
// 启用
|
||||
function enable(v) {
|
||||
let params = {
|
||||
status: true
|
||||
}
|
||||
};
|
||||
Modal.confirm({
|
||||
title: "确认启用",
|
||||
content: "您确认要启用用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableClerk(v.id, params).then(res => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 禁用
|
||||
function disable(v) {
|
||||
let params = {
|
||||
status: false
|
||||
}
|
||||
Modal.confirm({
|
||||
title: "确认禁用",
|
||||
content: "您确认要禁用用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableClerk(v.id, params).then(res => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 删除用户
|
||||
function remove(v) {
|
||||
Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteClerk(v.id).then(res => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
Message.success("删除成功");
|
||||
getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// 选中状态
|
||||
function showSelect(e) {
|
||||
selectList.value = e;
|
||||
selectCount.value = e.length;
|
||||
}
|
||||
// 清除选中状态
|
||||
function clearSelectAll() {
|
||||
tableRef.value?.clearSelection();
|
||||
}
|
||||
// 批量删除
|
||||
function delAll() {
|
||||
if (selectCount.value <= 0) {
|
||||
Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + selectCount.value + " 条店员?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
selectList.value.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteClerk(ids).then(res => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
Message.success("删除成功");
|
||||
clearSelectAll();
|
||||
getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
getRoleList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
|
||||
<el-form-item label="部门名称" prop="title">
|
||||
<el-input v-model="form.title" />
|
||||
</el-form-item>
|
||||
@@ -84,7 +84,7 @@
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
|
||||
<el-form ref="formAddRef" :model="formAdd" label-width="85px" :rules="formValidate">
|
||||
<div v-if="showParent">
|
||||
<el-form-item label="上级部门：">{{ form.title }}</el-form-item>
|
||||
</div>
|
||||
@@ -105,7 +105,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import {
|
||||
initDepartment,
|
||||
addDepartment,
|
||||
@@ -115,266 +116,266 @@ import {
|
||||
getRoleList,
|
||||
updateDepartmentRole,
|
||||
} from "@/api/index";
|
||||
import { Message, Modal } from "@/utils/message";
|
||||
|
||||
export default {
|
||||
name: "store-department-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
maxHeight: "500px",
|
||||
strict: true,
|
||||
userLoading: false,
|
||||
loadingEdit: false,
|
||||
modalVisible: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
showParent: false,
|
||||
modalTitle: "",
|
||||
editTitle: "",
|
||||
selectedRole: [],
|
||||
searchKey: "",
|
||||
currentNodeKey: null,
|
||||
treeProps: {
|
||||
label: "title",
|
||||
children: "children",
|
||||
isLeaf: "isLeaf",
|
||||
},
|
||||
form: {
|
||||
id: "",
|
||||
title: "",
|
||||
parentId: "",
|
||||
parentTitle: "",
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
},
|
||||
formAdd: {},
|
||||
formValidate: {
|
||||
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
required: true,
|
||||
type: "number",
|
||||
message: "排序值不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false,
|
||||
data: [],
|
||||
dataEdit: [],
|
||||
users: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getParentList();
|
||||
},
|
||||
getParentList() {
|
||||
this.loading = true;
|
||||
initDepartment().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
const list = Array.isArray(res.result) ? res.result : [];
|
||||
this.data = this.bubbleSort(this.normalizeDepartmentTree(list));
|
||||
}
|
||||
});
|
||||
},
|
||||
normalizeDepartmentTree(list) {
|
||||
return list.map((item) => {
|
||||
const node = { ...item };
|
||||
if (Array.isArray(node.children) && node.children.length > 0) {
|
||||
node.children = this.normalizeDepartmentTree(node.children);
|
||||
} else {
|
||||
delete node.children;
|
||||
}
|
||||
return node;
|
||||
});
|
||||
},
|
||||
onNodeClick(data) {
|
||||
if (!data) {
|
||||
this.cancelSelect();
|
||||
return;
|
||||
}
|
||||
const row = JSON.parse(JSON.stringify(data));
|
||||
for (const attr in row) {
|
||||
if (row[attr] == null) {
|
||||
row[attr] = "";
|
||||
}
|
||||
}
|
||||
this.editTitle = row.title;
|
||||
this.currentNodeKey = row.id;
|
||||
this.userLoading = true;
|
||||
defineOptions({ name: "store-department-manage" });
|
||||
|
||||
getUserByDepartmentId(row.id).then((res) => {
|
||||
const way = [];
|
||||
res.result &&
|
||||
res.result.forEach((item) => {
|
||||
way.push(item.roleId);
|
||||
});
|
||||
this.selectedRole = way;
|
||||
});
|
||||
const treeRef = ref(null);
|
||||
const formRef = ref(null);
|
||||
const formAddRef = ref(null);
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.users = res.result.records;
|
||||
this.form = row;
|
||||
}
|
||||
});
|
||||
},
|
||||
onCheckChange(_data, { checkedNodes }) {
|
||||
this.selectList = checkedNodes;
|
||||
this.selectCount = checkedNodes.length;
|
||||
},
|
||||
bubbleSort(array) {
|
||||
if (!Array.isArray(array)) return [];
|
||||
const len = array.length;
|
||||
if (len < 2) return array;
|
||||
for (let i = 0; i < len; i++) {
|
||||
for (let j = 0; j < i; j++) {
|
||||
if (array[j].sortOrder > array[i].sortOrder) {
|
||||
const temp = array[j];
|
||||
array[j] = array[i];
|
||||
array[i] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
return array;
|
||||
},
|
||||
cancelSelect() {
|
||||
this.$refs.treeRef?.setCurrentKey(null);
|
||||
this.currentNodeKey = null;
|
||||
this.$refs.form.resetFields();
|
||||
delete this.form.id;
|
||||
this.editTitle = "";
|
||||
this.selectedRole = [];
|
||||
},
|
||||
selectTreeEdit(v) {
|
||||
if (v.length > 0) {
|
||||
for (const attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
const data = JSON.parse(JSON.stringify(v[0]));
|
||||
this.form.parentId = data.id;
|
||||
this.form.parentTitle = data.title;
|
||||
}
|
||||
},
|
||||
cancelAdd() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.status = 0;
|
||||
},
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择要修改的部门");
|
||||
return;
|
||||
}
|
||||
const roleWay = [];
|
||||
this.selectedRole.forEach((item) => {
|
||||
roleWay.push({
|
||||
departmentId: this.form.id,
|
||||
roleId: item,
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
editDepartment(this.form.id, this.form),
|
||||
updateDepartmentRole(this.form.id, roleWay),
|
||||
]).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res[0].success) {
|
||||
this.$Message.success("编辑成功");
|
||||
this.init();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
addDepartment(this.formAdd).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.init();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
add() {
|
||||
if (this.form.id == "" || this.form.id == null) {
|
||||
this.$Message.warning("请先点击选择一个部门");
|
||||
return;
|
||||
}
|
||||
this.modalTitle = "添加子部门";
|
||||
this.showParent = true;
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
addRoot() {
|
||||
this.modalTitle = "添加一级部门";
|
||||
this.showParent = false;
|
||||
this.formAdd = {
|
||||
parentId: 0,
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content:
|
||||
"您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteDepartment(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.selectList = [];
|
||||
this.selectCount = 0;
|
||||
this.cancelSelect();
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
const loading = ref(true);
|
||||
const maxHeight = ref("500px");
|
||||
const strict = ref(true);
|
||||
const userLoading = ref(false);
|
||||
const loadingEdit = ref(false);
|
||||
const modalVisible = ref(false);
|
||||
const selectList = ref([]);
|
||||
const selectCount = ref(0);
|
||||
const showParent = ref(false);
|
||||
const modalTitle = ref("");
|
||||
const editTitle = ref("");
|
||||
const selectedRole = ref([]);
|
||||
const searchKey = ref("");
|
||||
const currentNodeKey = ref(null);
|
||||
const treeProps = {
|
||||
label: "title",
|
||||
children: "children",
|
||||
isLeaf: "isLeaf",
|
||||
};
|
||||
const form = ref({
|
||||
id: "",
|
||||
title: "",
|
||||
parentId: "",
|
||||
parentTitle: "",
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
});
|
||||
const formAdd = ref({});
|
||||
const formValidate = {
|
||||
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
required: true,
|
||||
type: "number",
|
||||
message: "排序值不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
};
|
||||
const submitLoading = ref(false);
|
||||
const data = ref([]);
|
||||
const dataEdit = ref([]);
|
||||
const users = ref([]);
|
||||
|
||||
function init() {
|
||||
getParentList();
|
||||
}
|
||||
function getParentList() {
|
||||
loading.value = true;
|
||||
initDepartment().then((res) => {
|
||||
loading.value = false;
|
||||
if (res.success) {
|
||||
const list = Array.isArray(res.result) ? res.result : [];
|
||||
data.value = bubbleSort(normalizeDepartmentTree(list));
|
||||
}
|
||||
});
|
||||
}
|
||||
function normalizeDepartmentTree(list) {
|
||||
return list.map((item) => {
|
||||
const node = { ...item };
|
||||
if (Array.isArray(node.children) && node.children.length > 0) {
|
||||
node.children = normalizeDepartmentTree(node.children);
|
||||
} else {
|
||||
delete node.children;
|
||||
}
|
||||
return node;
|
||||
});
|
||||
}
|
||||
function onNodeClick(data) {
|
||||
if (!data) {
|
||||
cancelSelect();
|
||||
return;
|
||||
}
|
||||
const row = JSON.parse(JSON.stringify(data));
|
||||
for (const attr in row) {
|
||||
if (row[attr] == null) {
|
||||
row[attr] = "";
|
||||
}
|
||||
}
|
||||
editTitle.value = row.title;
|
||||
currentNodeKey.value = row.id;
|
||||
userLoading.value = true;
|
||||
|
||||
getUserByDepartmentId(row.id).then((res) => {
|
||||
const way = [];
|
||||
res.result &&
|
||||
res.result.forEach((item) => {
|
||||
way.push(item.roleId);
|
||||
});
|
||||
selectedRole.value = way;
|
||||
});
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
userLoading.value = false;
|
||||
if (res.success) {
|
||||
users.value = res.result.records;
|
||||
form.value = row;
|
||||
}
|
||||
});
|
||||
}
|
||||
function onCheckChange(_data, { checkedNodes }) {
|
||||
selectList.value = checkedNodes;
|
||||
selectCount.value = checkedNodes.length;
|
||||
}
|
||||
function bubbleSort(array) {
|
||||
if (!Array.isArray(array)) return [];
|
||||
const len = array.length;
|
||||
if (len < 2) return array;
|
||||
for (let i = 0; i < len; i++) {
|
||||
for (let j = 0; j < i; j++) {
|
||||
if (array[j].sortOrder > array[i].sortOrder) {
|
||||
const temp = array[j];
|
||||
array[j] = array[i];
|
||||
array[i] = temp;
|
||||
}
|
||||
}
|
||||
}
|
||||
return array;
|
||||
}
|
||||
function cancelSelect() {
|
||||
treeRef.value?.setCurrentKey(null);
|
||||
currentNodeKey.value = null;
|
||||
formRef.value.resetFields();
|
||||
delete form.value.id;
|
||||
editTitle.value = "";
|
||||
selectedRole.value = [];
|
||||
}
|
||||
function selectTreeEdit(v) {
|
||||
if (v.length > 0) {
|
||||
for (const attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
const data = JSON.parse(JSON.stringify(v[0]));
|
||||
form.value.parentId = data.id;
|
||||
form.value.parentTitle = data.title;
|
||||
}
|
||||
}
|
||||
function cancelAdd() {
|
||||
modalVisible.value = false;
|
||||
}
|
||||
function handleReset() {
|
||||
formRef.value.resetFields();
|
||||
form.value.status = 0;
|
||||
}
|
||||
function submitEdit() {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!form.value.id) {
|
||||
Message.warning("请先点击选择要修改的部门");
|
||||
return;
|
||||
}
|
||||
const roleWay = [];
|
||||
selectedRole.value.forEach((item) => {
|
||||
roleWay.push({
|
||||
departmentId: form.value.id,
|
||||
roleId: item,
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
editDepartment(form.value.id, form.value),
|
||||
updateDepartmentRole(form.value.id, roleWay),
|
||||
]).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res[0].success) {
|
||||
Message.success("编辑成功");
|
||||
init();
|
||||
modalVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function submitAdd() {
|
||||
formAddRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
submitLoading.value = true;
|
||||
addDepartment(formAdd.value).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("添加成功");
|
||||
init();
|
||||
modalVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function add() {
|
||||
if (form.value.id == "" || form.value.id == null) {
|
||||
Message.warning("请先点击选择一个部门");
|
||||
return;
|
||||
}
|
||||
modalTitle.value = "添加子部门";
|
||||
showParent.value = true;
|
||||
formAdd.value = {
|
||||
parentId: form.value.id,
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
};
|
||||
modalVisible.value = true;
|
||||
}
|
||||
function addRoot() {
|
||||
modalTitle.value = "添加一级部门";
|
||||
showParent.value = false;
|
||||
formAdd.value = {
|
||||
parentId: 0,
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
};
|
||||
modalVisible.value = true;
|
||||
}
|
||||
function delAll() {
|
||||
if (selectCount.value <= 0) {
|
||||
Message.warning("您还未勾选要删除的数据");
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: "确认删除",
|
||||
content:
|
||||
"您确认要删除所选的 " + selectCount.value + " 条数据及其下级所有数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
selectList.value.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteDepartment(ids).then((res) => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
Message.success("删除成功");
|
||||
selectList.value = [];
|
||||
selectCount.value = 0;
|
||||
cancelSelect();
|
||||
init();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const height = document.documentElement.clientHeight;
|
||||
maxHeight.value = Number(height - 287) + "px";
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
ref="table"
|
||||
ref="tableRef"
|
||||
v-loading="loading"
|
||||
border
|
||||
:data="data"
|
||||
@@ -56,7 +56,7 @@
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
|
||||
<el-form ref="roleFormRef" :model="roleForm" label-width="80px" :rules="roleFormValidate">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="roleForm.name" />
|
||||
</el-form-item>
|
||||
@@ -81,7 +81,7 @@
|
||||
>
|
||||
<div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
|
||||
<el-tree
|
||||
ref="permTree"
|
||||
ref="permTreeRef"
|
||||
:key="permTreeKey"
|
||||
:data="permData"
|
||||
:props="{ label: 'title', children: 'children', disabled: 'disabled' }"
|
||||
@@ -148,376 +148,379 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
import {
|
||||
getRoleList,
|
||||
getRoleList as fetchRoleList,
|
||||
getAllPermissionList,
|
||||
addRole,
|
||||
addRole as addRoleReq,
|
||||
editRole,
|
||||
deleteRole,
|
||||
loadDepartment,
|
||||
selectRoleMenu,
|
||||
saveRoleMenu,
|
||||
} from "@/api/index";
|
||||
import { Message, Modal } from "@/utils/message";
|
||||
import util from "@/libs/util.js";
|
||||
import { useAppStore } from "@/stores/app";
|
||||
|
||||
export default {
|
||||
name: "role-manage",
|
||||
data() {
|
||||
return {
|
||||
superModelLoading: false,
|
||||
selectIsSuperModel: false,
|
||||
rolePermsWay: [],
|
||||
openLevel: "0",
|
||||
loading: true,
|
||||
treeLoading: true,
|
||||
depTreeLoading: true,
|
||||
submitPermLoading: false,
|
||||
submitDepLoading: false,
|
||||
sortColumn: "",
|
||||
sortType: "desc",
|
||||
modalType: 0,
|
||||
roleModalVisible: false,
|
||||
permModalVisible: false,
|
||||
depModalVisible: false,
|
||||
modalTitle: "",
|
||||
roleForm: {
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
roleFormValidate: {
|
||||
name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
|
||||
},
|
||||
submitLoading: false,
|
||||
selectList: [],
|
||||
selectCount: 0,
|
||||
data: [],
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
permData: [],
|
||||
editRolePermId: "",
|
||||
selectAllFlag: false,
|
||||
depData: [],
|
||||
dataType: 0,
|
||||
editDepartments: [],
|
||||
saveRoleWay: [],
|
||||
permTreeKey: 0,
|
||||
permCheckedKeys: [],
|
||||
permExpandedKeys: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getRoleList();
|
||||
this.getPermList();
|
||||
},
|
||||
changePage() {
|
||||
this.getRoleList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
changePageSize() {
|
||||
this.pageNumber = 1;
|
||||
this.getRoleList();
|
||||
},
|
||||
changeSort(e) {
|
||||
this.sortColumn = e.prop;
|
||||
this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
if (!e.order) {
|
||||
this.sortType = "";
|
||||
defineOptions({ name: "role-manage" });
|
||||
|
||||
const appStore = useAppStore();
|
||||
|
||||
const tableRef = ref(null);
|
||||
const roleFormRef = ref(null);
|
||||
const permTreeRef = ref(null);
|
||||
|
||||
const superModelLoading = ref(false);
|
||||
const selectIsSuperModel = ref(false);
|
||||
const rolePermsWay = ref([]);
|
||||
const openLevel = ref("0");
|
||||
const loading = ref(true);
|
||||
const treeLoading = ref(true);
|
||||
const depTreeLoading = ref(true);
|
||||
const submitPermLoading = ref(false);
|
||||
const submitDepLoading = ref(false);
|
||||
const sortColumn = ref("");
|
||||
const sortType = ref("desc");
|
||||
const modalType = ref(0);
|
||||
const roleModalVisible = ref(false);
|
||||
const permModalVisible = ref(false);
|
||||
const depModalVisible = ref(false);
|
||||
const modalTitle = ref("");
|
||||
const roleForm = ref({
|
||||
name: "",
|
||||
description: "",
|
||||
});
|
||||
const roleFormValidate = {
|
||||
name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
|
||||
};
|
||||
const submitLoading = ref(false);
|
||||
const selectList = ref([]);
|
||||
const selectCount = ref(0);
|
||||
const data = ref([]);
|
||||
const pageNumber = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const total = ref(0);
|
||||
const permData = ref([]);
|
||||
const editRolePermId = ref("");
|
||||
const selectAllFlag = ref(false);
|
||||
const depData = ref([]);
|
||||
const dataType = ref(0);
|
||||
const editDepartments = ref([]);
|
||||
const saveRoleWay = ref([]);
|
||||
const permTreeKey = ref(0);
|
||||
const permCheckedKeys = ref([]);
|
||||
const permExpandedKeys = ref([]);
|
||||
|
||||
function init() {
|
||||
getRoleList();
|
||||
getPermList();
|
||||
}
|
||||
function changePage() {
|
||||
getRoleList();
|
||||
clearSelectAll();
|
||||
}
|
||||
function changePageSize() {
|
||||
pageNumber.value = 1;
|
||||
getRoleList();
|
||||
}
|
||||
function changeSort(e) {
|
||||
sortColumn.value = e.prop;
|
||||
sortType.value = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
|
||||
if (!e.order) {
|
||||
sortType.value = "";
|
||||
}
|
||||
getRoleList();
|
||||
}
|
||||
function setRole(val) {
|
||||
let enable;
|
||||
val == "onlyView" ? (enable = 0) : (enable = 1);
|
||||
saveRoleWay.value.map((item) => {
|
||||
item.isSuper = enable;
|
||||
});
|
||||
}
|
||||
function getRoleList() {
|
||||
loading.value = true;
|
||||
let params = {
|
||||
pageNumber: pageNumber.value,
|
||||
pageSize: pageSize.value,
|
||||
sort: sortColumn.value,
|
||||
order: sortType.value,
|
||||
};
|
||||
fetchRoleList(params).then((res) => {
|
||||
loading.value = false;
|
||||
if (res.success) {
|
||||
data.value = res.result.records;
|
||||
total.value = res.result.total;
|
||||
}
|
||||
});
|
||||
}
|
||||
function getPermList() {
|
||||
treeLoading.value = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
if (res.success) {
|
||||
deleteDisableNode(res.result);
|
||||
permData.value = res.result;
|
||||
}
|
||||
treeLoading.value = false;
|
||||
});
|
||||
}
|
||||
function deleteDisableNode(permData) {
|
||||
permData.forEach(function (e) {
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
deleteDisableNode(e.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
function submitRole() {
|
||||
roleFormRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
if (modalType.value == 0) {
|
||||
submitLoading.value = true;
|
||||
addRoleReq(roleForm.value).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
getRoleList();
|
||||
roleModalVisible.value = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
submitLoading.value = true;
|
||||
roleForm.value.roleId = roleForm.value.id;
|
||||
editRole(roleForm.value).then((res) => {
|
||||
submitLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
getRoleList();
|
||||
roleModalVisible.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
this.getRoleList();
|
||||
},
|
||||
setRole(val) {
|
||||
let enable;
|
||||
val == "onlyView" ? (enable = 0) : (enable = 1);
|
||||
this.saveRoleWay.map((item) => {
|
||||
item.isSuper = enable;
|
||||
});
|
||||
},
|
||||
getRoleList() {
|
||||
this.loading = true;
|
||||
let params = {
|
||||
pageNumber: this.pageNumber,
|
||||
pageSize: this.pageSize,
|
||||
sort: this.sortColumn,
|
||||
order: this.sortType,
|
||||
};
|
||||
getRoleList(params).then((res) => {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
function addRole() {
|
||||
modalType.value = 0;
|
||||
modalTitle.value = "添加角色";
|
||||
roleForm.value = {
|
||||
name: "",
|
||||
description: "",
|
||||
};
|
||||
roleModalVisible.value = true;
|
||||
nextTick(() => {
|
||||
roleFormRef.value?.clearValidate();
|
||||
});
|
||||
}
|
||||
function edit(v) {
|
||||
modalType.value = 1;
|
||||
modalTitle.value = "编辑角色";
|
||||
roleFormRef.value?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let roleInfo = JSON.parse(str);
|
||||
roleForm.value = roleInfo;
|
||||
roleModalVisible.value = true;
|
||||
}
|
||||
function remove(v) {
|
||||
Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除角色 " + v.name + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteRole(v.id).then((res) => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
Message.success("删除成功");
|
||||
getRoleList();
|
||||
}
|
||||
});
|
||||
},
|
||||
getPermList() {
|
||||
this.treeLoading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
});
|
||||
}
|
||||
function clearSelectAll() {
|
||||
tableRef.value?.clearSelection();
|
||||
}
|
||||
function changeSelect(e) {
|
||||
selectList.value = e;
|
||||
selectCount.value = e.length;
|
||||
}
|
||||
function delAll() {
|
||||
if (selectCount.value <= 0) {
|
||||
Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
selectList.value.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteRole(ids).then((res) => {
|
||||
Modal.remove();
|
||||
if (res.success) {
|
||||
this.deleteDisableNode(res.result);
|
||||
this.permData = res.result;
|
||||
Message.success("删除成功");
|
||||
clearSelectAll();
|
||||
getRoleList();
|
||||
}
|
||||
this.treeLoading = false;
|
||||
});
|
||||
},
|
||||
deleteDisableNode(permData) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
});
|
||||
}
|
||||
async function editPerm(v) {
|
||||
permData.value.map((item) => {
|
||||
item.children.length != 0
|
||||
? item.children.map((child) => {
|
||||
child.children.length != 0
|
||||
? child.children.map((kid) => {
|
||||
delete kid.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete child.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete item.isSuper;
|
||||
});
|
||||
|
||||
if (treeLoading.value) {
|
||||
Message.warning("菜单权限数据加载中，请稍后点击查看");
|
||||
return;
|
||||
}
|
||||
editRolePermId.value = v.id;
|
||||
modalTitle.value = "分配 " + v.name + " 的菜单权限";
|
||||
let rolePerms;
|
||||
let res = await selectRoleMenu(v.id);
|
||||
if (res.result) {
|
||||
rolePerms = res.result;
|
||||
rolePermsWay.value = res.result;
|
||||
}
|
||||
permCheckedKeys.value = collectCheckedKeys(permData.value, rolePerms);
|
||||
permExpandedKeys.value = computeExpandedKeys(openLevel.value);
|
||||
permTreeKey.value += 1;
|
||||
permModalVisible.value = true;
|
||||
}
|
||||
function collectCheckedKeys(permData, rolePerms) {
|
||||
const keys = [];
|
||||
const walk = (nodes) => {
|
||||
nodes.forEach((p) => {
|
||||
if (hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
keys.push(p.id);
|
||||
}
|
||||
}
|
||||
if (p.children && p.children.length > 0) {
|
||||
walk(p.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
walk(permData);
|
||||
return keys;
|
||||
}
|
||||
function hasPerm(p, rolePerms) {
|
||||
if (!rolePerms) return false;
|
||||
let flag = false;
|
||||
for (let i = 0; i < rolePerms.length; i++) {
|
||||
if (p.id == rolePerms[i].menuId) {
|
||||
p.isSuper = rolePerms[i].isSuper;
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
function submitPermEdit() {
|
||||
saveRoleWay.value = [];
|
||||
selectIsSuperModel.value = true;
|
||||
const tree = permTreeRef.value;
|
||||
const selectedNodes = [
|
||||
...tree.getCheckedNodes(false, true),
|
||||
];
|
||||
let way = [];
|
||||
selectedNodes.forEach((e) => {
|
||||
let perm = {
|
||||
title: e.title,
|
||||
isSuper: e.isSuper ? 1 : 0,
|
||||
menuId: e.id,
|
||||
roleId: editRolePermId.value,
|
||||
};
|
||||
way.push(perm);
|
||||
saveRoleWay.value = way;
|
||||
});
|
||||
}
|
||||
function saveRole() {
|
||||
superModelLoading.value = true;
|
||||
saveRoleMenu(editRolePermId.value, saveRoleWay.value).then((res) => {
|
||||
superModelLoading.value = false;
|
||||
if (res.success) {
|
||||
Message.success("操作成功");
|
||||
appStore.setAdded(false);
|
||||
util.initRouter();
|
||||
getRoleList();
|
||||
permModalVisible.value = false;
|
||||
selectIsSuperModel.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
function loadData(item, callback) {
|
||||
loadDepartment(item.id, { openDataFilter: false }).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.forEach(function (e) {
|
||||
e.checked = false;
|
||||
if (e.isParent) {
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
that.deleteDisableNode(e.children);
|
||||
}
|
||||
});
|
||||
},
|
||||
submitRole() {
|
||||
this.$refs.roleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.modalType == 0) {
|
||||
this.submitLoading = true;
|
||||
addRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getRoleList();
|
||||
this.roleModalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.submitLoading = true;
|
||||
this.roleForm.roleId = this.roleForm.id;
|
||||
editRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getRoleList();
|
||||
this.roleModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addRole() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加角色";
|
||||
this.roleForm = {
|
||||
name: "",
|
||||
description: "",
|
||||
};
|
||||
this.roleModalVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.roleForm?.clearValidate();
|
||||
});
|
||||
},
|
||||
edit(v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑角色";
|
||||
this.$refs.roleForm?.resetFields();
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
callback(res.result);
|
||||
}
|
||||
});
|
||||
}
|
||||
function computeExpandedKeys(level) {
|
||||
const keys = [];
|
||||
const walk = (nodes, depth) => {
|
||||
nodes.forEach((n) => {
|
||||
if (level === "0") {
|
||||
keys.push(n.id);
|
||||
} else if (level === "2" && depth < 1) {
|
||||
keys.push(n.id);
|
||||
} else if (level === "3" && depth < 2) {
|
||||
keys.push(n.id);
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let roleInfo = JSON.parse(str);
|
||||
this.roleForm = roleInfo;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除角色 " + v.name + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteRole(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.getRoleList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
clearSelectAll() {
|
||||
this.$refs.table?.clearSelection();
|
||||
},
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
if (n.children && n.children.length) {
|
||||
walk(n.children, depth + 1);
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteRole(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.clearSelectAll();
|
||||
this.getRoleList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
async editPerm(v) {
|
||||
this.permData.map((item) => {
|
||||
item.children.length != 0
|
||||
? item.children.map((child) => {
|
||||
child.children.length != 0
|
||||
? child.children.map((kid) => {
|
||||
delete kid.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete child.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete item.isSuper;
|
||||
});
|
||||
});
|
||||
};
|
||||
if (level !== "1") {
|
||||
walk(permData.value, 0);
|
||||
}
|
||||
return keys;
|
||||
}
|
||||
function changeOpen(v) {
|
||||
permExpandedKeys.value = computeExpandedKeys(v);
|
||||
permTreeKey.value += 1;
|
||||
}
|
||||
|
||||
if (this.treeLoading) {
|
||||
this.$Message.warning("菜单权限数据加载中，请稍后点击查看");
|
||||
return;
|
||||
}
|
||||
this.editRolePermId = v.id;
|
||||
this.modalTitle = "分配 " + v.name + " 的菜单权限";
|
||||
let rolePerms;
|
||||
let res = await selectRoleMenu(v.id);
|
||||
if (res.result) {
|
||||
rolePerms = res.result;
|
||||
this.rolePermsWay = res.result;
|
||||
}
|
||||
this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
|
||||
this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
|
||||
this.permTreeKey += 1;
|
||||
this.permModalVisible = true;
|
||||
},
|
||||
collectCheckedKeys(permData, rolePerms) {
|
||||
const keys = [];
|
||||
const walk = (nodes) => {
|
||||
nodes.forEach((p) => {
|
||||
if (this.hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
keys.push(p.id);
|
||||
}
|
||||
}
|
||||
if (p.children && p.children.length > 0) {
|
||||
walk(p.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
walk(permData);
|
||||
return keys;
|
||||
},
|
||||
hasPerm(p, rolePerms) {
|
||||
if (!rolePerms) return false;
|
||||
let flag = false;
|
||||
for (let i = 0; i < rolePerms.length; i++) {
|
||||
if (p.id == rolePerms[i].menuId) {
|
||||
p.isSuper = rolePerms[i].isSuper;
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
submitPermEdit() {
|
||||
this.saveRoleWay = [];
|
||||
this.selectIsSuperModel = true;
|
||||
const tree = this.$refs.permTree;
|
||||
const selectedNodes = [
|
||||
...tree.getCheckedNodes(false, true),
|
||||
];
|
||||
let way = [];
|
||||
selectedNodes.forEach((e) => {
|
||||
let perm = {
|
||||
title: e.title,
|
||||
isSuper: e.isSuper ? 1 : 0,
|
||||
menuId: e.id,
|
||||
roleId: this.editRolePermId,
|
||||
};
|
||||
way.push(perm);
|
||||
this.saveRoleWay = way;
|
||||
});
|
||||
},
|
||||
saveRole() {
|
||||
this.superModelLoading = true;
|
||||
saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
|
||||
this.superModelLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.getRoleList();
|
||||
this.permModalVisible = false;
|
||||
this.selectIsSuperModel = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id, { openDataFilter: false }).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.forEach(function (e) {
|
||||
e.checked = false;
|
||||
if (e.isParent) {
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
callback(res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
computeExpandedKeys(level) {
|
||||
const keys = [];
|
||||
const walk = (nodes, depth) => {
|
||||
nodes.forEach((n) => {
|
||||
if (level === "0") {
|
||||
keys.push(n.id);
|
||||
} else if (level === "2" && depth < 1) {
|
||||
keys.push(n.id);
|
||||
} else if (level === "3" && depth < 2) {
|
||||
keys.push(n.id);
|
||||
}
|
||||
if (n.children && n.children.length) {
|
||||
walk(n.children, depth + 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
if (level !== "1") {
|
||||
walk(this.permData, 0);
|
||||
}
|
||||
return keys;
|
||||
},
|
||||
changeOpen(v) {
|
||||
this.permExpandedKeys = this.computeExpandedKeys(v);
|
||||
this.permTreeKey += 1;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.role-list {
|
||||
|
||||
Reference in New Issue
Block a user