角色管理

.eslintrc-auto-import.json

@@ -66,4 +66,4 @@
     "watch": true,
     "watchEffect": true
   }
-}
+}

src/views/userManagement/accountGroup/index.vue

@@ -96,6 +96,7 @@ const clear = () => {
   accountList();
 };
 const btnClick = (index, row, param) => {
+  rowIndex.value = _.cloneDeep(row);
   if (param == "del") {
     flag.value = true;
     title.value = row.user_group_name;
@@ -104,7 +105,6 @@ const btnClick = (index, row, param) => {
     editDialogVisible.value = true;
     editDialogTitle.value = "编辑账号组";
     ruleForm.value = _.cloneDeep(row);
-    rowIndex.value = _.cloneDeep(row);
   }
 };
 const delRest = () => {
@@ -112,7 +112,7 @@ const delRest = () => {
 };
 const remove = async () => {
   try {
-    ruleForm.value.event = 3;
+    rowIndex.value.event = 3;
     const { code, message } = await GeneralDataReception({
       serviceId: SERVICE_ID.accountGroupScId,
       dataContent: JSON.stringify(rowIndex.value),
@@ -132,7 +132,7 @@ const addApp = () => {
   dT.value = "add";
   ruleForm.value = {};
 };
-// 新增账号
+// 新增/编辑账号
 const saveAddAccount = async () => {
   try {
     const { code, message } = await GeneralDataReception({
@@ -154,7 +154,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
       if (dT.value == "add") {
         ruleForm.value.event = 1;
       } else {
-        ruleForm.value = rowIndex.value;
+        // ruleForm.value = rowIndex.value;
         ruleForm.value.event = 2;
       }
       saveAddAccount();

src/views/userManagement/role/auth.vue

@@ -5,14 +5,14 @@
         <div class="manageTitle">角色信息</div>
         <div class="role-info-content t30">
           <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
-            <el-form-item label="角色名称" prop="roleName">
-              <el-input disabled v-model="ruleForm.roleName" size="default" placeholder="请输入角色名称" />
+            <el-form-item label="角色名称" prop="role_name">
+              <el-input disabled v-model="ruleForm.role_name" size="default" placeholder="请输入角色名称" />
             </el-form-item>
-            <el-form-item label="角色描述" prop="roleDesc">
-              <el-input disabled v-model="ruleForm.roleDesc" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
+            <el-form-item label="角色描述" prop="role_comment">
+              <el-input disabled v-model="ruleForm.role_comment" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
             </el-form-item>
-            <el-form-item label="是否启用" prop="roleStatus">
-              <el-radio-group disabled v-model="ruleForm.roleStatus">
+            <el-form-item label="是否启用" prop="role_status">
+              <el-radio-group disabled v-model="ruleForm.role_status">
                 <el-radio label="1">启用</el-radio>
                 <el-radio label="2"> 禁用</el-radio>
               </el-radio-group>
@@ -23,7 +23,20 @@
       <div class="box auth-list">
         <div class="manageTitle">权限树</div>
         <div class="t30">
-          <el-tree :data="data" show-checkbox :props="defaultProps" @node-click="handleNodeClick" />
+          <el-tree ref="treeRef" highlight-current @check="currentChange" :default-expanded-keys="checkKeys" :data="data" show-checkbox :props="defaultProps" node-key="auth_id" @node-click="handleNodeClick">
+            <template #default="{data}">
+              <span class="custom-tree-node">
+                {{ data.auth_name }}
+              </span>
+              <span v-if="
+              data.edit_col_condition ||
+              data.delete_row_condition ||
+              data.edit_row_condition ||
+              data.new_col_condition ||
+              data.query_col_conditon ||
+              data.query_row_condition" class="custom-tree-icon"></span>
+            </template>
+          </el-tree>
         </div>
       </div>
       <div class="box auth-list">
@@ -37,22 +50,22 @@
         <div class="t30">
           <el-form :model="form" class="demo-ruleForm">
             <el-form-item label="许可查询行">
-              <el-input size="default" v-model="form.QueryRow" placeholder="请输入内容"></el-input>
+              <el-input size="default" v-model="form.query_row_condition" placeholder="请输入内容"></el-input>
             </el-form-item>
             <el-form-item label="许可查询列">
-              <el-input size="default" v-model="form.QueryCol" placeholder="请输入内容"></el-input>
+              <el-input size="default" v-model="form.query_col_conditon" placeholder="请输入内容"></el-input>
             </el-form-item>
             <el-form-item label="许可删除行">
-              <el-input size="default" v-model="form.DeleteRow" placeholder="请输入内容"></el-input>
+              <el-input size="default" v-model="form.delete_row_condition" placeholder="请输入内容"></el-input>
             </el-form-item>
             <el-form-item label="许可新增列">
-              <el-input size="default" v-model="form.NewCol" placeholder="请输入内容"></el-input>
+              <el-input size="default" v-model="form.new_col_condition" placeholder="请输入内容"></el-input>
             </el-form-item>
             <el-form-item label="许可编辑行">
-              <el-input size="default" v-model="form.EditRow" placeholder="请输入内容"></el-input>
+              <el-input size="default" v-model="form.edit_row_condition" placeholder="请输入内容"></el-input>
             </el-form-item>
             <el-form-item label="许可编辑列">
-              <el-input size="default" v-model="form.EditCol" placeholder="请输入内容"></el-input>
+              <el-input size="default" v-model="form.edit_col_condition" placeholder="请输入内容"></el-input>
             </el-form-item>
           </el-form>
         </div>
@@ -62,91 +75,172 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-const ruleForm = reactive({
-  roleName: "11",
-  roleDesc: "22",
-  roleStatus: "2",
+import { ref, reactive, onBeforeMount, watch } from "vue";
+import { EditRole } from "@/api/apiAuthority";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+import { translateDataToTreeAll } from "@/utils/validate";
+import { ElMessage, ElTree } from "element-plus";
+import * as _ from "lodash";
+import { from } from "webpack-sources/lib/CompatSource";
+const route = useRoute();
+const role_id = route.query.role_id;
+const ruleForm = ref({
+  role_name: "",
+  role_comment: "",
+  role_status: "",
 });
 const auth = ref("1");
-const form = reactive({
-  QueryRow: "",
-  QueryCol: "",
-  DeleteRow: "",
-  NewCol: "",
-  EditRow: "",
-  EditCol: "",
+const form = ref({
+  query_row_condition: "",
+  query_col_conditon: "",
+  delete_row_condition: "",
+  new_col_condition: "",
+  edit_row_condition: "",
+  edit_col_condition: "",
 });
-interface Tree {
-  label: string;
-  children?: Tree[];
-}
+const checkObj = ref(null);
+const data = ref([]);
+const newData = ref([]);
+const checkData = ref([]);
+const checkKeys = ref([]);
+const treeRef = ref<InstanceType<typeof ElTree>>();
+onBeforeMount(() => {
+  roleDetails();
+  getTree();
+  roleAuths();
+});
+
+watch(
+  () => form,
+  (newValue) => {
+    newData.value.forEach((item) => {
+      if (item.auth_id == checkObj.value.auth_id) {
+        item = Object.assign(item, newValue.value);
+        checkData.value.push(item);
+        const datas = _.unionBy(checkData.value, "auth_id");
+        checkData.value = datas;
+        console.log(checkData.value);
+      }
+    });
+    const obj = {
+      auth_id: -1,
+      auth_name: "所有权限",
+      auth_status: true,
+      up_auth_id: -1,
+      auth_type: 0,
+      disabled: true,
+      children: translateDataToTreeAll(newData.value, "up_auth_id", "auth_id"),
+    };
+    checkKeys.value = [checkObj.value.auth_id];
+    data.value = [obj];
+  },
+  { deep: true }
+);
 
-const handleNodeClick = (data: Tree) => {
-  console.log(data);
+//角色详情
+const roleDetails = async () => {
+  try {
+    const { code, message, returnData } = await Query({
+      id: DATACONTENT_ID.roleDetailsId,
+      dataContent: [role_id],
+    });
+    if (code == 0) {
+      ruleForm.value = returnData.listValues[0];
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (error) {}
 };
 
-const data: Tree[] = [
-  {
-    label: "Level one 1",
-    children: [
-      {
-        label: "Level two 1-1",
-        children: [
-          {
-            label: "Level three 1-1-1",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Level one 2",
-    children: [
-      {
-        label: "Level two 2-1",
-        children: [
-          {
-            label: "Level three 2-1-1",
-          },
-        ],
-      },
-      {
-        label: "Level two 2-2",
-        children: [
-          {
-            label: "Level three 2-2-1",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    label: "Level one 3",
-    children: [
-      {
-        label: "Level two 3-1",
-        children: [
-          {
-            label: "Level three 3-1-1",
-          },
-        ],
-      },
-      {
-        label: "Level two 3-2",
-        children: [
-          {
-            label: "Level three 3-2-1",
-          },
-        ],
-      },
-    ],
-  },
-];
+//权限树
+const getTree = async () => {
+  try {
+    const { code, message, returnData } = await Query({
+      id: DATACONTENT_ID.authTreeNewId,
+      dataContent: [sessionStorage.getItem("User_Id")],
+    });
+    if (code == 0 && returnData.listValues) {
+      newData.value = _.cloneDeep(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) {}
+};
+
+//权限详情
+const roleAuths = async () => {
+  try {
+    const { code, message, returnData } = await Query({
+      id: DATACONTENT_ID.roleAuthId,
+      dataContent: [role_id],
+    });
+    if (code == 0 && returnData.listValues) {
+      const datas = [];
+      returnData.listValues.forEach((item) => {
+        datas.push(item.auth_id);
+      });
+      treeRef.value!.setCheckedKeys(datas, false);
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (error) {}
+};
+
+const handleNodeClick = (data) => {
+  checkObj.value = data;
+  const checkNode = checkData.value.filter(
+    (item) => item.auth_id == data.auth_id
+  );
+  if (checkNode.length) {
+    const formObj = checkNode[0];
+    form.value = formObj;
+  } else {
+    clearFormData();
+  }
+};
+
+const clearFormData = () => {
+  form.value.query_row_condition = "";
+  form.value.query_col_conditon = "";
+  form.value.delete_row_condition = "";
+  form.value.new_col_condition = "";
+  form.value.edit_row_condition = "";
+  form.value.edit_col_condition = "";
+};
+
+const currentChange = () => {
+  const datas = treeRef
+    .value!.getCheckedNodes()
+    .concat(treeRef.value!.getHalfCheckedNodes());
+  console.log(datas);
+};
 
 const defaultProps = {
   children: "children",
-  label: "label",
+  label: "auth_name",
 };
 </script>
 
@@ -161,6 +255,16 @@ const defaultProps = {
     &:last-child {
       margin-right: 0;
     }
+    :deep .el-tree {
+      .custom-tree-icon {
+        position: absolute;
+        right: 0;
+        width: 14px;
+        height: 14px;
+        background: url("@/assets/index/ic_date.png") no-repeat;
+        background-size: 100% 100%;
+      }
+    }
   }
 }
 </style>

src/views/userManagement/role/index.vue

@@ -15,14 +15,14 @@
     <!--新增/编辑-->
     <Dialog :flag="editDialogVisible" :msgTitle="editDialogTitle" @submitForm="submitForm(ruleFormRef)" @resetForm="resetForm(ruleFormRef)" :show-flag="true">
       <el-form ref="ruleFormRef" :model="ruleForm" label-width="110px" class="demo-ruleForm">
-        <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="ruleForm.roleName" size="default" placeholder="请输入角色名称" />
+        <el-form-item label="角色名称" prop="role_name">
+          <el-input v-model="ruleForm.role_name" size="default" placeholder="请输入角色名称" />
         </el-form-item>
-        <el-form-item label="角色描述" prop="roleDesc">
-          <el-input v-model="ruleForm.roleDesc" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
+        <el-form-item label="角色描述" prop="role_comment">
+          <el-input v-model="ruleForm.role_comment" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
         </el-form-item>
-        <el-form-item label="是否启用" prop="roleStatus">
-          <el-radio-group v-model="ruleForm.roleStatus">
+        <el-form-item label="是否启用" prop="role_status">
+          <el-radio-group v-model="ruleForm.role_status">
             <el-radio label="1">启用</el-radio>
             <el-radio label="2"> 禁用</el-radio>
           </el-radio-group>
@@ -33,40 +33,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onBeforeMount } from "vue";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
 import Table from "@/components/tableTemp/index.vue";
 import Search from "@/components/search/index.vue";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+import * as _ from "lodash";
 const router = useRouter();
 const ruleFormRef = ref<FormInstance>();
-const tableHeader = [
-  { label: "角色名称", key: "roleName" },
-  { label: "账号数", key: "accountNum" },
-  { label: "权限项数", key: "authNum" },
-  { label: "是否存在互斥", key: "isHc" },
-  { label: "启用状态", key: "status" },
-  { label: "描述", key: "desc" },
-];
-const tableData = ref([
-  {
-    id: 1,
-    roleName: "11",
-    accountNum: "22",
-    authNum: "33",
-    isHc: "是",
-    status: "启用",
-    desc: "555",
-  },
-  {
-    id: 2,
-    roleName: "11",
-    accountNum: "22",
-    authNum: "33",
-    isHc: "是",
-    status: "启用",
-    desc: "555",
-  },
-]);
+const tableHeader = ref([]);
+const tableData = ref([]);
 const tableBtnGroup = [
   {
     name: "编辑",
@@ -89,78 +65,103 @@ const title = ref("");
 const dT = ref("add");
 const editDialogVisible = ref(false);
 const editDialogTitle = ref("新增角色");
-const ruleForm = reactive({
-  roleName: "",
-  roleDesc: "",
-  roleStatus: "",
+const ruleForm = ref({
+  role_name: "",
+  role_comment: "",
+  role_status: "",
+});
+const searchInfo = ref("");
+const rowIndex = ref({});
+onBeforeMount(() => {
+  gueryRole();
 });
-const rowIndex = ref(1);
+
+const gueryRole = async () => {
+  try {
+    const { code, returnData, message } = await Query({
+      id: DATACONTENT_ID.roleTableNId,
+      needPage: 1,
+      dataContent: [searchInfo.value, sessionStorage.getItem("User_Id")],
+    });
+    if (code == 0 && returnData) {
+      const { columnSet, listValues } = returnData;
+      tableHeader.value = columnSet;
+      tableData.value = listValues;
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (err: any) {}
+};
+
 const search = (val) => {
-  ElMessage.success(`搜索成功：${val}`);
+  searchInfo.value = val;
+  gueryRole();
 };
 const clear = () => {
-  ElMessage.success(`清除`);
+  searchInfo.value = "";
+  gueryRole();
 };
 const btnClick = (index, row, param) => {
-  rowIndex.value = index;
+  rowIndex.value = _.cloneDeep(row);
   if (param == "del") {
     flag.value = true;
-    title.value = row.roleName;
+    title.value = row.role_name;
   } else if (param == "edit") {
     dT.value = "edit";
     editDialogVisible.value = true;
     editDialogTitle.value = "编辑角色";
-    ruleForm.roleName = row.roleName;
-    ruleForm.roleDesc = row.desc;
-    ruleForm.roleStatus = row.status;
+    ruleForm.value = _.cloneDeep(row);
   } else {
-    router.push("/userManagement/auth");
+    router.push({
+      path: "/userManagement/auth",
+      query: {
+        role_id: row.role_id,
+      },
+    });
   }
 };
 const delRest = () => {
   flag.value = false;
 };
 const remove = () => {
-  tableData.value.splice(rowIndex.value, 1);
-  ElMessage.success("删除成功");
+  rowIndex.value.event = 3;
+  rowIndex.value.operator_id = sessionStorage.getItem("User_Id");
+  saveRole(rowIndex.value);
   flag.value = false;
 };
 const addApp = () => {
   editDialogVisible.value = true;
   editDialogTitle.value = "新增角色";
   dT.value = "add";
-  ruleForm.roleDesc = "";
-  ruleForm.roleName = "";
-  ruleForm.roleStatus = "";
+  ruleForm.value = {};
+};
+// 新增/编辑角色
+const saveRole = async () => {
+  try {
+    const { code, message } = await GeneralDataReception({
+      serviceId: SERVICE_ID.roleMsgId,
+      dataContent: JSON.stringify(ruleForm.value),
+    });
+    if (code == 0) {
+      ElMessage.success(message);
+      gueryRole();
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (error) {}
 };
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
       if (dT.value == "add") {
-        const len = tableData.value.length;
-        tableData.value.push({
-          id: len + 1,
-          roleName: ruleForm.roleName,
-          desc: ruleForm.roleDesc,
-          status: ruleForm.roleStatus,
-          accountNum: "22",
-          authNum: "33",
-          isHc: "是",
-        });
-        ElMessage.success("新增成功");
+        ruleForm.value.event = 1;
+        ruleForm.value.operator_id = sessionStorage.getItem("User_Id");
       } else {
-        tableData.value[rowIndex.value] = {
-          id: tableData.value[rowIndex.value].id,
-          roleName: ruleForm.roleName,
-          desc: ruleForm.roleDesc,
-          status: ruleForm.roleStatus,
-          accountNum: "22",
-          authNum: "33",
-          isHc: "是",
-        };
-        ElMessage.success("编辑成功");
+        ruleForm.value.event = 2;
+        ruleForm.value.operator_id = sessionStorage.getItem("User_Id");
       }
+      saveRole();
       editDialogVisible.value = false;
     } else {
       console.log("error submit!", fields);