Foshan4A4.0/src/views/staffManagement/compontents/staffEdit.vue

<!--
 * @Author: your name
 * @Date: 2022-02-10 14:49:20
 * @LastEditTime: 2022-03-11 00:51:19
 * @LastEditors: your name
 * @Description: 编辑职员
 * @FilePath: \Foshan4A4.0\src\views\staffManagement\compontents\staffEdit.vue
-->
<template>
  <div class="authorityPower">
    <!--编辑职员-->
    <div class="addApp-form">
      <div class="addApp-form-title flex">
        <div class="title">编辑职员</div>
        <div v-is="['officer_btn_edit']" class="btn">
          <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="请输入职员名称" maxlength="32" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="loginName" label="职员登录名">
            <el-input placeholder="请输入职员登录名" maxlength="32" v-model="form.loginName"></el-input>
          </el-form-item>
          <el-form-item label="职员手机号">
            <el-input placeholder="请输入职员手机号" maxlength="11" v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item style="margin-right: 16px" label="登录密码">
            <el-input placeholder="*******" disabled maxlength="32" v-model="form.loginPwd"></el-input>
          </el-form-item>
          <el-form-item v-is="['officer_btn_resetpwd']">
            <el-button size="small" type="primary" @click="reSetPassWord">重置密码</el-button>
          </el-form-item>
          <el-form-item label="描述">
            <el-input class="lastInput" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="power-content flex-wrap">
      <div class="r24 flex1 part">
        <Organization ref="Organization" :defaultProps="defaultProps" :mainData="mainData" :vice="true" :data="data" @getTreeData="getOrgan" @radioChange="radioChange" :checkedKeys="orgCheckedKeys" :radioCheck="radioNum" nodekey="OrganId" title="选择组织" />
      </div>
      <!--开启多对多-->
      <template v-if="OpenAuthData">
        <div class="flex1 part">
          <Rolelist @checkChange="accountChange" :checkBoxList="checkBoxList" :roleType="roleType" :active="true" class="hucRole" :number="4" title="账号列表" />
        </div>
      </template>
      <!--未开启多对多-->
      <template v-else>
        <!--有岗位 无角色-->
        <template v-if="OpenGroup && !openRole">
          <div class="r24 flex1 part">
            <Usergroup @getTreeData="getUserGroup" :checkedKeys="userGroupKeys" title="岗位树" />
          </div>
          <div class="r24 flex1 part">
            <Permissiontree ref="Permissiontree" :queryType="queryType" :queryId="treeId" :checkedKeys="checkedBoxs" :isMainJob="isMainJob" @nodeClick="nodeClick" @getTreeData="getTreeData" title="权限树" />
          </div>
          <div class="flex1 part">
            <Rulesofcompetency style="height: 512px" class="hucPower" :authList="authList" :authTo="authTo" @getData="getData" title="权限规则" />
            <Loginpolicy style="margin-top: 24px; height: calc(100% - 24px - 512px)" :imageSize="20" :checkedList="checkedList" @getCheckedList="getCheckedList" title="登录策略" />
          </div>
        </template>
        <!--有角色 无岗位-->
        <template v-if="openRole && !OpenGroup">
          <div class="r24 flex1 part">
            <Rolelist @checkChange="checkChange" :imageSize="120" @checkClick="checkClick" :roleType="roleType" :checkBoxList="roleCheckBoxs" :active="true" class="hucRole" :number="8" title="角色列表" />
          </div>
          <div class="flex1 part">
            <Permissionlist style="height: 376px" :imageSize="120" :RoleList="RoleList" :check="true" class="hucPower" title="权限列表" />
            <Loginpolicy style="margin-top: 24px; height: calc(100% - 24px - 376px)" :imageSize="120" :checkedList="checkedList" @getCheckedList="getCheckedList" title="登录策略" />
          </div>
        </template>
        <!--有角色 有岗位-->
        <template v-if="openRole && OpenGroup">
          <div class="r24 flex1 part">
            <Usergroup @getTreeData="getUserGroup" :checkedKeys="userGroupKeys" title="岗位树" />
          </div>
          <div class="r24 flex1 part">
            <Rolelist @checkChange="checkChange" :imageSize="120" @checkClick="checkClick" :GroupIds="GroupIds" :roleType="roleType" :checkBoxList="roleCheckBoxs" :active="true" class="hucRole" :number="8" title="角色列表" />
          </div>
          <div class="flex1 part">
            <Permissionlist style="height: 376px" :imageSize="120" :RoleList="RoleList" :check="true" class="hucPower" title="权限列表" />
            <Loginpolicy style="margin-top: 24px; height: calc(100% - 24px - 376px)" :imageSize="120" :checkedList="checkedList" @getCheckedList="getCheckedList" title="登录策略" />
          </div>
        </template>
        <!--无岗位 无角色-->
        <template v-if="!OpenGroup && !openRole">
          <div class="r24 flex1 part">
            <Permissiontree ref="Permissiontree" :queryType="queryType" :queryId="treeId" :checkedKeys="checkedBoxs" :isMainJob="isMainJob" @nodeClick="nodeClick" @getTreeData="getTreeData" title="权限树" />
          </div>
          <div class="flex1 part">
            <Rulesofcompetency style="height: 512px" class="hucPower" :authList="authList" :authTo="authTo" @getData="getData" title="权限规则" />
            <Loginpolicy style="margin-top: 24px; height: calc(100% - 24px - 512px)" :imageSize="20" :checkedList="checkedList" @getCheckedList="getCheckedList" title="登录策略" />
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import Permissiontree from "@/components/permissiontree";
import Rulesofcompetency from "@/components/rulesofcompetency";
import Organization from "@/components/organization";
import Permissionlist from "@/components/permissionlist";
import Rolelist from "@/components/rolelist";
import Loginpolicy from "@/components/loginpolicy";
import Usergroup from "@/components/usergrouptree";
import treeData from "../minixs/treeData";
import { mapGetters } from "vuex";
import { RoleAuths } from "@/api/apiAuthority";
import {
  newstaffmod,
  postList,
  organgitpost,
  jbdetpop,
  Staffdetails,
} from "@/api/postInterface";
import { pwdProduce } from "@/utils/validate";
export default {
  name: "AuthorityPower",
  mixins: [treeData],
  components: {
    Rulesofcompetency,
    Organization,
    Permissiontree,
    Permissionlist,
    Rolelist,
    Loginpolicy,
    Usergroup
  },
  data () {
    return {
      Status: null,
      AppId: null,
      form: {
        //应用表单
        name: "",
        loginName: "",
        loginPwd: "",
        app: "",
        phone: ""
      },
      title: "角色",
      rules: {
        //表单验证
        name: [{ required: true, message: "请输入职员名称", trigger: "blur" }],
        loginName: [
          { required: true, message: "请输入职员登录名", trigger: "blur" },
        ],
        loginPwd: [
          { required: true, message: "请输入职员登录密码", trigger: "blur" },
        ],
      },
      defaultProps: {
        children: "children",
        label: "OrganName",
      },
      treeId: null, //根据组织获取权限树的组织ID
      checkedKeys: [], //上级组织选中
      RoleList: [],
      checkedBoxs: [],
      arrs: [],
      authArrs: [],//
      OfficerId: null,
      authId: [], //权限树默认选中ID
      authList: [],
      authTo: {},
      orgTypes: [],
      checkBoxList: [], //副岗默认选中
      checkedList: [], //登录策略默认选中的数据
      radioCheck: null, //主岗默认选中
      radioNum: null, //主岗已选中
      roleDatas: [], //接口详情返回的角色列表数据
      roleCheckBoxs: [], //角色列表默认选中数据
      groupCheckBoxs: [], //权限组列表默认选中数据
      orgCheckedKeys: [], //组织树默认选中
      loginCheckBoxs: [], //登录策略数据
      mainData: [], //主岗数据
      JobId: "", //选中主岗ID
      DepJobIds: [],//选中副岗ID集合
      lessData: [], //副岗数据
      lessCheckBoxs: [], //副岗选中数据联合主岗
      lessChecksData: [], //副岗选中数据
      queryType: null, //权限树类型
      openRole: null,
      OpenGroup: null,
      OpenAuthData: null,
      roleType: '',
      dataObj: {}, //上级权限指定树数据
      data: [], //上级权限
      roleList: [], //角色
      checkRoles: [], //选中的角色
      checkTrees: [], //上级权限选中树数据
      rulesObj: {}, //权限规则数据
      isMainJob: true, //是否主岗
      oldOrganId: "",
      onCheckedArr: [],//当前显示选中权限组
      alljobArr: [],//全部岗位
      GroupIds: [], //当前选中的用户组
      userGroupKeys: [] //当前回调选中的用户组
    };
  },
  computed: {
    ...mapGetters(["systemSet"]),
  },
  watch: {
    //监听上级组织数据
    dataList: {
      handler (val) {
        this.data = [val];
      },
      deep: true,
    },
    mainData: {
      handler (arr) {
        if (this.radioCheck) {
          let ids = null;
          arr.forEach((item, index) => {
            if (item.JobId == this.radioCheck) {
              ids = index;
            }
          })
          this.radioNum = ids;
        }
      },
      deep: true,
    }
  },
  created () {
    const { OrganId, Status, OfficerId } = this.$route.query;
    const { OpenRole, PwdLengthBegin, PwdLengthEnd, PwdStruc, OpenGroup, UserOfficerMulti } =
      typeof this.systemSet === "string"
        ? JSON.parse(this.systemSet)
        : this.systemSet; //1是请求角色 0是请求用户
    // this.form.loginPwd = pwdProduce(PwdLengthBegin, PwdLengthEnd, PwdStruc);
    this.Status = Status;
    this.OfficerId = OfficerId;
    this.openRole = OpenRole;
    this.OpenGroup = OpenGroup;
    this.OpenAuthData = UserOfficerMulti;
    if (OpenGroup || !OpenGroup && !OpenRole) {
      this.queryType = "all";
    }
    this.getOfficerDetails(OfficerId);
  },
  methods: {
    //职员详情查询
    async getOfficerDetails (id) {
      try {
        let params = {
          OfficerId: id,
        };
        const res = await Staffdetails(params);
        if (res.code === 0) {
          const obj = res.returnData;
          const {
            AuthList,
            DepJobList,
            JobId,
            OrganId,
            OfficerDesc,
            OfficerLoginName,
            OfficerName,
            Phone,
            RoleList,
            TacList,
            GroupList,
            UserList
          } = obj;
          this.form.name = OfficerName;
          this.form.loginName = OfficerLoginName;
          this.form.app = OfficerDesc;
          this.form.phone = Phone;
          this.orgCheckedKeys = [OrganId];
          this.oldOrganId = OrganId;
          this.roleDatas = RoleList;
          this.radioCheck = JobId;
          this.JobId = JobId;
          this.lessChecksData = DepJobList;
          this.isMainJob = false;
          this.AppId = OrganId;
          this.getJobListByOrgan(OrganId);
          if (this.OpenAuthData) {
            this.roleType = 'account';
          }
          if (this.openRole && !this.OpenGroup && !this.OpenAuthData) {
            this.roleType = 'onlyRole';
          }
          if (AuthList && AuthList.length) {
            AuthList.forEach((item) => {
              this.authId.push(item.AuthId);
            });
            this.authList = _.cloneDeep(AuthList);
            this.authTo = AuthList[0];
            this.checkedBoxs = this.authId;
          }
          if (RoleList && RoleList.length) {
            this.roleCheckBoxs = RoleList;
            this.checkRoles = RoleList;
            if (this.openRole && this.OpenGroup && !this.OpenAuthData) {
              this.roleType = 'onlyRole';
            }
          }
          if (GroupList && GroupList.length) {
            const datas = [];
            GroupList.forEach(item => {
              datas.push(item.GroupId);
            })
            this.userGroupKeys = datas;
            this.GroupIds = datas;
          }
          if (UserList && UserList.length) {
            const datas = [];
            UserList.forEach(item => {
              datas.push(item.UserId);
            })
            this.checkBoxList = datas;
          }
          this.checkedList = TacList;
          this.loginCheckBoxs = TacList;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //获取选中的树数据
    getTreeData (arr) {
      this.checkTrees = arr;
    },
    // 默认选中
    defaultChecked (arr, id) {
      const datas = []
      this.onCheckedArr = [];
      arr.forEach((item, index) => {
        this.checkRoles.forEach(p => {
          if (item[id] == p[id]) {
            datas.push(index)
            this.onCheckedArr.push(item);
          }
        })
      })
      if (this.openRole) {
        this.roleCheckBoxs = datas;
      } else if (this.OpenGroup) {
        this.groupCheckBoxs = datas;
      }
    },
    //获取组织选中的数据
    getOrgan (arr) {
      const { OrganId } = arr[0];
      this.AppId = OrganId;
      this.getJobListByOrgan(OrganId);
    },
    //获取指定数据
    decompose (data, id) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].OrganId == id) {
          this.dataObj = data[i];
        } else if (data[i].children && data[i].children.length > 0) {
          this.decompose(data[i].children, id);
        }
      }
    },
    //权限树点击
    nodeClick (obj) {
      const arr = this.$store.getters.authArrs;
      arr.push(obj);
      this.$store.dispatch("auth/changeAuthArrs", arr);
    },
    //根据主岗查询角色
    radioChange (val) {
      const { JobId } = this.mainData[val];
      this.JobId = JobId;
      this.radioCheck = null;
    },
    //根据岗位获取角色
    async getRoleByJob (id, index) {
      try {
        let params = {
          JobId: id,
        };
        const res = await jbdetpop(params);
        if (res.code === 0) {
          const datas = res.returnData;
          const arrs = [];
          datas.forEach((item) => {
            item.name = item.RoleName;
            if (item.IsSelected == 1) {
              arrs.push(item);
            }
          });
          if (index == 1) {
            this.arrs = arrs;
            this.lessCheckBoxs.push(arrs);
          } else if (index == 2) {
            if (arrs.length) {
              this.lessCheckBoxs.push(arrs);
              const msgs = this.lessCheckBoxs.flat();
              const uninqMsgs = _.unionBy(msgs, "RoleId");
              this.arrs = uninqMsgs;
            }
          }
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //根据组织查询岗位列表-主岗
    async getJobListByOrgan (id) {
      try {
        let params = {
          OrganId: id,
        };
        const res = await organgitpost(params);
        if (res.code === 0) {
          const datas = res.returnData;
          datas.forEach((item) => {
            item.name = item.JobName;
          });
          this.mainData = datas;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //角色点击回调
    checkClick (item) {
      this.roleAuths(item.RoleId);
    },
    //用户组选中回调
    getUserGroup (arr) {
      const datas = [];
      arr.forEach(item => {
        datas.push(item.GroupId);
      })
      this.GroupIds = datas;
    },
    //岗位点击回调
    checkGroup (item) {
      this.groupAuths(item.GroupId)
    },
    //根据角色查看权限列表
    async roleAuths (id) {
      try {
        let params = {
          RoleId: id
        };
        const res = await RoleAuths(params);
        if (res.code === 0) {
          this.RoleList = res.returnData;
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    //账号列表选取
    accountChange (arr) {
      this.checkBoxList = arr;
    },
    //角色选取
    checkChange (arr) {
      this.checkRoles = arr;
      this.onCheckedArr = arr;
    },
    //获取权限规则
    getData (obj) {
      this.rulesObj = obj;
    },
    //获取登录策略回调
    getCheckedList (arr) {
      this.loginCheckBoxs = arr;
    },
    //保存
    saveBtn (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveOrgan();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //组织新增保存
    async saveOrgan () {
      try {
        // console.log(this.AppId)
        // if (this.JobId) {
        //   if (!this.AppId) {
        //     this.$message.error("请选中一个组织后再新增");
        //     return false;
        //   }
        // } else {
        //   this.AppId = this.oldOrganId
        // }
        // console.log(this.AppId)
        // return
        const datas = [];
        const checks = [];
        const GroupIds = [];
        if (this.checkTrees.length) {
          this.checkTrees.forEach((item) => {
            datas.push(item.AuthList);
          });
        }
        if (this.GroupIds.length) {
          this.GroupIds.forEach(item => {
            const obj = {
              GroupId: item
            }
            GroupIds.push(obj);
          });
        }
        if (this.checkRoles.length) {
          this.checkRoles.forEach(item => {
            item.IsSelected = 1;
            checks.push(item);
          });
        }
        const res = await newstaffmod({
          OfficerName: this.form.name,
          OfficerDesc: this.form.app,
          OfficerLoginName: this.form.loginName,
          OfficerPwd: this.form.loginPwd,
          Phone: this.form.phone,
          RoleList: checks.length ? checks : [],
          AuthList: this.openRole ? [] : datas,
          TacList: this.loginCheckBoxs,
          DepJobList: this.lessChecksData,
          GroupList: GroupIds.length ? GroupIds : [],
          JobId: this.JobId,
          Status: Number(this.Status),
          OrganId: this.AppId,
          OfficerId: this.OfficerId,
          UserList: this.OpenAuthData ? this.checkBoxList : []
        });
        if (res.code === 0) {
          this.$message.success(res.message);
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.push("/staff");
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error);
      }
    },
    reSetPassWord () {
      const { PwdLengthBegin, PwdLengthEnd, PwdStruc } =
        typeof this.systemSet === "string"
          ? JSON.parse(this.systemSet)
          : this.systemSet; //1是请求角色 0是请求用户
      this.form.loginPwd = pwdProduce(PwdLengthBegin, PwdLengthEnd, PwdStruc);
    },
  }
}
</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: 30px;
        &:last-child {
          margin-right: 0;
        }
      }
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }
      .content {
        .el-form-item__content {
          flex: 1;
        }
        .el-form-item__label {
          margin-left: 27px;
        }
      }
      .lastInput {
        width: 27vw;
        .el-input__inner {
          width: 100%;
        }
      }
    }
  }
}
.power-content {
  margin-top: 24px;
  min-height: 68vh;
  .part {
    height: 750px;
    ::v-deep .paren_content {
      height: 85%;
      .cont > .paren_content {
        height: 100% !important;
      } 
    }
  }
}
</style>