CABaggageData2.0/src/views/accountManagement/components/accountEdit.vue

<!--
 * @Author: Badguy
 * @Date: 2022-02-15 11:37:42
 * @LastEditTime: 2022-04-25 12:02:43
 * @LastEditors: your name
 * @Description: 编辑账号
 * have a nice day!
-->

<template>
  <div class="account-edit">
    <div class="account-edit-header">
      <div class="title">
        <div class="manageTitle">{{ pageTitle }}</div>
        <div class="account-status">
          是否启用
          <el-radio-group v-model="accountForm.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </div>
        <div v-is="doesAccountExist ? ['userupdate_btn_save'] : []">
          <!-- <el-button size="small" type="primary" class="btn-delete" @click="delate">删除</el-button> -->
          <el-button
            size="small"
            type="primary"
            class="btn-save"
            @click="handleClickSave('accountForm')"
          >保存</el-button>
        </div>
      </div>
      <div class="title-content">
        <el-form
          ref="accountForm"
          :inline="true"
          :model="accountForm"
          :rules="formRules"
        >
          <el-form-item
            label="账号名称"
            prop="name"
          >
            <el-input
              v-model="accountForm.name"
              maxlength="32"
              placeholder="请输入名称"
              size="small"
            />
          </el-form-item>
          <el-form-item
            label="登录密码"
            prop="pwd"
          >
            <el-input
              v-model="accountForm.pwd"
              placeholder="*******"
              size="small"
              disabled
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-is="doesAccountExist ? ['userupdate_btn_re_pwd'] : []"
              size="small"
              type="primary"
              class="btn-reset-pwd"
              @click="resetPwd"
            >重置密码</el-button>
          </el-form-item>
          <el-form-item
            label="描述"
            prop="desc"
          >
            <el-input
              v-model="accountForm.desc"
              class="desc"
              maxlength="128"
              placeholder="描述内容···"
              size="small"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="account-edit-main">
      <!-- 用户组和角色未开启 -->
      <el-row
        v-if="!openGroup && !openRole"
        :gutter="24"
      >
        <el-col :span="8">
          <div class="content-card">
            <PermissionTree
              title="权限树"
              :query-type="queryType"
              :checked-keys="permissionTreeChckedKeys"
              @getTreeData="getPermissionTreeChecked"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="content-card">
            <RulesOfCompetency
              title="权限规则"
              margin-b="20px"
              @getData="getRulesOfCompetency"
            />
          </div>
        </el-col>
        <el-col
          v-is=" doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
          :span="8"
        >
          <div class="content-card">
            <LoginPolicy
              :checked-list="loginPolicyCheckedList"
              @getCheckedList="getLoginPolicyChecked"
            />
          </div>
        </el-col>
      </el-row>
      <!-- 角色和用户组都开启 -->
      <el-row
        v-if="openGroup && openRole"
        :gutter="24"
      >
        <el-col :span="8">
          <div class="content-card">
            <AccountGroupTree
              title="所属账号组"
              nodekey="GroupId"
              :default-props="accountGroupTreeProps"
              :checked-keys="accountGroupTreeCheckedList"
              @getTreeData="getAccountGroupChecked"
            />
          </div>
        </el-col>
        <el-col
          v-is="doesAccountExist ? ['account_edit_role_list'] : ['account_add_role_list']"
          :span="8"
        >
          <div class="content-card">
            <RoleList
              title="角色列表"
              :role-type="roleType"
              :group-ids="groupIds"
              :check-box-list="roleListCheckedList"
              :number="8"
              :active="true"
              @checkChange="getRoleListChecked"
              @checkClick="selectRole"
              @roleListChange="roleListCheckedChange"
            />
          </div>
        </el-col>
        <el-col
          v-is="doesAccountExist
            ? ['account_edit_auth_list','account_edit_login_setting']
            : ['account_add_auth_list','account_add_login_setting']"
          :span="8"
        >
          <div
            v-is="doesAccountExist ? ['account_edit_auth_list'] : ['account_add_auth_list']"
            class="content-card"
          >
            <PermissionList
              title="权限列表"
              class="permission-list"
              :role-list="checkedRoles"
              :check="true"
              @Competen="Competen"
            />
          </div>
          <div
            v-is="doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
            class="content-card"
          >
            <LoginPolicy
              :checked-list="loginPolicyCheckedList"
              @getCheckedList="getLoginPolicyChecked"
            />
          </div>
        </el-col>
      </el-row>
      <!-- 只开启用户组 -->
      <el-row
        v-if="openGroup && !openRole"
        :gutter="24"
      >
        <el-col :span="8">
          <div class="content-card">
            <AccountGroupTree
              title="所属账号组"
              nodekey="GroupId"
              :default-props="accountGroupTreeProps"
              :checked-keys="accountGroupTreeCheckedList"
              @getTreeData="getAccountGroupChecked"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="content-card">
            <PermissionTree
              title="权限树"
              :query-type="queryType"
              :query-ids="queryIds"
              :checked-keys="permissionTreeChckedKeys"
              @getTreeData="getPermissionTreeChecked"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div class="content-card">
            <RulesOfCompetency
              title="权限规则"
              margin-b="20px"
              @getData="getRulesOfCompetency"
            />
          </div>
          <div
            v-is="doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
            class="content-card"
          >
            <LoginPolicy
              :checked-list="loginPolicyCheckedList"
              @getCheckedList="getLoginPolicyChecked"
            />
          </div>
        </el-col>
      </el-row>
      <!-- 只开启角色 -->
      <el-row
        v-if="!openGroup && openRole"
        :gutter="24"
      >
        <el-col
          v-is="doesAccountExist ? ['account_edit_role_list'] : ['account_add_role_list']"
          :span="8"
        >
          <div class="content-card">
            <RoleList
              title="角色列表"
              :role-type="roleType"
              :check-box-list="roleListCheckedList"
              :number="8"
              :active="true"
              @checkChange="getRoleListChecked"
              @checkClick="selectRole"
              @roleListChange="roleListCheckedChange"
            />
          </div>
        </el-col>
        <el-col
          v-is="doesAccountExist ? ['account_edit_auth_list'] : ['account_add_auth_list']"
          :span="8"
        >
          <div class="content-card">
            <PermissionList
              title="权限列表"
              :role-list="checkedRoles"
              :check="true"
              class="permission-list"
              @Competen="Competen"
            />
          </div>
        </el-col>
        <el-col
          v-is="doesAccountExist ? ['account_edit_login_setting'] : ['account_add_login_setting']"
          :span="8"
        >
          <div class="content-card">
            <LoginPolicy
              :checked-list="loginPolicyCheckedList"
              @getCheckedList="getLoginPolicyChecked"
            />
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <Dialog :flag="dialogVisible">
      <div class="closeDialog">
        <div class="title">删除账号</div>
        <div class="content">是否确定要删除该账号？</div>
        <div class="foot right t30">
          <el-button
            size="medium"
            type="danger"
            class="r24"
          >删除</el-button>
          <el-button size="medium">取消</el-button>
        </div>
      </div>
    </Dialog> -->
  </div>
</template>

<script>
import AccountGroupTree from '@/components/usergrouptree/index.vue'
import PermissionTree from '@/components/permissiontree/index.vue'
import RulesOfCompetency from '@/components/rulesofcompetency/index.vue'
import LoginPolicy from '@/components/loginpolicy/index.vue'
import RoleList from '@/components/rolelist/index.vue'
import PermissionList from '@/components/permissionlist/index.vue'
// import Dialog from '@/layout/components/Dialog'

import { RoleAuths } from '@/api/apiAuthority'
import { getAccountDetails, editAccount, addAccount } from '@/api/Account.js'
import { pwdProduce } from '@/utils/validate'
import { mapGetters } from 'vuex'

export default {
  components: {
    AccountGroupTree,
    PermissionTree,
    RulesOfCompetency,
    LoginPolicy,
    RoleList,
    PermissionList
    // Dialog
  },
  data() {
    return {
      doesAccountExist: this.$route.meta.doesAccountExist, // 控制账号新增/编辑
      userId: '',
      openRole: 0,
      openGroup: 0,
      pwdStruc: '',
      pwdLengthBegin: 0,
      pwdLengthEnd: 0,
      permissionTreeChckedKeys: [], // 权限树初始勾选项
      permissionTreeChckedTemp: [], // 权限树当前勾选项
      rulesOfCompetency: null, // 当前编辑的权限规则
      loginPolicyCheckedList: [], // 登录策略初始勾选项
      loginPolicyCheckedTemp: [], // 登录策略当前勾选项
      accountGroupTreeCheckedList: [], // 账号组树初始勾选项
      accountGroupTreeCheckedTemp: [], // 账号组树当前勾选项
      roleListCheckedList: [], // 角色列表初始勾选项
      roleListCheckedTemp: [], // 角色列表当前勾选项
      roleType: '',
      queryType: '',
      checkedRoles: [],
      currentSelectedRoleId: 0,
      groupIds: [],
      queryIds: [],
      // dialogVisible: false,
      formRules: {
        name: [
          { required: true, message: '请输入账号名称', trigger: 'blur' },
          { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
        ],
        desc: [{ min: 1, max: 128, message: '长度最多128个字符', trigger: 'blur' }]
      },
      accountForm: {
        name: null,
        pwd: null,
        desc: null,
        status: 0
      },
      accountGroupTreeProps: {
        children: 'children',
        label: 'GroupName'
      }
    }
  },
  computed: {
    ...mapGetters(['systemSet']),
    pageTitle() {
      return this.doesAccountExist ? '编辑账号' : '新增账号'
    }
  },
  created() {
    // 获取系统配置
    let obj
    if (typeof this.systemSet === 'string') {
      obj = JSON.parse(this.systemSet)
    } else {
      obj = this.systemSet
    }
    // console.log(obj)
    const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
    this.openRole = OpenRole
    this.openGroup = OpenGroup
    this.pwdStruc = PwdStruc
    this.pwdLengthBegin = PwdLengthBegin
    this.pwdLengthEnd = PwdLengthEnd
  },
  mounted() {
    if (this.doesAccountExist) {
      this.userId = this.$route.query.userId
      this.getAccountInfo()
    } else {
      this.resetPwd()
      this.roleType = 'onlyRole'
      this.queryType = 'all'
    }
  },
  methods: {
    // 获取当前账号信息
    async getAccountInfo() {
      try {
        const res = await getAccountDetails({
          UserId: this.userId
        })
        if (res.code === 0) {
          // console.log(res.returnData)
          const { UserDesc, UserName, GroupList, TacList, AuthList, RoleList, Status } = res.returnData
          this.accountForm.name = UserName
          this.accountForm.desc = UserDesc
          this.accountForm.status = Status ?? 1

          AuthList &&
            AuthList.length &&
            AuthList.forEach(auth => {
              this.permissionTreeChckedKeys.push(auth.AuthId)
              this.permissionTreeChckedTemp.push(auth)
            })
          if (GroupList && GroupList.length && GroupList[0] !== -1) {
            this.roleType = this.openGroup ? 'roleByUpId' : 'onlyRole'
            this.queryType = this.openGroup ? 'group' : 'all'
            GroupList.forEach(group => {
              this.accountGroupTreeCheckedList.push(group.GroupId)
              this.accountGroupTreeCheckedTemp.push(group.GroupId)
              this.groupIds.push(group.GroupId)
              this.queryIds.push(group.GroupId)
            })
          } else {
            this.roleType = 'onlyRole'
            this.queryType = 'all'
            this.accountGroupTreeCheckedTemp.push(-1)
          }

          RoleList &&
            RoleList.length &&
            RoleList.forEach(role => {
              role.IsSelected && this.roleListCheckedTemp.push(role)
            })
          TacList &&
            TacList &&
            TacList.forEach(tac => {
              tac.IsSelected && this.loginPolicyCheckedList.push(tac)
              tac.IsSelected && this.loginPolicyCheckedTemp.push(tac)
            })
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    // 随机生成密码
    resetPwd() {
      this.accountForm.pwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
    },
    // 获取当前权限树勾选项
    getPermissionTreeChecked(arr) {
      this.permissionTreeChckedTemp = arr.map(auth => auth.AuthList)
    },
    // 获取当前编辑的权限规则
    getRulesOfCompetency(obj) {
      this.rulesOfCompetency = obj
    },
    // 获取当前勾选的登录策略
    getLoginPolicyChecked(arr) {
      this.loginPolicyCheckedTemp = arr
    },
    // 获取当前勾选的账号组
    getAccountGroupChecked(arr) {
      if (arr && arr.length && arr[0] !== -1) {
        const GroupIds = arr.map(item => item.GroupId)
        this.accountGroupTreeCheckedTemp = GroupIds
        this.roleType = 'roleByUpId'
        this.groupIds = GroupIds
        this.queryType = 'group'
        this.queryIds = GroupIds
      } else {
        this.accountGroupTreeCheckedTemp = [-1]
        this.roleType = 'onlyRole'
        this.queryType = 'all'
      }
    },
    // 获取当前勾选的角色列表
    getRoleListChecked(arr) {
      this.roleListCheckedTemp = arr
    },
    roleListCheckedChange(arr) {
      this.roleListCheckedTemp = this.roleListCheckedTemp.filter(role => arr.some(data => data.RoleId === role.RoleId))
      this.roleListCheckedList = this.roleListCheckedTemp.map(role => role.RoleId)
    },
    // 点击角色后显示对应权限列表
    async selectRole(data) {
      if (this.currentSelectedRoleId === data.RoleId) return
      try {
        const params = {
          RoleId: data.RoleId
        }
        const result = await RoleAuths(params)
        if (result.code === 0) {
          this.checkedRoles = result.returnData
          this.currentSelectedRoleId = data.RoleId
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    // 修改权限规则
    Competen(data) {
      console.log(data)
    },
    // 账号编辑保存
    handleClickSave(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.handleSaveEdit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleSaveEdit() {
      const params = {
        AuthList: this.permissionTreeChckedTemp,
        GroupList: this.accountGroupTreeCheckedTemp.map(groupId => ({ GroupId: groupId })),
        RoleList: this.roleListCheckedTemp,
        TacList: this.loginPolicyCheckedTemp,
        UserDesc: this.accountForm.desc,
        UserName: this.accountForm.name,
        UserPwd: this.accountForm.pwd
      }
      if (this.doesAccountExist) {
        this.saveEditAccount({
          ...params,
          UserId: this.userId,
          Status: this.accountForm.status
        })
      } else {
        this.saveAddAccount(params)
      }
    },
    // 编辑账号
    async saveEditAccount(params) {
      try {
        const res = await editAccount(params)
        if (res.code === 0) {
          this.$message.success(res.message)
          setTimeout(() => {
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push('/account')
          }, 1000)
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    // 新增账号
    async saveAddAccount(params) {
      try {
        const res = await addAccount(params)
        if (res.code === 0) {
          this.$message.success(res.message)
          setTimeout(() => {
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push('/account')
          }, 1000)
        } else {
          this.$message.error(res.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.account-edit {
  padding: 23px 24px;
  .account-edit-header {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 24px;
    border-radius: 4px;
    padding: 24px 32px 32px 24px;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      position: relative;
      .manageTitle {
        line-height: 30px;
      }
      .account-status {
        flex: 1;
        line-height: 32px;
        font-family: Microsoft YaHei;
        color: #303133;
        ::v-deep .el-radio-group {
          margin-left: 16px;
          .el-radio__label {
            font-family: Microsoft YaHei;
            color: #303133;
          }
          .el-radio__inner {
            background: #fff;
            &::after {
              width: 8px;
              height: 8px;
              background-color: #2d67e3;
            }
          }
        }
      }
      .title-left {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
      .btn-save {
        width: 64px;
        height: 32px;
        border: none;
        font-weight: 400;
        font-size: 14px;
      }
      .btn-delete {
        width: 64px;
        height: 32px;
        background: #f56c6c;
        border: none;
        margin-right: 24px;
      }
    }
    .title-content {
      width: 100%;
      padding-top: 24px;
      box-sizing: border-box;
      .btn-reset-pwd {
        width: 81px;
        height: 32px;
        padding: 0;
        border: none;
        text-align: center;
        font-weight: 400;
        border-radius: 2px;
        font-size: 14px;
      }
      ::v-deep .el-form {
        height: 32px;
        display: flex;
        .el-form-item {
          margin-bottom: 0;
          vertical-align: middle;
          &:nth-child(1) {
            margin-right: 79px;
          }
          &:nth-child(2) {
            margin-right: 16px;
          }
          &:nth-child(3) {
            margin-right: 80px;
          }
          &:nth-last-child(1) {
            margin-right: 0;
            flex: 1;
            display: flex;
            .el-form-item__content {
              flex: 1;
            }
          }
          .el-form-item__label {
            padding-right: 16px;
            height: 32px;
            line-height: 32px;
          }
          .el-form-item__content {
            height: 32px;
            line-height: 32px;
          }
        }
        .el-input__inner {
          height: 32px;
          line-height: 32px;
          min-width: 240px;
          background: #ffffff;
          border: 1px solid #d2d6df;
          border-radius: 2px;
        }
      }
    }
  }
  .account-edit-main {
    box-sizing: border-box;
    ::v-deep .el-empty {
      padding: 0;
    }
    .content-card {
      width: 100%;
      height: calc(100vh - 294px);
      min-height: 300px;
      max-height: 786px;
      overflow: hidden;
    }
    .img-onlyRead {
      pointer-events: none;
    }
    .last {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>