love-donation-portal/src/views/job/recruitment-detail.vue

<style scoped>
.user-panel {
  margin: 10px auto;
}
.td_tit1 {
  font-size:26px;
  color: #000;
  height: 50px;
}
.td_tit2 {
  font-size:18px;
  color: #000;
  height: 50px;
}
.td_tit3 {
  width: 70px;
  height: 30px;
}
.td_con {
  min-width:100px;
  color: #000;
  height: 30px;
}
.divider {
  border-top:1px dashed #cccccc;
  height: 1px;
  overflow:hidden;
}
</style>
<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="title"
    :modal-append-to-body="false"
    style="text-align: left"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <div class="user-panel" v-loading="loading">
      <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="width:70%; padding-right:40px;">
            <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td class="td_tit1" style="padding-bottom:10px">{{formModel.title}}</td>
                <td class="td_tit1" style="text-align:right;color:#ff0000">{{formModel.wageTypeName}}</td>
              </tr>
              <tr>
                <td colspan="2" class="td_tit3" style="padding-bottom:30px">
                  <el-tag v-for="item in formModel.tagList" :key="item" size="medium" type="info" style="margin-right:10px">{{item}}</el-tag>
                </td>
              </tr>
              <tr>
                <td colspan="2" class="td_tit3">{{formModel.requirements}}</td>
              </tr>
              <tr>
                <td colspan="2" class="td_tit3" style="padding-bottom:10px">{{formModel.address}}</td>
              </tr>
              <tr>
                <td colspan="2" class="divider"></td>
              </tr>
              <tr>
                <td colspan="2" class="td_tit2" style="padding-top:10px">职位描述</td>
              </tr>
              <tr>
                <td colspan="2" class="td_con">{{formModel.positionMessage}}</td>
              </tr>
              <tr>
                <td v-if="formModel.updateTime != null" colspan="2" class="td_con" style="padding-top:40px">
                  更新：{{formModel.updateTime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  浏览：{{formModel.readingTimes}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  收藏：{{formModel.collectionTimes}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  投递：{{formModel.deliveryTimes}}
                </td>
                <td v-else colspan="2" class="td_con" style="padding-top:40px">
                  更新：{{formModel.createTime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  浏览：{{formModel.readingTimes}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  收藏：{{formModel.collectionTimes}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  投递：{{formModel.deliveryTimes}}
                </td>
              </tr>
            </table>
          </td>
          <td style="padding-left:20px; border-left:1px dashed #cccccc;" valign="top">
            <table style="width:100%;" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td colspan="2" class="td_tit2" style="padding-bottom:10px">{{formModel.companyName}}</td>
              </tr>
              <tr>
                <td class="td_con">{{formModel.companyIndustryN}} | {{formModel.companyScaleN}}</td>
                <td rowspan="2" align="right" valign="top">
                    <el-avatar :size="56" shape="square" :src="formModel.companyLogo"></el-avatar>
                </td>
              </tr>
              <tr>
                <td class="td_con">
                  <el-tag size="medium">企业已认证</el-tag>&nbsp;
                </td>
              </tr>
              <tr>
                <td colspan="2" class="td_con" style="padding-top:30px">{{formModel.address}}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import recruitmentApi from "@/api/job/recruitment";

export default {
  props: ["businessKey", "title"],
  data() {
    return {
      formModel: {},
      showDialog: true,
      loading: false,
      submitting: false,
    };
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
  },
  mounted: function () {
    var self = this;

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

        if (jsonData.result) {
          self.formModel = jsonData.data;
          self.formModel.companyLogo += '?x-oss-process=image/resize,m_fill,w_64,h_64';
        } else {
          self.$message.error(jsonData.message + "");
        }
      })
      .catch((error) => {
        self.$message.error(error + "");
      });
  },
};
</script>