vue中用户管理中上传头像的使用，开发可做参考

<!--用户管理——员工列表-->
<template>
  <div class="employeeList">
    <div class="searchBox">
      <el-input v-model="searchFrom.userName" @change="statusChange" placeholder="请输入姓名" style="width:160px;margin-right:10px;" size="medium" clearable @keypress.native.enter="searchEnter"></el-input>
      <el-input v-model="searchFrom.loginPhone" @change="statusChange" placeholder="请输入登录账号" style="width:160px;margin-right:10px;" size="medium" clearable @keypress.native.enter="searchEnter"></el-input>
      <el-select v-model="searchFrom.status" @change="statusChange" placeholder="请选择状态" style="width:160px;margin-right:10px;" size="medium">
        <el-option label="在职" :value="1"></el-option>
        <el-option label="离职" :value="2"></el-option>
      </el-select>
      <el-button type="primary" size="medium" @click="searchData">查询</el-button>
      <el-button plain size="medium" @click="clearChange">清空</el-button>
    </div>
    <div class="contentBox">
      <div v-if="isShowBtn">
        <div class="addBox" v-show="getShowes(accessList[0].permissionsCode)">
          <el-button type="primary" size="medium" @click="addUser">新增员工</el-button>
        </div>
      </div>
      <el-table border size="medium" stripe :data="employeeArray" style="width: 100%" height="58vh">
        <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope"><span>{{
                scope.$index + (searchFrom.current - 1) * searchFrom.size + 1
              }}
            </span></template>
        </el-table-column>
        <el-table-column align="center" prop="userName" label="姓名" show-overflow-tooltip />
        <el-table-column prop="loginPhone" align="center" label="登录账号" show-overflow-tooltip />
        <el-table-column prop="" align="center" label="所属集团/公司">
          <template slot-scope="scope">
            <span v-if="scope.row.organizations.length>0&&scope.row.organizations[0].parentName">{{scope.row.organizations[0].parentName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="organizationsNames" align="center" label="组织架构" show-overflow-tooltip />
        <el-table-column prop="jobNames" align="center" label="岗位" show-overflow-tooltip />
        <el-table-column prop="roleNames" align="center" label="角色" show-overflow-tooltip />
        <el-table-column align="center" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">{{"在职"}}</span>
            <span v-else-if="scope.row.status === 2">{{"离职"}}</span>
            <span v-else></span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" align="center" label="备注" show-overflow-tooltip />
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <div v-if="isShowBtn">
              <el-link type="primary" @click="handleEdit(scope.row)" :underline="false" v-show="getShowes(accessList[1].permissionsCode)">编辑</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBox">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchFrom.current" :page-sizes="[10, 20, 30, 50]" :page-size="searchFrom.size" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </div>
    </div>
    <el-dialog destroy-on-close v-if="dialogFormVisible" :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogFormVisible" width="38%" center>
      <div class="" style="height:60vh;overflow: auto;padding-right:30px;">
        <img :src="img" width="100" height="100" style="display:none;" />
        <el-form :model="formData" ref="formDataT" style="width:100%;" :rules="rules" label-width="120px">
          <el-form-item label="人员头像：">
            <el-upload accept=".jpg,.jpeg,.png" :before-upload="beforeAvatarUpload" class="avatar-uploader" v-if="formData.headImgUrl == '' || formData.headImgUrl == null" action="" :auto-upload="true" :http-request="httpRequest" :show-file-list="false">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="demo-image__preview" v-else style="position: relative;">
              <el-image style="width: 80px; height: 80px" :src="formData.headImgUrl" :preview-src-list="srcList" />
              <span class="delImg"><i class="el-icon-delete" @click="handleDel(formData.headImgUrl)"></i></span>
            </div>
            <div class="el-upload__tip" style="margin-top: 0;">
              (只能上传jpg/jpeg/png文件,且不超过5MB)
            </div>
          </el-form-item>
          <el-form-item label="姓名：" prop="userName">
            <el-input v-model="formData.userName" autocomplete="off" size="medium" placeholder="请输入姓名" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio-group v-model="formData.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态：">
            <el-radio-group v-model="formData.status">
              <el-radio :label="1">在职</el-radio>
              <el-radio :label="2">离职</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- <el-form-item label="身份证：" prop="idCard">
            <el-input v-model="formData.idCard" size="medium" placeholder="请输入身份证号码" maxlength="20"></el-input>
          </el-form-item> -->
          <el-form-item label="登录账号：" prop="loginPhone">
            <el-input v-model="formData.loginPhone" autocomplete="off" size="medium" placeholder="请输入登录账号" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="初始密码：" v-if="dialogTitle==='新增员工'" prop="password">
            <el-input v-model="formData.password" type="password" autocomplete="off" size="medium" placeholder="请输入初始密码" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="初始密码：" v-else>
            <el-input v-model="formData.password" type="password" autocomplete="off" size="medium" placeholder="请输入初始密码" maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="phone">
            <el-input v-model="formData.phone" autocomplete="off" size="medium" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="组织架构：" prop="organizationId">
            <el-cascader :props="defaultParams" placeholder="请选择组织架构" :show-all-levels="false" v-model="formData.organizationId" size="medium" :options="treeArray" @change="leaderChange" />
          </el-form-item>
          <el-form-item label="角色：">
            <el-select v-model="formData.roleId" multiple style="width:100%" filterable placeholder="请选择角色(多选)" size="medium">
              <el-option v-for="item in roleArray" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="岗位：">
            <el-select v-model="formData.jobId" filterable placeholder="请选择(多选)" size="medium" multiple style="width:100%">
              <el-option v-for="item in jobArray" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="所属上级：">
            <el-select v-model="formData.superior" clearable style="width:100%" filterable placeholder="请选择所属上级" size="medium">
              <el-option v-for="item in leaderList" :key="item.superior" :label="item.superiorName" :value="item.superior" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="备注：">
            <el-input type="textarea" :rows="2" v-model="formData.remark" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="medium" plain>取 消</el-button>
        <el-button type="primary" :loading="isLoading" @click="sureChange('formDataT')" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" width="50%" title="查看图片" style="z-index:1111;" destroy-on-close :close-on-click-modal="false">
      <div class="" style="overflow: auto;height:600px;">
        <img style="object-fit: fill;" :src="formData.headImgUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addDisabled } from '@/utils/index'
import { organizationTree } from '../../api/organization'
import {
  queryEmployee,
  addEmployee,
  editEmployee,
  employeeUpdateStatus,
  employeeDetail,
  resetPassword,
  querySuperior,
} from '../../api/userApi'
import { queryRole } from '../../api/roleManageApi'
import { spaceUserList } from '../../api/deviceManagement'
import { queryJob } from '../../api/organization'
import { uploadImage } from '../../api/commonApi'
import { keyCode, isvalidPhone } from '../../../../utils/validate' //按住键盘Enter进行搜索
let IdentityCodeValid = (rule, value, callback) => {
  let city = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外',
  }
  if (!value) {
    callback(new Error('身份证号码不能为空'))
  }
  if (
    !value ||
    !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
      value
    )
  ) {
    callback(new Error('身份证号格式错误'))
  } else if (!city[value.substr(0, 2)]) {
    callback(new Error('地址编码错误'))
  } else {
    if (value.length == 18) {
      value = value.split('')
      let factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
      let parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
      let sum = 0
      let ai = 0
      let wi = 0
      for (let i = 0; i < 17; i++) {
        ai = value[i]
        wi = factor[i]
        sum += ai * wi
      }
      if (parity[sum % 11] != value[17]) {
        callback(new Error('请输入正确的身份证号'))
      } else {
        return true, callback()
      }
    }
  }
}
export default {
  data() {
    return {
      isShowBtn: false,
      leaderArray: [],
      optionsList: [],
      spaceProps: {
        value: 'id',
        label: 'name',
        children: 'spaceTreeDTOList',
        checkStrictly: true,
      },
      isDisable: false,
      isLoading: false,
      defaultParams: {
        label: 'name',
        multiple: false,
        checkStrictly: true,
        value: 'id',
        emitPath: false,
        children: 'children',
      },
      rules: {
        userName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
        ],
        loginPhone: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
        jobId: [{ required: true, message: '岗位不能为空', trigger: 'blur' }],
        leader: [
          { required: true, message: '直属领导不能为空', trigger: 'change' },
        ],
        spaceIdArr: [
          {
            required: true,
            trigger: 'change',
            validator: (rule, value, callback) => {
              if (this.formData.spaceIdArr != null) {
                callback()
              } else {
                callback(new Error('空间位置不能为空'))
              }
            },
          },
        ],
        idCard: [
          { required: true, validator: IdentityCodeValid, trigger: 'change' },
        ],
        loginPhone: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (!isvalidPhone(value)) {
                callback(new Error('qqqq请输入正确的11位手机号码'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        organizationId: [
          { required: true, message: '组织架构不能为空', trigger: 'blur' },
        ],
        roleId: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
        email: [
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
        plateNumber: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                var xreg =
                  /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DABCEFGHJK]$)|([DABCEFGHJK][A-HJ-NP-Z0-9][0-9]{4}$))/
                var creg =
                  /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
                if (value.length == 7 && creg.test(value)) {
                  callback()
                } else if (value.length == 8 && xreg.test(value)) {
                  callback()
                } else {
                  callback(new Error('请输入正确的车牌号'))
                }
              } else {
                callback()
              }
            },
          },
        ],
      },
      accessList: [
        {
          labelName: '新增',
          permissionsCode: this.ACCESSCONFIG.employeeAdd,
        },
        {
          labelName: '编辑',
          permissionsCode: this.ACCESSCONFIG.employeeEdit,
        },
        {
          labelName: '重置密码',
          permissionsCode: this.ACCESSCONFIG.employeeResetPassword,
        },
        {
          labelName: '在职/离职',
          permissionsCode: this.ACCESSCONFIG.employeeUpdateStatus,
        },
      ],
      srcList: [],
      img: '',
      treeArray: [],
      dialogVisible: false, //图片预览弹窗
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      leaderList: [],
      options: [
        {
          value: '1',
          label: '平台用户',
        },
        {
          value: '2',
          label: '园区用户',
        },
        {
          value: '3',
          label: '企业用户',
        },
      ],
      //表格字段
      searchFrom: {
        keyword: null, //查询关键字
        current: 1, //每页条数
        loginPhone: null,
        size: 20, //当前页数
      },
      totalCount: 0, //总共数量
      employeeArray: [], //表格列表初始化数组
      dialogFormVisible: false,
      formData: {
        organizationId: null,
        jobId: null,
        plateNumber: null, //车牌号
        employeeId: null,
        userName: null, // 真实姓名
        gender: null,
        loginPhone: null,
        phone: '',
        weChatNo: null, //微信号
        roleId: null,
        email: null,
        loginName: '', //登录名称
        superior: null, //所属上级
        headImgUrl: null,
        idCard: '',
        spaceIdArr: [],
        leader: '',
        isLeader: '1',
        remark: '',
      },
      jobArray: [], //岗位
      roleArray: [], //角色
      dialogTitle: '新增员工',
      userInfo: JSON.parse(sessionStorage.getItem('loginUserData')).data,
      personnelTxt: '',
    }
  },
  created() {
    this.initData()
    this.spaceListWay()
    console.log(this.userInfo.category)
    if (JSON.parse(sessionStorage.getItem('category')) != 'platform') {
      this.isShowBtn = true
    } else {
      this.isShowBtn = false
    }
  },
  methods: {
    statusChange() {
      this.searchFrom.current = 1
    },
    //获取空间位置
    spaceListWay() {
      if (this.userInfo.category === 'company') {
        spaceUserList({ name: '' }).then((res) => {
          if (res.result) {
            this.optionsList.push(res.data)
            this.optionsList.length &&
              this.optionsList.forEach((it) => {
                if (!it.parentId) it.disabled = true
              })
          }
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPng = file.type === 'image/png'
      const isGpg = file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isPng && !isGpg) {
        this.$message.error('上传图片只能是 jpg/png/bmp/jpeg/gif 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return (isJPG || isPng || isGpg) && isLt2M
    },
    // 按住enter进行搜索
    searchEnter(e) {
      keyCode(e, this.searchData())
    },
    handleDel() {
      this.formData.headImgUrl = ''
    },
    // 清空
    clearChange() {
      this.searchFrom = {
        loginPhone: null,
        keyword: null, //查询关键字
        current: 1, //每页条数
        size: 20, //当前页数
      }
      this.initData()
    },
    // 获取领导列表
    getSuperiorList() {
      querySuperior().then((res) => {
        if (res.result) {
          this.leaderList = res.data
          // 过滤自己
          if (this.leaderList.length > 0) {
            this.leaderList = this.leaderList.filter((item) => {
              return item.superior != this.formData.id
            })
          }
        }
      })
    },

    httpRequest(options) {
      let formData = new FormData() // 创建form对象
      formData.append('file', options.file)
      formData.append('faceImgMark', true)
      uploadImage(formData)
        .then((response) => {
          this.formData.headImgUrl = response.data.url
          this.img = response.data.url
          this.srcList.push(this.formData.headImgUrl)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 密码重置
    resetPasswordChange(row) {
      this.$alert('你确定要重置密码吗？', '提示', {
        confirmButtonText: '确定',
      })
        .then(() => {
          const params = {
            id: row.id,
          }
          resetPassword(params)
            .then((response) => {
              if (response.result) {
                this.$message.success(response.msg)
                this.initData()
              }
            })
            .catch((error) => {})
        })
        .catch(() => {})
    },
    async employeeDetailWay() {
      const params = {
        id: this.formData.id,
      }
      await employeeDetail(params)
        .then((response) => {
          if (response.result) {
            var res = response.data
            this.formData.organizationId = res.organizationsIds[0] //把组织id赋值上 单选只一个
            this.formData.spaceIdArr = res.spaceId
            if (
              res.roleIds.length > 0 &&
              res.roles.filter((x) => {
                return this.roleArray.some((y) => {
                  return x.id == y.id
                })
              }).length === 0
            ) {
              let arr = res.roles.map((item) => {
                return { id: item.id + '', name: item.roleName }
              })
              this.roleArray = this.roleArray.concat(arr)
            }
            if (
              res.jobIds.length > 0 &&
              res.jobs.filter((x) => {
                return this.jobArray.some((y) => {
                  return x.jobTmpId == y.id
                })
              }).length === 0
            ) {
              let arr = res.jobs.map((item) => {
                return { id: item.jobTmpId + '', name: item.jobName }
              })
              this.jobArray = this.jobArray.concat(arr)
            }
            this.formData.roleId = res.roleIds
            this.formData.jobId = res.jobIds
            this.formData.employeeId = res.employeeId
            this.formData.userName = res.userName
            this.formData.idCard = res.idCard
            this.formData.gender = res.gender
            this.formData.loginPhone = res.loginPhone
            this.formData.phone = res.phone
            this.formData.plateNumber = res.plateNumber
            this.formData.weChatNo = res.weChatNo //微信号
            this.formData.email = res.email
            if (
              res.superior &&
              this.leaderList.filter((item) => item.superior == res.superior)
                .length === 0
            ) {
              this.leaderList.push({
                superior: res.superior,
                superiorName: res.superiorName,
              })
            }
            this.formData.superior = Number(res.superior)
            Object.assign(
              this.formData,
              res
            )((this.formData.headImgUrl = res.headImgUrl)),
              (this.formData.status = res.status),
              (this.formData.leader = String(res.leader)),
              (this.formData.isLeader = res.leader == 0 ? '0' : '1')
            this.srcList.push(res.headImgUrl)
          }
        })
        .catch((error) => {})
    },
    // 岗位数据
    async queryJobWay() {
      const params = {
        keyword: null,
        page: 1,
        size: 1000,
      }
      await queryJob(params)
        .then((response) => {
          if (response.result) {
            this.jobArray = response.data.records
          }
        })
        .catch((error) => {})
    },
    // // 初始化数据
    async roleData() {
      const params = {
        keyword: null,
        page: 1,
        size: 1000,
      }
      await queryRole(params)
        .then((response) => {
          if (response.result) {
            this.roleArray = response.data.records ? response.data.records : []
          }
        })
        .catch((error) => {})
      this.getSuperiorList()
    },
    // 弹窗确定
    sureChange(formName) {
      this.isLoading = true
      if (
        this.formData.organizationId != '' ||
        this.formData.organizationId != null
      ) {
        this.$refs[formName].clearValidate('organizationId')
      }
      if (this.formData.spaceIdArr != '' || this.formData.spaceIdArr != null) {
        this.$refs[formName].clearValidate('spaceIdArr')
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isLoading = true
          if (this.dialogTitle == '新增员工') {
            this.addEmployee()
          } else {
            this.editEmployee()
          }
        } else {
          this.isLoading = false
          return false
        }
      })
    },
    // 添加员工
    addUser() {
      this.isLoading = false
      this.clearFromData()
      this.dialogTitle = '新增员工'
      this.queryOrganizationWay()
      this.roleData()
      this.queryJobWay()
      // this.queryLeader()
    },
    clearFromData() {
      this.dialogFormVisible = true
      this.srcList = []
      this.formData = {
        organizationId: null,
        spaceIdArr: null,
        jobId: null,
        plateNumber: null, //车牌号
        employeeId: null,
        userName: null,
        gender: null,
        loginPhone: null,
        phone: '',
        weChatNo: null, //微信号
        roleId: null,
        email: null,
        headImgUrl: null,
        idCard: '',
        leader: '',
        isLeader: '1',
        status: '',
        remark: '',
        superior: '',
      }
    },
    //编辑
    editEmployee() {
      this.isDisable = true
      if (this.userInfo.category === 'company') {
        if (this.formData.spaceIdArr.constructor == Array) {
          this.formData.spaceId =
            this.formData.spaceIdArr[this.formData.spaceIdArr.length - 1]
        } else {
          this.formData.spaceId = this.formData.spaceIdArr
        }
      }
      let ogrId = this.formData.organizationId
      if (ogrId && !Array.isArray(ogrId)) {
        this.formData.organizationId = [this.formData.organizationId]
      }
      editEmployee(this.formData)
        .then((response) => {
          if (response.result) {
            setTimeout(() => {
              this.isDisable = false
              this.isLoading = false
            }, 1000)
            this.dialogFormVisible = false
            this.initData()
            this.$message.success(response.msg)
          } else {
            this.isDisable = false
            this.isLoading = false
          }
        })
        .catch((error) => {
          this.isDisable = false
          this.isLoading = false
        })
    },
    // 在/离职
    employeeUpdateStatus(id, status) {
      const params = {
        id: id,
        status: status == '在职' ? 2 : 1,
      }
      employeeUpdateStatus(params)
        .then((response) => {
          if (response.result) {
            this.$message.success(response.msg)
            this.initData()
          }
        })
        .catch((error) => {})
    },
    // 新增
    addEmployee() {
      this.isDisable = true
      if (this.userInfo.category === 'company') {
        if (this.formData.spaceIdArr.constructor == Array) {
          this.formData.spaceId =
            this.formData.spaceIdArr[this.formData.spaceIdArr.length - 1]
        } else {
          this.formData.spaceId = this.formData.spaceIdArr
        }
      }

      let ogrId = this.formData.organizationId
      if (ogrId && !Array.isArray(ogrId)) {
        this.formData.organizationId = [this.formData.organizationId]
      }
      addEmployee(this.formData)
        .then((response) => {
          if (response.result) {
            setTimeout(() => {
              this.isDisable = false
            }, 1000)
            this.dialogFormVisible = false
            this.$message.success(response.msg)
            this.initData()
          } else {
            this.isDisable = false
            this.isDisabled = false
            this.isLoading = false
          }
        })
        .catch((error) => {
          this.isDisable = false
          this.isLoading = false
        })
    },
    queryOrganizationWay() {
      organizationTree()
        .then((response) => {
          if (response.result) {
            this.treeArray = addDisabled(response.data)
          }
        })
        .catch((error) => {})
    },
    leaderChange() {},
    // 员工管理列表查询按钮
    searchData() {
      this.searchFrom.current = 1
      this.initData()
    },
    async handleEdit(row) {
      this.dialogTitle = '编辑员工'
      this.clearFromData()
      this.formData.id = row.id
      // this.$refs['formDataT'].clearValidate();
      this.queryOrganizationWay()
      await this.roleData()
      await this.queryJobWay()
      await this.employeeDetailWay()
      this.isLoading = false
    },
    handleCheck(rows) {
      this.$alert(
        rows.status != '在职'
          ? '你确定要改变为在职吗？'
          : '你确定要改变为离职吗？',
        '提示',
        {
          confirmButtonText: '确定',
        }
      )
        .then(() => {
          this.employeeUpdateStatus(rows.id, rows.status)
        })
        .catch(() => {})
    },
    // table列表
    initData() {
      this.employeeArray = []
      queryEmployee(this.searchFrom)
        .then((response) => {
          if (response.result) {
            this.employeeArray = response.data.records
            this.totalCount = response.data.total
          }
        })
        .catch((error) => {})
    },
    handleSizeChange(val) {
      this.searchFrom.size = val // 每页条数
      this.initData()
    },
    handleCurrentChange(val) {
      this.searchFrom.current = val // 当前页数
      this.initData()
    },
  },
}
</script>
<style scoped>
.formData {
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.employeeList {
  margin: 0;
  padding: 0;
  /* display: flex;
  flex-direction: column; */
  /* 父元素一定要给高度 */
  height: 100%;
  overflow: hidden;
}

/* .employeeList >>> .el-cascader__tags{
  position: absolute;
  left: 0;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  line-height: normal;
  text-align: left;
  box-sizing: border-box;
} */

.addBox {
  display: flex;
  align-items: center;
}
.optionBtn {
  margin-left: 10px;
}
.employeeList >>> .el-cascader__tags {
  position: absolute;
  top: 0;
}

.employeeList >>> .el-cascader {
  width: 100% !important;
  outline: none;
}
.employeeList >>> .el-tag {
  margin-left: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>