feat: 角色权限管理0.1

src/api/system/role.ts

@@ -1,11 +1,22 @@
 import { http } from '@/utils/http/axios';
 
 /**
- * @description: 添加角色
+ * @description: 添加管理角色
+ */
+export function addAdminRole(params) {
+  return http.request({
+    url: '/role/addAdmin',
+    method: 'POST',
+    params,
+  });
+}
+
+/**
+ * @description: 添加用户角色
  */
 export function addRole(params) {
   return http.request({
-    url: '/role/add',
+    url: '/role/addAdmin',
     method: 'POST',
     params,
   });
@@ -14,31 +25,31 @@ export function addRole(params) {
 /**
  * @description: 查询角色信息
  */
-export function roleInfo(params) {
+export function roleAdminInfo(params) {
   return http.request({
-    url: '/role/info',
+    url: '/role/infoAdmin',
     method: 'GET',
     params,
   });
 }
 
 /**
- * @description: 编辑角色
+ * @description: 编辑管理角色
  */
-export function editRole(params) {
+export function editAdminRole(params) {
   return http.request({
-    url: '/role/update',
+    url: '/role/updateAdmin',
     method: 'POST',
     params,
   });
 }
 
 /**
- * @description: 删除角色
+ * @description: 删除管理角色
  */
-export function delRole(params) {
+export function delAdminRole(params) {
   return http.request({
-    url: '/role/delete',
+    url: '/role/deleteAdmin',
     method: 'POST',
     params,
   });

src/router/modules/dashboard.ts

@@ -42,14 +42,14 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('@/views/dashboard/console/console.vue'),
       },
-      {
-        path: 'monitor',
-        name: `${routeName}_monitor`,
-        meta: {
-          title: '监控页',
-        },
-        component: () => import('@/views/dashboard/monitor/monitor.vue'),
-      },
+      // {
+      //   path: 'monitor',
+      //   name: `${routeName}_monitor`,
+      //   meta: {
+      //     title: '监控页',
+      //   },
+      //   component: () => import('@/views/dashboard/monitor/monitor.vue'),
+      // },
       {
         path: 'workplace',
         name: `${routeName}_workplace`,

src/views/auth/dept/columns.ts

@@ -21,8 +21,4 @@ export const columns: BasicColumn[] = [
     label: '上级组织名称',
     prop: 'parentName',
   },
-  {
-    label: '组织代码',
-    prop: 'code',
-  },
 ];

src/views/auth/dept/dept.vue

@@ -26,6 +26,13 @@
         :columns="columns"
         :request="loadDataTable"
         row-key="deptId"
+        :tableSetting="{
+          size: false,
+          redo: false,
+          fullscreen: false,
+          striped: false,
+          setting: false,
+        }"
         ref="basicTableRef"
         :actionColumn="actionColumn"
         @update:checked-row-keys="onCheckedRow"

src/views/dashboard/monitor/CompanyDrawer.vue

@@ -82,7 +82,7 @@
         </el-form-item>
       </el-form>
       <div style="position: absolute; left: 108px; bottom: 67px">
-        <el-button v-if="!props.comEdit" type="warning" @click="resetDrawCom">重置</el-button>
+        <el-button v-if="!props.comEdit" @click="resetDrawCom">重置</el-button>
         <el-button type="primary" v-if="!props.comEdit" @click="newCompanyAdd"> 提交 </el-button>
         <el-button type="primary" v-if="props.comEdit" @click="editedSub"> 提交 </el-button>
       </div>

src/views/dashboard/monitor/monitor.vue

@@ -34,7 +34,7 @@
         <template #empty>
           <div class="empty-content flex flex-col items-center">
             <img src="@/assets/icons/no-content.png" class="empty-img" />
-            <span class="empty-text">目前无内容，请先添加相机</span>
+            <span class="empty-text">目前无内容，请先添加场景</span>
           </div>
         </template>
       </BasicTable>

src/views/dashboard/monitor/WorkshopDrawer.vue

@@ -69,7 +69,7 @@
         </el-form-item>
       </el-form>
       <div style="position: absolute; left: 108px; bottom: 67px">
-        <el-button v-if="!props.detail.companyId" type="warning" @click="resetDraw">重置</el-button>
+        <el-button v-if="!props.detail.companyId" @click="resetDraw">重置</el-button>
         <el-button v-if="!props.detail.companyId" type="primary" @click="addNewType">
           提交
         </el-button>

src/views/dashboard/monitor/WorkspaceDrawer.vue

@@ -41,7 +41,7 @@
         </el-form-item>
       </el-form>
       <div style="position: absolute; left: 108px; bottom: 67px">
-        <el-button v-if="!props.detail.principal" type="warning" @click="resetDraw">重置</el-button>
+        <el-button v-if="!props.detail.principal" @click="resetDraw">重置</el-button>
         <el-button v-if="!props.detail.principal" type="primary" @click="addNewType">
           提交
         </el-button>

src/views/system/role/CreateDrawer.vue

@@ -59,7 +59,7 @@
   import { ElMessage } from 'element-plus';
   import type { formParamsType } from './types';
 
-  import { addRole, editRole, roleInfo } from '@/api/system/role';
+  import { addAdminRole, editAdminRole, roleAdminInfo } from '@/api/system/role';
   import { getTreeValues } from '@/utils/helper/treeHelper';
 
   const rules = {
@@ -176,14 +176,14 @@
         return message.error('请填写完整信息');
       }
       if (formParams.value.roleId) {
-        editRole(formParams.value).then((_) => {
+        editAdminRole(formParams.value).then((_) => {
           message.success('编辑成功');
           emit('change');
           handleReset();
           closeDrawer();
         });
       } else {
-        addRole(formParams.value).then((_) => {
+        addAdminRole(formParams.value).then((_) => {
           message.success('添加成功');
           emit('change');
           handleReset();
@@ -200,7 +200,7 @@
   }
 
   function getInfo() {
-    roleInfo({ roleId: formParams.value.roleId }).then((res) => {
+    roleAdminInfo({ roleId: formParams.value.roleId }).then((res) => {
       const info = {
         roleId: res.id,
         roleName: res.roleName,

src/views/system/role/CreateUserDrawer.vue

@@ -0,0 +1,367 @@
+<template>
+  <el-drawer
+    v-model="isDrawer"
+    :width="width"
+    placement="right"
+    :title="title"
+    @close="handleReset"
+  >
+    <el-form
+      :model="formParams"
+      :rules="rules"
+      ref="formRef"
+      label-placement="left"
+      :label-width="80"
+    >
+      <el-form-item label="角色编码" prop="roleCode">
+        <el-input
+          placeholder="请输入角色编码"
+          v-model="formParams.roleCode"
+          :disabled="formParams.roleId ? true : false"
+        />
+      </el-form-item>
+
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input placeholder="请输入角色名称" v-model="formParams.roleName" />
+      </el-form-item>
+      <el-form-item label="角色权限" prop="permissionIds">
+        <div class="mark-left"></div>
+        <el-card shadow="hover" class="permission-card">
+          <div class="permission-name">场景权限</div>
+          <el-space>
+            <el-checkbox v-model:checked="isSpread" @change="packHandle">展开/收起</el-checkbox>
+            <el-checkbox v-model:checked="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
+          </el-space>
+          <el-divider />
+          <div style="height: 25vh">
+            <el-scrollbar>
+              <el-tree
+                ref="treeRef"
+                show-checkbox
+                node-key="code"
+                :data="treeData"
+                :props="treeProps"
+                @check="checkedTree"
+                @node-click="clickNode"
+              />
+            </el-scrollbar>
+          </div>
+        </el-card>
+        <div style="position: relative; margin-top: 10px; width: 100%">
+          <div class="mark-left"></div>
+          <el-card shadow="hover" class="permission-card">
+            <div class="permission-name">功能权限</div>
+            <el-divider />
+            <div style="height: 10vh">
+              <el-scrollbar>
+                <el-tree
+                  ref="modeTreeRef"
+                  show-checkbox
+                  node-key="key"
+                  :data="modeTreeData"
+                  @check="checkedModeTree"
+                />
+              </el-scrollbar>
+            </div>
+          </el-card>
+        </div>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input type="textarea" placeholder="请输入备注" v-model="formParams.remark" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-space>
+        <el-button @click="handleReset">重置</el-button>
+        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
+      </el-space>
+    </template>
+  </el-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, nextTick, computed } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import type { formParamsType, userFormParamsType } from './types';
+
+  import { addAdminRole, editAdminRole, roleAdminInfo } from '@/api/system/role';
+  import { getTreeValues } from '@/utils/helper/treeHelper';
+  import useScene from '@/views/system-config/scene-manage/use-scene';
+
+  const sceneInfos = useScene();
+  const { tableData, getSceneDetail } = sceneInfos;
+
+  const rules = {
+    roleCode: {
+      required: true,
+      message: '角色编码不能为空',
+      trigger: 'blur',
+    },
+    roleName: {
+      required: true,
+      message: '角色名称不能为空',
+      trigger: 'blur',
+    },
+  };
+
+  const treeProps = { label: 'name' };
+
+  const treeData = computed(() => {
+    const newList: any[] = [];
+    if (tableData.value && tableData.value.length) {
+      for (let i = 0; i < tableData.value.length; i++) {
+        const data = tableData.value[i];
+        if (data.children && data.children.length) {
+          const treeItem = {
+            id: data.id,
+            code: data.id,
+            name: data.name,
+            children: data
+              .labelList!.map((item) => {
+                return {
+                  id: item.id,
+                  code: item.code,
+                  name: item.name,
+                  children: data
+                    .children!.filter((children) => children.sceneLabelId === item.id)
+                    .map((children) => {
+                      return {
+                        id: children.id,
+                        code: children.code,
+                        name: children.name,
+                        isShop: true,
+                      };
+                    }),
+                };
+              })
+              .filter((label) => label.children.length),
+          };
+          newList.push(treeItem);
+        }
+      }
+    }
+    return newList;
+  });
+
+  const modeList = [
+    {
+      key: 10,
+      id: 1,
+      label: 10,
+    },
+    {
+      key: 11,
+      id: 2,
+      label: 11,
+    },
+    {
+      key: 12,
+      id: 3,
+      label: 12,
+    },
+  ];
+
+  const emit = defineEmits(['change']);
+
+  const props = defineProps({
+    title: {
+      type: String,
+      default: '添加角色',
+    },
+    width: {
+      type: Number,
+      default: 450,
+    },
+    permissionList: {
+      type: Array,
+    },
+  });
+
+  const defaultValueRef = () => ({
+    roleId: null,
+    roleName: '',
+    roleCode: '',
+    remark: '',
+    permissions: [],
+    permissionKeys: [],
+  });
+
+  const message = ElMessage;
+  const checkedKeys = ref<number[]>([]);
+  const formRef: any = ref(null);
+  const isDrawer = ref(false);
+  const subLoading = ref(false);
+  const isSpread = ref(false);
+  const isAll = ref(false);
+  const treeRef = ref();
+  const expandedKeys = ref();
+  const selectedNodeKey = ref<string>('');
+  const modeTreeData = computed(() => (selectedNodeKey.value ? modeList : []));
+
+  const formParams = ref<userFormParamsType>(defaultValueRef());
+
+  function clickNode(tree, nodeInfo, _, __) {
+    if (nodeInfo.isShop) {
+      selectedNodeKey.value = tree.code;
+    } else {
+      selectedNodeKey.value = '';
+    }
+  }
+
+  function treeNodeExpand(status) {
+    for (var i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
+      treeRef.value.store._getAllNodes()[i].expanded = status;
+    }
+  }
+
+  function packHandle(value) {
+    if (value) {
+      treeNodeExpand(true);
+      expandedKeys.value = props?.permissionList?.map((item: any) => item.key as string) as [];
+    } else {
+      expandedKeys.value = [];
+      treeNodeExpand(false);
+    }
+  }
+
+  function handleCheckAll(value) {
+    if (!value) {
+      formParams.value.permissions = [];
+      treeRef.value!.setCheckedKeys([]);
+    } else {
+      formParams.value.permissions = getAllIds(
+        props?.permissionList as { key: number; children: [] }[],
+      );
+      const keys = getTreeValues(props.permissionList || [], 'key');
+      treeRef.value!.setCheckedKeys(keys);
+    }
+  }
+
+  function getAllIds(list: { key: number; children: [] }[] = [], ids: number[] = []) {
+    for (let item of list) {
+      !ids.includes(item.key) && ids.push(item.key);
+      if (item.children && item.children.length) getAllIds(item.children, ids);
+    }
+    return ids;
+  }
+
+  function checkedTree(tree, checkedInfo) {
+    console.log(tree);
+    console.log(checkedInfo);
+
+    const nodes = checkedInfo.checkedNodes;
+    const halfKeys = checkedInfo.halfCheckedKeys;
+    formParams.value.permissions = checkedInfo.halfCheckedKeys;
+    formParams.value.permissions = nodes
+      .filter((item) => item.isShop)
+      .map((node) => {
+        return {
+          workshopCode: node.code,
+          permissionId: 0,
+        };
+      });
+    checkedKeys.value = keys;
+    formParams.value.permissionKeys = halfKeys;
+  }
+
+  function checkedModeTree() {}
+
+  function openDrawer(roleId?) {
+    if (roleId) {
+      formParams.value.roleId = roleId;
+      getInfo();
+      return;
+    }
+    isDrawer.value = true;
+  }
+
+  function closeDrawer() {
+    isDrawer.value = false;
+  }
+
+  function formSubmit() {
+    formRef.value.validate((valid) => {
+      if (!valid) {
+        return message.error('请填写完整信息');
+      }
+      if (formParams.value.roleId) {
+        editAdminRole(formParams.value).then((_) => {
+          message.success('编辑成功');
+          emit('change');
+          handleReset();
+          closeDrawer();
+        });
+      } else {
+        addAdminRole(formParams.value).then((_) => {
+          message.success('添加成功');
+          emit('change');
+          handleReset();
+          closeDrawer();
+        });
+      }
+    });
+  }
+
+  function handleReset() {
+    formRef.value.resetFields();
+    formParams.value = Object.assign(formParams.value, defaultValueRef());
+    treeRef.value!.setCheckedKeys([]);
+  }
+
+  function getInfo() {
+    roleAdminInfo({ roleId: formParams.value.roleId }).then((res) => {
+      const info = {
+        roleId: res.id,
+        roleName: res.roleName,
+        roleCode: res.roleCode,
+        remark: res.remark,
+        permissions: res.permissionIds || [],
+        permissionKeys: res.permissionKeys || [],
+      };
+      formParams.value = info;
+      isDrawer.value = true;
+      nextTick(() => {
+        treeRef.value?.setCheckedKeys(res.permissionIds);
+      });
+    });
+  }
+
+  onMounted(() => {
+    getSceneDetail();
+  });
+
+  defineExpose({
+    openDrawer,
+    closeDrawer,
+  });
+</script>
+
+<style scoped>
+  .mark-left {
+    position: absolute;
+    width: 4px;
+    height: 28px;
+    top: 0;
+    background-color: #1890ff;
+  }
+
+  .permission-name {
+    height: 28px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+  }
+
+  :deep(.el-divider--horizontal) {
+    margin: 12px 0;
+  }
+
+  .permission-card {
+    width: 100%;
+  }
+
+  :deep(.permission-card .el-card__body) {
+    padding-top: 0;
+  }
+</style>

src/views/system/role/role.vue

@@ -24,18 +24,33 @@
         :columns="columns"
         :request="loadDataTable"
         :row-key="(row) => row.id"
+        :tableSetting="{
+          size: false,
+          redo: false,
+          fullscreen: false,
+          striped: false,
+          setting: false,
+        }"
         ref="tableRef"
         :actionColumn="actionColumn"
         @update:checked-row-keys="onCheckedRow"
       >
         <template #tableTitle>
+          <el-button type="primary" @click="openCreateUserDrawer">
+            <template #icon>
+              <el-icon>
+                <FileAddOutlined />
+              </el-icon>
+            </template>
+            添加用户角色
+          </el-button>
           <el-button type="primary" @click="openCreateDrawer">
             <template #icon>
               <el-icon>
                 <FileAddOutlined />
               </el-icon>
             </template>
-            添加角色
+            添加管理员角色
           </el-button>
         </template>
 
@@ -51,6 +66,8 @@
       :permissionList="treeData"
       @change="reloadTable"
     />
+
+    <CreateUserDrawer ref="createUserDrawerRef" :title="drawerTitle" @change="reloadTable" />
   </page-wrapper>
 </template>
 
@@ -58,15 +75,17 @@
   import { reactive, ref, unref, h, onMounted } from 'vue';
   import { ElMessage } from 'element-plus';
   import { BasicTable, TableAction, BasicColumn } from '@/components/Table';
-  import { roleList, permissionList, delRole } from '@/api/system/role';
+  import { roleList, permissionList, delAdminRole } from '@/api/system/role';
   import { columns } from './columns';
   import { FileAddOutlined, SearchOutlined } from '@vicons/antd';
   import CreateDrawer from './CreateDrawer.vue';
+  import CreateUserDrawer from './CreateUserDrawer.vue';
   import { useUserStore } from '@/store/modules/user';
 
   const message = ElMessage;
   const tableRef = ref();
   const createDrawerRef = ref();
+  const createUserDrawerRef = ref();
   const drawerTitle = ref('添加角色');
   const treeData = ref([]);
   const userStore = useUserStore();
@@ -117,6 +136,12 @@
     openDrawer();
   }
 
+  function openCreateUserDrawer() {
+    drawerTitle.value = '添加角色';
+    const { openDrawer } = createUserDrawerRef.value;
+    openDrawer();
+  }
+
   function onCheckedRow(rowKeys: any[]) {
     console.log(rowKeys);
   }
@@ -137,7 +162,7 @@
       message.error('不能删除自己的角色');
       return;
     }
-    delRole({ roleId: record.roleId }).then(() => {
+    delAdminRole({ roleId: record.roleId }).then(() => {
       message.success('删除成功');
       reloadTable();
     });

src/views/system/role/types/index.ts

@@ -6,3 +6,12 @@ export interface formParamsType {
   permissions: number[];
   permissionKeys: number[];
 }
+
+export interface userFormParamsType {
+  roleId?: number | null;
+  roleName: string;
+  roleCode: string;
+  remark: string;
+  permissionList: { workshopCode: string; permissionId: any }[];
+  permissionKeys?: number[];
+}