角色创建限制用户关联小区

杨泽宇
1 parent ce470f44
Showing 9 changed files with 99 additions and 118 deletions
src/layout/header.vue
src/pinia/index.ts
src/pinia/modules/data.ts
src/pinia/modules/menu.ts
src/views/role/index.vue
src/views/system/info.vue
src/views/user/edit.vue
src/views/user/index.vue
src/views/user/login.vue
@@ -6,6 +6,7 @@
  */
 import { getCurrentInstance, onMounted, reactive, computed } from "vue";
 import * as store from "@/pinia/index";
+import { ElMessageBox } from "element-plus";
 import { Fold, Expand } from "@element-plus/icons-vue";
 import styles from "@/style/global.module.scss";
 // TIP 获取全局变量，暂时只有坏图片占位图
@@ -24,7 +25,15 @@ const toggleMenu = () =&gt; {
  * 退出登录
  */
 const handleLogout = () => {
-  store.family.loginStore().removeToken();
+  ElMessageBox.confirm("确认退出登录吗?", "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    store.family.loginStore().removeToken();
+  }).catch(error => {
+    console.log(error)
+  })
 };
 let asyncData = reactive({
   userInfo: "",
 import { defineStore } from 'pinia'
-import * as all from 'pinia'
-import data from './modules/data'
-import menu from './modules/menu'
  
 // 获取modules文件夹下面所有ts文件
-let files = import.meta.globEager('./modules/*.ts')
+let files: any = import.meta.globEager('./modules/*.ts')
+
 let modules:any = {}, allStore:any = {}, family: any = {}
+
 for(let file in files) {
   const moduleName = file.replace(/(.*\/)*([^.]+).*/gi, '$2')
   modules = { ...modules, ...files[file] }
   allStore[moduleName + 'Store'] = modules
-  // family[moduleName + 'Store'] = modules
 }
-// console.log(allStore)
  
 for (let item in allStore) {
   family[item] = defineStore(allStore[item].default)
 }
  
-// const tengxiTestStore = defineStore({
-//   id: 'tengxi5290',
-//   state: () => ({
-//     age: null,
-//     name: '',
-//   }),
-//   getters: {
-//     doubleCount() {
-//       return this.age * 2
-//     },
-//     doubleCountPlusOne() {
-//       return this.doubleCount * 2 + 1
-//     }
-//   },
-//   actions: {
-//     reset() {
-//       this.age = 1
-//     },
-//     grown() {
-//       this.age += 1
-//     },
-//     init() {
-//       this.age = 20
-//       this.name = 'yzy'
-//     }
-//   },
-// })
-// const dataStore = defineStore(data)
-// export {tengxiTestStore, dataStore}
 export {family}
 \ No newline at end of file
-const id = 'data'
-const state = () => ({
-    data1: '10086',
-    desc: 'test',
-  })
-  const getters = {
-    doubleCount() {
-      return this.desc
-    },
-    doubleCountPlusOne() {
-      return this.data1
-    }
-  }
-  const actions = {
-    reset() {
-      this.data1 = '10010'
-    },
-    grown() {
-      this.desc = 'test test'
-    }
-  }
-
-export default {
-  namespace: true,
-  actions,
-  getters,
-  state,
-  id
-}
 \ No newline at end of file
-interface MenuItem {
-  menuList: MenuItem[],
-  id: number,
-  name: string,
-  priority: number,
-  url: string | null,
-  selected: boolean,
-  parentId: number | null,
-  keyword: string | null,
-  status: number
-}
 const id: string = 'menu'
 const state: Function = () => ({
   menuList: []
@@ -19,7 +8,7 @@ const getters = {
   }
 }
 const actions = {
-  setMenuList (data: MenuItem[]) {
+  setMenuList (data) {
     this.menuList = data
   }
 }
 <script setup lang="ts">
 import { reactive, ref, onMounted, getCurrentInstance } from "vue";
 import { roleList, roleStatus } from "@/api/user/role";
+import * as store from "@/pinia/index";
+import router from "@/router";
 import { parseTime } from "@/utils/tool";
 import Pagination from "@/components/Pagination/index.vue";
 import { ElMessageBox } from "element-plus";
@@ -20,23 +22,9 @@ interface Params {
 }
 interface Data {
   loading: boolean;
-  list: List[] | null;
+  list: any[];
   params: Params;
 }
-interface List {
-  roleName: string,
-  code: string,
-  roleDesc: string,
-  status: number,
-  createTime: string,
-  updateTime: string,
-  creator: string,
-  creatorId: number,
-  updator: string,
-  updatorId: number,
-  type: number,
-  oId: number
-}
 let data: Data = reactive({
   list: [],
   loading: false,
@@ -49,6 +37,9 @@ let data: Data = reactive({
     },
   },
 });
+let asyncData = reactive({
+  userInfo: "",
+});
 /**
  * 列表
  */
@@ -118,27 +109,28 @@ const handleStatus = async (obj) =&gt; {
   try {
     const res = await roleStatus({
       roleId: obj.id,
-      status: obj.status? 0: 1
+      status: obj.status ? 0 : 1,
     });
-    if(res?.data) {
+    if (res?.data) {
       globalProperties.$message.success("操作成功");
-      getList()
+      getList();
     } else {
       globalProperties.$message.error("操作失败");
     }
   } catch (e) {
     console.log(e);
-  } 
+  }
 };
 /**
  * 状态值
- * @enum {number} 
+ * @enum {number}
  */
 enum statusEnum {
   "禁用" = 0,
   "启用",
 }
 onMounted(() => {
+  asyncData.userInfo = store.family.loginStore().id;
   getList();
 });
 </script>
@@ -158,9 +150,13 @@ onMounted(() =&gt; {
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="handleSearch">查询</el-button>
-          <el-button type="primary">
-            <router-link to="/role/edit">添加角色</router-link>
-          </el-button>
+          <!-- 超管不能创建角色 -->
+          <el-button
+            type="primary"
+            @click="router.push({ path: '/role/edit' })"
+            :disabled="asyncData.userInfo === 1"
+            >添加角色</el-button
+          >
         </el-form-item>
       </el-form>
     </el-row>
@@ -196,16 +192,23 @@ onMounted(() =&gt; {
             scope.row.status ? "禁用" : "启用"
           }}</el-button>
           <el-button type="text"
-            ><router-link :to="{ path: '/role/user', query: {id: scope.row.id} }"
+            ><router-link
+              :to="{ path: '/role/user', query: { id: scope.row.id } }"
               >用户</router-link
             ></el-button
           >
           <el-button type="text"
-            ><router-link :to="{ path: '/role/permission', query: {roleId: scope.row.id, roleName: scope.row.roleName} }"
+            ><router-link
+              :to="{
+                path: '/role/permission',
+                query: { roleId: scope.row.id, roleName: scope.row.roleName },
+              }"
               >权限</router-link
             ></el-button
           >
-          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button type="text" @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 <script setup lang="ts">
 import { reactive, ref, getCurrentInstance } from "vue";
 import * as store from "@/pinia/index";
-import { userPwdChange } from '@/api/user/user';
+import { userPwdChange } from "@/api/user/user";
 import type { ElForm } from "element-plus";
  
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
@@ -11,8 +11,8 @@ let form = reactive({
     userId: store?.family?.loginStore()?.id,
     oldPassword: "",
     newPassword: "",
-    surePwd: ""
-  }
+    surePwd: "",
+  },
 });
 /**
  * 验证两次输入密码一致
@@ -21,12 +21,12 @@ let form = reactive({
  * @callback checkPwd~checkDoublePwdCallback
  */
 const checkPwd = (rules, value, callback) => {
-  if(value === form.data.newPassword) {
-    callback()
+  if (value === form.data.newPassword) {
+    callback();
   } else {
-    callback(new Error('请确认密码和新密码一致'))
+    callback(new Error("请确认密码和新密码一致"));
   }
-}
+};
 /**
  * 表单验证规则
  */
@@ -50,10 +50,10 @@ const rules = reactive({
       required: true,
       message: "请确认密码和新密码一致",
       trigger: "blur",
-      validator: checkPwd
+      validator: checkPwd,
     },
   ],
-})
+});
 /**
  * 表单重置
  */
@@ -72,7 +72,7 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
         .then((res) => {
           if (res) {
             instance?.proxy?.$message.success("修改成功");
-            store.family.loginStore().removeToken('请重新登录');
+            store.family.loginStore().removeToken("请重新登录");
           }
         })
         .catch((error) => {
@@ -123,9 +123,7 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
           <el-button type="primary" @click="submitForm(ruleFormRef)"
             >提交</el-button
           >
-          <el-button
-            type="info"
-            @click="resetForm(ruleFormRef)"
+          <el-button type="info" @click="resetForm(ruleFormRef)"
             >取消</el-button
           >
         </el-form-item>
@@ -2,6 +2,7 @@
 import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { userAdd } from "@/api/user/user";
 import { roleList } from "@/api/user/role";
+import { getTableList } from "@/api/community/residence";
 import { useRoute } from "vue-router";
 import { validMobile } from "@/utils/validate";
 import type { ElForm } from "element-plus";
@@ -16,11 +17,14 @@ let form = reactive({
     cellphone: "",
     password: "",
     roleIds: "",
+    cIds: "",
     userId: "",
   },
   dataType: "",
   roles: [],
+  communities: [],
   checkList: [],
+  communityList: []
 });
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
 /**
@@ -106,7 +110,7 @@ const submitForm = (formEl: InstanceType&lt;typeof ElForm&gt; | undefined) =&gt; {
  * 角色列表
  * @param {number | null} pageSize 一次请求多少条数据
  */
-const getRoleList = async (pageSize = 20) => {
+const getRoleList = async (pageSize: number = 20) => {
   try {
     const res = await roleList({
       page: 1,
@@ -120,8 +124,28 @@ const getRoleList = async (pageSize = 20) =&gt; {
     console.log(e);
   }
 };
+/**
+ * 小区列表
+ * @param {number | null} pageSize 一次请求多少条数据
+ */
+const getCommunityList = async (pageSize: number = 20) => {
+  try {
+    const res = await getTableList({
+      page: 1,
+      type: 0,
+      pageSize: pageSize,
+    });
+    form.communities = res.data.data.list;
+    if (res.data.data.total > pageSize) {
+      getCommunityList(res.data.data.total);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
 onMounted(() => {
   getRoleList();
+  getCommunityList();
   form.data = useRoute().query;
   if (JSON.stringify(form.data) === "{}") {
     form.dataType = "add";
@@ -179,6 +203,19 @@ onMounted(() =&gt; {
             >
           </el-checkbox-group>
         </el-form-item>
+        <el-form-item label="小区" style="width: 100%">
+          <el-checkbox-group
+            v-model="form.communityList"
+            @change="(data) => (form.data.cIds = data.join(','))"
+          >
+            <el-checkbox
+              v-for="(item, index) in form.communities"
+              :key="index"
+              :label="item.id"
+              >{{ item.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+        </el-form-item>
         <el-form-item style="width: 100%">
           <el-button type="primary" @click="submitForm(ruleFormRef)"
             >提交</el-button
@@ -183,11 +183,16 @@ onMounted(() =&gt; {
       align="center"
       element-loading-text="拼命加载中"
     >
-      <el-table-column prop="id" label="ID" align="center"> </el-table-column>
+      <el-table-column prop="id" label="ID" align="center"></el-table-column>
       <el-table-column prop="userName" label="昵称" align="center">
       </el-table-column>
       <el-table-column prop="cellphone" label="手机号" align="center">
       </el-table-column>
+      <el-table-column prop="roleList" label="角色" align="center">
+        <template #default="scope">
+          {{scope.row.roleList.map(i => i.roleName).join(',')}}
+        </template>
+      </el-table-column>
       <el-table-column prop="createTime" label="注册时间" align="center">
         <template #default="scope">
           {{ parseTime(new Date(scope.row.createTime).getTime()) }}
@@ -89,6 +89,7 @@ const getMenu = async () =&gt; {
             auto-complete="off"
             clearable
             :prefix-icon="UserFilled"
+            style="width: 448px;"
           />
         </el-form-item>
       </el-row>