SZYGM1.0/src/views/userManagement/account/auth.vue

<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="ruleForm.user_status || 2">启用</el-radio>
                  <el-radio :label="0">禁用</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 style="padding: 8px;" @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/webApi";
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>