问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/settings/components/AuthorityManagement.vue

New file
@@ -0,0 +1,265 @@
<template>
  <div class="s-authority-management">
    <div class="authority-table s-table" v-if="display">
      <el-table
        highlight-current-row
        :data="userList"
        style="width: 100%"
        :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
      >
        <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
        <el-table-column :align="'center'" prop="username" label="用户名"></el-table-column>
        <el-table-column :align="'center'" prop="role" label="角色">
          <template slot-scope="scope">{{scope.row.sysRoles | roles}}</template>
        </el-table-column>
        <el-table-column label="操作" :align="'center'">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top" popper-class="atooltip">
              <i
                class="el-icon-edit"
                style="font-size: 18px;"
                @click="handleEdit(scope.$index, scope.row)"
              ></i>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" popper-class="atooltip" v-show="false">
              <!-- :disabled="scope.row.sysRoles | roles | isSuper" -->
              <i
                class="el-icon-delete"
                style="font-size: 18px; color:red;"
                @click="handleDelete(scope.$index, scope.row)"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="authority-details" v-if="!display">
      <el-form label-width="80px" :rules="rules" ref="editForm" :model="editForm">
        <el-form-item label="用户名" style="width:580px" prop="username">
          <!-- <el-input v-model="editForm.username" placeholder="请输入" size="small"></el-input> -->
          <span class="m10" v-if="editForm.username == 'admin' || editForm.username == 'basic'">{{editForm.username}}</span>
          <el-input v-model="editForm.username" size="small" v-else></el-input>
        </el-form-item>

        <el-form-item label="新密码" style="width:580px" v-show="loginUser != editForm.username">
          <el-input show-password v-model="editForm.newPwd" placeholder="请输入密码" size="small"></el-input>
        </el-form-item>

        <el-form-item
          label="确认密码"
          style="width:580px"
          prop="checkPass"
          v-show="loginUser != editForm.username"
        >
          <el-input show-password v-model="editForm.checkPass" placeholder="请输入再次输入密码" size="small"></el-input>
        </el-form-item>

        <el-form-item label="权限配置" style="width:580px;">
          <!-- <el-transfer
            id="e-transfer"
            :titles="['全部角色', '当前角色']"
            v-model="editForm.roleIds"
            :props="{key: 'id', label: 'name'}"
            :data="roledata"
          ></el-transfer>-->

          <el-tree
            ref="treeMenus"
            :data="sysMenus"
            :props="props"
            node-key="id"
            :default-checked-keys="userMenus"
            show-checkbox
            check-on-click-node
            default-expand-all
            style="margin-top: 10px;"
          ></el-tree>
        </el-form-item>

        <el-form-item style="width:580px;">
          <el-button type="primary" style="float: right" @click="save" size="small">保存</el-button>
          <el-button type="info" style="margin-right: 10px;float: right" @click="goback" size="small">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

import { getUsers, getSysMenus, updataUser, getUserMenus } from "@/api/user"

export default {
  name: "AuthorityManage",
  filters: {
    roles(roles) {
      return roles.map(r => {
        return r.name
      }).join(' ')
    },
    isSuper(roles) {
      return roles.indexOf("超级管理员") >= 0
    }
  },
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    const validateCheckPass = (rule, value, callback) => {
      if (value !== this.editForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback()
      }
    };
    var checkUserName = (rule, value, callback) => {
      if (value && value !== ''){
        let regEn = /^[A-Za-z_@.]{2,10}$/
        console.log("用户名校验！",value)
        if (!regEn.test(value)) {
          callback(new Error('请输入2位到10位字母的用户名，不能以数字开头，且不能包含汉字'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      display: true,
      loginUser: JSON.parse(sessionStorage.getItem('userInfo')).username,
      acknewpwd: "",
      sysMenus: [],
      userMenus: [],
      rolevalue: [],
      userList: [],
      editForm: {},
      props: {
        label: 'name'
      },
      rules: {
        username: [
          { validator: checkUserName, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validateCheckPass, trigger: 'change' }
        ]
      }
    };
  },
  mounted() {
    this.fetchUserList();
    this.fetchSysMenus();
    this.initEditForm();
  },
  methods: {
    initEditForm() {
      this.editForm = {
        id: "",
        username: "",
        newPwd: "",
        checkPass: "",
        menuIds: []
      }
    },
    handleEdit(index, row) {
      this.initEditForm()
      this.display = !this.display;
      this.editForm.id = row.id;
      this.editForm.username = row.username;
      this.userMenus = []
      getUserMenus({ userId: row.id }).then(rsp => {
        if (rsp && rsp.success) {
          this.userMenus = rsp.data.menus.map(menu => {
            return menu.id
          })
        }
      })

    },
    handleDelete(index, row) {
      this.$notify({
        type: "warning",
        message: "无法删除该用户"
      })
    },
    goback() {
      this.display = !this.display;
    },
    save() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.editForm.menuIds = this.$refs.treeMenus.getCheckedKeys()
          updataUser(this.editForm).then(rsp => {
            if (rsp && rsp.success) {
              this.$notify({
                type: "success",
                message: "修改成功"
              })
            }
          })
        }
      });
    },
    fetchUserList() {
      getUsers().then(rsp => {
        if (rsp && rsp.success) {
          this.userList = rsp.data;
        }
      })
    },
    fetchSysMenus() {
      getSysMenus().then(rsp => {
        if (rsp && rsp.success) {
          this.sysMenus = rsp.data;
        }
      })
    }
  }
};
</script>
<style lang="scss">
.s-authority-management {
  height: 100%;
  width: 100%;
  .authority-table,
  .authority-details {
    height: 100%;
    width: 100%;
    margin-top: 40px;
  }
  #e-transfer {
    .el-button--primary {
      color: #fff;
      background-color: #bfbfbf;
      border-color: #bfbfbf;
    }
    .el-button--primary:focus,
    .el-button--primary:hover {
      background: #4c4c4c;
      border-color: #4c4c4c;
      color: #fff;
    }
    .el-transfer-panel
      .el-transfer-panel__header
      .el-checkbox
      .el-checkbox__label {
      font-size: 14px;
    }
  }
  .el-form-item__content {
    text-align: left;
    input {
      max-width: 498px;
    }
  }
}
</style>