v3-lab-web/src/views/systemManagement/systemUser/index.vue

<!--系统用户管理-->
<template>
  <div class="app-container user">
    <el-row :gutter="20" style="flex:1;display: flex;overflow: hidden">
      <!--部门数据-->
      <el-col :span="4" :xs="24" stlye="width:260px;" class=" scrollbar-box">
        <div class="head-container">
          <el-tree
            highlight-current
            :data="deptOptions"
            :props="defaultProps"
            icon-class=""
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24" style="flex:1;display: flex;flex-direction: column;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="" prop="searchValue" label-width="68px">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="用户名称/联系方式"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="state">
            <el-select
              v-model="queryParams.state"
              placeholder="请选择状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in stateOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="创建时间"
              end-placeholder="创建时间"
            ></el-date-picker>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          <p class="page-submit-common-style-button"
             style="float: right;"
             @click="handleAdd"
             v-hasPermiRouter="['system:user:add']"
          >新增</p>
        </el-form>
        <el-table class="table-box min-list-box" v-loading="loading" border :data="userList">
          <el-table-column label="账号" align="left" key="account" prop="account" show-overflow-tooltip/>
          <el-table-column label="用户昵称" align="left" key="userName" prop="userName" show-overflow-tooltip/>
          <el-table-column label="归属部门" align="left" key="deptName" prop="deptName" show-overflow-tooltip/>
          <el-table-column label="联系方式" align="left" key="mobile" prop="mobile" width="200" show-overflow-tooltip />
          <el-table-column label="状态" align="left" key="state" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                @click.native="handleStatusChange(scope.row)"
                class="switch captcha-img"
                :active-value="true"
                :inactive-value="false"
                active-color="#0183FA"
                inactive-color="#999"
                v-model="scope.row.state"
                active-text="启用"
                inactive-text="停用"
                disabled
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="left" prop="createTime" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            width="220"
            class-name="small-padding fixed-width"
            v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="handleUpdate(scope.row)"
                   v-hasPermiRouter="['system:user:edit']"
                >修改</p>
                <p class="table-button-p"
                   @click="handleDelete(scope.row)"
                   v-hasPermiRouter="['system:user:del']"
                >删除</p>
                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                             v-hasPermiRouter="['system:user:reset']">
                  <span class="table-button-p">更多>></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="handleResetPwd">修改密码</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="630px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名" maxlength="30" style="width:200px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系方式" maxlength="11" style="width:200px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions"
                          :normalizer="normalizer" :show-count="true"
                          placeholder="请选择上级部门" style="width:200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds">
              <!--<el-select v-model="form.roleIds" placeholder="请选择" style="width:200px;">-->
              <el-select v-model="form.roleIds" collapse-tags
                         placeholder="请选择" style="width:200px;">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="!form.userId" label="账号" prop="account">
              <el-input v-model="form.account" placeholder="请输入账号" maxlength="30" style="width:200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!form.userId" label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password" maxlength="20" show-password style="width:200px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="form.state" style="width:200px;">
                <el-radio
                  v-for="dict in stateOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="cancel">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <!--修改密码-->
    <el-dialog title="修改密码" :visible.sync="reviseOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
      <el-form :model="passwordForm" ref="passwordForm" :inline="true" :rules="rules" class="addCheckPage-min">
        <el-form-item label="新密码" prop="password" label-width="110px" >
          <el-input type="password" v-model="passwordForm.password" clearable maxlength="20" style="width:420px;" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPassword" label-width="110px">
          <el-input type="password" v-model="passwordForm.newPassword" clearable maxlength="20" style="width:420px;" placeholder="请确认新密码"/>
        </el-form-item>
      </el-form>
      <!--<p class="teacher-text-p">确定要重置该账号的密码吗？</p>-->
      <!--<p class="teacher-text-p">确定操作后，该账号密码将重置为系统初始密码。</p>-->
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="reviseOpenOff">取消</p>
        <p class="dialog-footer-button-primary" @click="putUserResetPwd">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/apiDemo/system/user";
import { getToken } from "@/utils/auth";
// import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

//V3新
import { systemUserList,systemUserAdd,systemUserDetail,
  systemUserUpdate,systemUserEditState,systemUserDelete,systemUserEditPasswd,systemRoleDropList } from "@/api/commonality/permission";
import { systemDeptOrganizeStructure } from "@/api/commonality/noPermission";
import md5 from 'js-md5';

export default {
  name: "User",
  components: { Treeselect },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.passwordForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      tableButtonType:this.hasPermiDom(['system:user:edit','system:user:detail','system:user:del','system:user:reset']),
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: null,
      normalizer(node){
        //去掉children=[]的children属性
        if(node.children && !node.children.length){
          delete node.children;
        }
        return {
          id: node.deptId,
          parentId:node.parentId,
          label:node.deptName,
          deptNum:node.deptNum,
          deptType:node.deptType,
          children:node.child,
        }
      },
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      stateOptions: [{dictValue:true,dictLabel:'启用'},{dictValue:false,dictLabel:'禁用'}],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      defaultProps: {
        children: "child",
        label: "deptName"
      },
      // 查询参数
      queryParams: {
        page:1,
        pageSize:20,
        userType:0,
        deptId:null,
        searchValue: null,
        state: null,
      },
      // 表单参数
      form: {
        userName:"",
        mobile:"",
        deptId:null,
        roleIds:[],
        account:"",
        password:"",
        state:true,
      },
      // 表单校验
      rules: {
        account: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
          { required: true, message: "请输入用户昵称", validator: this.spaceJudgment, trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "请选择归属部门", trigger: "blur" },
        ],
        roleIds: [
          { required: true, message: "请选择角色", trigger: "blur" },
        ],
        state: [
          { required: true, message: "请选择状态", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { required: true, message: "用户名不能为空", validator: this.spaceJudgment, trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
          { required: true, message: "用户密码不能为空", validator: this.spaceJudgment, trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "确认新密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '确认新密码长度必须介于 5 和 20 之间', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          { required: true, message: "请输入正确的联系方式", trigger: "blur" },
          { required: true, message: "请输入正确的联系方式", validator: this.spaceJudgment, trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的联系方式",
            trigger: "blur"
          }
        ]
      },
      // 重置密码弹层开关
      reviseOpen: false,
      passwordForm:{
        password:"",
        newPassword:"",
      },
    };
  },
  watch: {
    // 根据名称筛选部门树
    // deptName(val) {
    //   this.$refs.tree.filter(val);
    // }
  },
  created() {
    this.systemDeptOrganizeStructure();
    this.getList();
    this.systemRoleDropList();
  },
  methods: {
    /*===========V3开始===========*/
    systemDeptOrganizeStructure(){
      systemDeptOrganizeStructure({deptName:this.inputDeptName}).then(response => {
        this.$set(this,'deptOptions',response.data);
      });
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      if(this.dateRange[0]){
        obj.startTime = this.dateRange[0]+'T00:00:00'
        obj.endTime = this.dateRange[1]+'T23:59:59'
      }else{
        obj.startTime = "";
        obj.endTime = "";
      }
      systemUserList(obj).then(response => {
          this.userList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    //角色下拉列表
    systemRoleDropList(){
      systemRoleDropList({roleName :'',pageSize:10}).then(response => {
          this.roleOptions = response.data;
        }
      );
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.deptId;
      this.getList();
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.state ? "停用" : "启用";
      this.$confirm('确认要' + text + '"' + row.userName + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return systemUserEditState({userId:row.userId, state:!row.state});
      }).then(() => {
        this.getList();
        this.msgSuccess("操作成功");
      }).catch(function() {
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$confirm('确认删除"'+row.userName+'"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return systemUserDelete({userId:userIds});
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      systemUserDetail({userId:row.userId}).then(response => {
        let obj = {
          userId:response.data.userId,
          userName:response.data.userName,
          mobile:response.data.mobile,
          deptId:response.data.deptId,
          state:response.data.state,
          // roleIds:obj.roleIds[0]?response.data.roleIds.split(','):[],
          roleIds:response.data.roleIds[0]
        };

        this.$set(this,'form',JSON.parse(JSON.stringify(obj)));
        this.open = true;
        this.title = "修改用户";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId) {
            let obj = JSON.parse(JSON.stringify(this.form))
            obj.roleIds = obj.roleIds + '';
            systemUserUpdate(obj).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            let obj = JSON.parse(JSON.stringify(this.form))
            obj.password = md5(obj.password)
            obj.userType = 0;
            obj.roleIds = obj.roleIds + '';
            systemUserAdd(obj).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    //关闭重置密码页面
    reviseOpenOff(){
      this.reviseOpen = false;
      this.resetPwdId = "";
    },
    //修改密码
    putUserResetPwd(){
      this.$refs["passwordForm"].validate(valid => {
        if (valid) {
          let obj = {
            userId : this.resetPwdId,
            password:md5(this.passwordForm.password)
          };
          systemUserEditPasswd(obj).then(response => {
            this.reviseOpen = false;
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    /*===========V3结束===========*/
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.$set(this,'form',{
        userName:"",
        mobile:"",
        deptId:null,
        roleIds:[],
        account:"",
        password:"",
        state:true,
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.$set(this,'queryParams',{
        page:1,
        pageSize:20,
        userType:0,
        deptId:this.queryParams.deptId,
        searchValue: null,
        state: null,
      });
      this.handleQuery();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.reset();
          this.title = "修改密码";
          this.resetPwdId = row.userId;
          this.$set(this,'passwordForm',{
            password:"",
            newPassword:"",
          });
          this.reviseOpen = true;
          break;
        default:
          break;
      }
    },
  }
};
</script>

<style scoped lang="scss">
  .user {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px;
    overflow: hidden;
  }
  ::v-deep .head-container{
    /*==========树结构开始==========*/
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg)!important;
      transform: rotate(0deg)!important;
    }
    //未展开
    .el-icon-caret-right:before {
      content:"\e6d9";
      color:#999;
      font-size: 12px;
      border: 1px solid #999;;
      border-radius: 2px;
    }
    //展开
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      content:"\e6d8";
      color:#999;
      font-size: 12px;
      border: 1px solid #999;;
      border-radius: 2px;
    }
    .el-tree-node__expand-icon.is-leaf:before{
      color: transparent!important;
      border: none;
      cursor: default;
    }
    .el-tree .el-tree-node__label{
      font-size:14px;
      color:#333333;
      font-weight:700;
    }
    .el-tree .el-tree-node__children .el-tree-node__label{
      font-size: 14px!important;
    }
    .el-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label{
      color:#333333;
      font-size: 14px!important;
    }
    .el-tree-node__content{
      height:37px;
    }
    /*==========树结构结束==========*/
  }
  ::v-deep .min-list-box{
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    .switch .el-switch__label--right {
      z-index: 1;
    }
    .switch .el-switch__label--right span{
      margin-left: 10px;
    }
    .switch .el-switch__label--left {
      z-index: 1;
    }
    .switch .el-switch__label--left span{
      margin-left: 24px;
    }
    .switch .el-switch__label.is-active {
      display: block;
    }
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 64px !important;
      margin: 0;
    }
  }
</style>