店铺管理-》员工管理增加权限设置

src/views/login/index.vue

@@ -15,7 +15,7 @@
           <el-radio-button :value="1">员工</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 'staff'">
+      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 1">
         <el-input
           v-model="state.loginForm.merchantName"
           type="text"
@@ -145,7 +145,7 @@ function getCookie() {
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
     code: "",
     merchantName: "",
-    loginType: "merchant",
+    loginType: 0,
   };
 }
 

src/views/shop/staff/components/select-permission.vue

@@ -1 +1,52 @@
-<template>11</template>
+<template>
+  <div v-for="(item, index) in list" :key="index">
+    <h4 class="title">
+      {{ item.label }}
+    </h4>
+    <div v-if="item.children" class="flex gap-10">
+      <el-checkbox-group v-model="model[index]">
+        <el-checkbox
+          v-for="(child, childIndex) in item.children"
+          :key="childIndex"
+          :value="child.id"
+          :label="child.label"
+          :style="returnStyle(child)"
+        ></el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const model = defineModel({ type: Array, default: () => [] });
+
+const importantPer = ["允许收款", "允许打折", "允许修改会员余额", "允许沽清"];
+function returnStyle(child) {
+  if (importantPer.includes(child.label)) {
+    return "color:red";
+  }
+}
+for (const item in props.list) {
+  console.log(item);
+  model[item] = [];
+}
+function getFormData() {
+  return formData;
+}
+defineExpose({
+  getFormData,
+});
+</script>
+
+<style scoped >
+.title {
+  text-align: left;
+}
+</style>

src/views/shop/staff/config/add.ts

@@ -144,12 +144,7 @@ const modalConfig: IModalConfig<addRequest> = {
         sm: 12,
       },
     },
-    {
-      label: "员工权限设置",
-      prop: "",
-      type: "title",
-      slotName: "title",
-    },
+
     {
       label: "是否允许管理端登录",
       prop: "isManage",
@@ -170,6 +165,20 @@ const modalConfig: IModalConfig<addRequest> = {
       ],
       initialValue: 1,
     },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      type: 'custom',
+      prop: 'permission',
+      slotName: 'permission',
+      label: '',
+      hidden: true
+    }
+
   ],
 };
 

src/views/shop/staff/config/edit.ts

@@ -27,7 +27,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "角色",
       prop: "roleId",
-      rules: [{ required: true, message: "请选择角色", trigger: "blur" }],
+      rules: [{ required: false, message: "请选择角色", trigger: "blur" }],
       type: "select",
       attrs: {
         placeholder: "请选择角色",
@@ -54,7 +54,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "员工编号",
       prop: "code",
-      rules: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入员工编号", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入员工编号",
@@ -68,7 +68,7 @@ const modalConfig: IModalConfig<editRequest> = {
       label: "手机号",
       prop: "phone",
       rules: [{
-        required: true,
+        required: false,
         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
         message: "请输入正确的手机号码",
         trigger: "blur",
@@ -85,7 +85,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "登录账号",
       prop: "accountName",
-      rules: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入登录账号", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入登录账号",
@@ -98,7 +98,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "登录密码",
       prop: "accountPwd",
-      rules: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入登录密码", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入登录密码",
@@ -144,12 +144,6 @@ const modalConfig: IModalConfig<editRequest> = {
         sm: 12,
       },
     },
-    {
-      label: "员工权限设置",
-      prop: "",
-      type: "title",
-      slotName: "title",
-    },
     {
       label: "是否允许管理端登录",
       prop: "isManage",
@@ -170,6 +164,12 @@ const modalConfig: IModalConfig<editRequest> = {
       ],
       initialValue: 1,
     },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
   ],
 };
 

src/views/shop/staff/index.vue

@@ -43,8 +43,12 @@
 
     <!-- 新增 -->
     <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
-      <template #permission="scope">
-        <selectPermission></selectPermission>
+      <template #formFooter>
+        <selectPermission
+          v-model="selPermissionList"
+          :list="permissionList"
+          ref="refSelectPermission"
+        ></selectPermission>
       </template>
     </page-modal>
 
@@ -54,8 +58,12 @@
       :modal-config="editModalConfig"
       @submit-click="handleSubmitClick"
     >
-      <template #permission="scope">
-        <selectPermission></selectPermission>
+      <template #formFooter>
+        <selectPermission
+          v-model="selPermissionList"
+          :list="permissionList"
+          ref="refSelectPermission"
+        ></selectPermission>
       </template>
     </page-modal>
   </div>
@@ -71,9 +79,10 @@ import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 import RoleApi, { type SysRole } from "@/api/account/role";
 import ShopStaffApi from "@/api/account/shopStaff";
-import permissionApi from "@/api/account/permission";
+import permissionApi, { type ShopPermission } from "@/api/account/permission";
 import selectPermission from "./components/select-permission.vue";
-permissionApi.getshopPermission();
+const refSelectPermission = ref();
+
 const {
   searchRef,
   contentRef,
@@ -89,9 +98,36 @@ const {
   handleFilterChange,
 } = usePage();
 
+//店铺权限列表
+let permissionList = ref<ShopPermission[]>([]);
+//选中的权限列表
+let selPermissionList = ref<string[]>([]);
 // 数据初始化
 async function init() {
+  // 覆写添加确定方法
+  const oldAddSubmitFunc = addModalConfig.formAction;
+  addModalConfig.formAction = (data) => {
+    return oldAddSubmitFunc({
+      ...data,
+      shopPermissionIds: selPermissionList.value.reduce((pre: string[], cur: string) => {
+        return pre.concat(cur);
+      }, [] as string[]),
+    });
+  };
+  // 覆写编辑确定方法
+  const oldeditSubmitFunc = editModalConfig.formAction;
+  editModalConfig.formAction = (data) => {
+    return oldeditSubmitFunc({
+      ...data,
+      shopPermissionIds: selPermissionList.value.reduce((pre: string[], cur: string) => {
+        return pre.concat(cur);
+      }, [] as string[]),
+    });
+  };
+
   const res = await RoleApi.getList({ page: 1, size: 100 });
+  const permission = await permissionApi.getshopPermission();
+  permissionList.value = Array.isArray(permission) ? permission : [];
   const roleArr = res.records.map((item: SysRole) => {
     return {
       ...item,
@@ -106,12 +142,33 @@ init();
 
 // 新增
 async function handleAddClick() {
+  selPermissionList.value = [];
   addModalRef.value?.setModalVisible();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
+  selPermissionList.value = [];
   editModalRef.value?.handleDisabled(false);
   editModalRef.value?.setModalVisible();
+  // 设置权限选中
+  const perselArr = await permissionApi.getPermission(row.id);
+  for (let id of perselArr) {
+    for (let index in permissionList.value) {
+      const item = permissionList.value[index];
+      if (item.children) {
+        for (let child of item.children) {
+          if (child.id != null && child.id == id) {
+            if (selPermissionList.value[index]) {
+              selPermissionList.value[index].push(id);
+            } else {
+              selPermissionList.value[index] = [id];
+            }
+          }
+        }
+      }
+    }
+  }
+  console.log(selPermissionList.value);
   // 根据id获取数据进行填充
   await ShopStaffApi.get(row.id).then((res) => {
     console.log(res);