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-12 15:35:50
-->
<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===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"
      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="success"
            >{{tableList.some(i => i.id === item) ? tableList.find(i => i.id === item).delivererName : ''}}</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="群发邮箱">139820930@qq.com</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>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableList: [],
      dialogFormVisible: false,
      page: 1,
      isCollapse: 0,
      totalrecords: 0,
      pickList: [],
      copyPickList: [],
      downList: [],
      form: {},
      searchForm: {},
      rules: {
        templateId: [
          { required: true, message: '请选择群发模板', trigger: 'blur' }
        ]
      },
      list: [
        {
          placeholder: '请输入关键字查询',
          props: 'condition'
        },
        {
          type: 'select',
          placeholder: '性别',
          props: 'delivererSex',
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 0 }
          ]
        },
        {
          type: 'select',
          placeholder: '来源',
          props: 'resumeFrom',
          options: [
            { label: '51job', value: 0 },
            { label: '智联', value: 1 },
            { label: '58同城', value: 2 }
          ]
        },
        {
          placeholder: '请输入投递职位',
          props: 'positionApplied'
        }
      ],
      btn: [
        {
          name: '确定',
          type: 'primary',
          method: 'search'
        },
        {
          name: '标记待定',
          type: 'success',
          method: 'undetermined'
        },
        {
          name: '标记通过',
          type: 'primary',
          method: 'through'
        },
        {
          name: '标题淘汰',
          type: 'warning',
          method: 'eliminate'
        },
        {
          name: '删除',
          type: 'danger',
          method: 'del'
        }
      ],
      table: {
        selection: true,
        column: [
          {
            label: '编号',
            props: 'id'
          },
          {
            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'
          }
        ],
        width: 420,
        handle: [
          {
            title: '查看简历',
            method: 'details',
            type: 'info'
          },
          {
            title: '标记待定',
            method: 'undetermined',
            type: 'success'
          },
          {
            title: '标记通过',
            method: 'through',
            type: 'primary'
          },
          {
            title: '标记淘汰',
            method: 'eliminate',
            type: 'warning'
          },
          {
            title: '删除',
            method: 'del',
            type: 'danger'
          }
        ]
      },
      throughTable: {
        selection: true,
        column: [
          {
            label: '编号',
            props: 'id'
          },
          {
            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'
          }
        ],
        width: 300,
        handle: [
          {
            title: '查看简历',
            method: 'details',
            type: 'info'
          },
          {
            title: '查看视频',
            method: 'toVedio',
            type: 'warning',
            props: 'interviewStatus',
            key: 1
          },
          {
            title: '删除',
            method: 'del',
            type: 'danger'
          }
        ]
      }
    }
  },
  mounted () {
    this.queryData()
    this.queryDownList()
  },
  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
        })
    },
    queryDownList () {
      this.$api
        .post('/template/queryTemplateList', {
          reqdata: {}
        })
        .then((res) => {
          this.downList = res.list
        })
      // this.$api
      //   .post('/position/queryPositionList', {
      //     reqdata: {}
      //   })
      //   .then((res) => {
      //     this.list[3].options = res.list.map((item) => ({
      //       value: item.id,
      //       label: item.positionName
      //     }))
      //   })
    },
    search (form) {
      this.queryData(form)
    },
    details ({ id }) {
      this.$api
        .post('/resumeInfo/queryResumeInfoDetail', {
          reqdata: {
            id
          }
        })
        .then((res) => {
          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/sendInviteMail', {
            reqdata: {
              resumeInfoStatusList
            }
          })
          .then((res) => {
            this.$message({
              message: '通知成功',
              type: 'success'
            })
            this.close()
            this.queryData(this.searchForm)
          })
        : this.$message({ type: 'info', message: '请添加需要通知的对象' })
    },
    notice (row) {
      this.open()
      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)
    },
    open () {
      this.dialogFormVisible = true
    },
    close () {
      this.dialogFormVisible = false
      this.form = {}
      this.copyPickList = Array.from(this.pickList)
    },
    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: 'success'
            },
            {
              title: '标记通过',
              method: 'through',
              type: 'primary'
            },
            {
              title: '标记淘汰',
              method: 'eliminate',
              type: 'warning'
            },
            {
              title: '标记待定',
              method: 'undetermined',
              type: 'warning'
            }
            // {
            //   title: '删除',
            //   method: 'del',
            //   type: 'danger'
            // }
          ]
          : this.isCollapse === 1
            ? [
              {
                title: '查看简历',
                method: 'details',
                type: 'info'
              },
              {
                title: '标记淘汰',
                method: 'eliminate',
                type: 'warning'
              },
              {
                title: '通知面试',
                method: 'notice',
                type: 'success'
              }
            ]
            : this.isCollapse === 2
              ? [
                {
                  title: '查看简历',
                  method: 'details',
                  type: 'info'
                },
                {
                  title: '标记通过',
                  method: 'through',
                  type: 'primary'
                },
                {
                  title: '删除',
                  method: 'del',
                  type: 'danger'
                }
              ]
              : [
                {
                  title: '查看简历',
                  method: 'details',
                  type: 'info'
                },
                {
                  title: '通知面试',
                  method: 'notice',
                  type: 'success'
                },
                {
                  title: '标记通过',
                  method: 'through',
                  type: 'primary'
                },
                {
                  title: '标记淘汰',
                  method: 'eliminate',
                  type: 'warning'
                }
              ]
      )
      this.$set(
        this.$data,
        'btn',
        this.isCollapse === 0
          ? [
            {
              name: '确定',
              type: 'primary',
              method: 'search'
            },
            {
              name: '标记待定',
              type: 'success',
              method: 'undetermined'
            },
            {
              name: '标记通过',
              type: 'primary',
              method: 'through'
            },
            {
              name: '标题淘汰',
              type: 'warning',
              method: 'eliminate'
            },
            {
              name: '删除',
              type: 'danger',
              method: 'del'
            }
          ]
          : this.isCollapse === 1
            ? [
              {
                name: '确定',
                type: 'primary',
                method: 'search'
              },
              {
                name: '通知面试',
                type: 'success',
                method: 'notice'
              },
              {
                name: '标题淘汰',
                type: 'warning',
                method: 'eliminate'
              }
            ]
            : this.isCollapse === 2
              ? [
                {
                  name: '确定',
                  type: 'primary',
                  method: 'search'
                },
                {
                  name: '标记通过',
                  type: 'primary',
                  method: 'through'
                },
                {
                  name: '删除',
                  type: 'danger',
                  method: 'del'
                }
              ]
              : this.isCollapse === 3
                ? [
                  {
                    name: '确定',
                    type: 'primary',
                    method: 'search'
                  },
                  {
                    name: '标记通过',
                    type: 'primary',
                    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
          ? 420 : this.isCollapse === 1
            ? 300 : this.isCollapse === 2
              ? 300 : 400
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
.content {
  min-height: 50px;
  > span {
    margin: 5px;
  }
}
</style>