cmanager/src/views/util/work-view.vue

<template>
    <div class="mission-view">
      <el-form label-position="left" size="small">
        <el-collapse v-model="activeNames" @change="handleChange" class="avue-group">
          <el-collapse-item title="岗位信息" name="1" disabled="true">
            <template slot="title">
              <div class="avue-group__header">
                <div class="avue-group__title">岗位信息</div>
              </div>
            </template>
            <el-row>
              <el-col span="12">
                <el-form-item label="岗位名称：">{{
                  model.jobName
                }}</el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="岗位编码：">{{
                  model.missionNo
                }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- <el-col span="12">
                <el-form-item label="报名截止：">{{
                  format(model.etimePub)
                }}</el-form-item>
              </el-col> -->
              <el-col span="12">
                <el-form-item label="发布时间：">{{ format(model.stime) }} </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="结束时间：">{{ format(model.etime) }} </el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
  
          <el-collapse-item title="岗位要求" name="2" disabled="true">
            <template slot="title">
              <div class="avue-group__header">
                <div class="avue-group__title">岗位要求</div>
              </div>
            </template>
            <el-row>
              <el-col span="12">
                <el-form-item label="招聘人数：">{{ model.peopleNum }}人</el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="参考工资：">{{ model.wage
                }}{{ wageUnitCategory[model.wageUnitCategory] }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="行业类型：">{{
                  model.tradeNames
                }}</el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item>
                  <label slot="label">工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;种：</label>
                  {{ model.worktypeNames }}
                </el-form-item>
              </el-col>
            </el-row>
            <!-- <el-row>
              <el-col span="24">
                <el-form-item label="技能要求：">
                  <el-tag :key="skill" v-for="skill in getSkill(model.skillNames)">{{ skill }}</el-tag>
                </el-form-item>
              </el-col>
            </el-row> -->
            <el-row>
              <el-col span="24">
                <el-form-item label="岗位描述：">{{
                  model.jobDescription
                }}</el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
  
          <el-collapse-item title="人员要求" name="3" disabled="true">
            <template slot="title">
              <div class="avue-group__header">
                <div class="avue-group__title">人员要求</div>
              </div>
            </template>
            <el-row>
              <el-col span="16">
                <el-form-item label="人员属性：">{{
                  model.userNature
                }}</el-form-item>
              </el-col>
              <!-- <el-col span="8">
                <el-form-item label="性别要求：">{{ gender[model.sex] }}</el-form-item>
              </el-col> -->
              <el-col span="8">
                <el-form-item label="年龄要求：">{{
                  model.ageDesc
                }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
  
              <el-col span="16">
                <el-form-item label="学历要求：">{{
                  education[model.education]
                }}</el-form-item>
              </el-col>
              <el-col span="8">
                <el-form-item label="经验要求：">{{
                  model.experienceDesc
                }}</el-form-item>
              </el-col>
            </el-row>
          </el-collapse-item>
  
          <el-collapse-item title="联系人" name="4" disabled="true">
            <template slot="title">
              <div class="avue-group__header">
                <div class="avue-group__title">企业信息</div>
              </div>
            </template>
            <el-row>
              <el-col span="12">
                <el-form-item label="企业名称：">{{
                  model.jobCompanyName
                }}</el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="企业规模：">{{
                  model.jobCompanyScale
                }}</el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="企业性质：">{{
                  model.jobCompanyNature
                }}</el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="所属行业：">{{
                  model.jobCompanyIndustry
                }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="24">
                <el-form-item label="企业介绍：">{{
                  model.jobCompanyDescription
                }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="8">
                <el-form-item label="联  系  人：">{{
                  model.callName
                }}</el-form-item>
              </el-col>
              <el-col span="8">
                <el-form-item label="联系方式：">{{
                  model.callTel
                }}</el-form-item>
              </el-col>
              <el-col span="8">
                <el-form-item>
                  <label slot="label">座&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：</label>
                  {{ model.callNumber }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="24">
                <el-form-item label="工作地址：" v-if="model.cityId">{{ city[0] && city[0].label }} {{ city[1] && city[1].label }}
                  {{ city[2] && city[2].label }}</el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="24">
                <el-form-item label="详细地址：">{{
                  model.address
                }}</el-form-item>
                <select-map :lat="model.lat" :lng="model.lon" :isCanEdit="false" :type="'view'"></select-map>
              </el-col>
            </el-row>
          </el-collapse-item>
        </el-collapse>
      </el-form>
    </div>
  </template>
  
  <script>
  import SelectMap from "@/components/map/selectLocation";
  import { mapGetters } from "vuex";
  import { dateFormat } from "@/util/date";
  import {
    wageUnitCategoryState,
    educationState,
    genderState,
  } from "@/common/dic";
  
  function getDic(arr) {
    let rel = {};
    arr.forEach((element) => {
      rel[element.value] = element.label;
    });
    return rel;
  }
  
  export default {
    components: { SelectMap },
    props: { model: Object },
    data() {
      return {
        activeNames: ["1", "2", "3", "4"],
        wageUnitCategory: getDic(wageUnitCategoryState),
        education: getDic(educationState),
        gender: getDic(genderState),
      };
    },
    mounted() { },
    methods: {
      getSkill(skillStr) {
        return skillStr.split(",");
      },
      format(date) {
        if (date) {
          return dateFormat(new Date(date), "yyyy/MM/dd");
        }
      },
    },
    computed: {
      ...mapGetters(["area"]),
      city() {
        return this.$store.getters.getAreaParents(this.model.cityId);
      },
    },
  };
  </script>
  
  <style>
  .mission-view .el-tag+.el-tag {
    margin-left: 5px;
  }
  
  .mission-view .el-form {
    padding: 0 20px;
  }
  
  .mission-view .el-form .el-col {
    padding: 0 10px;
  }
  
  .mission-view .el-form .el-col .el-form-item {
    margin-bottom: 18px;
  }
  
  .mission-view .el-collapse {
    border-top: 0px;
  }
  </style>