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

<!--
 * @Description: create
 * @Version: 1.0
 * @Autor: XuTongZhang
 * @Date: 2020-07-30 10:32:00
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-08-17 09:50:29
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :width="'1400px'"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="flex">
        <div class="left">
          <div class="top">
            <div class="title">{{info.delivererName}}的面试视频：</div>
            <div class="video">
              <video
                width="100%"
                controls
                :src="info.answerVideoList && info.answerVideoList.length ? $img + info.answerVideoList[active].answerVideoPath : ''"
              ></video>
            </div>
            <div class="list" v-if="info.answerVideoList && info.answerVideoList.length">
              <div
                v-for="(item, index) in info.answerVideoList"
                :key="item.id"
                class="active"
                @click="active = index"
                :class="active === index ? 'is-active' : ''"
              >第{{index + 1}}段</div>
            </div>
            <div v-else class="prompt">暂无视频</div>
          </div>
          <div class="center">
            <div class="title">简历备注：</div>
            <el-input type="textarea" :rows="4" resize="none" placeholder="请输入内容" v-model="remark"></el-input>
          </div>
          <div class="footer">
            <el-button type="primary" @click="submit">提交备注</el-button>
            <el-button type="danger" @click="through(2)">标记为未通过</el-button>
            <el-button type="success" @click="through(1)">标记为通过</el-button>
          </div>
        </div>
        <div class="right" v-if="info.filePath">
          <iframe width="100%" height="100%" :src="$img + info.filePath"></iframe>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      remark: '',
      active: 0
    }
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {}
    },
    info: {
      type: Object,
      default: () => {}
    },
    searchForm: {
      type: Object,
      default: () => {}
    },
    queryData: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    through (val) {
      let resumeInfoStatusList = this.info.isPass ? [this.info.id].map((item) => ({ id: item, interviewResult: val })) : [this.info.id].map((item) => ({ id: item, isPass: val }))
      let url = this.info.isPass ? '/resumeInfo/changeInterviewResult' : '/resumeInfo/changeReadType'
      this.$api
        .post(url, {
          reqdata: {
            resumeInfoStatusList
          }
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.close()
          this.queryData(this.searchForm)
        })
    },
    submit () {
      this.$api
        .post('/resumeInfo/addRemakes', {
          reqdata: {
            id: this.info.id,
            remark: this.remark
          }
        })
        .then((res) => {
          // this.close()
          // this.queryData(this.searchForm)
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
        })
    }
  },
  watch: {
    info () {
      this.remark = this.info.remark
    }
  }
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  .left {
    flex: 1;
    margin-right: 20px;
    .top {
      .title {
        font-size: 28px;
        margin-bottom: 10px;
      }
      .list {
        margin-top: 10px;
        font-size: 14px;
        display: flex;
        color: rgb(42, 117, 216);
        > div {
          cursor: pointer;
          margin: 10px;
        }
        .is-active {
          color: #000;
          font-size: 16px;
          margin-top: 7px;
        }
      }
    }
    .center {
      margin-top: 10px;
      .title {
        font-size: 22px;
        margin-bottom: 10px;
      }
    }
    .footer {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
  }
  .right {
    overflow: scroll;
    width: 770px;
    iframe {
      border: none;
      html {
        width: 100%;
      }
    }
  }
}
.prompt {
  text-align: center;
  height: 30px;
  line-height: 40px;
  font-size: 20px;
  color: #888;
}
</style>