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">岗位工种：</label>
                {{ model.worktypeNames }} /
                {{ model.skillNames }}
              </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="16">
              <el-form-item label="学历要求：">{{
                  education[model.education]
                }}
              </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="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">{{ model.cityId }}
              </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>