hr-admin/src/views/candidateManage/resumeList.vue

<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-30 09:53:19
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-17 15:53:36
-->
<template>
<div class="indexPage">
    <v-input :btn="btn" :list="list" @del="delAll" @notice="noticeAll" @through="throughAll" @eliminate="eliminateAll" @undetermined="undeterminedAll" @search="search"></v-input>
    <el-radio-group v-model="isCollapse" size="medium" style="margin-bottom: 20px;">
        <el-radio-button :label="0">未读</el-radio-button>
        <el-radio-button :label="1">通过</el-radio-button>
        <el-radio-button :label="2">淘汰</el-radio-button>
        <el-radio-button :label="3">待定</el-radio-button>
        <el-radio-button :label="4">已通知</el-radio-button>
    </el-radio-group>
    <v-table :key="isCollapse" :table="isCollapse===1?table1:isCollapse===4?throughTable:table" :tableList="tableList" :sortType="true" :queryData="queryData" :form="searchForm" @details="details" @notice="notice" @through="through" @eliminate="eliminate" @del="del" @undetermined="undetermined" @toVedio="toVedio" @selection-change="selection" @update="update" @sendMail="sendMail" id="id"></v-table>
    <v-pager @page="callPage" :total="totalrecords"></v-pager>
    <el-dialog :visible.sync="dialogFormVisible" width="600px" :before-close="close" :close-on-click-modal="false">
        <el-form :model="form" ref="form" label-width="140px" :rules="rules" label-position="left">
            <el-form-item label-width="0">
                <div class="title">通知群发列表</div>
                <div class="content">
                    <el-tag v-for="(item, index) in copyPickList" :key="item" closable @close="copyPickList.splice(index, 1)" :type="errorlist.includes(item)?'danger':'success'">
                      {{tableList.some(i => i.id === item) ? tableList.find(i => i.id === item).delivererName + (tableList.find(i => i.id === item).delivererMail || '(无邮箱)') : ''}}
                    </el-tag>
                </div>
            </el-form-item>
            <el-form-item label="选择邀约岗位" prop="templateId">
                <el-select v-model="form.templateId" placeholder="请选择邀约岗位">
                    <el-option v-for="item in downList" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
                </el-select>
                <!-- <div v-else>{{this.downList1.some(i => i.id === form.processId) ? this.downList1.find(i => i.id === form.processId).processName : ''}}</div> -->
            </el-form-item>
            <el-form-item label="群发邮箱">{{email}}</el-form-item>
            <el-form-item>
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="launch">立即发出</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" width="600px" :before-close="closeDia" :close-on-click-modal="false">
        <el-form :model="uform" ref="uform" label-width="140px" :rules="rule" label-position="right">
            <el-form-item label="姓名" prop="delivererName">
                <el-input placeholder="请输入姓名" v-model="uform.delivererName" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="delivererSex">
                <el-select v-model="uform.delivererSex" class="select" placeholder="请选择性别">
                    <el-option v-for="item in [{ value: 0, label: '女' }, { value: 1, label: '男' }]" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="投递职位" prop="positionApplied">
                <el-input placeholder="请输入投递职位" v-model="uform.positionApplied" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="工作年限" prop="delivererWorkExp">
                <el-input placeholder="请输入工作年限" v-model="uform.delivererWorkExp" maxlength="200" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="delivererEducation">
                <el-select class="select" v-model="uform.delivererEducation" placeholder="请选择学历">
                    <el-option v-for="item in ['大专', '本科', '研究生', '博士', '其他']" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="delivererPhone">
                <el-input placeholder="请输入联系电话" v-model.number="uform.delivererPhone" maxlength="11" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" prop="delivererMail">
                <el-input placeholder="请输入邮箱地址" v-model="uform.delivererMail" maxlength="32" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="closeDia">取 消</el-button>
                <el-button type="primary" @click="submit">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog :visible.sync="visible" width="600px" :before-close="closeVisible" :close-on-click-modal="false">
        <el-form label-width="140px" label-position="right">
            <el-form-item v-for="item in formConfig" :key="item" :label="item.configName">
                <!-- {{item.type === 2 ? ['女', '男'][info[item.fieldName]] : item.type === 8 ? ['女', '男'][info[item.fieldName]] : info[item.fieldName]}} -->
                <div v-if="item.type === 2">{{['女', '男'][info[item.fieldName]]}}</div>
                <el-link type="primary" v-else-if="item.type === 8" @click="openNewPage($img + info[item.fieldName])" >{{item.configName + '文件'}}</el-link>
                <div v-else-if="item.type === 1" v-html="info[item.fieldName] ? info[item.fieldName].replace(/\n/g,'<br/>') : ''"></div>
                <div v-else>{{info[item.fieldName]}}</div>
            </el-form-item>
            <el-form-item label="意向职位">
                <!-- {{['女', '男'][info.delivererSex]}} -->
                {{info.desiredPositionName}}
                <!-- <el-link type="primary" @click="openNewPage($img + info.filePath)">简历文件</el-link> -->
            </el-form-item>
            <el-form-item label="简历">
                <!-- {{['女', '男'][info.delivererSex]}} -->
                <el-link type="primary" @click="openNewPage($img + info.filePath)">简历文件</el-link>
            </el-form-item>
            <el-form-item>
                <el-button @click="closeVisible">取 消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</template>

<script>
export default {
  data () {
    let validator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!(/^1[3456789]\d{9}$/.test(value))) {
          callback(new Error('请输入正确的手机格式'))
        }
        callback()
      }
    }
    return {
      tableList: [],
      dialogFormVisible: false,
      dialogVisible: false,
      visible: false,
      page: 1,
      isCollapse: 0,
      totalrecords: 0,
      pickList: [],
      copyPickList: [],
      downList: [],
      errorlist: [],
      formConfig: [],
      form: {},
      uform: {},
      info: {},
      email: '',
      state: 1,
      searchForm: {},
      rules: {
        templateId: [{
          required: true,
          message: '请选择选择邀约岗位',
          trigger: 'blur'
        }]
      },
      rule: {
        delivererEducation: [{
          required: true,
          message: '请选择学历',
          trigger: 'change'
        }],
        delivererName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'change'
        }],
        delivererPhone: [{
          required: true,
          validator,
          trigger: 'change'
        }],
        delivererMail: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'change'
        }],
        delivererSex: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        delivererWorkExp: [{
          required: true,
          message: '请填写工作经验',
          trigger: 'change'
        }],
        // desiredPositionId: [{
        //     required: true,
        //     message: '请选择应聘职位',
        //     trigger: 'change'
        // }],
        positionApplied: [{
          required: true,
          message: '请填写投递职位',
          trigger: 'change'
        }]
      },
      list: [{
        placeholder: '请输入关键字查询',
        props: 'condition'
      },
      {
        type: 'select',
        placeholder: '性别',
        props: 'delivererSex',
        options: [{
          label: '全部',
          value: null
        }, {
          label: '男',
          value: 1
        }, {
          label: '女',
          value: 0
        }]
      },
      {
        type: 'select',
        placeholder: '来源',
        props: 'resumeFrom',
        options: [{
          label: '全部',
          value: null
        },
        {
          label: '51job',
          value: 0
        },
        {
          label: '智联',
          value: 1
        },
        {
          label: '58同城',
          value: 2
        },
        {
          label: '平台',
          value: 3
        }
        ]
      }
      ],
      btn: [{
        name: '确定',
        type: 'primary',
        method: 'search'
      },
      {
        name: '待定',
        type: 'warning',
        method: 'undetermined'
      },
      {
        name: '通过',
        type: 'success',
        method: 'through'
      },
      {
        name: '淘汰',
        type: 'danger',
        method: 'eliminate'
      },
      {
        name: '删除',
        type: 'danger',
        method: 'del'
      }
      ],
      table: {
        selection: true,
        column: [{
          label: this.$t('field.serialNumber'),
          props: 'serialNumber'
        },
        {
          label: '姓名',
          props: 'delivererName'
        },
        {
          label: '性别',
          props: 'delivererSex',
          options: ['女', '男']
        },
        {
          label: '简历来源',
          props: 'resumeFrom',
          options: ['51job', '智联招聘', '58同城', '平台']
        },
        {
          label: '投递时间',
          props: 'createTime'
        },
        {
          label: '投递职位',
          props: 'positionApplied'
        },
        {
          label: '工作年限',
          props: 'delivererWorkExp'
        },
        {
          label: '学历',
          props: 'delivererEducation'
        },
        {
          label: '联系电话',
          props: 'delivererPhone'
        },
        {
          label: '邮箱',
          props: 'delivererMail'
        }
        ],
        width: 500,
        handle: [{
          title: '查看',
          method: 'details',
          type: 'info'
        },
        {
          title: '待定',
          method: 'undetermined',
          type: 'warning'
        },
        {
          title: '通过',
          method: 'through',
          type: 'success'
        },
        {
          title: '淘汰',
          method: 'eliminate',
          type: 'danger'
        },
        {
          title: '删除',
          method: 'del',
          type: 'danger'
        },
        {
          title: '修改',
          method: 'update',
          type: 'warning'
        },
        {
          title: '邮件通知',
          method: 'sendMail',
          type: 'success'
        }
        ]
      },
      table1: {
        selection: true,
        column: [{
          label: this.$t('field.serialNumber'),
          props: 'serialNumber'
        },
        {
          label: '姓名',
          props: 'delivererName'
        },
        {
          label: '性别',
          props: 'delivererSex',
          options: ['女', '男']
        },
        {
          label: '简历来源',
          props: 'resumeFrom',
          options: ['51job', '智联招聘', '58同城', '平台']
        },
        {
          label: '投递时间',
          props: 'createTime'
        },
        {
          label: '投递职位',
          props: 'positionApplied'
        },
        {
          label: '工作年限',
          props: 'delivererWorkExp'
        },
        {
          label: '学历',
          props: 'delivererEducation'
        },
        {
          label: '联系电话',
          props: 'delivererPhone'
        },
        {
          label: '邮箱',
          props: 'delivererMail'
        },
        {
          label: '邮件发送状态',
          props: 'sendInviteStatus',
          options: ['未发送', '发送中', '发送成功', '发送失败']
        }
        ],
        width: 500,
        handle: [{
          title: '查看',
          method: 'details',
          type: 'info'
        },
        {
          title: '淘汰',
          method: 'eliminate',
          type: 'danger'
        },
        {
          title: '通知面试',
          method: 'notice',
          type: 'success'
        },
        {
          title: '修改',
          method: 'update',
          type: 'warning'
        }
        ]
      },
      throughTable: {
        selection: true,
        column: [{
          label: this.$t('field.serialNumber'),
          props: 'serialNumber'
        },
        {
          label: '姓名',
          props: 'delivererName'
        },
        {
          label: '性别',
          props: 'delivererSex',
          options: ['女', '男']
        },
        {
          label: '简历来源',
          props: 'resumeFrom',
          options: ['51job', '智联招聘', '58同城', '平台']
        },
        {
          label: '投递时间',
          props: 'createTime'
        },
        {
          label: '当前状态',
          props: 'interviewStatus',
          options: ['未面试', '已面试']
        },
        {
          label: '投递职位',
          props: 'positionApplied'
        },
        {
          label: '工作年限',
          props: 'delivererWorkExp'
        },
        {
          label: '学历',
          props: 'delivererEducation'
        },
        {
          label: '联系电话',
          props: 'delivererPhone'
        },
        {
          label: '邮箱',
          props: 'delivererMail'
        }
        ],
        width: 360,
        handle: [{
          title: '查看',
          method: 'details',
          type: 'info'
        },
        {
          title: '查看视频',
          method: 'toVedio',
          type: 'info',
          props: 'interviewStatus',
          key: 1
        },
        {
          title: '删除',
          method: 'del',
          type: 'danger'
        },
        {
          title: '修改',
          method: 'update',
          type: 'warning'
        },
        {
          title: '邮件通知',
          method: 'sendMail',
          type: 'success'
        }
        ]
      }
    }
  },
  mounted () {
    this.queryData()
    this.queryDownList()
    this.queryEmail()
  },
  methods: {
    queryData (form = {}) {
      let page = this.page
      this.searchForm = form
      let reqdata = form
      switch (this.isCollapse) {
        case 0:
          reqdata.isPass = 0
          reqdata.isSendInviteMail = 0
          break
        case 1:
          reqdata.isPass = 1
          reqdata.isSendInviteMail = 0
          break
        case 2:
          reqdata.isPass = 2
          reqdata.isSendInviteMail = 0
          break
        case 3:
          reqdata.isPass = 3
          reqdata.isSendInviteMail = 0
          break
        case 4:
          reqdata.isPass = 1
          reqdata.isSendInviteMail = 1
          break
        default:
          break
      }
      this.$api
        .post('/resumeInfo/queryResumeList', {
          reqdata,
          page
        })
        .then((res) => {
          this.totalrecords = res.totalrecords
          this.tableList = res.list.map((item, index) => {
            item.serialNumber = (this.page - 1) * 10 + index + 1
            return item
          })
        })
    },
    queryDownList () {
      this.$api
        .post('/template/queryTemplateList', {
          reqdata: {},
          rows: 50
        })
        .then((res) => {
          this.downList = res.list
        })
    },
    queryEmail () {
      this.$api
        .post('/companyAccount/queryCompanyAccountList', {
          reqdata: {}
        }).then(res => {
          this.email = res.list.some(item => item.useType === 1) ? res.list.find(item => item.useType === 1).cmpMailAccount : ''
        })
    },
    search (form) {
      this.queryData(form)
    },
    openNewPage (url) {
      window.open(url)
    },
    details ({ id, resumeFrom }) {
      this.$api
        .post('/resumeInfo/queryResumeInfoDetail', {
          reqdata: {
            id
          }
        })
        .then((res) => {
          resumeFrom === 3
            ? (() => {
              this.openVisible()
              this.formConfig = JSON.parse(res.object.formConfig)
              this.info = res.object
            })()
            : res.object.filePath
              ? window.open(this.$img + res.object.filePath)
              : this.$message({
                type: 'info',
                message: '无此人简历!'
              })
        })
    },
    launch () {
      let a
      this.$refs['form'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let resumeInfoStatusList = this.copyPickList.map(item => ({
        id: item,
        templateId: this.form.templateId
      }))
      this.copyPickList.length
        ? this.$api
          .post('/resumeInfo/sendMail', {
            reqdata: {
              resumeInfoStatusList,
              type: this.state
            }
          })
          .then((res) => {
            this.$alert('系统正在发送邮件，请在简历管理-通过页查看邮件发送情况!', '发送结果', {
              confirmButtonText: '确定',
              callback: action => {
              }
            })
            // this.errorlist = res.object.sendMailFailList.map(item => {
            //   return item.id
            // })
          })
        : this.$message({
          type: 'info',
          message: '请添加需要通知的对象'
        })
    },
    notice (row) {
      this.open()
      this.state = 1
      this.copyPickList = [row.id]
    },
    noticeAll () {
      this.pickList.length
        ? this.open()
        : this.$message({
          type: 'info',
          message: '请选择需要通知的对象'
        })
    },
    through (row, type = false) {
      let ids = type ? row : [row.id]
      let resumeInfoStatusList = ids.map(item => ({
        id: item,
        isPass: 1
      }))
      this.$api
        .post('/resumeInfo/changeReadType', {
          reqdata: {
            resumeInfoStatusList
          }
        })
        .then((res) => {
          this.queryData(this.searchForm)
        })
    },
    throughAll () {
      this.pickList.length
        ? this.through(this.copyPickList, true)
        : this.$message({
          type: 'info',
          message: '请选择通过的应聘者'
        })
    },
    eliminate (row, type = false) {
      let ids = type ? row : [row.id]
      let resumeInfoStatusList = ids.map(item => ({
        id: item,
        isPass: 2
      }))
      this.$api
        .post('/resumeInfo/changeReadType', {
          reqdata: {
            resumeInfoStatusList
          }
        })
        .then((res) => {
          this.queryData(this.searchForm)
        })
    },
    eliminateAll () {
      this.pickList.length
        ? this.eliminate(this.pickList, true)
        : this.$message({
          type: 'info',
          message: '请选择被淘汰的应聘者'
        })
    },
    del (row, type = false) {
      let ids = type ? row : [row.id]
      let resumeInfoStatusList = ids.map(item => ({
        id: item,
        status: 1
      }))
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$api
            .post('/resumeInfo/deleteResumeInfo', {
              reqdata: {
                resumeInfoStatusList
              }
            })
            .then((res) => {
              this.queryData(this.searchForm)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    delAll () {
      this.pickList.length
        ? this.del(this.pickList, true)
        : this.$message({
          type: 'info',
          message: '请选择需要删除的内容'
        })
    },
    undetermined (row, type = false) {
      let ids = type ? row : [row.id]
      let resumeInfoStatusList = ids.map(item => ({
        id: item,
        isPass: 3
      }))
      this.$api
        .post('/resumeInfo/changeReadType', {
          reqdata: {
            resumeInfoStatusList
          }
        })
        .then((res) => {
          this.queryData(this.searchForm)
        })
    },
    undeterminedAll () {
      this.pickList.length
        ? this.undetermined(this.pickList, true)
        : this.$message({
          type: 'info',
          message: '请选择待定的应聘者'
        })
    },
    toVedio () {
      window.open('candidateList')
    },
    selection (val) {
      this.$set(this.$data, 'pickList', val)
    },
    update (row) {
      this.openDia()
      this.uform = Object.assign({}, row)
    },
    sendMail (row) {
      this.open()
      this.state = 2
      this.copyPickList = [row.id]
    },
    submit () {
      let a
      this.$refs['uform'].validate((valid) => {
        a = valid
      })
      if (!a) return
      let reqdata = this.uform
      this.$api
        .post('/resumeInfo/updateResumeInfo', {
          reqdata
        })
        .then((res) => {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.closeDia()
          this.queryData(this.searchForm)
        })
    },
    openDia () {
      this.dialogVisible = true
    },
    closeDia () {
      this.dialogVisible = false
      this.uform = {}
    },
    open () {
      this.dialogFormVisible = true
    },
    close () {
      this.dialogFormVisible = false
      this.form = {}
      this.queryData(this.searchForm)
      this.copyPickList = Array.from(this.pickList)
    },
    openVisible () {
      this.visible = true
    },
    closeVisible () {
      this.visible = false
      this.info = {}
    },
    callPage (val) {
      this.page = val
      this.queryData(this.searchForm)
    }
  },
  watch: {
    pickList () {
      this.copyPickList = Array.from(this.pickList)
    },
    isCollapse () {
      this.queryData(this.searchForm)
      this.$set(
        this.table,
        'handle',
        this.isCollapse === 0 ? [{
          title: '查看',
          method: 'details',
          type: 'info'
        },
        {
          title: '待定',
          method: 'undetermined',
          type: 'warning'
        },
        {
          title: '通过',
          method: 'through',
          type: 'success'
        },
        {
          title: '淘汰',
          method: 'eliminate',
          type: 'danger'
        },
        {
          title: '待定',
          method: 'undetermined',
          type: 'danger'
        },
        {
          title: '修改',
          method: 'update',
          type: 'warning'
        },
        {
          title: '邮件通知',
          method: 'sendMail',
          type: 'success'
        }
        ]
          : this.isCollapse === 2 ? [{
            title: '查看',
            method: 'details',
            type: 'info'
          },
          {
            title: '通过',
            method: 'through',
            type: 'success'
          },
          {
            title: '删除',
            method: 'del',
            type: 'danger'
          },
          {
            title: '修改',
            method: 'update',
            type: 'warning'
          },
          {
            title: '邮件通知',
            method: 'sendMail',
            type: 'success'
          }
          ] : [{
            title: '查看',
            method: 'details',
            type: 'info'
          },
          // {
          //   title: '通知面试',
          //   method: 'notice',
          //   type: 'success'
          // },
          {
            title: '通过',
            method: 'through',
            type: 'success'
          },
          {
            title: '淘汰',
            method: 'eliminate',
            type: 'danger'
          },
          {
            title: '修改',
            method: 'update',
            type: 'warning'
          },
          {
            title: '邮件通知',
            method: 'sendMail',
            type: 'success'
          }
          ]
      )
      this.$set(
        this.$data,
        'btn',
        this.isCollapse === 0 ? [{
          name: '确定',
          type: 'primary',
          method: 'search'
        },
        {
          name: '待定',
          type: 'warning',
          method: 'undetermined'
        },
        {
          name: '通过',
          type: 'success',
          method: 'through'
        },
        {
          name: '淘汰',
          type: 'danger',
          method: 'eliminate'
        },
        {
          name: '删除',
          type: 'danger',
          method: 'del'
        }
        ]
          : this.isCollapse === 1 ? [{
            name: '确定',
            type: 'primary',
            method: 'search'
          },
          {
            name: '通知面试',
            type: 'success',
            method: 'notice'
          },
          {
            name: '淘汰',
            type: 'danger',
            method: 'eliminate'
          }
          ]
            : this.isCollapse === 2 ? [{
              name: '确定',
              type: 'primary',
              method: 'search'
            },
            {
              name: '通过',
              type: 'success',
              method: 'through'
            },
            {
              name: '删除',
              type: 'danger',
              method: 'del'
            }
            ]
              : this.isCollapse === 3 ? [{
                name: '确定',
                type: 'primary',
                method: 'search'
              },
              {
                name: '通过',
                type: 'success',
                method: 'through'
              },
              {
                name: '删除',
                type: 'danger',
                method: 'del'
              }
              ] : [{
                name: '确定',
                type: 'primary',
                method: 'search'
              },
              {
                name: '删除',
                type: 'danger',
                method: 'del'
              }
              ]
      )
      this.$set(
        this.table,
        'width',
        this.isCollapse === 0
          ? 500 : this.isCollapse === 1
            ? 360 : this.isCollapse === 2
              ? 420 : 470
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
    font-size: 20px;
    font-weight: bold;
}

.content {
    min-height: 50px;

    >span {
        margin: 5px;
    }
}
</style>