Merge branch 'all-v4-liufei' into 'all-v4'

1. 角色删除接口对接 2. 展示相机树 3. 删除无用旧文件 4. 添加角色常量

See merge request skyeye/skyeye_frontend/skyeye-admin!206

src/api/camera/camera-preview.ts

@@ -51,6 +51,17 @@ export const getCameraTreeOldVersion = () => {
   );
 };
 
+/**
+ * v4: 查询完整的相机树
+ */
+export const getFullCameraTree = () => {
+  return http.request<CameraTree[]>({
+    url: '/admin/cameraPreview/queryCameraTree',
+    method: 'GET',
+  });
+};
+
+
 /** 算法是否启用 */
 export enum ALGO_ENABLED_STATUS {
   // 0代表启用

src/api/system/role.ts

@@ -191,7 +191,7 @@ export function editRole(data: RoleForm) {
 export function deleteRole(roleId: number) {
   return http.request({
     url: `/admin/role/deleteRole?roleId=${roleId}`,
-    method: 'POST',
+    method: 'DELETE',
   });
 }
 

src/types/role/constants.ts

@@ -0,0 +1,11 @@
+export enum RoleTypeEnum {
+  SUPER_ADMIN = 1,
+  TENANT_ADMIN = 2,
+  USER = 0,
+}
+
+export const roleTypeNames = {
+  [RoleTypeEnum.SUPER_ADMIN]: '超级管理员',
+  [RoleTypeEnum.TENANT_ADMIN]: '租户管理员',
+  [RoleTypeEnum.USER]: '普通',
+};

src/views/system/role/CreateDrawer.vue

@@ -1,239 +0,0 @@
-<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"
-    >
-      <div v-if="!disableDepartmentEdit">
-        <el-form-item v-if="!formParams.roleId" label="角色编码" prop="roleCode">
-          <el-input
-            placeholder="请输入角色编码"
-            v-model="formParams.roleCode"
-            :disabled="formParams.roleId ? true : false"
-          />
-        </el-form-item>
-      </div>
-
-      <el-form-item label="角色名称" prop="roleName">
-        <el-input placeholder="请输入角色名称" v-model="formParams.roleName" />
-      </el-form-item>
-      <el-form-item label="角色权限" prop="permissionIds">
-        <el-card shadow="hover">
-          <el-space>
-            <el-checkbox v-model:checked="isSpread" @change="packHandle">展开/收起</el-checkbox>
-            <el-checkbox v-model="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
-          </el-space>
-          <el-divider />
-          <el-tree
-            ref="treeRef"
-            show-checkbox
-            node-key="key"
-            :data="props.permissionList"
-            check-strictly
-            @check="checkedTree"
-          />
-        </el-card>
-      </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 } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import type { formParamsType } from './types';
-
-  import { addAdminRole, editAdminRole, roleAdminInfo } from '@/api/system/role';
-  import { getTreeValues } from '@/utils/helper/treeHelper';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { uid } from 'uid';
-
-  const globSetting = useGlobSetting();
-  const disableDepartmentEdit = globSetting.disableDepartmentEdit;
-
-  console.log('disableDepartmentEdit', disableDepartmentEdit);
-
-  const rules = {
-    roleCode: {
-      required: true,
-      message: '角色编码不能为空',
-      trigger: 'blur',
-    },
-    roleName: {
-      required: true,
-      message: '角色名称不能为空',
-      trigger: 'blur',
-    },
-  };
-
-  const emit = defineEmits(['change']);
-
-  const props = defineProps({
-    title: {
-      type: String,
-      default: '添加角色',
-    },
-    width: {
-      type: Number,
-      default: 450,
-    },
-    permissionList: {
-      type: Array,
-    },
-  });
-
-  const defaultValueRef = () => ({
-    roleId: null,
-    roleType: null,
-    roleName: '',
-    roleCode: disableDepartmentEdit ? uid(16) : '',
-    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 formParams = ref<formParamsType>(defaultValueRef());
-
-  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(_, checkedInfo) {
-    const keys = checkedInfo.checkedKeys;
-    const halfKeys = checkedInfo.halfCheckedKeys;
-    formParams.value.permissions = keys;
-    checkedKeys.value = keys;
-    formParams.value.permissionKeys = halfKeys;
-  }
-
-  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 {
-        formParams.value.roleType = 2;
-        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(() => {
-        console.log('res.permissionIds', res.permissionIds);
-        treeRef.value?.setCheckedKeys(res.permissionIds);
-      });
-    });
-  }
-
-  onMounted(() => {});
-
-  defineExpose({
-    openDrawer,
-    closeDrawer,
-  });
-</script>

src/views/system/role/CreateUserDrawer.vue

@@ -1,508 +0,0 @@
-<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"
-    >
-      <div v-if="!disableDepartmentEdit">
-        <el-form-item v-if="!formParams.roleId" label="角色编码" prop="roleCode">
-          <el-input
-            placeholder="请输入角色编码"
-            v-model="formParams.roleCode"
-            :disabled="formParams.roleId ? true : false"
-          />
-        </el-form-item>
-      </div>
-
-      <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-space>
-          <el-divider />
-          <div style="height: 25vh">
-            <el-scrollbar>
-              <el-tree
-                ref="treeRef"
-                show-checkbox
-                node-key="code"
-                :render-after-expand="false"
-                :data="treeData"
-                :props="treeProps"
-                @node-click="clickNode"
-                @check-change="checkNode"
-              />
-            </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-space>
-              <el-checkbox v-model="isAll" @change="handleCheckAll">全选/全不选</el-checkbox>
-            </el-space>
-            <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, computed, nextTick } from 'vue';
-  import { ElMessage } from 'element-plus';
-  import type { userFormParamsType } from './types';
-  import { addRole, getFeaturePermissions, roleUserInfo, updateRole } from '@/api/system/role';
-  import useComTree from '@/views/system-config/scene-manage/store/use-com-tree';
-  import { storeToRefs } from 'pinia';
-  import { useGlobSetting } from '@/hooks/setting';
-  import { uid } from 'uid';
-
-  const globSetting = useGlobSetting();
-  const disableDepartmentEdit = globSetting.disableDepartmentEdit;
-
-  const comTree = useComTree();
-  const { comTreeData } = storeToRefs(comTree);
-  const { getComTreeDetail } = comTree;
-
-  const workshopFuncPermissionMap = computed(() => {
-    const tempMap = {};
-    comTreeData.value.forEach((company) => {
-      const shops = company.children;
-      if (shops && shops.length) {
-        shops.forEach((shop) => {
-          let permList = [] as number[];
-          const perms = shop.workshopFuncPermissions;
-          if (perms && perms.length) {
-            permList = permList.concat(perms);
-          }
-          tempMap[shop.code!] = permList;
-        });
-      }
-    });
-    return tempMap;
-  });
-
-  // 默认功能权限全部勾选，有未勾选的添加至excludeFeaturePermissionMap中：[workdshopCode]: [permission数组]
-  const featurePermissionMap = {};
-
-  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 (comTreeData.value && comTreeData.value.length) {
-      for (let i = 0; i < comTreeData.value.length; i++) {
-        const data = comTreeData.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 = ref<{ key: number; label: string }[]>([]);
-
-  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: disableDepartmentEdit ? uid(16) : '',
-    remark: '',
-    permissions: [],
-    permissionKeys: [],
-  });
-
-  const defaultTreeValueRef = () => ({
-    roleId: null,
-    roleName: '',
-    roleCode: disableDepartmentEdit ? uid(16) : '',
-    remark: '',
-    permissionList: [],
-    permissionKeys: [],
-  });
-
-  const message = ElMessage;
-  const formRef: any = ref(null);
-  const modeTreeRef = ref();
-  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(() => {
-    const perms = workshopFuncPermissionMap.value[selectedNodeKey.value];
-    if (selectedNodeKey.value && perms && perms.length) {
-      return modeList.value.filter((item) => perms.includes(item.key));
-    } else {
-      return [];
-    }
-  });
-
-  const formParams = ref<userFormParamsType>(defaultTreeValueRef());
-
-  function clickNode(tree, _nodeInfo, _, __) {
-    if (tree.code in featurePermissionMap) {
-      selectedNodeKey.value = tree.code;
-      isAll.value = featurePermissionMap[tree.code].length >= modeList.value.length;
-      modeTreeRef.value.setCheckedKeys(featurePermissionMap[tree.code]);
-    } else {
-      isAll.value = false;
-      selectedNodeKey.value = '';
-    }
-  }
-
-  const checkNode = (checkedNodes, checkedKeys) => {
-    if (checkedKeys) {
-      if (checkedNodes.isShop && !(checkedNodes.code in featurePermissionMap)) {
-        selectedNodeKey.value = checkedNodes.code;
-        isAll.value = true;
-        handleCheckAll(true);
-      }
-    } else {
-      if (checkedNodes.isShop && checkedNodes.code in featurePermissionMap) {
-        delete featurePermissionMap[checkedNodes.code];
-      }
-      selectedNodeKey.value = '';
-      isAll.value = false;
-      handleCheckAll(false);
-    }
-  };
-
-  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 {
-    //   const allTreeNodes = treeRef.value.store._getAllNodes().map((item) => item.data.code);
-    //   console.log('allTreeNodes', allTreeNodes.length);
-
-    //   treeRef.value!.setCheckedKeys(allTreeNodes);
-    // }
-    if (!value) {
-      featurePermissionMap[selectedNodeKey.value] = [];
-      modeTreeRef.value.setCheckedKeys(featurePermissionMap[selectedNodeKey.value]);
-    } else {
-      featurePermissionMap[selectedNodeKey.value] = modeList.value.map((item) => item.key);
-      modeTreeRef.value.setCheckedKeys(featurePermissionMap[selectedNodeKey.value]);
-    }
-  }
-
-  // function checkedTree(tree, checkedInfo) {
-  //   console.log(tree);
-  //   console.log(checkedInfo);
-
-  //   const nodes = checkedInfo.checkedNodes;
-  //   console.log('nodes', nodes);
-
-  //   const halfKeys = checkedInfo.halfCheckedKeys;
-  //   formParams.value.permissionList = checkedInfo.halfCheckedKeys;
-  //   formParams.value.permissionList = nodes
-  //     .filter((item) => item.isShop)
-  //     .map((node) => {
-  //       return {
-  //         workshopCode: node.code,
-  //         permissionId: '0',
-  //       };
-  //     });
-  //   formParams.value.permissionKeys = halfKeys;
-  //   const allTreeNodes = treeRef.value.store._getAllNodes().map((item) => item.data.code);
-  //   if (nodes.length < allTreeNodes.length) {
-  //     isAll.value = false;
-  //   } else {
-  //     isAll.value = true;
-  //   }
-  // }
-
-  const getPermissionList = () => {
-    const newPerm = [] as any[];
-    Object.entries(featurePermissionMap).forEach((item) => {
-      if (item[0]) {
-        (item[1] as number[]).forEach((key) => {
-          newPerm.push({
-            workshopCode: item[0],
-            permissionId: key + '',
-          });
-        });
-      }
-    });
-    console.log(newPerm);
-
-    return newPerm;
-  };
-
-  function checkedModeTree(_, tree) {
-    isAll.value = tree.checkedKeys.length >= modeList.value.length;
-    featurePermissionMap[selectedNodeKey.value] = tree.checkedKeys;
-    const selectLength = tree.checkedKeys.length;
-    if (selectLength === 0) {
-      delete featurePermissionMap[selectedNodeKey.value];
-      treeRef.value!.setCheckedKeys(Object.keys(featurePermissionMap));
-    }
-  }
-
-  function openDrawer(roleId?) {
-    isAll.value = false;
-    selectedNodeKey.value = '';
-    Object.keys(featurePermissionMap).forEach((key) => {
-      delete featurePermissionMap[key];
-    });
-
-    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('请填写完整信息');
-      }
-      formParams.value.permissionList = getPermissionList();
-
-      if (formParams.value.roleId) {
-        const updateData = {
-          permissionList: formParams.value.permissionList,
-          remark: formParams.value.remark,
-          roleName: formParams.value.roleName,
-          roleCode: formParams.value.roleCode,
-          roleType: 3,
-          roleId: formParams.value.roleId,
-        };
-        updateRole(updateData).then((_) => {
-          message.success('编辑成功');
-          emit('change');
-          handleReset();
-          closeDrawer();
-        });
-      } else {
-        const addData = {
-          permissionList: formParams.value.permissionList,
-          remark: formParams.value.remark,
-          roleName: formParams.value.roleName,
-          roleCode: formParams.value.roleCode,
-          roleType: 3,
-        };
-        addRole(addData).then((_) => {
-          message.success('添加成功');
-          emit('change');
-          handleReset();
-          closeDrawer();
-        });
-      }
-    });
-  }
-
-  function handleReset() {
-    formRef.value.resetFields();
-    Object.keys(featurePermissionMap).forEach((key) => {
-      delete featurePermissionMap[key];
-    });
-    formParams.value = Object.assign(formParams.value, defaultValueRef());
-    treeRef.value!.setCheckedKeys([]);
-    modeTreeRef.value!.setCheckedNodes([]);
-    isAll.value = false;
-    selectedNodeKey.value = '';
-  }
-  function setFeaturePermission(permissionList) {
-    for (const item of permissionList) {
-      if (featurePermissionMap[item.workshopCode]) {
-        featurePermissionMap[item.workshopCode].push(item.permissionId);
-      } else {
-        featurePermissionMap[item.workshopCode] = [item.permissionId];
-      }
-    }
-  }
-  // const selectNodes = ref<string[]>([]);
-  function getInfo() {
-    roleUserInfo({ roleId: formParams.value.roleId }).then((res) => {
-      const info = {
-        roleId: res.id,
-        roleName: res.roleName,
-        roleCode: res.roleCode,
-        remark: res.remark,
-        permissionList: res.permissionIds || [],
-        permissionKeys: res.permissionKeys || [],
-      };
-      formParams.value = info;
-      isDrawer.value = true;
-      setFeaturePermission(res.permissionMap);
-      const treeSelectData = Object.keys(featurePermissionMap);
-      isAll.value = false;
-      selectedNodeKey.value = '';
-
-      // const modeTreeSelectData = Object.values(featurePermissionMap)[0] as Array<string>;
-      // isAll.value = modeTreeSelectData.length >= modeTreeData.value.length;
-
-      // nextTick(() => {
-      //   selectNodes.value = res.permissionMap.map((item) => item.workshopCode);
-      //   // 将匹配到的节点的键值数组传递给 setCheckedKeys 方法
-      //   treeRef.value.setCheckedKeys(selectNodes.value);
-      // });
-      nextTick(() => {
-        treeRef.value?.setCheckedKeys(treeSelectData, true);
-        modeTreeRef.value?.setCheckedKeys([]);
-      });
-    });
-  }
-
-  onMounted(() => {
-    getComTreeDetail();
-    getFeaturePermissions().then((res) => {
-      if (res[0]?.children) {
-        modeList.value = res[0].children;
-      }
-    });
-  });
-
-  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;
-  }
-  :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
-    color: #409eff;
-  }
-</style>

src/views/system/role/columns.ts

@@ -1,39 +0,0 @@
-import { h } from 'vue';
-import { BasicColumn } from '@/components/Table';
-import { roleTypeNames } from './types';
-
-export const columns: BasicColumn[] = [
-  {
-    label: '角色id',
-    prop: 'roleId',
-  },
-  {
-    label: '角色类型',
-    prop: 'roleType',
-    render(record) {
-      return h(
-        'span',
-        {},
-        {
-          default: () => roleTypeNames[record.row.roleType],
-        },
-      );
-    },
-  },
-  // {
-  //   label: '角色编码',
-  //   prop: 'roleCode',
-  // },
-  {
-    label: '角色名称',
-    prop: 'roleName',
-  },
-  {
-    label: '备注',
-    prop: 'remark',
-  },
-  {
-    label: '创建时间',
-    prop: 'createTime',
-  },
-];

src/views/system/role/components/RoleDrawer.vue

@@ -12,7 +12,7 @@
       </el-form-item>
 
       <el-form-item label="角色权限">
-        <PermissioTreenCard title="相机权限" :tree-data="[]" ref="cameraCardInstance" />
+        <PermissioTreenCard title="相机权限" :tree-data="cameraPermTreeData" ref="cameraCardInstance" />
         <PermissioTreenCard title="菜单权限" :tree-data="menuPermTreeData" ref="menuCardInstance" />
         <PermissioTreenCard title="功能权限" :tree-data="funcPermTreeData" ref="funcCardInstance" />
       </el-form-item>
@@ -36,6 +36,7 @@
   import { FormRules, FormInstance, ElMessage } from 'element-plus';
   import useMenuPermTree from '../hooks/useMenuPermissionTree';
   import useFuncPermTree from '../hooks/useFunctionPermissionTree';
+  import useCameraPermTree from '../hooks/useCameraPermissionTree';
   import { createRole, editRole, getAssignedPerms } from '@/api/system/role';
 
   defineProps<{
@@ -46,6 +47,7 @@
     (e: 'submitted'): void;  // 提交之后触发的事件
   }>();
 
+  const { cameraPermTreeData } = useCameraPermTree();
   const { menuPermTreeData } = useMenuPermTree();
   const { funcPermTreeData} = useFuncPermTree();
 

src/views/system/role/hooks/useCameraPermissionTree.ts

@@ -0,0 +1,20 @@
+import { shallowRef, onMounted } from 'vue';
+import { getFullCameraTree } from "@/api/camera/camera-preview";
+import { PermissionViewTree } from "@/types/permission/type";
+import { transformToViewTree } from '../utils/tree';
+
+export default function useMenuPermissionTree() {
+  const cameraPermTreeData = shallowRef<PermissionViewTree>([]);
+  const buildPermissionTree = async () => {
+    try {
+      const result = await getFullCameraTree();
+      cameraPermTreeData.value = transformToViewTree(result, 'name', 'id');
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  onMounted(() => buildPermissionTree());
+
+  return { cameraPermTreeData };
+}

src/views/system/role/role.vue

@@ -27,7 +27,7 @@
           <template #default="{ row }">
             <el-space>
               <el-button type="primary" :icon="Edit" text @click="openDrawer(row)" />
-              <el-button :icon="Delete" text />
+              <el-button :icon="Delete" text @click="deleteRole(row.id)" />
             </el-space>
           </template>
         </el-table-column>
@@ -52,10 +52,12 @@
 
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue';
+  import { ElMessageBox } from 'element-plus';
   import { Edit, Delete, Search } from '@element-plus/icons-vue';
   import RoleDrawer from './components/RoleDrawer.vue';
   import useRolesQuery from './hooks/useRolesQuery';
   import { Role } from '@/types/role/type';
+  import { deleteRole as _deleteRole } from '@/api/system/role';
 
   const { roleList, total, queryRolesPage, requestParams } = useRolesQuery();
 
@@ -75,6 +77,19 @@
     queryRolesPage();
   };
 
+  /**
+   * 删除角色
+   */
+  const deleteRole = async (roleId: number) => {
+    try {
+      await ElMessageBox.confirm('确定删除该角色？如果当前角色被使用，则会删除失败', '提示', { type: 'warning' });
+      await _deleteRole(roleId);
+      queryRolesPage();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
   onMounted(() => {
     queryRolesPage();
   });

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

@@ -1,31 +0,0 @@
-export interface formParamsType {
-  roleId?: number | null;
-  roleType?: number | null;
-  roleName: string;
-  roleCode: string;
-  remark: string;
-  permissions: number[];
-  permissionKeys: number[];
-}
-
-export interface userFormParamsType {
-  roleId?: number | null;
-  roleName: string;
-  roleCode: string;
-  remark: string;
-  permissions?: number[];
-  permissionList: { workshopCode: string; permissionId: any }[];
-  permissionKeys?: number[];
-}
-
-export enum RoleTypeEnum {
-  SUPER = 1,
-  ADMIN = 2,
-  USER = 3,
-}
-
-export const roleTypeNames = {
-  [RoleTypeEnum.SUPER]: '超级管理员',
-  [RoleTypeEnum.ADMIN]: '管理员',
-  [RoleTypeEnum.USER]: '用户',
-};