vue-admin-template/src/views/person/components/WorkInformation.vue

<template>
  <div class="info-body">
    <div class="info-header">
      <span v-if="personData.level" class="header-left">
        <span class="text-key">个人职级: </span>
        <span class="text-value">{{ personData.level }} </span>
      </span>
      <span class="header-left">
        <span class="text-key">用工形式: </span>
        <span class="text-value">{{ personData.jobform }}</span>
      </span>
      <span class="header-right text-value"
        >{{ personData.person_status }}
        <span
          class="point"
          :style="{
            borderColor: personData.person_status == '在职' ? '#09f175' : '#adadad',
          }"
        ></span>
      </span>
    </div>

    <p class="item-title-p">岗位信息</p>
    <div class="info-box">
      <div>
        <span class="text-key">机构名称: </span>
        <span class="text-value">{{ personData.organization }}</span>
      </div>
      <div>
        <span class="text-key">部门名称: </span>
        <span class="text-value">{{ personData.department }}</span>
      </div>
      <div>
        <span class="text-key">岗位名称: </span>
        <span class="text-value">{{ personData.jobname }}</span>
      </div>
      <div>
        <span class="text-key">岗位类别: </span>
        <span class="text-value">{{ personData.jobtype }}</span>
      </div>
      <!-- <div>
        <span class="text-key">现岗位起始时间: </span>
        <span class="text-value">{{ personData.现岗位起始时间 }}</span>
      </div> -->
    </div>

    <p class="item-title-p">职务信息</p>
    <div class="info-box" v-if="personData.company">
      <div>
        <span class="text-key">任职单位: </span>
        <span class="text-value">{{ personData.company }}</span>
      </div>
      <div>
        <span class="text-key">职务名称: </span>
        <span class="text-value">{{ personData.dutyname }}</span>
      </div>
      <div>
        <span class="text-key">职务属性: </span>
        <span class="text-value">{{ personData.attribute }}</span>
      </div>
      <div>
        <span class="text-key">职务级别: </span>
        <span class="text-value">{{ personData.dutylevel }}</span>
      </div>
      <div>
        <span class="text-key">任现职务级别时间: </span>
        <span class="text-value">{{ personData.duty_level_start_time }}</span>
      </div>
    </div>

    <p class="item-title-p">履历</p>
    <div class="info-table-box">
      <table class="info-table">
        <tr>
          <td class="text-key">参加工作时间:</td>
          <td class="text-value">{{ personData.work_start_time }}</td>
          <td class="text-key">预计退休年龄:</td>
          <td class="text-value">{{ personData.retire_age }}</td>
          <td class="text-key">工龄:</td>
          <td class="text-value">{{ workAge }}</td>
        </tr>
        <tr>
          <td class="text-key">进入行业时间:</td>
          <td class="text-value">{{ personData.industry_start_time }}</td>
          <td class="text-key">行业入职类别:</td>
          <td class="text-value">{{ personData.industry_entry }}</td>
          <td class="text-key">行龄:</td>
          <td class="text-value">{{ industryAge }}</td>
        </tr>
        <tr>
          <td class="text-key">到本单位时间:</td>
          <td class="text-value">{{ personData.company_start_time }}</td>
          <td class="text-key">本单位入职类别:</td>
          <td class="text-value">{{ personData.company_entry }}</td>
          <td class="text-key">厂龄:</td>
          <td class="text-value">{{ factoryAge }}</td>
        </tr>
        <tr>
          <td class="text-key">任现岗位时间:</td>
          <td class="text-value">{{ personData.job_start_time }}</td>
          <td class="text-key"></td>
          <td class="text-value"></td>
          <td class="text-key">岗龄:</td>
          <td class="text-value">{{ jobAge }}</td>
        </tr>
        <tr>
          <td class="text-key">档案保管机构:</td>
          <td class="text-value">{{ personData.file }}</td>
          <td class="text-key"></td>
          <td class="text-value"></td>
          <td class="text-key"></td>
          <td class="text-value"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      personData: this.data,
    };
  },
  mounted() {
  },
  computed: {
    workAge: function () {
      return this.getAge(this.personData.work_start_time);
    },
    industryAge: function () {
      return this.getAge(this.personData.industry_start_time);
    },
    factoryAge: function () {
      return this.getAge(this.personData.company_start_time);
    },
    jobAge: function () {
      return this.getAge(this.personData.job_start_time);
    },
  },
  methods: {
    getAge(birthday) {
      //出生时间 毫秒
      let birthDayTime = new Date(birthday).getTime();
      if (birthDayTime !== birthDayTime) {
        // NaN
        return "-";
      }
      //当前时间 毫秒
      let nowTime = new Date().getTime();
      //一年毫秒数(365 * 86400000 = 31536000000)
      return Math.ceil((nowTime - birthDayTime) / 31536000000);
    },
  },
};
</script>

<style scoped>
.info-body {
  overflow: auto;
}

.info-header {
  /* height: 35px; */
}

.header-left {
  margin-right: 40px;
}

.header-right {
  float: right;
  margin-right: 20px;
  position: relative;
}

.text-key {
  color: #909399;
}

.text-value {
  font-size: 1.1em;
}

.point {
  content: " ";
  border-style: solid;
  border-width: 3px;
  border-radius: 3px; /*设置圆角*/
  position: absolute;
  z-index: 1000;
  right: 0;
  margin-right: -8px;
}

.info-box {
  border: 1px solid #ebebeb;
  margin-top: 20px;
  padding: 10px 20px 0px;
}

.info-box > div {
  margin-bottom: 10px;
}

.info-table-box {
  margin-top: 20px;
  border: 1px solid #ebebeb;
}

.info-table {
  padding: 10px 20px 10px;
}

.info-table td {
  border-width: 0px !important;
}

.info-table tr {
  height: 25px;
}

.info-table td {
  width: 150px;
}

.item-title-p {
  border-left: 4px solid #000;
  padding-left: 10px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
}
</style>