securityHtml/src/views/user/account-manage/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请选择下方部门名称查询"
            clearable
            size="small"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container head-container2" style="height:calc(100vh - 200px)">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="90px">
          <el-form-item label="登录账户：" prop="loginName">
            <el-input
              v-model="queryParams.loginName"
              placeholder="请输入登录账户"
              clearable
              size="small"
              style="width: 150px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码：" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入手机号码"
              clearable
              size="small"
              style="width: 150px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户状态：" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="用户状态"
              clearable
              size="small"
              style="width: 150px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间：" >
            <el-date-picker
              v-model="dateRange"
              size="small"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="margin-left:0px;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-col :span="1.5">
            <el-button
              type="success"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
          </el-form-item>
        </el-form>

        <!-- <el-row :gutter="10" class="mb8">
          
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row> -->
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange" :max-height="tableHeight">
          <el-table-column label="用户ID" align="center" key="userId" prop="userId" v-if="columns[0].visible" show-overflow-tooltip />
          <el-table-column label="登录账户" align="center" key="userName" prop="userName" v-if="columns[1].visible" show-overflow-tooltip />
          <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[1].visible" show-overflow-tooltip />
          <el-table-column label="部门" align="center" key="deptName" prop="deptName" v-if="columns[3].visible" show-overflow-tooltip />
          <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible"  show-overflow-tooltip/>
          <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-value="0"
                inactive-value="1"
                @change="handleStatusChange($event,scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-key"
                @click="handleResetPwd(scope.row)"
              >重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>


      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body :before-close="cancel" :close-on-click-modal="false" class="roleform">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName" >
              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" width="30%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions"  placeholder="请选择归属部门"  />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="40" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="登录账户" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入登录账户" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择用户性别">
                <el-option
                  v-for="dict in sexOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds">
              <el-select v-model="form.roleIds"  placeholder="请选择角色" >
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="岗位">
              <el-select v-model="form.postIds"  placeholder="请选择" multiple>
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->

        </el-row>
        <el-row style="width:100%">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" width="80%"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="!loading">确 定</el-button>
        <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-sizes="[10, 15, 20, 30]"
      @size-change="handleSizeChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="sizes,prev, pager, next"
      :total="totalCount"
      style="position:fixed;"
    >
    </el-pagination>

    <!-- 用户导入对话框 -->
    <!-- <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm" v-if="!loading">确 定</el-button>
        <el-button :loading="loading" type="primary"  v-else>提交中...</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {userList, userEdit, resetPwd, userAdd, userRemove,} from "@/api/system/user";
import { roleList } from '@/api/system/auth-manage'
import { getToken } from "@/utils/auth";
import {  Message } from 'element-ui'
import { treeselect } from "@/api/system/orgnization";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "User",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      //存储列表数据
      tableData: [],
      //存储列表总数
      totalCount: 0,
      //列表每页条目数
      pageSize: 15,
      //开始页
      pageNo: 1,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      statusOptions: [
        {
          dictLabel:"使用",
          dictValue:0
        },{
          dictLabel:"停用",
          dictValue:1
        }
      ],
      // 性别状态字典
      sexOptions: [
        {
          dictLabel:"男",
          dictValue:0
        },
        {
          dictLabel:"女",
          dictValue:1
        },
        {
          dictLabel:"未知",
          dictValue:2
        },
      ],
      // 岗位选项
      postOptions: [
        {
          postName:"董事长",
          postSort:1,
          status:0
        },
        {
          postName:"项目经理",
          postSort:2,
          status:0
        },
        {
          postName:"人力资源",
          postSort:3,
          status:0
        },
        {
          postName:"普通员工",
          postSort:4,
          status:0
        },
      ],
      // 角色选项
      roleOptions: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData"
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 15,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        endTime:undefined,
        startTime:undefined
      },
      // 列信息
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true }
      ],
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        roleIds:[
           { required: true, message: "用户角色不能为空", trigger: "change"},
        ],

      },
      tableHeight:undefined,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    // table高度
    if(window.innerWidth <1920){
      this.tableHeight = window.innerHeight - 300
    }else{
      this.tableHeight = window.innerHeight - 295
    }
    // 监听窗口大小变化
    let self = this;
    window.onresize = function() {
      self.tableHeight = window.innerHeight - 300
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
    // this.getDicts("sys_normal_disable").then(response => {
    //   this.statusOptions = response.data;
    // });
    // this.getDicts("sys_user_sex").then(response => {
    //   this.sexOptions = response.data;
    // });
    // this.getConfigKey("sys.user.initPassword").then(response => {
    //   this.initPassword = response.msg;
    // });
  },
  methods: {
    
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      if(this.dateRange.length>0){
          this.queryParams.endTime = this.dateRange[1] + " 00:00:00"
          this.queryParams.startTime = this.dateRange[0]  + " 23:59:59"
      }
      let arr = this.queryParams
      arr.params = undefined
      userList(arr).then(response => {
          if(response.data.pageList){
            this.userList = response.data.pageList;
            this.total = response.data.totalCount;
          }
        this.loading = false;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = []
        if(response.data){
          for(let a = 0; a<response.data.length; a++){
            this.deptOptions[a] ={}
            this.deptOptions[a].label = response.data[a].deptName
            this.deptOptions[a].id = response.data[a].deptId
            if(response.data[a].children.length>0){
              this.deptOptions[a].children = []
              for(let b = 0; b<response.data[a].children.length; b++){
                this.deptOptions[a].children[b] = {}
                if(response.data[a].children.length>0){
                  this.deptOptions[a].children[b].label = response.data[a].children[b].deptName
                  this.deptOptions[a].children[b].id = response.data[a].children[b].deptId
                }
              }
            }
          }
        }
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    // 用户状态修改
    handleStatusChange(value,row) {
      let that = this
      let text = row.status === "0" ? "启用" : "停用";
      this.$confirm('确认要"' + text + '""' + row.loginName + '"用户吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          userList({loginName:row.loginName}).then(response => {
            let arr = []
            arr = response.data.pageList[0]
            arr.params = undefined
            arr.status = row.status
            userEdit(arr).then(response => {
              if(response.status == "SUCCESS"){
                Message({
                  message: ("账号'" + row.loginName + "'"  + text + "成功"),
                  type: "success",
                });
              }
            })
          })
          
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    //用户状态 密码 修改
    useredit(type,value,row){
      row.roleIds = row.roles[0].roleId
      row.roles = undefined
      row.params = undefined
      if(type == "statue"){
        row.status = value
      }
      userEdit(row).then(response => {
        this.$message.success("修改成功")
        this.getList();
        this.loading = false

      }).catch(err=>{
        this.loading = false
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.queryParams ={}
      // this.resetForm("form");
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        pageNo: 1,
        pageSize: 15,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        endTime:undefined,
        startTime:undefined
      }
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.handleResetPwd(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        default:
          break;
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getTreeselect();
      this.roleIds()
      userList().then(response => {
        this.open = true;
        this.title = "添加用户1";
        this.form.roleIds = "普通用户"
        this.form.password = this.initPassword;
      });
    },
    sex(id){
      if(id == "0"){
        this.form.sex = "男"
      }else if(id == "1"){
        this.form.sex = "女"
      }else if(id == "2"){
        this.form.sex = "未知"
       }else if(id == "男"){
        this.form.sex = "0"
       }else if(id == "女"){
        this.form.sex = "1"
      }else if(id == "未知"){
        this.form.sex ="2"
      }else{

      }
    },
    status(id){
      if(id == "0"){
        this.form.status = "使用"
      }else if(id == "1"){
        this.form.status = "停用"
      }else if(id == "使用"){
        this.form.status = "0"
       }else if(id == "停用"){
        this.form.status = "1"
      }else{

      }
    },
    roleIds(){
      roleList().then(response =>{
        if(response.status == "SUCCESS"){
          let data = response.data.pageList
          if(data){
            let arr = []
            for(let i =0; i<data.length;i++){
              if(data[i].roleId !="1")
              arr.push(data[i])
            }
            if(arr.length>0){
              let arrs=[]
              for(let i =0; i<arr.length;i++){
                arrs[i]={}
                arrs[i].roleName = arr[i].roleName
                arrs[i].roleId = arr[i].roleId
                arrs[i].status= arr[i].status

              }
              this.roleOptions = arrs
            }
          }
        }
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // this.reset();
      this.getTreeselect();
      this.roleIds()
      const loginName = row.loginName;
      userList({loginName:loginName}).then(response => {
        if(response.status == "SUCCESS"){
          if(response.data.pageList){
            this.form = response.data.pageList[0];
            this.sex(this.form.sex)
            //角色赋值
            if(response.data.pageList[0].roles){
              this.form.roleIds = response.data.pageList[0].roles[0].roleId
              if(this.form.roleIds){
                if(this.roleOptions){
                  for(let i = 0;i<this.roleOptions.length;i++){
                    if(this.form.roleIds == this.roleOptions[i].roleId){
                      this.form.roleIds = this.roleOptions[i].roleName
                    }
                  }
                }
              }
            }
            //部门赋值
            if(response.data.pageList[0].deptName){
              this.form.deptName = response.data.pageList[0].deptName
              if(this.form.deptName){
                if(this.deptOptions){
                  for(let i = 0;i<this.deptOptions.length;i++){
                    if(this.form.deptName = this.deptOptions[i].label){
                      this.form.deptId = this.deptOptions[i].label
                    }
                    if(this.deptOptions[i].children){
                      for(let a = 0;a<this.deptOptions[i].children.length;a++){
                        if(this.form.deptName = this.deptOptions[i].children[a].label){
                          this.form.deptId = this.deptOptions[i].children[a].label
                        }
                      }
                    }
                  }
                }
              }
            }
            this.open = true;
            this.title = "修改用户";
            this.form.password = "";
          }
        }

      });
    },
    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      let _this = this
      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        inputPattern: /^.{5,20}$/,
        inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
      }).then(({ value }) => {
        resetPwd({userId:row.userId, password:value}).then(response => {
          if(response.status == "SUCCESS"){
            Message({
              message: "修改成功，新密码是：" + value,
              type: 'success'
            })
          }
        });
      }).catch(() => {});
    },
    /** 分配角色操作 */
    handleAuthRole: function(row) {
      const userId = row.userId;
      this.$router.push("/system/role");
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.roles = undefined
          this.form.params = undefined
          let data = JSON.stringify(this.form)
          let arr = JSON.parse(data)
          if(typeof this.form.deptId   == "string"){
              if(this.deptOptions){
                for(let i = 0;i<this.deptOptions.length;i++){
                  if(this.form.deptName == this.deptOptions[i].label){
                    arr.deptId = this.deptOptions[i].id
                  }
                  if(this.deptOptions[i].children){
                    for(let a = 0;a<this.deptOptions[i].children.length;a++){
                      if(this.form.deptName == this.deptOptions[i].children[a].label){
                        arr.deptId = this.deptOptions[i].children[a].id
                      }
                    }
                  }
                }
              }
          }
          if(this.roleOptions){
            for(let i = 0;i<this.roleOptions.length;i++){
              if(this.form.roleIds == this.roleOptions[i].roleName){
                arr.roleIds = this.roleOptions[i].roleId
              }
            }
          }
          if(this.sex){
            for(let i = 0;i<this.roleOptions.length;i++){
              if(this.form.roleIds == this.roleOptions[i].roleName){
                arr.roleIds = this.roleOptions[i].roleId
              }
            }
          }
          if(this.form.roleIds == "普通用户"){
            this.form.roleIds = 2
          }
          if(this.form.sex == "男"){
            arr.sex = "0"
          }else if(this.form.sex== "女"){
            arr.sex = "1"
          }else if(this.form.sex == "未知"){
            arr.sex = "2"
          }
          if (this.form.userId != undefined) {
            userEdit(arr).then(response => {
              if(response.status == "SUCCESS"){
                this.loading = false
                this.$message.success("修改成功")
                this.open = false;
                this.getList();
              }

            }).catch(err=>{
              this.loading = false
              this.open = false;
            });
          } else {
            this.form.loginName = this.form.userName
            userAdd(this.form).then(response => {
              if(response.status == "SUCCESS"){
                this.loading = false
                this.$message.success("新增成功")
                this.open = false;
                this.getList();
              }else{
                this.loading = false
              }
             }).catch(err=>{

            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userId = row.userId ;
      this.$confirm('是否确认删除用户编号为"' + userId + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return userRemove(userId).then(response =>{

          });
        }).then(() => {
          this.getList();
          this.$message.success("修改成功")
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有用户数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportUser(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //改变起始页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.query.pageNo = this.pageNo

    },
    //改变每条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.query.pageSize = this.pageSize
    },
  }
};
</script>
<style scoped>

.el-dialog .el-form-item__label{
  line-height: 40px;
  padding-right:10px;
}
.el-input__prefix{
  top:4px;
}
.el-radio{
  margin-top:10px;
}
.el-tabs--border-card {
  background: rgba(0, 0, 0, 0);
  border: 1px solidrgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 0 6px 0 rgba(0, 0, 0, 0);
}
.el-tabs--border-card > .el-tabs__header {
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  top: 12px;
  left: 14px;
  border-bottom: 0;
}
.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item,
.el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  background: #e4e3e3;

  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  color: #444;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  background-color: #5c88fa;
  border: 1px solid rgba(0, 0, 0, 0);
  border-right-color: rgba(0, 0, 0, 0);

  border-left-color: 0;
}
.el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #fff;
  background-color: #5c88fa;
}
.el-tabs__item {
  height: 35px;
  line-height: 35px;
}

.roleDialog .el-dialog .el-form-item {
  margin: 20px 20px 0;
}
.roleDialog .el-dialog .el-form-item:first-child,
.roleDialog .el-dialog .el-form-item:nth-child(2) {
  display: inline-block;
}
.el-dialog .el-form-item.table-item {
  width: 96%;
}
.el-dialog .el-form-item{
  width:100%;
}
.el-input__inner{
  height:40px;
  line-height: 40px;
}

.roleDialog .el-dialog .el-form-item{
  margin:20px 0
}

.el-input__inner{
  height:32px;
  line-height: 32px;
}
.head-container2{
  overflow-y: scroll;
}
</style>