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 }}
              </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="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].label }} {{ city[1].label }}
                {{ 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>