love-donation-portal/src/views/job/recruitmentHR-lookUp.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;
}
.user-panel{
    margin-top: 50px;
}


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

.el-aside {
// background-color: #D3DCE6;
// color: #333;
    text-align: left;

}

.el-main {
//background-color: #E9EEF3;
//color: #333;
text-align: left;
padding: 0px;
margin-left: 20px;
margin-right: 20px;
margin-top: 5px;
}

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;
}
.el-divider--vertical{
    height: auto;
}
.leftMain{
    margin-left: 50px;
    margin-right: 30px;
    margin-bottom: 50px;
}
.el-container i{
    margin-right: 10px;
}
.leftTitle{
    margin-bottom: 20px;
}
.leftTag{
    margin-top: 30px;
}
.geSpan{
    margin-left: 10px;
    margin-right: 10px;
}
.geSpan2{
    margin-left: 20px;
    margin-right: 20px;
}
.tag1{
    margin-right: 20px;
}
.div1{
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 16px;
}
.div2{
    font-size: 16px;
}
.div3{
    margin-top: 30px;
    margin-bottom: 30px;
}
.xinzi{
    float:right;
    font-size: 28px;
    color:#FF8000;
}
.titleSpan{
    font-size: 28px;
}
.leftMiddle{
    margin-top: 30px;
    margin-bottom: 20px;
}
.leftMiddle p{
    font-size: 14px;
}
.rightTitle{
    font-size: 20px;
}
.rightDiv1{
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 14px;
}
.rightDiv2{
    margin-top: 50px;
}
.companyLogoSpan{
    float:right;
}
.companyCheckDiv{
    margin-top: 20px;
}
.leftFoot{
    margin-top: 50px;
}
.leftFoot span{
    margin-right: 50px;
    color: #7d90b5;
    font-size: 14px;
}
.titleP{
    font-weight: bold;
}

</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="1000px">
                    <div class="leftMain">
                        <div class="leftTop">
                            <div class="leftTitle">
                                <span class="titleSpan">{{formModel.positionName}}<span class="geSpan">|</span>{{formModel.title}}</span>
                                <span class="xinzi">{{formModel.wageTypeName}}</span>
                            </div>
                            <div class="leftTag">
                                <el-tag class="tag1" type="info" v-for="(item,index) in formModel.tagList" v-bind:key="index">{{item}}</el-tag>
                            </div>
                            <div class="div1">
                                <span>招{{formModel.positionNumber}}人</span>
                                <span class="geSpan2">|</span>
                                <span>{{formModel.positionSexN}}</span>
                                <span class="geSpan2">|</span>
                                <span>{{formModel.educationName}}</span>
                                <span class="geSpan2">|</span>
                                <span>{{formModel.workYearName}}</span>
                            </div>
                            <div class="div2">
                                <i class="el-icon-location"></i>
                                <span>{{formModel.address}}</span>
                                <span style="margin-left:20px"><el-link type="primary">查看地图</el-link></span>
                            </div>
                            <div class="div3">
                                <el-button type="primary" plain icon="el-icon-edit" @click="handleEdit(row)">编辑岗位</el-button>
                                <el-button type="primary" icon="el-icon-download" v-if="formModel.status!='0'" @click="handleDown(row)">下架岗位</el-button>
                                <el-button type="danger" icon="el-icon-error" @click="handleDelete">删除岗位</el-button>
                            </div>
                        </div>
                        <el-divider></el-divider>
                        <div class="leftMiddle">
                            <div class="leftTitle">
                                <span class="titleSpan">职位描述</span>
                            </div>
                            <div class="leftDesc">
                                <p class="titleP">工作内容:</p>
                                <p>{{formModel.positionMessage}}</p>
                                <p class="titleP">职位要求:</p>
                                <p>{{formModel.requirements}}</p>
                                
                            </div>
                        </div>
                         <div class="leftFoot">
                             <span>更新：{{formModel.updateTime}}</span>
                             <span>浏览：{{formModel.readingTimes}}</span>
                             <span>收藏：{{formModel.collectionTimes}}</span>
                             <span>投递：{{formModel.deliveryTimes}}</span>
                         </div>
                    </div>
                   
                </el-aside>
                <el-divider direction="vertical" style="height:auto"></el-divider>
                <el-main style="height:500px">
                    <div class="rightMain">
                        <div class="rightTitle">
                            {{formModel.companyName}}
                        </div>
                        <div class="rightDiv1">
                            <span>{{formModel.companyIndustryN}}</span>
                            <span class="geSpan2">|</span>
                            <span>{{formModel.companyScaleN}}</span>
                            <div class="companyLogoSpan">
                                <el-image
                                style="width: 100px; height: 100px"
                                :src="formModel.companyLogo" fit="fit"></el-image>
                            </div>
                            <div class="companyCheckDiv">
                                <el-tag type="primary" v-if="formModel.isCertification">企业已认证</el-tag>
                                <el-tag type="danger" v-else>企业未认证</el-tag>
                            </div>
                        </div>
                         <div class="rightDiv2">
                             <i class="el-icon-location"></i>
                            <span>湖北省荆州市沙市区江津东路附155号荆鹏软件园</span>
                         </div>
                    </div>
                </el-main>
            </el-container>
        </div>
        <div style="background-color:#EFEFEF;padding:5px;">
            <el-button @click="closeDialog">关闭</el-button>
        </div>
        <recruitmentHR-detail
        v-if="showModal"
        :businessKey="businessKey1"
        :title="modalTitle"
        @close="onDetailModalClose"
        ></recruitmentHR-detail>
    </div>
</template>
<script>
import Constant from "@/constant";
import recruitmentApi from "@/api/job/recruitment";
import RecruitmentHRDetail from "./recruitmentHR-detail";

export default {
    name: "recruitmentHRLookUp",
    props: ["businessKey", "title"],
    data() {
        return {
            id:"",
            formModel: {},
            showDialog: true,
            loading: false,
            submitting: false,
            showModal: false,
            modalTitle: "",
            businessKey1: "",
        }
    },
    methods:{
        closeDialog() {
            //删除当前页面
            this.$store.dispatch('tagsView/delView', {
                path: '/job/recruitmentHR/lookUp',
                name: 'recruitmentHRLookUp'
            })
            .then(({ visitedViews }) => {
                this.$router.push({
                    path: "/job/recruitmentHR/list"
                })
            });

            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        },
        handleEdit() {
            this.modalTitle = "编辑岗位";
            this.businessKey1 = this.id;
            this.showModal = true;
        },
        handleDown(){
            var self = this;

            self
                .$confirm("是否确定下架招聘信息吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                recruitmentApi.down(self.id).then(function (response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                        self.closeDialog();
                    }
                });
                });
        },
        handleDelete() {
            var self = this;

            self
                .$confirm("是否确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                })
                .then(() => {
                recruitmentApi.remove(self.id).then(function (response) {
                    var jsonData = response.data;

                    if (jsonData.result) {
                        self.closeDialog();
                    }
                });
            });
        },
        onDetailModalClose(refreshed) {
            //保存成功后回调
            var self = this;
            this.showModal = false;

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

                    if (jsonData.result) {
                        self.formModel = jsonData.data;

                    } else {
                    self.$message.error(jsonData.message + "");
                    }
                })
                .catch((error) => {
                    self.$message.error(error + "");
                });
            }
        },
    },
    mounted: function () {
        var self = this;

        self.id = this.$route.query.businessKey;
        
        (function () {
            return recruitmentApi.edit(self.id);
        })()
        .then((response) => {
            var jsonData = response.data;
            self.loading = false;

            if (jsonData.result) {
                self.formModel = jsonData.data;

            } else {
            self.$message.error(jsonData.message + "");
            }
        })
        .catch((error) => {
            self.$message.error(error + "");
        });
    },
    components: {
        "recruitmentHR-detail": RecruitmentHRDetail,
    },
}
</script>