账号授权

src/views/userManagement/account/auth.vue

@@ -6,22 +6,22 @@
           <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="user_name">
+                <el-input disabled v-model="ruleForm.user_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="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="roleStatus">
-                <el-radio-group disabled v-model="ruleForm.roleStatus">
-                  <el-radio label="1">启用</el-radio>
-                  <el-radio label="2"> 禁用</el-radio>
+              <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="box strategy-bottom strategy">
           <div class="manageTitle">登录策略</div>
           <div class="strategy-content">
             <el-scrollbar>
@@ -39,31 +39,36 @@
               </el-checkbox-group>
             </el-scrollbar>
           </div>
-        </div>
+        </div> -->
       </div>
       <div class="box auth-list">
         <div class="manageTitle">角色</div>
         <div class="strategy auth-tree">
           <div class="strategy-content">
-            <el-scrollbar>
-              <el-checkbox-group v-model="roleGroup" size="default">
-                <el-row :gutter="16">
-                  <el-col :span="8" v-for="item in roleData" :key="item.id">
-                    <div class="strategy-content-list">
-                      <el-checkbox class="ck" :title="item.label" :label="item.value">
-                        {{ item.label }}
-                      </el-checkbox>
-                    </div>
-                  </el-col>
-                </el-row>
-              </el-checkbox-group>
-            </el-scrollbar>
+            <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 class="auth-name flex-wrap">
+        <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>
@@ -71,67 +76,218 @@
         </div>
         <div class="auth-box">
           <div class="strategy-content">
-            <el-scrollbar>
-              <el-row :gutter="16">
-                <el-col :span="8" v-for="item in roleData" :key="item.id">
-                  <div class="strategy-content-list">
-                    <div class="flex info">
-                      <div class="name">{{item.label}}</div>
-                      <el-button size="default" type="primary" link>查看</el-button>
-                    </div>
-                    <div 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>
+            <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>
-                  </div>
-                </el-col>
-              </el-row>
-            </el-scrollbar>
+                  </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";
-const ruleForm = reactive({
-  roleName: "11",
-  roleDesc: "22",
-  roleStatus: "2",
+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([1, 2]);
-const groupData = [
-  {
-    label: "策略名称",
-    value: 1,
-    id: 1,
-  },
-];
-const roleData = [
-  {
-    label: "系统开发工程师",
-    value: 1,
-    id: 1,
-  },
-];
-onBeforeMount(() => {
-  for (let i = 0; i < 50; i++) {
-    groupData.push({
-      label: "策略名称",
-      value: i + 2,
-      id: i + 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);
     });
-    roleData.push({
-      label: "系统开发工程师",
-      value: i + 2,
-      id: i + 2,
+    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) => {
+  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>
 
@@ -147,11 +303,12 @@ onBeforeMount(() => {
       margin-right: 0;
     }
     .strategy-top {
-      height: 310px;
-    }
-    .strategy-bottom {
-      height: calc(100% - 335px);
+      // height: 310px;
+      height: 100%;
     }
+    // .strategy-bottom {
+    //   height: calc(100% - 335px);
+    // }
     .strategy {
       margin-top: 24px;
       &-content {
@@ -163,6 +320,7 @@ onBeforeMount(() => {
           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;
@@ -175,6 +333,9 @@ onBeforeMount(() => {
             }
           }
         }
+        .active {
+          border-color: #ac014d;
+        }
       }
     }
     .auth-tree {

src/views/userManagement/account/index.vue

@@ -43,6 +43,7 @@ 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";
@@ -52,7 +53,7 @@ const router = useRouter();
 const ruleFormRef = ref<FormInstance>();
 const tableHeader = ref<any>([]);
 const tableData = ref<any>([]);
-const tableBtnGroup = [
+const tableBtnGroup = <any>[
   {
     name: "编辑",
     className: "editBtn",
@@ -206,7 +207,12 @@ const btnClick = (index, row, param) => {
     editDialogTitle.value = "编辑账号";
     ruleForm.value = _.cloneDeep(row);
   } else {
-    router.push("/userManagement/accountAuth");
+    router.push({
+      path: "/userManagement/accountAuth",
+      query: {
+        id: row.user_id,
+      },
+    });
   }
 };
 const delRest = () => {