Foshan4A4.0/src/views/authorityManagement/components/authorityPowerEdit.vue

<!--
 * @Author: your name
 * @Date: 2021-11-29 11:26:07
 * @LastEditTime: 2022-03-17 12:05:58
 * @LastEditors: your name
 * @Description:权限项
 * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityPower.vue
-->
<template>
  <div class="authorityPower">
    <!--新增权限项-->
    <div class="addApp-form">
      <div class="addApp-form-title flex">
        <div class="title">
          编辑权限项
          <!-- <span class="isqy">
            <span>是否启用</span>
            <el-radio v-model="radio" :label="1">是</el-radio>
            <el-radio v-model="radio" :label="0">否</el-radio>
          </span> -->
        </div>
        <div v-is="['appupdate_box_save']" class="btn">
          <!-- <el-button @click="deleteAuth" class="r24" type="danger">删除</el-button> -->
          <el-button @click="saveBtn('form')" type="primary">保存</el-button>
        </div>
      </div>
      <div class="addApp-form-content dialog-public-background">
        <el-form :inline="true" ref="form" :rules="rules" class="form" :model="form">
          <el-form-item prop="name" label="权限项名称">
            <el-input placeholder="请输入权限项名称" v-model.trim="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="id" label="标识符">
            <el-input placeholder="请输入标识符" v-model.trim="form.id"></el-input>
          </el-form-item>
          <el-form-item prop="desc" label="描述">
            <el-input style="width: 640px" placeholder="请输入描述" v-model.trim="form.desc"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="power-content flex-wrap">
      <div :class="!openRole && !OpenGroup ? '' : 'r24'" class="flex1 part">
        <Organization :defaultProps="defaultProps" :checkedKeys="checkedKeys" @getTreeData="getTreeData" :orgType="orgType" :orgList="orgList" :data="data" nodekey="AuthId" title="上级权限项" />
      </div>
      <!--有角色-->
      <template v-if="openRole">
        <div class="r24 flex1 part">
          <Rulesofcompetency :disabled="disabled" @getData="getData" :authTo="authTo" title="权限规则" />
        </div>
        <div v-is="['appupdate_edit_card']" class="flex1 part">
          <Rolelist @checkChange="checkChange" :roleType="roleType" needType="1" :checkBoxList="checkBoxList" :number="8" title="角色" />
        </div>
      </template>
      <!--有岗位-->
      <template v-else-if="OpenGroup">
        <div class="r24 flex1 part">
          <Rulesofcompetency :disabled="disabled" @getData="getData" :authTo="authTo" title="权限规则" />
        </div>
        <div v-is="['appupdate_edit_card']" class="flex1 part">
          <Rolelist @checkChange="checkChange" :roleType="roleType" :checkBoxList="checkBoxList" :number="8" title="账号授权" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Rolelist from "@/components/rolelist";
import Rulesofcompetency from "@/components/rulesofcompetency";
import Organization from "@/components/organization";
import {
  GetAuthDetails,
  QueryRole,
  GetUserList,
  EditAuth,
  DeleteAuth,
} from "@/api/apiAuthority";
import treeData from "../minixs/treeData";
import { mapGetters } from "vuex";
import { lengthValidator } from '@/utils/validate';
export default {
  name: "AuthorityPower",
  components: { Rolelist, Rulesofcompetency, Organization },
  mixins: [treeData],
  data () {
    return {
      radio: 1,
      form: {
        //应用表单
        name: "",
        id: "",
        desc: "",
      },
      rules: {
        //表单验证
        name: [
          { required: true, message: "请输入权限项名称", trigger: "blur" },
          { validator: lengthValidator, max: 128, message: '长度在 1 到 128 个字符', trigger: ['change', 'blur'] }
        ],
        id: [
          { required: true, message: "请输入标识符", trigger: "blur" },
          { validator: lengthValidator, max: 32, message: '长度在 1 到 32 个字符', trigger: ['change', 'blur'] }
        ],
        desc: [
          { validator: lengthValidator, max: 256, message: '长度在 1 到 256 个字符', trigger: ['change', 'blur'] }
        ]
      },
      defaultProps: {
        children: "children",
        label: "AuthName",
      },
      AppId: null, //参数类型
      UpAuthId: null,
      data: [],
      openRole: null,
      OpenGroup: null,
      roleList: [],
      title: "角色",
      editRoles: [],
      checkBoxList: [],
      authTo: {},
      rulesObj: {},
      msgDatas: [],
      roleType: '',
      orgType: '',
      checkedKeys: [],
      disabled: true,
      orgList: []
    };
  },
  computed: {
    ...mapGetters(["systemSet"]),
  },
  watch: {
    dataList: {
      handler (val) {
        const arr = [val];
        this.decompose(arr, this.UpAuthId);
        this.dataObj.disabled = true
        this.data = [this.dataObj];
        this.checkedKeys = [this.UpAuthId];
      },
      deep: true,
    },
  },
  created () {
    const { AuthId, Status, UpAuthId } = this.$route.query;
    const { OpenRole, OpenGroup } =
      typeof this.systemSet === "string"
        ? JSON.parse(this.systemSet)
        : this.systemSet; //1是请求角色 0是请求用户
    this.radio = Status;
    this.AppId = AuthId;
    this.UpAuthId = UpAuthId;
    this.openRole = OpenRole;
    this.OpenGroup = OpenGroup;
    this.getAuthTree();
    this.getAuthDetails(AuthId);
  },
  mounted () {
    if (this.openRole) {
      this.roleType = 'onlyRole';
    } else if (this.OpenGroup) {
      this.roleType = 'account';
    }
    this.orgType = 'auth';
  },
  methods: {
    //获取指定数据
    decompose (data, id) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].AuthId == id) {
          this.dataObj = data[i];
          delete this.dataObj.children;
        } else if (data[i].children && data[i].children.length > 0) {
          this.decompose(data[i].children, id);
        }
      }
    },
    //保存
    saveBtn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.editAuth();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取权限树回调
    getTreeData (arr) {
      const { AuthId, UpAuthId } = arr[0];
      this.AppId = AuthId;
      this.UpAuthId = UpAuthId;
    },
    //获取权限规则
    getData (obj) {
      this.rulesObj = obj;
    },
    //获取应用详情
    async getAuthDetails (id) {
      try {
        const res = await GetAuthDetails({
          AuthId: id,
        });
        if (res.code === 0) {
          const {
            AuthDesc,
            AuthName,
            AuthIdent,
            RoleInfo,
            AuthTo,
            UserInfo,
            AuthStatus,
          } = res.returnData;
          this.form.name = AuthName;
          this.form.id = AuthIdent;
          this.form.desc = AuthDesc;
          this.radio = AuthStatus;
          if (AuthTo) {
            this.authTo = AuthTo;
            this.$store.dispatch("auth/changeAuthId", AuthTo.AuthId);
            this.$store.dispatch("auth/changeAuthArrs", [AuthTo]);
          }
          if (this.openRole) {
            if (RoleInfo && RoleInfo.length) {
              RoleInfo.forEach((item) => {
                if (item.IsSelected) {
                  this.msgDatas.push(item);
                  if (this.disabled) {
                    this.disabled = false
                  }
                }
              });
              this.checkBoxList = this.msgDatas;
            } else {
              this.msgDatas = [];
            }
          } else if (this.OpenGroup) {
            if (UserInfo && UserInfo.length) {
              UserInfo.forEach((item) => {
                if (item.IsSelected) {
                  this.msgDatas.push(item);
                }
              });
              this.checkBoxList = this.msgDatas;
            } else {
              this.msgDatas = [];
            }
          }
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //角色列表
    async queryRole () {
      try {
        const res = await QueryRole({
          QueryName: "",
        });
        if (res.code === 0) {
          const arr = res.returnData;
          arr.forEach((item) => {
            item.name = item.RoleName;
          });
          this.roleList = arr;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //账号列表
    async getUserList () {
      try {
        const res = await GetUserList({
          QueryName: "",
        });
        if (res.code === 0) {
          const arr = res.returnData;
          arr.forEach((item) => {
            item.name = item.UserName;
          });
          this.roleList = arr;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //角色选取
    checkChange (arr) {
      this.msgDatas = arr;
      if (arr.length) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    //权限新增保存
    async editAuth () {
      try {
        const datas = this.msgDatas;
        if (datas && datas.length) {
          datas.forEach((item) => {
            item.IsSelected = 1;
          });
        }
        // const rulesKeys = Object.keys(this.rulesObj);
        // if (rulesKeys.length && !datas.length) {
        //   this.$message.error('请选中数据后再提交当前规则');
        //   return;
        // }
        const res = await EditAuth({
          AuthName: this.form.name,
          AuthIdent: this.form.id,
          AuthDesc: this.form.desc,
          UpAuthId: this.UpAuthId,
          AuthId: this.AppId,
          RoleInfo: this.openRole ? datas : [],
          UserInfo: this.openRole ? [] : datas,
          AuthTo: this.rulesObj,
          AuthStatus: this.radio,
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push("/authority");
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //删除权限
    async deleteAuth () {
      try {
        const res = await DeleteAuth({
          AuthId: this.AppId,
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          setTimeout(() => {
            this.$router.push("/authority");
          }, 2000);
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.authorityPower {
  padding: 0 64px;
  padding-top: 32px;
}
.addApp-form {
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 32px 32px 40px 32px;
  .title {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
    .isqy {
      span {
        font-weight: 400;
        font-size: 14px;
        margin: 0 28px 0 42px;
      }
    }
  }
  .addApp-form-content {
    margin-top: 40px;
    ::v-deep .form {
      .el-form-item {
        margin-bottom: 0;
        margin-right: 40px;
      }
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        min-width: 184px;
      }
      .content {
        .el-form-item__content {
          flex: 1;
        }
        .el-form-item__label {
          margin-left: 27px;
        }
      }
    }
  }
}
.power-content {
  margin-top: 24px;
  .part {
    height: 704px;
  }
}
</style>