权限项管理

public/demo.js

@@ -23,8 +23,17 @@ const DATACONTENT_ID = {
   /***-----登录------***/
   loginId: 36, //登录-获取权限-id
 
+  /***-----权限管理------***/
+  authTreeId: 40, //权限管理-权限树
+  authTreeNewId: 92, //权限管理-权限树
+
   /***-----基础数据------***/
   airlineTableId: 80, //基础数据-航司信息维护-表格-id
   airportTreeId: 58, //基础数据-机场信息维护-公司列表-id
   airportTableId: 79, //基础数据-机场信息维护-表格-id
 };
+
+const SERVICE_ID = {
+  /***-----权限项管理------***/
+  authScId: 13, //权限项管理-增删改
+}

src/api/apiAuthority.ts

@@ -0,0 +1,189 @@
+/*
+ * @Author: your name
+ * @Date: 2021-12-21 09:22:04
+ * @LastEditTime: 2022-02-21 14:03:31
+ * @LastEditors: Please set LastEditors
+ * @Description: 权限项管理
+ * @FilePath: \Foshan4A2.0\src\api\apiAuthority.js
+ */
+import request from '@/utils/axiosReq'
+
+//权限树查询
+export function GetAuthTree(params) {
+  return request({
+    url: '/api/fs4a/GetAuthTree/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//应用新增保存
+export function SaveApp(params) {
+  return request({
+    url: '/api/fs4a/SaveApp/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//应用详情查询
+export function GetAppDetails(params) {
+  return request({
+    url: '/api/fs4a/GetAppDetails/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//应用修改保存
+export function EditApp(params) {
+  return request({
+    url: '/api/fs4a/EditApp/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//应用状态变更
+export function UpdateAppStatus(params) {
+  return request({
+    url: '/api/fs4a/UpdateAppStatus/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//应用删除
+export function DeleteApp(params) {
+  return request({
+    url: '/api/fs4a/DeleteApp/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//权限项修改保存
+export function EditAuth(params) {
+  return request({
+    url: '/api/fs4a/EditAuth/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//权限详情查询
+export function GetAuthDetails(params) {
+  return request({
+    url: '/api/fs4a/GetAuthDetails/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//根据权限获取授权规则
+export function GetAuthTo(params) {
+  return request({
+    url: '/api/fs4a/GetAuthTo/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//权限项新增保存
+export function SaveAuth(params) {
+  return request({
+    url: '/api/fs4a/SaveAuth/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//权限项删除
+export function DeleteAuth(params) {
+  return request({
+    url: '/api/fs4a/DeleteAuth/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//权限状态变更
+export function UpdateAuthStatus(params) {
+  return request({
+    url: '/api/fs4a/UpdateAuthStatus/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色新增保存
+export function SaveRole(params) {
+  return request({
+    url: '/api/fs4a/SaveRole/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色列表查询
+export function QueryRole(params) {
+  return request({
+    url: '/api/fs4a/QueryRole/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//账号列表查询
+export function GetUserList(params) {
+  return request({
+    url: '/api/fs4a/GetUserList/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色明细查询
+export function RoleDetails(params) {
+  return request({
+    url: '/api/fs4a/RoleDetails/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色权限列表
+export function RoleAuths(params) {
+  return request({
+    url: '/api/fs4a/RoleAuths/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色删除
+export function DeleteRole(params) {
+  return request({
+    url: '/api/fs4a/DeleteRole/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色编辑保存
+export function EditRole(params) {
+  return request({
+    url: '/api/fs4a/EditRole/v1',
+    method: 'post',
+    data: params,
+  })
+}
+
+//角色状态变更
+export function UpdateStatus(params) {
+  return request({
+    url: '/api/fs4a/UpdateStatus/v1',
+    method: 'post',
+    data: params,
+  })
+}

src/styles/index.scss

@@ -121,6 +121,11 @@
       font-weight: 400;
       color: #303133;
     }
+    .flex1 {
+      .el-form-item__content {
+        display: block;
+      }
+    }
   }
   // .el-button + .el-button {
   //   margin-left: 0px;

src/views/userManagement/permission/index.vue

@@ -85,13 +85,11 @@
             </el-select>
           </el-form-item>
         </div>
-        <div class="flex-wrap">
-          <el-form-item class="flex1" label="所属应用" prop="app_name">
-            <el-select v-model="ruleForm.app_name" style="display: block" size="default" placeholder="请选择">
-              <el-option v-for="(item, index) in optionsApp" :key="index" :label="item.label" :value="item.value"> </el-option>
-            </el-select>
-          </el-form-item>
-        </div>
+        <el-form-item class="flex1" label="所属应用" prop="app_name">
+          <el-select v-model="ruleForm.app_name" style="display: block" size="default" placeholder="请选择">
+            <el-option v-for="(item, index) in optionsApp" :key="index" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="权限标识符" prop="auth_ident">
           <el-input v-model="ruleForm.auth_ident" size="default" type="textarea" :rows="3" placeholder="请输入权限标识符" />
         </el-form-item>
@@ -104,57 +102,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onBeforeMount } from "vue";
 import { CloseBold } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
-
-interface Tree {
-  label: string;
-  children?: Tree[];
-}
-
+import { translateDataToTreeAll } from "@/utils/validate";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import * as _ from "lodash";
+//当前选中数据
+const currData = ref({});
+//当前要删除的数据
+const delObj = ref({});
 //下级权限数据
 const childrenData = ref([]);
 //默认展开
 const currentKey = ref([-1]);
 //权限树
-const data: Tree[] = [
-  {
-    auth_name: "应用名称",
-    auth_id: -1,
-    auth_type: -1,
-    QueryTarget: -1,
-    auth_status: true,
-    children: [
-      {
-        auth_name: "交互权限",
-        auth_id: 1,
-        auth_type: 1,
-        QueryTarget: 1,
-        auth_status: true,
-      },
-      {
-        auth_name: "API接口",
-        auth_id: 2,
-        auth_type: 1,
-        QueryTarget: 1,
-        auth_status: true,
-      },
-      {
-        auth_name: "数据读写",
-        auth_id: 3,
-        auth_type: 1,
-        QueryTarget: 1,
-        auth_status: true,
-      },
-    ],
-  },
-];
+const data = ref([]);
 //删除弹框
 const flag = ref(false);
 //新增编辑弹框
 const editDialogVisible = ref(false);
+//新增编辑类型
+const editType = ref("add");
 //删除弹框标题
 const title = ref("");
 //删除id
@@ -162,7 +132,7 @@ const auId = ref("");
 //新增编辑弹框-标题
 const editDialogTitle = ref("新增下级权限");
 //新增编辑弹框-表单
-const ruleForm = reactive({
+const ruleForm = ref({
   auth_name: "",
   auth_type: "",
   auth_comment: "",
@@ -171,9 +141,22 @@ const ruleForm = reactive({
   app_id: "",
   auth_status: true,
 });
-const optionsType = ref([]);
-const optionsParent = ref([]);
-const optionsApp = ref([]);
+const optionsType = ref([
+  {
+    label: "前端权限",
+    value: 1,
+  },
+  {
+    label: "API权限",
+    value: 2,
+  },
+  {
+    label: "数据权限",
+    value: 3,
+  },
+]);
+const optionsParent: any = ref([]);
+const optionsApp: any = ref([]);
 const ruleFormRef = ref<FormInstance>();
 const rules = reactive<FormRules>({
   auth_name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
@@ -182,10 +165,54 @@ const defaultProps = {
   children: "children",
   label: "auth_name",
 };
+
+//获取权限树数据
+const getAuthTree = async () => {
+  try {
+    const { returnData, code } = await Query({
+      id: DATACONTENT_ID.authTreeNewId,
+      dataContent: [sessionStorage.getItem("User_Id")],
+    });
+    if (code == 0 && returnData.listValues) {
+      const obj = {
+        auth_id: -1,
+        auth_name: "所有权限",
+        auth_status: true,
+        up_auth_id: -1,
+        auth_type: 0,
+        disabled: true,
+        children: translateDataToTreeAll(
+          returnData.listValues,
+          "up_auth_id",
+          "auth_id"
+        ),
+      };
+      data.value = [obj];
+    } else {
+      const obj = {
+        auth_id: -1,
+        auth_name: "所有权限",
+        auth_status: true,
+        up_auth_id: -1,
+        auth_type: 0,
+        disabled: true,
+        children: [],
+      };
+    }
+    data.value = [obj];
+  } catch (error) {}
+};
+
+onBeforeMount(() => {
+  getAuthTree();
+});
+
 //权限树点击
-const handleNodeClick = (data: Tree) => {
+const handleNodeClick = (data) => {
   if (data.children) {
-    childrenData.value = data.children;
+    const newData = _.cloneDeep(data);
+    currData.value = newData;
+    childrenData.value = newData.children;
   } else {
     childrenData.value = [];
   }
@@ -198,7 +225,20 @@ const renderChange = (data) => {
 
 //修改
 const renderEdit = (data) => {
-  console.log(data);
+  optionsApp.value = [];
+  optionsParent.value = [];
+  editDialogVisible.value = true;
+  editDialogTitle.value = "编辑下级权限";
+  editType.value = "edit";
+  ruleForm.value = _.cloneDeep(data);
+  optionsApp.value.push({
+    label: data.app_name,
+    value: data.app_id,
+  });
+  optionsParent.value.push({
+    label: currData.value.auth_name,
+    value: data.auth_id,
+  });
 };
 const delRest = () => {
   flag.value = false;
@@ -208,30 +248,85 @@ const onNodeClick = (data) => {
   flag.value = true;
   title.value = data.auth_name;
   auId.value = data.auth_id;
+  delObj.value = data;
 };
 
 //删除
 const remove = () => {
-  const datas = childrenData.value;
+  delObj.value.event = 3;
+  changeAuth(delObj.value, "del");
+  /* const datas = childrenData.value;
   datas.filter((item, index) => {
     if (item.auth_id == auId.value) {
       datas.splice(index, 1);
     }
   });
   flag.value = false;
-  ElMessage.success("删除成功");
+  ElMessage.success("删除成功");*/
 };
 
+//判断对象是否为空
+const isEmptyObj = (obj: object) => Object.keys(obj).length === 0;
+
 //新增
 const addAuth = () => {
+  if (isEmptyObj(currData.value)) {
+    ElMessage.error("请选择权限后再操作");
+    return false;
+  }
+  optionsApp.value = [];
+  optionsParent.value = [];
   editDialogVisible.value = true;
+  editDialogTitle.value = "新增下级权限";
+  editType.value = "add";
+  optionsApp.value.push({
+    label: currData.value.app_name,
+    value: currData.value.app_id,
+  });
+  optionsParent.value.push({
+    label: currData.value.auth_name,
+    value: currData.value.auth_id,
+  });
+};
+
+//增删改
+const changeAuth = async (obj, type) => {
+  const { code, message } = await GeneralDataReception({
+    serviceId: SERVICE_ID.authScId,
+    dataContent: JSON.stringify(obj),
+  });
+  if (code == 0) {
+    ElMessage.success(message);
+    getAuthTree();
+  } else {
+    ElMessage.error(message);
+  }
+  if (type == "form") {
+    // ruleForm.value = {};
+    editDialogVisible.value = false;
+  } else if (type == "del") {
+    flag.value = false;
+  }
 };
 
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      console.log("submit!");
+      if (editType.value == "add") {
+        ruleForm.value.app_id = ruleForm.value.app_name;
+        ruleForm.value.app_name = currData.value.app_name;
+        ruleForm.value.auth_status = true;
+        ruleForm.value.event = 1;
+        if (ruleForm.value.auth_id) {
+          ruleForm.value.up_auth_id = ruleForm.value.auth_id;
+          delete ruleForm.value.auth_id;
+        }
+        changeAuth(ruleForm.value, "form");
+      } else {
+        ruleForm.value.event = 2;
+        changeAuth(ruleForm.value, "form");
+      }
       editDialogVisible.value = false;
     } else {
       console.log("error submit!", fields);