jk-temporary-workers-portal/src/views/base/labourServices-lookUp.vue

<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="/labourServices">简历详情</a>
        </el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <div class="user-panel">
            <el-container>
                <el-aside width="150px">
                    <el-image
                        style="width: 80px; height: 80px"
                        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                        fit="fit">
                    </el-image>
                </el-aside>
                <el-main>
                    <div class="title">
                        湖北荆鹏软件集团有限公司
                    </div>
                    <div class="desc">
                        <span class="typeSpan">{{formModel.typeN}}</span>
                        <span class="creteTimeSpan">{{formModel.createTime}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div class="detail" v-html="formModel.content">
                    </div>
                </el-main>
            </el-container>
        </div>
        <div style="background-color:#EFEFEF;padding:5px;">
            <el-button @click="closeDialog">关闭</el-button>
        </div>
    </div>
</template>
<script>
import labourServicesApi from "@/api/base/labourServices";
export default {
    name: "labourServicesLookUp",
    props: ["businessKey", "title"],
    data() {
        return {
            id:"",
            formModel: {},
            showDialog: true,
            loading: false,
            submitting: false,
            showModal: false,
            modalTitle: "",
        }
    },
    methods:{
        closeDialog() {
            //删除当前页面
            this.$store.dispatch('tagsView/delView', {
                path: '/base/labourServices/lookUp',
                name: 'labourServicesLookUp'
            })
            .then(({ visitedViews }) => {
                this.$router.push({
                    path: "/base/labourServices/list"
                })
            });

            this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        },
    },
    mounted: function () {
        var self = this;

        self.id = this.$route.query.businessKey;
        
        (function () {
            return labourServicesApi.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 + "");
        });
    },
}
</script>
<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;
}
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    // background-color: #D3DCE6;
    // color: #333;
    text-align: center;
    line-height: 200px;
    margin-top: 50px;
    margin-left: 50px;
  }
  
  .el-main {
    // background-color: #E9EEF3;
    // color: #333;
    text-align: left;
    margin-top: 55px;
    line-height: 40px;
    padding-left: 0px;
  }

  .title{
      font-size: 30px;
  }

  .typeSpan{
      margin-right: 30px;
  }
  .desc{
      margin-bottom: 50px;
  }
  .detail{
      margin-top: 30px;
  }
  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;
  }
</style>