添加权限管理

src/getMenu.ts

@@ -167,14 +167,74 @@ function parseMenu(arr: Array<any>) {
     name: 'UserManagement',
     redirect: '/userManagement/permission',
     //using el svg icon, the elSvgIcon first when at the same time using elSvgIcon and icon
-    meta: { title: '权限管理', elSvgIcon: 'Avatar', show_index: 2 },
+    meta: { title: '权限管理', elSvgIcon: 'Fold', show_index: 2 },
     children: [
       {
         path: '/userManagement/permission',
         name: 'Permission',
-        meta: { title: '权限项管理', elSvgIcon: 'Avatar' },
+        meta: { title: '权限项管理' },
         component: () => import('@/views/userManagement/permission/index.vue'),
       },
+      {
+        path: '/userManagement/role',
+        name: 'Role',
+        meta: { title: '角色管理' },
+        redirect: '/userManagement/role',
+        component: {
+          render: () => h(resolveComponent('router-view')),
+        },
+        children: [
+          {
+            path: '/userManagement/role',
+            name: 'Role',
+            hidden: true,
+            component: () => import('@/views/userManagement/role/index.vue'),
+          },
+          {
+            path: '/userManagement/role/auth',
+            name: 'Auth',
+            hidden: true,
+            meta: { title: '角色授权' },
+            component: () => import('@/views/userManagement/role/auth.vue'),
+          },
+        ],
+      },
+      {
+        path: '/userManagement/account',
+        name: 'Account',
+        meta: { title: '账号管理' },
+        redirect: '/userManagement/account',
+        component: {
+          render: () => h(resolveComponent('router-view')),
+        },
+        children: [
+          {
+            path: '/userManagement/account',
+            component: () => import('@/views/userManagement/account/index.vue'),
+            hidden: true,
+          },
+          {
+            path: '/userManagement/account/accountAuth',
+            name: 'AccountAuth',
+            hidden: true,
+            meta: { title: '账号权限' },
+            component: () => import('@/views/userManagement/account/auth.vue'),
+          },
+        ],
+      },
+      {
+        path: '/userManagement/accountGroup',
+        name: 'AccountGroup',
+        meta: { title: '账号组管理' },
+        component: () =>
+          import('@/views/userManagement/accountGroup/index.vue'),
+      },
+      {
+        path: '/userManagement/application',
+        name: 'Application',
+        meta: { title: '应用管理' },
+        component: () => import('@/views/userManagement/application/index.vue'),
+      },
     ],
   })
   const allMenus = newMenus.length

src/views/userManagement/account/auth.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="auth scroll-y">
+    <div class="flex auth-content">
+      <div class="role-info auth-list">
+        <div class="box strategy-top">
+          <div class="manageTitle">账号信息</div>
+          <div class="role-info-content t30">
+            <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
+              <el-form-item label="角色名称" prop="user_name">
+                <el-input disabled v-model="ruleForm.user_name" size="default" placeholder="请输入角色名称" />
+              </el-form-item>
+              <el-form-item label="角色描述" prop="user_comment">
+                <el-input disabled v-model="ruleForm.user_comment" size="default" type="textarea" :rows="3" placeholder="请输入角色描述" />
+              </el-form-item>
+              <el-form-item label="是否启用" prop="user_status">
+                <el-radio-group disabled v-model="ruleForm.user_status">
+                  <el-radio :label="1">启用</el-radio>
+                  <el-radio :label="2"> 禁用</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <!-- <div class="box strategy-bottom strategy">
+          <div class="manageTitle">登录策略</div>
+          <div class="strategy-content">
+            <el-scrollbar>
+              <el-checkbox-group v-model="checkboxGroup" size="default">
+                <el-row :gutter="16">
+                  <el-col :span="8" v-for="item in groupData" :key="item.id">
+                    <div class="strategy-content-list">
+                      <el-checkbox class="ck" :title="item.label" :label="item.value">
+                        {{ item.label }}
+                      </el-checkbox>
+                      <el-button style="margin-top:8px" size="default" type="primary" link>查看</el-button>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-checkbox-group>
+            </el-scrollbar>
+          </div>
+        </div> -->
+      </div>
+      <div class="box auth-list">
+        <div class="manageTitle">角色</div>
+        <div class="strategy auth-tree">
+          <div class="strategy-content">
+            <template v-if="roleData.length">
+              <el-scrollbar>
+                <el-checkbox-group @change="checkChange" v-model="roleGroup" size="default">
+                  <el-row :gutter="16">
+                    <el-col :span="8" v-for="(item,index) in roleData" :key="index">
+                      <div @click="handleClick(item,index)" :class="index == roleIndex ? 'active' : ''" class="strategy-content-list">
+                        <el-checkbox class="ck" :title="item.role_name" :label="item.role_id">
+                          {{ item.role_name }}
+                        </el-checkbox>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </el-checkbox-group>
+              </el-scrollbar>
+            </template>
+            <template v-else>
+              <el-empty description="暂无数据" />
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="box auth-list">
+        <div class="manageTitle">权限名称</div>
+        <div v-if="groupData.length" class="auth-name flex-wrap">
+          <span class="auth-name-list"> <span class="icon icon-time"></span> 时效规则有</span>
+          <span class="auth-name-list"> <span class="icon icon-date"></span> 数据规则有</span>
+          <span class="auth-name-list"> <span class="icon icon-ic_display_edit"></span> 显示及编辑权限</span>
+          <span class="auth-name-list"> <span class="icon icon-ic_display"></span> 显示权限</span>
+        </div>
+        <div class="auth-box">
+          <div class="strategy-content">
+            <template v-if="groupData.length">
+              <el-scrollbar>
+                <el-row :gutter="16">
+                  <el-col :span="8" v-for="item in groupData" :key="item.id">
+                    <div class="strategy-content-list">
+                      <div class="flex info">
+                        <div class="name">{{item.auth_name}}</div>
+                        <el-button @click="handleCk(item)" size="default" type="primary" link>查看</el-button>
+                      </div>
+                      <div v-if="item.edit_col_condition ||
+                          item.delete_row_condition ||
+                          item.edit_row_condition ||
+                          item.new_col_condition ||
+                          item.query_col_conditon ||
+                          item.query_row_condition" class="auth-name flex-wrap">
+                        <span class="auth-name-list"> <span class="icon icon-time"></span></span>
+                        <span class="auth-name-list"> <span class="icon icon-date"></span></span>
+                        <span class="auth-name-list"> <span class="icon icon-ic_display_edit"></span></span>
+                        <span class="auth-name-list"> <span class="icon icon-ic_display"></span> </span>
+                      </div>
+                    </div>
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </template>
+            <template v-else>
+              <el-empty description="暂无数据" />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--新增/编辑-->
+    <Dialog :flag="editDialogVisible" :msgTitle="editDialogTitle" @submitForm="submitForm()" @resetForm="resetForm()" :show-flag="true">
+      <el-form ref="ruleFormRef" :model="ruleNewForm" label-width="110px" class="demo-ruleForm">
+        <el-form-item label="许可查询行">
+          <el-input size="default" disabled v-model="ruleNewForm.query_row_condition" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <el-form-item label="许可查询列">
+          <el-input size="default" disabled v-model="ruleNewForm.query_col_conditon" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <el-form-item label="许可删除行">
+          <el-input size="default" disabled v-model="ruleNewForm.delete_row_condition" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <el-form-item label="许可新增列">
+          <el-input size="default" disabled v-model="ruleNewForm.new_col_condition" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <el-form-item label="许可编辑行">
+          <el-input size="default" disabled v-model="ruleNewForm.edit_row_condition" placeholder="请输入内容"></el-input>
+        </el-form-item>
+        <el-form-item label="许可编辑列">
+          <el-input size="default" disabled v-model="ruleNewForm.edit_col_condition" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onBeforeMount } from "vue";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import { ElMessage } from "element-plus";
+import Dialog from "@/components/dialog/index.vue";
+const route = useRoute();
+const role_id = route.query.id;
+const ruleForm = ref<any>({
+  user_name: "",
+  user_comment: "",
+  user_status: "",
+});
+const ruleNewForm = ref<any>({
+  delete_row_condition: "",
+  edit_col_condition: "",
+  edit_row_condition: "",
+  new_col_condition: "",
+  query_col_conditon: "",
+  query_row_condition: "",
+});
+const checkboxGroup = ref([1, 2]);
+const roleGroup = ref<any>([]);
+const groupData = ref<any>([]);
+const roleData = ref<any>([]);
+const pageNum = ref(1);
+const checkedKeys = ref<any>([]);
+const roleIndex = ref(null);
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("查看规则");
+// 获取当前账号信息
+const getAccountInfo = async () => {
+  const res = await Query({
+    id: DATACONTENT_ID.accountDetailsId,
+    dataContent: [role_id],
+  });
+  if (res.code == 0) {
+    const { listValues } = res.returnData;
+    const obj = listValues[0];
+    ruleForm.value = obj;
+  } else {
+    ElMessage.error(res.message);
+  }
+};
+//获取列表
+const getRoleData = async () => {
+  const result = await Query({
+    id: DATACONTENT_ID.roleTableNId,
+    needPage: pageNum.value,
+    dataContent: ["", sessionStorage.getItem("User_Id")],
+  });
+  if (result.code == 0) {
+    const datas = result.returnData.listValues;
+    roleData.value = datas;
+  } else {
+    ElMessage.error(result.message);
+  }
+};
+
+//角色明细
+const roleDetails = async () => {
+  const res = await Query({
+    id: DATACONTENT_ID.accountRoleId,
+    dataContent: [role_id],
+  });
+  if (res.code == 0) {
+    const { listValues } = res.returnData;
+    const datas: any = [];
+    listValues.forEach((item) => {
+      datas.push(item.role_id);
+    });
+    checkedKeys.value.push(datas);
+    roleGroup.value = datas;
+  } else {
+    ElMessage.error(res.message);
+  }
+};
+
+//当前选中角色
+const checkChange = (arr) => {
+  checkedKeys.value.push(arr);
+  const data1 = checkedKeys.value[checkedKeys.value.length - 1]; //最后一条数据
+  const data2 = checkedKeys.value[checkedKeys.value.length - 2]; //倒数第二条数据
+  if (data1.length > data2.length) {
+    checksBoxTs(data1, data2, "add");
+  } else {
+    checksBoxTs(data2, data1, "del");
+  }
+};
+
+//当前点击的角色
+const handleClick = (item, index) => {
+  roleIndex.value = index;
+  roleAuths(item.role_id);
+};
+
+//获取当前角色权限
+const roleAuths = async (id) => {
+  const res = await Query({
+    id: DATACONTENT_ID.roleAuthId,
+    dataContent: [id],
+  });
+  if (res.code == 0) {
+    groupData.value = res.returnData.listValues;
+  } else {
+    ElMessage.error(res.message);
+  }
+};
+
+//查看当前角色规则
+const handleCk = (item) => {
+  editDialogTitle.value = item.auth_name;
+  ruleNewForm.value = item;
+  editDialogVisible.value = true;
+};
+
+//提交当前取消数据
+const checksBoxTs = async (datas, arr, type) => {
+  const res = [...datas, ...arr].filter(
+    (item) => !(datas.some((p) => item == p) && arr.some((c) => item == c))
+  );
+
+  if (res && res.length) {
+    const obj = <any>{
+      role_id: res[res.length - 1],
+      user_id: role_id,
+    };
+    if (type == "add") {
+      obj.event = 1;
+    } else {
+      obj.event = 3;
+    }
+    const result = await GeneralDataReception({
+      serviceId: SERVICE_ID.roleScId,
+      dataContent: JSON.stringify(obj),
+    });
+    if (result.code == 0) {
+      ElMessage.success(result.message);
+    } else {
+      ElMessage.error(result.message);
+    }
+  } else {
+    ElMessage.error("未选中数据");
+  }
+};
+const submitForm = () => {
+  editDialogVisible.value = false;
+};
+
+const resetForm = () => {
+  editDialogVisible.value = false;
+};
+onBeforeMount(() => {
+  getAccountInfo();
+  getRoleData();
+  roleDetails();
+});
+</script>
+
+<style lang="scss" scoped>
+.auth {
+  &-content {
+    height: 100%;
+  }
+  &-list {
+    flex: 1;
+    margin-right: 24px;
+    &:last-child {
+      margin-right: 0;
+    }
+    .strategy-top {
+      // height: 310px;
+      height: 100%;
+    }
+    // .strategy-bottom {
+    //   height: calc(100% - 335px);
+    // }
+    .strategy {
+      margin-top: 24px;
+      &-content {
+        height: calc(100% - 24px);
+        &-list {
+          padding: 8px 16px 16px 16px;
+          height: 80px;
+          background: #f5f7fa;
+          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 4px;
+          margin-top: 16px;
+          border: 1px solid #f5f7fa;
+          :deep .ck {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: row-reverse;
+            .el-checkbox__label {
+              max-width: 80%;
+              overflow: hidden;
+              padding-left: 0;
+              text-overflow: ellipsis;
+            }
+          }
+        }
+        .active {
+          border-color: #ac014d;
+        }
+      }
+    }
+    .auth-tree {
+      margin-top: 14px;
+      height: calc(100% - 44px);
+      .strategy-content {
+        height: 100%;
+      }
+    }
+    .auth-name {
+      margin-top: 16px;
+      &-list {
+        color: #afb4bf;
+        margin-right: 30px;
+        &:last-child {
+          margin-right: 0;
+        }
+        .icon {
+          width: 14px;
+          height: 14px;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          margin-right: 8px;
+          position: relative;
+          top: 2px;
+        }
+        .icon-time {
+          background-image: url("@/assets/index/ic_time.png");
+        }
+        .icon-date {
+          background-image: url("@/assets/index/ic_date.png");
+        }
+        .icon-ic_display_edit {
+          background-image: url("@/assets/index/ic_display_edit.png");
+        }
+        .icon-ic_display {
+          background-image: url("@/assets/index/ic_display.png");
+        }
+      }
+    }
+    .auth-box {
+      margin-top: 14px;
+      height: calc(100% - 70px);
+      .strategy-content {
+        height: 100%;
+      }
+      .auth-name-list {
+        margin-right: 0;
+      }
+      .info {
+        margin-top: 6px;
+        .name {
+          max-width: 80%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/userManagement/account/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="application account scroll-y">
+    <div class="application-head flex">
+      <div class="manageTitle">账号管理</div>
+      <div class="flex-wrap">
+        <Search @clear="clear" @search="search" />
+        <el-button size="default" @click="addApp" plain>新增</el-button>
+      </div>
+    </div>
+    <div class="application-content flex">
+      <div class="box account-tree">
+        <el-tree :data="data" :props="defaultProps" node-key="user_group_id" default-expand-all @node-click="handleNodeClick" />
+      </div>
+      <Table class="account-table" btnGroupWidth="250px" :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除账号" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <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="user_name">
+          <el-input :disabled="dT == 'edit'" v-model="ruleForm.user_name" size="default" placeholder="请输入账号名称" />
+        </el-form-item>
+        <el-form-item label="账号密码" prop="user_pwd">
+          <el-input v-model="ruleForm.user_pwd" type="password" show-password size="default" placeholder="请输入账号名称" />
+        </el-form-item>
+        <el-form-item label="账号描述" prop="user_comment">
+          <el-input v-model="ruleForm.user_comment" size="default" type="textarea" :rows="3" placeholder="请输入账号描述" />
+        </el-form-item>
+        <el-form-item label="是否启用" prop="user_status">
+          <el-radio-group v-model="ruleForm.user_status">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="2"> 禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+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 Dialog from "@/components/dialog/index.vue";
+import { translateDataToTreeAll } from "@/utils/validate";
+import { GeneralDataReception, Query } from "@/api/dataIntegration";
+import * as _ from "lodash";
+import MD5 from "blueimp-md5";
+import table from "../hooks/useTable";
+const router = useRouter();
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = ref<any>([]);
+const tableData = ref<any>([]);
+const tableBtnGroup = <any>[
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "查看权限",
+    className: "editBtn",
+    param: "auth",
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: "del",
+  },
+];
+const flag = ref(false);
+const title = ref("");
+const dT = ref("add");
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("新增账号");
+const ruleForm = ref<any>({
+  user_name: "",
+  user_comment: "",
+  user_status: "",
+  user_pwd: "",
+});
+const rowIndex = ref<any>({});
+const data = ref<any>([]);
+const msgId = ref(null);
+const msgType = ref("all");
+const PageIndex = ref(1);
+const searchInfo = ref("");
+//获取用户组
+const getGroup = async () => {
+  const { code, returnData } = await Query({
+    id: DATACONTENT_ID.accountGroupTableId,
+    dataContent: [""],
+  });
+  if (code == 0 && returnData.listValues) {
+    const dataObj = {
+      user_group_id: -1,
+      up_user_group_id: -2,
+      user_group_name: "全部用户组",
+      children: translateDataToTreeAll(
+        returnData.listValues,
+        "up_user_group_id",
+        "user_group_id"
+      ),
+    };
+    data.value = [dataObj];
+  } else {
+    const dataObj = {
+      user_group_id: -1,
+      up_user_group_id: -2,
+      user_group_name: "全部用户组",
+      children: [],
+    };
+    data.value = [dataObj];
+  }
+};
+
+//获取table
+const accountList = async () => {
+  let result: any = null;
+  if (msgType.value == "all") {
+    result = await Query({
+      id: DATACONTENT_ID.accountTableId,
+      needPage: PageIndex.value,
+      dataContent: [searchInfo.value],
+    });
+  } else {
+    result = await Query({
+      id: DATACONTENT_ID.accountGroupDetailsId,
+      dataContent: [msgId.value],
+      needPage: PageIndex.value,
+    });
+  }
+  const { code, returnData, message } = result;
+  if (code == 0) {
+    const { columnSet, listValues } = returnData;
+    tableHeader.value = columnSet;
+    tableData.value = listValues;
+  } else {
+    ElMessage.error(message);
+  }
+};
+
+// 回到第一页
+const pageInit = () => {
+  PageIndex.value = 1;
+  tableHeader.value = [];
+  tableData.value = [];
+  accountList();
+};
+
+//增删改
+const dataChange = async (event, data) => {
+  const { code, message } = await table.dataChange(
+    SERVICE_ID.accountScId,
+    event,
+    data
+  );
+  if (code == 0) {
+    ElMessage.success(message);
+    pageInit();
+  } else {
+    ElMessage.error(message);
+  }
+};
+
+onBeforeMount(() => {
+  getGroup();
+  accountList();
+});
+
+const handleNodeClick = (data) => {
+  tableHeader.value = [];
+  tableData.value = [];
+  if (data.user_group_id != -1 && data.up_user_group_id != -2) {
+    PageIndex.value = 1;
+    msgType.value = "cld";
+    msgId.value = data.user_group_id;
+    accountList();
+  } else {
+    msgType.value = "all";
+    clear();
+  }
+};
+
+const defaultProps = {
+  children: "children",
+  label: "user_group_name",
+};
+const search = (val) => {
+  searchInfo.value = val;
+  pageInit();
+};
+const clear = () => {
+  searchInfo.value = "";
+  pageInit();
+};
+const btnClick = (index, row, param) => {
+  rowIndex.value = row;
+  if (param == "del") {
+    flag.value = true;
+    title.value = row.user_name;
+  } else if (param == "edit") {
+    dT.value = "edit";
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑账号";
+    ruleForm.value = _.cloneDeep(row);
+  } else {
+    router.push({
+      path: "/userManagement/account/accountAuth",
+      query: {
+        id: row.user_id,
+      },
+    });
+  }
+};
+const delRest = () => {
+  flag.value = false;
+};
+const remove = () => {
+  dataChange(3, rowIndex.value);
+  flag.value = false;
+};
+const addApp = () => {
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增账号";
+  dT.value = "add";
+  ruleForm.value = {};
+};
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      ruleForm.value.user_pwd = MD5(ruleForm.value.user_pwd);
+      if (dT.value == "add") {
+        dataChange(1, ruleForm.value);
+      } else {
+        dataChange(2, ruleForm.value);
+      }
+      editDialogVisible.value = false;
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.application {
+  &-content {
+    margin-top: 24px;
+    height: calc(100% - 56px);
+  }
+}
+.account {
+  &-tree {
+    width: 488px;
+    margin-right: 24px;
+  }
+  &-table {
+    flex: 1;
+  }
+}
+</style>

src/views/userManagement/accountGroup/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="application scroll-y">
+    <div class="application-head flex">
+      <div class="manageTitle">账号组管理</div>
+      <div class="flex-wrap">
+        <Search @clear="clear" @search="search" />
+        <el-button size="default" @click="addApp" plain>新增</el-button>
+      </div>
+    </div>
+    <div class="application-content">
+      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除账号组" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <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="user_group_name">
+          <el-input v-model="ruleForm.user_group_name" size="default" placeholder="请输入账号组名称" />
+        </el-form-item>
+        <el-form-item label="账号组描述" prop="user_group_comment">
+          <el-input v-model="ruleForm.user_group_comment" size="default" type="textarea" :rows="3" placeholder="请输入账号组描述" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, 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 * as _ from "lodash";
+import table from "../hooks/useTable";
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = ref<any>([]);
+const tableData = ref<any>([]);
+const tableBtnGroup = [
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: "del",
+  },
+];
+const flag = ref(false);
+const title = ref("");
+const searchInfo = ref("");
+const dT = ref("add");
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("新增账号组");
+const ruleForm = ref<any>({
+  user_group_name: "",
+  user_group_comment: "",
+});
+const rowIndex = ref<any>({});
+
+onBeforeMount(() => {
+  accountList();
+});
+
+//获取账号组数据
+const accountList = async () => {
+  const res = await table.getTable(DATACONTENT_ID.accountGroupTableId, [
+    searchInfo.value,
+  ]);
+  tableHeader.value = res.tableHeader.value;
+  tableData.value = res.tableData.value;
+};
+
+const search = (val) => {
+  searchInfo.value = val;
+  accountList();
+};
+const clear = () => {
+  searchInfo.value = "";
+  accountList();
+};
+const btnClick = (index, row, param) => {
+  rowIndex.value = _.cloneDeep(row);
+  if (param == "del") {
+    flag.value = true;
+    title.value = row.user_group_name;
+  } else {
+    dT.value = "edit";
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑账号组";
+    ruleForm.value = _.cloneDeep(row);
+  }
+};
+const delRest = () => {
+  flag.value = false;
+};
+const remove = async () => {
+  try {
+    const { code, message } = await table.dataChange(
+      SERVICE_ID.accountGroupScId,
+      3,
+      rowIndex.value
+    );
+
+    if (code == 0) {
+      ElMessage.success(message);
+      accountList();
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (err: any) {}
+  flag.value = false;
+};
+const addApp = () => {
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增账号组";
+  dT.value = "add";
+  ruleForm.value = {};
+};
+// 新增/编辑账号
+const saveAddAccount = async (event) => {
+  try {
+    const { code, message } = await table.dataChange(
+      SERVICE_ID.accountGroupScId,
+      event,
+      ruleForm.value
+    );
+    if (code == 0) {
+      ElMessage.success(message);
+      accountList();
+    } 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") {
+        saveAddAccount(1);
+      } else {
+        // ruleForm.value = rowIndex.value;
+        saveAddAccount(2);
+      }
+      editDialogVisible.value = false;
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.application {
+  &-content {
+    margin-top: 24px;
+    height: calc(100% - 56px);
+  }
+}
+</style>

src/views/userManagement/application/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="application scroll-y">
+    <div class="application-head flex">
+      <div class="manageTitle">应用管理</div>
+      <div>
+        <el-button size="default" @click="addApp" plain>新增</el-button>
+      </div>
+    </div>
+    <div class="application-content">
+      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除应用" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <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="app_name">
+          <el-input v-model="ruleForm.app_name" size="default" placeholder="请输入应用名称" />
+        </el-form-item>
+        <el-form-item label="appid" prop="app_show_id">
+          <el-input v-model="ruleForm.app_show_id" size="default" placeholder="请输入appid" />
+        </el-form-item>
+        <el-form-item label="应用描述" prop="app_comment">
+          <el-input v-model="ruleForm.app_comment" size="default" type="textarea" :rows="3" placeholder="请输入应用描述" />
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeMount } from "vue";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import Table from "@/components/tableTemp/index.vue";
+import * as _ from "lodash";
+import table from "../hooks/useTable";
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = ref<any>([]);
+const tableData = ref<any>([]);
+const tableBtnGroup = [
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: "del",
+  },
+];
+const flag = ref(false);
+const title = ref("");
+const dT = ref("add");
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("新增应用");
+const ruleForm = ref<any>({
+  app_name: "",
+  app_comment: "",
+  app_show_id: "",
+});
+const rowIndex = ref(1);
+const searchInfo = ref("");
+
+onBeforeMount(() => {
+  getApp();
+});
+
+const getApp = async () => {
+  const res = await table.getTable(DATACONTENT_ID.appTableId, [
+    searchInfo.value,
+  ]);
+  tableHeader.value = res.tableHeader.value;
+  tableData.value = res.tableData.value;
+};
+
+const btnClick = (index, row, param) => {
+  rowIndex.value = _.cloneDeep(row);
+  if (param == "del") {
+    flag.value = true;
+    title.value = row.app_name;
+  } else {
+    dT.value = "edit";
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑应用";
+    ruleForm.value = _.cloneDeep(row);
+  }
+};
+const delRest = () => {
+  flag.value = false;
+};
+const remove = () => {
+  dataChange(3, rowIndex.value);
+  flag.value = false;
+};
+const addApp = () => {
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增应用";
+  dT.value = "add";
+  ruleForm.value = {};
+};
+
+//增删改
+const dataChange = async (event, data) => {
+  const { code, message } = await table.dataChange(
+    SERVICE_ID.appScId,
+    event,
+    data
+  );
+  if (code == 0) {
+    ElMessage.success(message);
+    getApp();
+  } else {
+    ElMessage.error(message);
+  }
+};
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (dT.value == "add") {
+        dataChange(1, ruleForm.value);
+      } else {
+        dataChange(2, ruleForm.value);
+      }
+      editDialogVisible.value = false;
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.application {
+  &-content {
+    margin-top: 24px;
+    height: calc(100% - 56px);
+  }
+}
+</style>

src/views/userManagement/permission/index.vue

@@ -184,7 +184,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onBeforeMount } from "vue";
+import { ref, reactive, onBeforeMount, watch } from "vue";
 import { CloseBold } from "@element-plus/icons-vue";
 import Dialog from "@/components/dialog/index.vue";
 import { ElMessage, FormInstance, FormRules } from "element-plus";
@@ -223,7 +223,7 @@ const ruleForm = ref<any>({
   app_name: "",
   auth_ident: "",
   app_id: "",
-  auth_status: "",
+  auth_status: true,
   auth_id: "",
 });
 const tableOptionser = icons; //弹窗下拉
@@ -231,10 +231,10 @@ const tableForm = ref<any>({
   show_type: "",
   show_icon: "",
   show_index: "",
-  is_link: "",
+  is_link: 0,
   route_info: "",
-  file_link: "",
-  is_show: "",
+  file_link: "/templatePage/page/index.vue",
+  is_show: 1,
   queryTemplateID: "",
   code: "",
   queryparams: "",
@@ -273,11 +273,21 @@ onBeforeMount(() => {
   getAuthTree();
 });
 
+watch(
+  () => ruleForm,
+  (newValue) => {
+    const { auth_ident } = newValue.value;
+    tableForm.value.code = auth_ident;
+    tableForm.value.route_info = "/" + auth_ident;
+  },
+  { deep: true }
+);
+
 //权限树点击
 const handleNodeClick = (data) => {
+  currData.value = _.cloneDeep(data);
   if (data.children) {
     const newData = _.cloneDeep(data);
-    currData.value = newData;
     childrenData.value = newData.children;
   } else {
     childrenData.value = [];
@@ -295,24 +305,24 @@ const renderChange = (data) => {
 
 // 重置表单
 const resetFormData = (data) => {
-  ruleForm.value.app_id = data.app_id;
-  ruleForm.value.app_name = data.app_name;
-  ruleForm.value.auth_comment = data.auth_comment;
-  ruleForm.value.auth_id = data.auth_id;
-  ruleForm.value.auth_ident = data.auth_ident;
-  ruleForm.value.auth_name = data.auth_name;
-  ruleForm.value.auth_status = data.auth_status;
-  ruleForm.value.auth_type = data.auth_type;
-  ruleForm.value.up_auth_id = data.up_auth_id;
-  tableForm.value.show_type = data.show_type;
-  tableForm.value.show_icon = data.show_icon;
-  tableForm.value.show_index = data.show_index;
-  tableForm.value.code = data.code;
-  tableForm.value.is_link = data.is_link;
-  tableForm.value.is_show = data.is_show;
-  tableForm.value.route_info = data.route_info;
-  tableForm.value.file_link = data.file_link;
-  tableForm.value.queryTemplateID = data.queryTemplateID;
+  ruleForm.value.app_id = data.app_id ?? "";
+  ruleForm.value.app_name = data.app_name ?? "";
+  ruleForm.value.auth_comment = data.auth_comment ?? "";
+  ruleForm.value.auth_id = data.auth_id ?? "";
+  ruleForm.value.auth_ident = data.auth_ident ?? "";
+  ruleForm.value.auth_name = data.auth_name ?? "";
+  ruleForm.value.auth_status = data.auth_status ?? "";
+  ruleForm.value.auth_type = data.auth_type ?? "";
+  ruleForm.value.up_auth_id = data.up_auth_id ?? "";
+  tableForm.value.show_type = data.show_type ?? "";
+  tableForm.value.show_icon = data.show_icon ?? "";
+  tableForm.value.show_index = data.show_index ?? "";
+  tableForm.value.code = data.code ?? "";
+  tableForm.value.is_link = data.is_link ?? "";
+  tableForm.value.is_show = data.is_show ?? "";
+  tableForm.value.route_info = data.route_info ?? "";
+  tableForm.value.file_link = data.file_link ?? "";
+  tableForm.value.queryTemplateID = data.queryTemplateID ?? "";
 };
 
 //修改
@@ -322,6 +332,8 @@ const renderEdit = (data) => {
   editDialogVisible.value = true;
   editDialogTitle.value = "编辑下级权限";
   editType.value = "edit";
+  data.is_link = data.is_link ? 1 : 0;
+  data.is_show = data.is_show ? 1 : 0;
   resetFormData(data);
   optionsApp.value.push({
     label: data.app_name,
@@ -359,6 +371,12 @@ const addAuth = () => {
     return false;
   }
   resetFormData({});
+  ruleForm.value.auth_type = currData.value.auth_type;
+  ruleForm.value.auth_id = currData.value.auth_id;
+  ruleForm.value.auth_status = true;
+  tableForm.value.is_link = 0;
+  tableForm.value.is_show = 1;
+  tableForm.value.file_link = "/templatePage/page/index.vue";
   optionsApp.value = [];
   optionsParent.value = [];
   editDialogVisible.value = true;
@@ -383,6 +401,7 @@ const changeAuth = async (obj?, type?) => {
   if (code == 0) {
     ElMessage.success(message);
     getAuthTree();
+    childrenData.value = [];
   } else {
     ElMessage.error(message);
   }

src/views/userManagement/role/auth.vue

@@ -0,0 +1,399 @@
+<template>
+  <div class="auth scroll-y">
+    <div class="flex auth-content">
+      <div class="box role-info auth-list">
+        <div class="manageTitle">角色信息</div>
+        <div class="role-info-content t30">
+          <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
+            <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="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="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>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+      <div class="box auth-list">
+        <div class="manageTitle">权限树</div>
+        <div class="t30">
+          <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">
+        <div class="flex">
+          <div class="manageTitle">权限规则</div>
+          <el-radio-group v-model="auth">
+            <el-radio label="1">显示权限</el-radio>
+            <el-radio label="2">显示及编辑权限</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="t30">
+          <el-form :model="form" class="demo-ruleForm">
+            <el-form-item label="许可查询行">
+              <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.query_col_conditon" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item label="许可删除行">
+              <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.new_col_condition" placeholder="请输入内容"></el-input>
+            </el-form-item>
+            <el-form-item label="许可编辑行">
+              <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.edit_col_condition" placeholder="请输入内容"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onBeforeMount, watch } from "vue";
+import { Query, GeneralDataReception } from "@/api/dataIntegration";
+import { translateDataToTreeAll } from "@/utils/validate";
+import { ElMessage, ElTree } from "element-plus";
+import tree from "../hooks/useTree";
+import * as _ from "lodash";
+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 = ref({
+  query_row_condition: "",
+  query_col_conditon: "",
+  delete_row_condition: "",
+  new_col_condition: "",
+  edit_row_condition: "",
+  edit_col_condition: "",
+});
+const maxReq = ref(20);
+const proAll = ref<any>([]);
+const proNum = ref(0);
+const checkObj = ref<any>(null);
+const data = ref<any>([]);
+const newData = ref<any>([]);
+const checkData = ref<any>([]);
+const checkKeys = ref<any>([-1]);
+const boxData = ref<any>([]);
+const treeRef = ref<InstanceType<typeof ElTree>>();
+onBeforeMount(() => {
+  roleDetails();
+  getTree();
+});
+
+watch(
+  () => form,
+  (newValue) => {
+    newData.value.forEach((item) => {
+      if (item.children) {
+        delete item.children;
+      }
+      if (item.auth_id == checkObj.value.auth_id) {
+        item = Object.assign(item, newValue.value);
+      }
+    });
+    checkKeys.value = [checkObj.value.auth_id];
+    toTree();
+  },
+  { deep: true }
+);
+
+//角色详情
+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 toTree = () => {
+  data.value = [];
+  const chks = treeRef.value!.getCheckedNodes(false, true);
+  const arr = translateDataToTreeAll(newData.value, "up_auth_id", "auth_id");
+  const items = {
+    auth_id: -1,
+    auth_name: "所有权限",
+    auth_status: 0,
+    up_auth_id: -2,
+    auth_type: 0,
+    children: arr,
+    disabled: true,
+  };
+  data.value = [items];
+  if (chks && chks.length) {
+    checkBox(chks, newData.value);
+  }
+};
+
+//权限树
+const getTree = async () => {
+  try {
+    const { returnData, code } = await Query({
+      id: DATACONTENT_ID.authTreeNewId,
+      dataContent: [sessionStorage.getItem("User_Id")],
+    });
+    if (code == 0 && returnData.listValues) {
+      newData.value = _.cloneDeep(returnData.listValues);
+      toTree();
+      roleAuths();
+    } else {
+    }
+  } catch (error) {}
+  // const res = await tree.getTree();
+  // newData.value = await tree.newData.value;
+  // data.value = res.value;
+};
+
+const checkBox = (arr, all) => {
+  const checks: any = [];
+  const nots = _.cloneDeep(arr);
+  const caps = _.cloneDeep(all);
+  arr.forEach((item) => {
+    checks.push(item.auth_id);
+  });
+  const res = [...caps, ...nots].filter(
+    (item) =>
+      !(
+        caps.some((p) => item.auth_id == p.auth_id) &&
+        nots.some((c) => item.auth_id == c.auth_id)
+      )
+  );
+  treeRef.value!.setCheckedKeys(checks);
+  setTimeout(() => {
+    res.forEach((item) => {
+      treeRef.value!.setChecked(item.auth_id, false, false);
+    });
+  }, 0);
+};
+
+//权限详情
+const roleAuths = async () => {
+  try {
+    const { code, message, returnData } = await Query({
+      id: DATACONTENT_ID.roleAuthId,
+      dataContent: [role_id],
+    });
+    if (code == 0 && returnData.listValues) {
+      boxData.value.push(returnData.listValues);
+      checkBox(returnData.listValues, newData.value);
+    } else {
+      ElMessage.error(message);
+    }
+  } catch (error) {}
+};
+
+const handleNodeClick = (data) => {
+  checkObj.value = data;
+  checkData.value.push(_.cloneDeep(data));
+  const datas = _.unionBy(checkData.value, "auth_id");
+  checkData.value = datas;
+  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(false, true);
+  datas.forEach((item, index) => {
+    if (item.auth_id == -1) {
+      datas.splice(index, 1);
+    }
+  });
+  boxData.value.push(datas);
+  const data1 = boxData.value[boxData.value.length - 1]; //最后一条数据
+  const data2 = boxData.value[boxData.value.length - 2]; //倒数第二条数据
+  if (data1.length > data2.length) {
+    checksBoxTs(data1, data2, "add");
+  } else {
+    checksBoxTs(data2, data1, "del");
+  }
+};
+
+const checksBoxTs = async (datas, arr, type) => {
+  const res = [...datas, ...arr].filter(
+    (item) =>
+      !(
+        datas.some((p) => item.auth_id == p.auth_id) &&
+        arr.some((c) => item.auth_id == c.auth_id)
+      )
+  );
+  const [msg1, msg2] = [<any>[], <any>[]];
+  if (res && res.length) {
+    for (let i = 0; i < res.length; i++) {
+      delete res[i].children;
+      let obj = <any>{
+        auth_id: res[i].auth_id || res[i].AuthId,
+        role_id: role_id,
+      };
+      let authObj = res[i].AuthList
+        ? Object.assign(_.cloneDeep(obj), res[i].AuthList)
+        : Object.assign(_.cloneDeep(obj), res[i]);
+      if (type == "add") {
+        obj.event = 1;
+        authObj.event = 1;
+        msg1.push(obj);
+        msg2.push(authObj);
+      } else {
+        obj.event = 3;
+        authObj.event = 3;
+        msg1.push(obj);
+        msg2.push(authObj);
+      }
+    }
+    GeneralDataReception({
+      serviceId: SERVICE_ID.roleMsgTreeId,
+      dataContent: JSON.stringify(msg1),
+    }).then((result) => {
+      if (result.code == 0) {
+        if (type == "add") {
+          ElMessage.success("操作权限成功");
+        } else {
+          ElMessage.success("操作权限成功");
+        }
+      } else {
+        if (type == "add") {
+          ElMessage.error("操作权限失败");
+        } else {
+          ElMessage.error("操作权限失败");
+        }
+      }
+    });
+    if (msg2.length > maxReq.value) {
+      foxFunc(msg2);
+    } else {
+      GeneralDataReception({
+        serviceId: SERVICE_ID.roleMsgAuthId,
+        dataContent: JSON.stringify(msg2),
+      }).then((result) => {
+        if (result.code == 0) {
+          if (type == "add") {
+            ElMessage.success("操作规则成功");
+          } else {
+            ElMessage.success("操作规则成功");
+          }
+        } else {
+          if (type == "add") {
+            ElMessage.error("操作规则失败");
+          } else {
+            ElMessage.error("操作规则失败");
+          }
+        }
+      });
+    }
+  } else {
+    // this.$message.error('未选中数据')
+  }
+};
+
+const foxFunc = async (arr?: Array<any>) => {
+  if (proAll.value.length == 0) {
+    proAll.value = _.cloneDeep(arr);
+  }
+  const limit = _.chunk(proAll.value, maxReq.value);
+  const reqUts = [];
+  limit.forEach((item, index) => {
+    const req = GeneralDataReception({
+      serviceId: SERVICE_ID.roleMsgAuthId,
+      dataContent: JSON.stringify(limit[index]),
+    });
+    reqUts.push(req);
+  });
+  const result = Promise.all(reqUts);
+  const resultLen = await result;
+  if (limit.length == resultLen.length) {
+    proAll.value = [];
+    proNum.value = 0;
+    ElMessage.success("操作规则成功");
+  } else {
+    proNum.value += 1;
+    if (proNum.value == 4) {
+      ElMessage.success("网络错误，请稍后重试");
+    } else {
+      foxFunc();
+    }
+  }
+};
+
+const defaultProps = {
+  children: "children",
+  label: "auth_name",
+};
+</script>
+
+<style lang="scss" scoped>
+.auth {
+  &-content {
+    height: 100%;
+  }
+  &-list {
+    flex: 1;
+    margin-right: 24px;
+    &: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

@@ -0,0 +1,177 @@
+<template>
+  <div class="application scroll-y">
+    <div class="application-head flex">
+      <div class="manageTitle">角色管理</div>
+      <div class="flex-wrap">
+        <Search @clear="clear" @search="search" />
+        <el-button size="default" @click="addApp" plain>新增</el-button>
+      </div>
+    </div>
+    <div class="application-content">
+      <Table :tableHeader="tableHeader" @btnClick="btnClick" :tableBtnGroup="tableBtnGroup" :tableData="tableData" />
+    </div>
+    <!--删除弹框-->
+    <Dialog :flag="flag" msgTitle="删除角色" type="del" :delName="title" @delRest="delRest" @delRemove="remove" />
+    <!--新增/编辑-->
+    <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="role_name">
+          <el-input v-model="ruleForm.role_name" size="default" placeholder="请输入角色名称" />
+        </el-form-item>
+        <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="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>
+        </el-form-item>
+      </el-form>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, 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 table from "../hooks/useTable";
+import * as _ from "lodash";
+const router = useRouter();
+const ruleFormRef = ref<FormInstance>();
+const tableHeader = ref([]);
+const tableData = ref([]);
+const tableBtnGroup = [
+  {
+    name: "编辑",
+    className: "editBtn",
+    param: "edit",
+  },
+  {
+    name: "查看权限",
+    className: "editBtn",
+    param: "auth",
+  },
+  {
+    name: "删除",
+    className: "delBtn",
+    param: "del",
+  },
+];
+const flag = ref(false);
+const title = ref("");
+const dT = ref("add");
+const editDialogVisible = ref(false);
+const editDialogTitle = ref("新增角色");
+const ruleForm = ref<any>({
+  role_name: "",
+  role_comment: "",
+  role_status: "",
+});
+const searchInfo = ref("");
+const rowIndex = ref<any>({});
+onBeforeMount(() => {
+  gueryRole();
+});
+
+const gueryRole = async () => {
+  const res = await table.getTable(DATACONTENT_ID.roleTableNId, [
+    searchInfo.value,
+    sessionStorage.getItem("User_Id"),
+  ]);
+  tableHeader.value = res.tableHeader.value;
+  tableData.value = res.tableData.value;
+};
+
+const search = (val) => {
+  searchInfo.value = val;
+  gueryRole();
+};
+const clear = () => {
+  searchInfo.value = "";
+  gueryRole();
+};
+const btnClick = (index, row, param) => {
+  rowIndex.value = _.cloneDeep(row);
+  if (param == "del") {
+    flag.value = true;
+    title.value = row.role_name;
+  } else if (param == "edit") {
+    dT.value = "edit";
+    editDialogVisible.value = true;
+    editDialogTitle.value = "编辑角色";
+    ruleForm.value = _.cloneDeep(row);
+  } else {
+    router.push({
+      path: "/userManagement/role/auth",
+      query: {
+        role_id: row.role_id,
+      },
+    });
+  }
+};
+const delRest = () => {
+  flag.value = false;
+};
+const remove = async () => {
+  rowIndex.value.operator_id = sessionStorage.getItem("User_Id");
+  saveRole(3, rowIndex.value);
+  flag.value = false;
+};
+const addApp = () => {
+  editDialogVisible.value = true;
+  editDialogTitle.value = "新增角色";
+  dT.value = "add";
+  ruleForm.value = {};
+};
+// 新增/编辑角色
+const saveRole = async (event, data) => {
+  try {
+    const { code, message } = await table.dataChange(
+      SERVICE_ID.roleMsgId,
+      event,
+      data
+    );
+    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") {
+        ruleForm.value.operator_id = sessionStorage.getItem("User_Id");
+        saveRole(1, ruleForm.value);
+      } else {
+        ruleForm.value.operator_id = sessionStorage.getItem("User_Id");
+        saveRole(2, ruleForm.value);
+      }
+      editDialogVisible.value = false;
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+  editDialogVisible.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.application {
+  &-content {
+    margin-top: 24px;
+    height: calc(100% - 56px);
+  }
+}
+</style>