cmanager/src/views/util/mission-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.missionTitle
              }}</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) }} 至
                {{ 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 }} /
                {{ model.skillNames }}
              </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.missionDesc
              }}</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.missionCompanyName
              }}</el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="企业规模：">{{
                model.missionCompanyScale
              }}</el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="企业性质：">{{
                model.missionCompanyNature
              }}</el-form-item>
            </el-col>
            <el-col span="12">
              <el-form-item label="所属行业：">{{
                model.missionCompanyIndustry
              }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col span="24">
              <el-form-item label="企业介绍：">{{
                model.missionCompanyDescription
              }}</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>