jk-temporary-workers-portal/src/views/job/talentPool-detail.vue

<style lang="scss" scoped>
.el-breadcrumb {
  margin: 10px;
  line-height: 20px;
}

.el-divider {
  margin: 5px 0;
}

.demo-form-inline {
  margin-left: 10px;
  text-align: left;
}

.button-group {
  margin-left: 10px;
  text-align: left;
}


  .el-header, .el-footer {
    //background-color: #B3C0D1;
    //color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    //background-color: #D3DCE6;
    //color: #333;

  }
  
  .el-main {
    //background-color: #E9EEF3;
    //color: #333;
    text-align: left;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

  .avatarImg{
      margin-top: 50px;
  }
  .divMain{
      margin-top: 40px;
  }
  .descDiv{
      margin-bottom: 20px;
  }
  .descDivBottom{
      margin-bottom: 50px;
  }
  .divMain2{
      margin-top: 50px;
  }
 .divMain3{
      margin-top: 30px;
  }

</style>
<template>
    <div>
        <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="#">企业HR</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/talentPoolDetail">简历详情</a>
        </el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <div class="user-panel">
            <el-container>
                <el-aside width="230px">
                    <el-avatar :size="150" shape="circle" class="avatarImg"
                    :src="formModel.headImageUrl +'?x-oss-process=image/resize,m_fill,w_150,h_150'"
                    ></el-avatar>
                </el-aside>
                <el-main>
                    <div class="divMain">
                        <H2>{{formModel.realName}}</H2>
                        <div class="descDiv"> 
                            <span v-if="formModel.sex=='0'">男</span>
                            <span v-else>女</span>
                            <span style="margin-left:20px;margin-right:20px">|</span>
                            <span>{{formModel.age}}岁</span>
                            <span style="margin-left:20px;margin-right:20px">|</span>
                            <span>{{formModel.educationName}}</span>
                            <span style="margin-left:20px;margin-right:20px">|</span>
                            <span>{{formModel.workExpName}}</span>
                        </div>
                        <div class="descDiv">
                            <span v-if="formModel.jobStatus=='1'">求职状态：在职</span>
                            <span v-else>求职状态：已离职</span>
                        </div>
                        <div class="descDiv">
                            <span>期望地点：{{formModel.dreamAdd}}</span>
                        </div>
                        <div class="descDiv">
                            <span>期望薪资：{{formModel.dreamMoneyName}}</span>
                        </div>
                        <div class="descDivBottom">
                            <el-button type="primary" plain icon="el-icon-star-off" @click="handleCollection(formModel.resumeId)">收藏简历</el-button>
                            <el-button type="primary" icon="el-icon-download" @click="handleDownload">下载简历</el-button>
                            <el-button type="warning" icon="el-icon-phone">立即沟通</el-button>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="divMain2">
                        <H2>个人介绍</H2>
                        <div class="descDivBottom">
                            {{formModel.introduction}}
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <H2 style="margin-top:50px">工作经历</H2>
                        <div class="divMain3" v-for="(item,index) in formModel.resumeWorkExperienceList" v-bind:key="index">
                           
                            <div class="descDiv" style="font-size:18px">
                                {{item.companyName}}
                            </div>
                            <div class="descDiv">
                                工作时间：{{item.startTime}}-{{item.endTime}}
                            </div>
                            <div class="descDiv">
                                薪资水平：保密
                            </div>
                            <div class="descDiv">
                                在职职位：{{item.job}}
                            </div>
                            <div class="descDivBottom">
                                工作职责：{{item.content}}
                            </div>
                        </div>
                        
                </el-main>
            </el-container>
        </div> 
        <div style="background-color:#EFEFEF;padding:5px;">
            <el-button @click="closeDialog">关闭</el-button>
        </div>
    </div>
</template>
<script>
import Constant from "@/constant";
import jobUserApi from "@/api/job/jobUser";
import recruitmentCollectionApi from "@/api/job/recruitmentCollection";

export default {
    name: "talentPoolDetail",
    props: ["businessKey", "title"],
    data() {
        return {
            id:"",
            formModel:{
                resumeId:"",
            },
            submitting: false
        }
    },
    methods: {
        closeDialog() {
            //删除当前页面
            this.$store.dispatch('tagsView/delView', {
                path: '/job/talentPool/detail',
                name: 'talentPoolDetail'
            })
            .then(({ visitedViews }) => {
                this.$router.push({
                    path: "/job/talentPool/list"
                })
            });
            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        },
        handleCollection(resumeId){
            var self = this;

            (function() {
                self.formModel.resumeId = resumeId;

                return recruitmentCollectionApi.add(self.formModel);
            })().then(function(response) {
                var jsonData = response.data;

                if (jsonData.result) {
                    self.$message({
                        message: "收藏简历成功！",
                        type: "success"
                    });

                }
                else{
                    self.$message({
                        message: jsonData.message,
                        type: "error"
                    });
                }
            });
        },
        handleDownload(){
            var self = this;

            self.loading = true;

            var formData = new FormData();

            formData.append("id",self.id);

            jobUserApi
                .exportXls(formData)
                .then(function (response) {
                self.loading = false;

                var jsonData = response.data;

                if(jsonData.result) {
                    //导出
                    self.$message({
                        showClose: true,
                        type: "success",
                        message: `报表已生成，<a href="${jsonData.data}">请点击链接下载</a>`,
                        dangerouslyUseHTMLString: true,
                        duration: 30000,
                    });
                }

                })
                .catch((error) => {
                self.loading = false;
                // self.$message.error(error + "");
                });
            },
    },
    async mounted() {
        var self = this;
        self.loading = true;

        self.id = this.$route.query.businessKey;

        (function() {
            return jobUserApi.edit(self.id);
        })()
        .then(response => {
            var jsonData = response.data;
            self.loading = false;

            if (jsonData.result) {
                self.formModel = jsonData.data;
                self.formModel.id = this.businessKey;
            } else {
            self.$message.error(jsonData.message + "");
            }
        })
        .catch(error => {
            self.$message.error(error + "");
        });
    }
}
</script>