<template>
  <div class="icons-container">
    <el-container>
      <el-aside width="300px" style="background-color:#fff">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
          style="margin:10px 0"/>
        <el-tree
          v-loading="treeLoading"
          ref="tree"
          :data="treeData"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          @node-click="handleNodeClick"/>
      </el-aside>
      <el-main>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="4">
              <el-form-item label="用户名" label-width="100px">
                <el-input v-model="queryForm.USERNAME" style="width: 150px" placeholder="请输入关键字"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="姓名" label-width="100px">
                <el-input v-model="queryForm.NAME" style="width: 150px" placeholder="请输入关键字"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="人员类型" label-width="100px">
                <el-select v-model="queryForm.ISFLOW" placeholder="请选择">
                  <el-option label="流动人员" value="1" />
                  <el-option label="非流动人员" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="就职状态">
                <el-select v-model="queryForm.DEPART_STATE" placeholder="请选择">
                  <el-option label="在职" value="0" />
                  <el-option label="离职" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="离职申请审核状态" label-width="150px">
                <el-select v-model="queryForm.REVIEW_STATE" placeholder="请选择">
                  <el-option label="已打回" value="0" />
                  <el-option label="待审核" value="1" />
                  <el-option label="审核通过" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label-width="10px">
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                  搜索
                </el-button>
                <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table v-loading="listLoading" ref="multipleTable" :data="varList" :row-key="getRowKey" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
          <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="USERNAME" label="用户名" />
          <el-table-column prop="NAME" label="姓名" />
          <el-table-column prop="DEPARTMENT_NAME" label="部门" />
<!--          <el-table-column prop="PERSON_WORK_TYPE" label="工种" />-->
          <el-table-column prop="ISFLOW" label="人员类型">
            <template slot-scope="{row}">
              <el-tag v-if="row.ISFLOW == '1'" type="danger">流动人员</el-tag>
              <el-tag v-if="row.ISFLOW == '0'" type="success">非流动人员</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="DEPART_STATE" label="就职状态" >
            <template slot-scope="{row}">
              <el-tag v-if="row.DEPART_STATE == '1'" type="danger">离职</el-tag>
              <el-tag v-if="row.DEPART_STATE == '0'" type="success">在职</el-tag>
              <el-tag v-if="row.DEPART_STATE == '-1'" type="danger">离职申请中</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="REVIEW_STATE" label="离职申请审核状态" >
            <template slot-scope="{row}">
              <el-tag v-if="row.REVIEW_STATE == '1'" type="danger">待审核</el-tag>
              <el-tag v-if="row.REVIEW_STATE == '0'" type="success">审核未通过</el-tag>
              <el-tag v-if="row.REVIEW_STATE == '2'" type="success">审核通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px">
            <template slot-scope="{row}">
              <el-button v-show="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">查看</el-button>
              <el-button v-if="row.REVIEW_STATE == 1" type="success" icon="el-icon-refresh" size="mini" @click="handleEditState(row)">审核</el-button><!--审核状态（REVIEW_STATE）是待审核时显示按钮-->
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </div>
      </el-main>
    </el-container>
    <div>
      <el-dialog :visible.sync="dialogFormEditState" title="审核人员离职申请" width="600px">
        <el-form ref="auditForm" :rules="auditRules" :model="auditForm" label-width="110px" style="width: 500px;">
          <el-form-item label="申请人" prop="NAME">
            <el-input v-model="auditForm.NAME" disabled placeholder="申请人..." />
          </el-form-item>
          <el-form-item label="申请时间" prop="APPLY_USER_NAME">
            <el-input v-model="auditForm.APPLY_TIME" disabled placeholder="申请时间..."/>
          </el-form-item>
          <el-form-item label="离职原因" prop="APPLY_USER_NAME">
            <el-input v-model="auditForm.LEAVE_REASON" disabled placeholder="离职原因..."/>
          </el-form-item>
          <el-form-item label="审核结果" prop="REVIEW_STATE">
            <el-select v-model="auditForm.REVIEW_STATE">
              <el-option label="通过" value="2"/>
              <el-option label="不通过" value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="审核人" prop="REVIEWED">
            <el-input v-model="auditForm.AUDIT_PERSON" disabled placeholder="审核人..." title="审核人" />
          </el-form-item>
          <el-form-item label="审核时间" prop="REVIEWEDTIME">
            <el-date-picker v-model="auditForm.AUDIT_TIME" type="date" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" disabled placeholder="选择日期"/>
          </el-form-item>
          <el-form-item label="备注" prop="BZ">
            <el-input v-model="auditForm.AUDIT_REMARKS" type="textarea" placeholder="这里输入备注说明..." />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormEditState = false">取 消</el-button>
          <el-button :loading="buttonLoading" type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='editUser'?'查看':'新增'" width="600px">
      <el-form ref="form" :rules="rules" :model="pd" label-width="110px" style="width: 500px;">
        <el-form-item :disabled="dialogType == 'editUser'" label="角色" prop="ROLE_ID">
          <el-select v-model="pd.ROLE_ID" :disabled="dialogType == 'editUser'" clearable placeholder="请选择角色">
            <el-option v-for="item in roleList" :key="item.role_ID" :label="item.role_NAME" :value="item.role_ID" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="DEPARTMENT_ID">
          <SelectTree
            ref="deptTree"
            :clearable="false"
            :options="treeData"
            :props="defaultProps"
            v-model="pd.DEPARTMENT_ID"
            placeholder="请选择部门"
          />
        </el-form-item>
        <el-form-item label="用户名" prop="USERNAME">
          <el-input v-model="pd.USERNAME" :disabled="dialogType == 'editUser'" placeholder="这里输入用户名..." />
        </el-form-item>
        <el-form-item label="姓名" prop="NAME">
          <el-input v-model="pd.NAME" placeholder="这里输入姓名..." />
        </el-form-item>
        <el-form-item label="性别" prop="USERNAME">
          <el-input v-model="pd.USERNAME" :disabled="dialogType == 'editUser'" placeholder="这里输入用户名..." />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="pd.EMAIL" placeholder="这里输入备注邮箱..." />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="pd.BZ" type="textarea" placeholder="这里输入备注说明..." />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="dialogType == 'saveUser'" @click="dialogFormEdit = false">取 消</el-button>
        <el-button v-show="dialogType == 'saveUser'" type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
import { upload } from '@/utils/upload'
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    var hasUser = (rule, value, callback) => {
      requestFN(
        '/user/hasUser',
        {
          USERNAME: value,
          VERIFYUSER_ID: this.form.USER_ID
        }
      ).then((data) => {
        if (data.result == 'success') {
          if (data.pd.USER_ID) {
            callback(new Error('用户名重复'))
          }
          callback()
        }
      }).catch((e) => {
        callback()
      })
    }
    var hasEmail = (rule, value, callback) => {
      if (value) {
        requestFN(
          '/user/hasEmail',
          {
            EMAIL: value,
            USERNAME: this.form.USERNAME
          }
        ).then((data) => {
          if (data.result == 'success') {
            callback()
          } else {
            callback(new Error('邮箱重复'))
          }
        }).catch((e) => {

        })
      } else {
        callback()
      }
    }
    return {
      buttonLoading: false,
      queryForm: {
        USERNAME: '',
        NAME: '',
        ISFLOW: '',
        DEPART_STATE: '',
        REVIEW_STATE: ''
      },
      auditForm: {
        USER_ID: '',
        EMPLOYMENT_APPLY_MANAGEMENT_ID: '',
        NAME: '',
        APPLY_TIME: '',
        LEAVE_REASON: '',
        REVIEW_STATE: '',
        AUDIT_PERSON: '',
        AUDIT_TIME: '',
        AUDIT_REMARKS: '',
        END_DATE: ''
      },
      auditRules: {
        REVIEW_STATE: [
          { required: true, message: '请选择审核状态', trigger: 'blur' }
        ]
      },
      dayTime: [],
      CORPINFO_ID: '',
      dialogFormEdit: false,
      dialogFormEditState: false,
      listLoading: true,
      treeLoading: false,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      filterText: '',
      total: 0,
      KEYWORDS: '',
      SHIFTDUTYONE: '',
      SHIFTDUTYTWO: '',
      IS_HAZARDCONFIRMER: '',
      selectPeriod: [],
      periodList: [],
      DEPARTMENT_ID: '',
      pd: [],
      varList: [],
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogType: 'saveUser',
      disabledLCSelect: false,
      displayLCSelect: 'display: block',
      disabledLCInput: true,
      displayLCInput: 'display: none',
      LearnerCategoryList: [],
      rules: {
        NAME: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
        USERNAME: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/,
            message: '请输入正确的手机号码'
          },
          { validator: hasUser, trigger: 'blur' }
        ],
        EMAIL: [
          { required: false, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,
            message: '请输入正确的邮箱'
          },
          { validator: hasEmail, trigger: 'blur' }
        ],
        ROLE_ID: [{ required: true, message: '请选择角色', trigger: 'change' }],
        DEPARTMENT_ID: [{ required: true, message: '请选择部门', trigger: 'change' }],
        DUTIES_ID: [{ required: true, message: '请选择岗位', trigger: 'change' }],
        SORT: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        NATION: [{ required: true, message: '民族不能为空', trigger: 'blur' }],
        SEX: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
        POLITICAL_OUTLOOK: [{ required: true, message: '政治面貌不能为空', trigger: 'blur' }],
        DATE_OF_BIRTH: [{ required: true, message: '请选择出生年月', trigger: 'blur' }],
        DEGREE_OF_EDUCATION: [{ required: true, message: '文化程度不能为空', trigger: 'blur' }],
        POST: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
        TYPE_OF_WORK: [{ required: true, message: '工种不能为空', trigger: 'blur' }],
        ENTRY_DATE: [{ required: true, message: '请选择入职日期', trigger: 'blur' }],
        WORKING_DATE: [{ required: true, message: '请选择参加工作日期', trigger: 'blur' }],
        INCUMBENCY: [{ required: true, message: '在职情况不能为空', trigger: 'blur' }],
        TITLE: [{ required: true, message: '职称不能为空', trigger: 'blur' }],
        DUTIES: [{ required: true, message: '职务不能为空', trigger: 'blur' }],
        USER_ID_CARD: [{ required: true, message: '身份证号不能为空', trigger: 'blur' }]
      },
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name'
      },
      treeData: [],
      form: {
        USER_ID: '',
        ROLE_ID: '',
        DEPARTMENT_ID: '',
        POST_ID: '',
        USERNAME: '',
        NAME: '',
        EMAIL: '',
        LEARNERCATEGORY: '',
        LEARNERCATEGORYSTATUS: 'select',
        SORT: '',
        BZ: '',
        PASSWORD: 'Aa@123456789',
        USERAVATARPREFIX: '',
        USERAVATARURL: '',
        USERAVATARURL_CONVERT: '',
        ISSTUDENT: false,
        NATION: '', // 民族
        SEX: '', // 性别
        POLITICAL_OUTLOOK: '', // 政治面貌
        DATE_OF_BIRTH: '', // 出生年月
        DEGREE_OF_EDUCATION: '', // 文化程度
        POST: '', // 职务
        TYPE_OF_WORK: '', // 工种
        ENTRY_DATE: '', // 入职日期
        WORKING_DATE: '', // 参加工作日期
        INCUMBENCY: '', // 在职情况
        CERTIFICATE_INFORMATION: '', // 证书信息
        TITLE: '', // 职称
        DUTIESValue: '',
        DUTIES: '',
        letPostType: 'select',
        letTitleValue: '',
        letTitleId: '',
        letTitleType: 'select',
        letTypeOfWorkValue: '',
        letTypeOfWorkId: '',
        letTypeOfWorkType: 'select',
        USER_ID_CARD: ''
      },
      DEPART_STATE: '',
      uesrInfoDic: {
        minzuList: [], // 民族 0a0e406f27f74ee698fe9979d25f62dd
        zhengzhimianmaoList: [], // 政治面貌 6351efdd12dc4730952e5d195718e252
        wenhuachengduList: [], // 文化程度 d7d80f08d73a4accbccf4fd3d8d1d867
        renyuanleixingList: [], // 人员类型 0b62f92b0b624aab8e89a77304a64d5e
        zhiwuList: [], // 职务 下拉菜单选择已输入过的职务 09e36ac01e9540f8bc84eab1c1a78754
        gongzhongList: [], // 工种 下拉菜单选择已输入过的职务 55484e491a5e442d839c4595380713ec
        zaizhiqingkuangList: [], // 在职情况 548764b5d4bf4bd7a18ef88274ef49e4
        xingbieList: [], // 性别情况 21501808bbc344d593fbf9ccfe6c4531
        zhichengList: []// 职称 945a6b10e59946078b500f0fbafa8679
      },
      certificate_files: [],
      config: config,
      dialogImageUrl: [],
      dialogVisible: false,
      roleList: [],
      postList: [],
      oldPostId: '', // 原岗位ID（用于判断岗位是否变化）
      oldDepartId: '', // 原部门ID（用于判断部门是否变化）
      dialogFormDaoru: false,
      daoruFrom: {
        FFILE: '',
        FFILEName: ''
      },
      PARENTID: '0',
      shiftDutyListOne: [],
      shiftDutyListTwo: [],
      queryShiftOneList: [],
      queryShiftTwoList: [],
      datePage: 0,
      workDateList: [],
      workTypeList: [], // 工种
      USER_ID: '',
      LOGIN_USER: JSON.parse(sessionStorage.getItem('user')).USER_ID
    }
  },
  watch: {
    'form.DEPARTMENT_ID': {
      handler(newVal, oldVal) {
        if (this.dialogType == 'saveUser' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
          // this.form.POST_ID = ''
          // this.getPostList()
        }
      },
      immediate: false

    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getDict()
    this.getList()
    this.hasButton()
    this.getTreeList()
  },
  methods: {
    // 获取数据字典数据
    getDict() {
      requestFN(
        'dictionaries/getLevels',
        { DICTIONARIES_ID: '55484e491a5e442d839c4595380713ec' }
      ).then((data) => {
        this.workTypeList = data.list
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 转换企业状态
    formatDictionLabel(row, type) {
      if (type === '0') {
        if (this.workTypeList.length > 0) {
          for (let i = 0; i < this.workTypeList.length; i++) {
            const obj = this.workTypeList[i]
            if (row.PERSON_WORK_TYPE == obj.BIANMA) {
              return obj.NAME
            }
          }
        }
      }
    },
    // 时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
    dateFormat(time) {
      var date = new Date(time)
      var year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    pageShowDate(item, USER_ID, SHIFTDUTYTWO) {
      this.USER_ID = item.USER_ID
      this.selectPeriod = {
        'DURATION': item.DURATION,
        'WORKSTATUS': item.WORKSTATUS,
        'WORKPERIOD': item.WORKPERIOD
      }
      this.showDate(item.SHIFTDUTYTWO)
    },
    detailShowDate() {
      this.showDate(this.form.SHIFTDUTYTWO)
    },
    getRowKey(row) {
      return row.USER_ID
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick(node, data, value) {
      this.DEPARTMENT_ID = node.id
      this.getList(node.id)
    },
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/department/listzTree',
        {}
      ).then((data) => {
        this.treeLoading = false
        this.treeData = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
        this.treeLoading = false
      })
    },

    getroleList() {
      requestFN(
        '/user/goAddUser',
        {
        }
      ).then((data) => {
        this.roleList = data.roleList
      })
        .catch((e) => {
        })
    },
    // getPostList() {
    //   if (this.form.DEPARTMENT_ID != null && this.form.DEPARTMENT_ID != '') {
    //     requestFN(
    //       '/post/listAll',
    //       { DEPARTMENT_ID: this.form.DEPARTMENT_ID }
    //     ).then((data) => {
    //       this.postList = data.postList
    //     }).catch((e) => {
    //     })
    //   }
    // },
    handleAdd() {
      this.dialogFormEdit = true
      this.pd = {}
      this.getroleList()
      this.dialogType = 'saveUser'
    },
    // handleEdit(row) {
    //   this.getroleList()
    //   this.dialogType = 'editUser'
    //   this.pd = Object.assign({}, row)
    //   this.dialogFormEdit = true
    // },
    handleEdit(row) {
      this.$parent.USER_ID = row.USER_ID
      this.$parent.CORPINFO_ID = row.CORPINFO_ID
      this.$parent.REVIEW_STATE = row.REVIEW_STATE
      this.$parent.activeName = 'Edit'
    },
    // 修改
    handleEditState(row) {
      this.auditForm.USER_ID = row.USER_ID
      this.auditForm.EMPLOYMENT_APPLY_MANAGEMENT_ID = row.EMPLOYMENT_APPLY_MANAGEMENT_ID
      this.auditForm.NAME = row.NAME
      this.auditForm.APPLY_TIME = row.APPLY_TIME
      this.auditForm.LEAVE_REASON = row.LEAVE_REASON
      this.auditForm.REVIEW_STATE = ''
      this.auditForm.AUDIT_PERSON = JSON.parse(sessionStorage.getItem('user')).NAME
      this.auditForm.AUDIT_TIME = new Date()
      this.auditForm.AUDIT_REMARKS = ''
      this.dialogFormEditState = true
    },
    submit() {
      // this.listLoading = true
      this.$refs.auditForm.validate(valid => {
        if (valid) {
          this.listLoading = true
          this.buttonLoading = true
          if (this.auditForm.REVIEW_STATE == '2') {
            this.auditForm.END_DATE = this.dateFormat(new Date())
          }
          this.auditForm.AUDIT_TIME = this.dateFormat(new Date())
          this.auditForm.AUDIT_PERSON = JSON.parse(sessionStorage.getItem('user')).USER_ID
          requestFN(
            '/user/applicationAudit',
            this.auditForm
          ).then((data) => {
            this.auditForm = {
              USER_ID: '',
              EMPLOYMENT_APPLY_MANAGEMENT_ID: '',
              NAME: '',
              APPLY_TIME: '',
              LEAVE_REASON: '',
              REVIEW_STATE: '',
              AUDIT_PERSON: '',
              AUDIT_TIME: '',
              AUDIT_REMARKS: '',
              END_DATE: ''
            }
            this.listLoading = false
            this.buttonLoading = false
            this.dialogFormEditState = false
            this.getList()
          }).catch((e) => {
          })
        } else {
          return false
        }
      })
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.queryForm = {
        USERNAME: '',
        NAME: '',
        ISFLOW: '',
        DEPART_STATE: '',
        REVIEW_STATE: ''
      }
      this.getList()
    },
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.listLoading = true
          requestFN(
            '/user/' + this.dialogType,
            {
              USER_ID: this.pd.USER_ID,
              ROLE_ID: this.pd.ROLE_ID,
              DEPARTMENT_ID: this.pd.DEPARTMENT_ID,
              USERNAME: this.pd.USERNAME,
              NAME: this.pd.NAME,
              PHONE: this.pd.PHONE,
              EMAIL: this.pd.EMAIL,
              BZ: this.pd.BZ,
              tm: new Date().getTime()
            }
          ).then((data) => {
            this.listLoading = false
            this.dialogFormEdit = false
            this.varList = []
            this.listQuery.page = 1
            this.getList()
          }).catch((e) => {
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleDelete(id, name) {
      this.$confirm('确定要删除[' + name + ']吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/deleteUser',
          {
            USER_ID: id
          }
        ).then((data) => {
          if (data.result == 'success') {
            this.listLoading = false
            this.getList()
          }
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    beforeFileUpload(file) {
      this.daoruFrom.FFILE = file
      this.daoruFrom.FFILEName = file.name
      this.$forceUpdate()
      return false
    },
    getList(DEPARTMENT_ID) {
      this.listLoading = true
      if (DEPARTMENT_ID) {
        this.DEPARTMENT_ID = DEPARTMENT_ID
      }
      this.CORPINFO_ID = JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID
      requestFN(
        '/user/getResignationApplicationList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          DEPARTMENT_ID: this.DEPARTMENT_ID,
          CORPINFO_ID: this.CORPINFO_ID,
          USERNAME: this.queryForm.USERNAME,
          NAME: this.queryForm.NAME,
          ISFLOW: this.queryForm.ISFLOW,
          DEPART_STATE: this.queryForm.DEPART_STATE,
          REVIEW_STATE: this.queryForm.REVIEW_STATE
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },
    /* 用户头像处理 Begin */
    getFile(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.splice(0, fileList.length)
      } else {
        this.getBase64(file.raw).then(res => {
          this.form.USERAVATARPREFIX = res.substring(0, res.indexOf('base64,') + 7)
          this.form.USERAVATARURL = res.substring(res.indexOf('base64,') + 7)
        })
      }
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    enableORDisable(ISUSE, USER_ID) {
      this.$confirm(ISUSE === '0' ? '确定要启用该账户吗?' : '确定要禁用该账户吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/editisuse',
          {
            USER_ID,
            ISUSE
          }
        ).then(() => {
          this.$message({
            message: ISUSE === '0' ? '启用成功' : '禁用成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {})
    },
    /* 用户头像处理 End */
    resetPwd(id, name) {
      this.$confirm('是否重置密码为666666?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/resetPwd',
          {
            USER_ID: id
          }
        ).then(() => {
          this.$message({
            message: '重置成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    unLockUser(id, name) {
      this.$confirm('确定要解锁 [ 帐号：' + name + ' ] 吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/user/unLockUser',
          {
            USER_ID: id
          }
        ).then(() => {
          this.$message({
            message: '解锁成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    getLearnerCategory() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '532282f9c48346b8b646531909c739df'
        }
      ).then((data) => {
        this.LearnerCategoryList = data.list
      }).catch((e) => {

      })
    },
    changeLearnerCategory() {
      this.form.LEARNERCATEGORY = ''
      if (this.form.LEARNERCATEGORYSTATUS === 'select') {
        this.disabledLCInput = false
        this.displayLCInput = 'display: block'
        this.disabledLCSelect = true
        this.displayLCSelect = 'display: none'
        this.form.LEARNERCATEGORYSTATUS = 'input'
      } else {
        this.disabledLCInput = true
        this.displayLCInput = 'display: none'
        this.disabledLCSelect = false
        this.displayLCSelect = 'display: block'
        this.form.LEARNERCATEGORYSTATUS = 'select'
      }
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton() {
      var keys = 'user:add,user:del,user:edit'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.userfhadminadd
        this.del = data.userfhadmindel
        this.edit = data.userfhadminedit
      }).catch((e) => {
        this.listLoading = false
      })
    },
    ISSTUDENTCK() {
      if (this.form.ISSTUDENT) {
        if (this.uesrInfoDic.minzuList.length == 0) {
          this.getDicListByPID('0a0e406f27f74ee698fe9979d25f62dd', '', 'minzuList')
        }
        if (this.uesrInfoDic.zhengzhimianmaoList.length == 0) {
          this.getDicListByPID('6351efdd12dc4730952e5d195718e252', '', 'zhengzhimianmaoList')
        }
        if (this.uesrInfoDic.wenhuachengduList.length == 0) {
          this.getDicListByPID('d7d80f08d73a4accbccf4fd3d8d1d867', '', 'wenhuachengduList')
        }
        if (this.uesrInfoDic.renyuanleixingList.length == 0) {
          this.getDicListByPID('0b62f92b0b624aab8e89a77304a64d5e', '', 'renyuanleixingList')
        }
        if (this.uesrInfoDic.zaizhiqingkuangList.length == 0) {
          this.getDicListByPID('548764b5d4bf4bd7a18ef88274ef49e4', '', 'zaizhiqingkuangList')
        }
        if (this.uesrInfoDic.xingbieList.length == 0) {
          this.getDicListByPID('21501808bbc344d593fbf9ccfe6c4531', '', 'xingbieList')
        }
        this.getDicListByPID('09e36ac01e9540f8bc84eab1c1a78754', '', 'zhiwuList')
        this.getDicListByPID('945a6b10e59946078b500f0fbafa8679', '', 'zhichengList')
        this.getDicListByPID('55484e491a5e442d839c4595380713ec', '', 'gongzhongList')
      }
    },
    getDicListByPID(pId, id, listName) {
      var url = '/dictionaries/getLevels'
      if (listName == 'zhiwuList' || listName == 'zhichengList' || listName == 'gongzhongList') {
        url = '/dictionariesCorp/getLevels'
      }
      requestFN(url,
        {
          DICTIONARIES_ID: pId
        }
      ).then((data) => {
        this.uesrInfoDic[listName] = data.list
      }).catch((e) => {

      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeFileUploadByZhengshu(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
      } else {
        this.certificate_files.push(file)
      }
    },
    uploadImgByZhengshu(userId) {
      this.$refs.upload.submit()
      const formData = new FormData()
      for (var i = 0; i < this.certificate_files.length; i++) {
        if (this.certificate_files[i]) {
          formData.append('FFILE', this.certificate_files[i])
        }
      }
      formData.append('FOREIGN_KEY', userId)
      formData.append('TYPE', 18)
      upload(
        '/imgfiles/add',
        formData
      ).then((data) => {
      }).catch((e) => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.el-dialog__body{
  padding: 0;
  background: red;
}
.mark_up{
  margin-bottom:20px;
  margin-left: 110px;
}
.icons-container {
  margin: 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .icon-item {
    margin-bottom: 10px;
    height: 70px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 24px;
    color: #24292e;
    cursor: pointer;
    span {
      display: block;
      font-size: 14px;
      margin-top: 10px;
    }

  }

  .disabled {
    pointer-events: none;
  }
}
.filter-btn-group{
  position: relative;
}
.filter-flot{
  position: absolute;
  right: 0;
  top: 0;
}
.uploader{
  width: 570px;
  display: flex;
  align-items: center;
}
.el-form-item__content{
  line-height: 1;
}
.uo-flex{
  display: flex
}

.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 {
  border: 1px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>

<style lang="sass" scoped>
.el-row
  margin-bottom: 16px
  &:last-child
    margin-bottom: 0
    .form-group
      display: flex
      align-items: center
      margin-right: 20px
      .form-label
        padding: 9px 15px
        font-size: 14px
        width: 240px
        font-weight: 400
        line-height: 20px
        text-align: right
        margin-bottom: 0
        .star
          color: red
          padding-right: 4px
      .input-block
        flex: 1
        min-height: 36px
        position: relative

  .disContent
    padding: 0 20px
    display: flex
    align-items: center
    flex-wrap: wrap
    .img-div
      position: relative
      margin: auto 10px 10px 10px
      width: 20px
      height: 20px
      border-radius: 4px
      &>img
        width: 2%
        height: 3%

      .disContent-hide
        position: absolute
        width: 100%
        height: 100%
        border-radius: 4px
        background-color: rgba(48, 48, 48, 0.59)
        display: none
        top: 0
        left: 0

        .Delete
          position: absolute
          bottom: 14px
          right: 10px
          font-size: 16px
          color: white
          cursor: pointer

          .editCss
            .Delete
              font-size: 16px
              right: 90px

        .yuLan
          position: absolute
          bottom: 23px
          right: 50px
          font-size: 16px
          color: white
          cursor: pointer

        .yuLanImg
          position: absolute
          bottom: 0
          right: 0
          width: 100%
          height: 100%
          opacity: 0

    .img-div:hover .disContent-hide
      display: block

    .pitchCss
      border: 1px solid #202e78
      transition: all linear 0.1s
      width: 116px
      height: 116px
</style>
