main.vue

<!--
 * @Description:
 * @Date: 2021-12-17 13:04:30
-->
<template>
  <div style="font-size: 14px;">
    <div class="task-log-pdf-title" style="font-size: 29px">
      {{ baseInfo.fullName }} -- 任务记录
    </div>

    <div style="padding:0 29px 0px;background:#fff;">
      <BiTitle index="1" name="任务基础信息"></BiTitle>
      <div style="display: block;overflow: hidden">
        <div class="panel-row">
          <div class="panel-cell" v-if="+this.search.party !== 1">
            <span class="panel-cell-label">
              项目执行人: {{ baseInfo.fullName }}
            </span>
            <!-- <span class="panel-cell-ctx">{{ baseInfo.fullName }}</span> -->
          </div>
          <div
            class="panel-cell"
            :style="{ width: +this.search.party !== 1 ? '30%' : '100%' }"
          >
            <span class="panel-cell-label">
              项目名称: {{ baseInfo.projectName }}
            </span>
            <!-- <span class="panel-cell-ctx">{{ baseInfo.projectName }}</span> -->
          </div>
          <div class="panel-cell" v-if="+this.search.party !== 1">
            <span class="panel-cell-label">电话: {{ baseInfo.phone }}</span>
            <!-- <span class="panel-cell-ctx">{{ baseInfo.phone }}</span> -->
          </div>
        </div>

        <div class="panel-row">
          <div class="panel-cell">
            <span class="panel-cell-label">
              项目方: {{ baseInfo.industryEnterpriseName }}
            </span>
            <!-- <span class="panel-cell-ctx">
              {{ baseInfo.industryEnterpriseName }}
            </span> -->
          </div>
          <div class="panel-cell">
            <span class="panel-cell-label">
              服务商: {{ baseInfo.enterpriseName }}
            </span>
            <!-- <span class="panel-cell-ctx">{{ baseInfo.enterpriseName }}</span> -->
          </div>
          <div class="panel-cell">
            <span class="panel-cell-label">
              任务提交时间: {{ baseInfo.createDt }}
            </span>
            <!-- <span class="panel-cell-ctx">{{ baseInfo.createDt }}</span> -->
          </div>
        </div>

        <div class="panel-row">
          <div class="panel-cell">
            <span class="panel-cell-label">
              任务编码: {{ baseInfo.taskCode }}
            </span>
            <!-- <span class="panel-cell-ctx">
              {{ baseInfo.taskCode }}
            </span> -->
          </div>
        </div>
      </div>
    </div>

    <div style="padding:0 29px 29px;background:#fff;margin-top: 20px">
      <BiTitle index="2" name="任务内容信息"></BiTitle>
      <div class="panel-row">
        <!-- 根据后端返回数据 -->
        <div class="panel-cell" v-for="(item, k) in ctxInfo" :key="k">
          <span
            class="panel-cell-label"
            :style="{
              width: maxLabelWidth
            }"
          >
            {{ item.label }}: {{ item.value }}
          </span>
          <!-- <span class="panel-cell-ctx">{{ item.value }}</span> -->
        </div>
        <div>
          <div
            style="display: inline-block;width: 100%;height: 50px;line-height: 50px;color:#9aa2b2"
          >
            <p class="panel-cell-label">
              传递信息 ：
            </p>
            <div
              style="text-indent: 2em;line-height: 25px"
              v-for="(item, k) in cdInfo"
              :key="k"
            >
              {{ item.informationName }}
            </div>
          </div>
        </div>
        <!-- 图片-->
        <div
          style=" display: flex;background:#fff;overflow: hidden;margin-top: 10px"
        >
          <div
            style="display: inline-block;width: 33%;line-height: 50px;color:#9aa2b2"
          >
            <p class="panel-cell-label" style>
              信息反馈记录:
            </p>
            <div style="padding:20px 20px 0 0">
              <img style="width: 100%;" :src="feedBackUrl" alt />
            </div>
          </div>
          <div
            style="display: inline-block;width: 33%;line-height: 50px;color:#9aa2b2"
          >
            <p class="panel-cell-label" style>
              信息转发记录:
            </p>
            <div style="padding:20px 20px 0 0">
              <img style="width: 100%;" :src="forwardUrl" alt />
            </div>
          </div>
        </div>
      </div>
    </div>

    <bi-cover-end title="信息披露"></bi-cover-end>
  </div>
</template>
<script>
/* eslint-disable */
import BiTitle from './components/title.vue';
import BiCoverEnd from './components/cover-end';
import createCtxInfo from './client.js';

export default {
  name: 'XrkTaskRecord',
  components: {
    BiCoverEnd,
    BiTitle
  },
  props: {
    getBaseInfo: {
      type: Function,
      default: () => {}
    },
    getCtxInfo: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      baseInfo: [], //基础信息
      ctxInfo: [], //内容信息

      visitPlanInformation: '', // 拜访信息
      cdInfo: [], // 传递信息
      feedBackUrl: '', //反馈记录
      forwardUrl: '', //转发记录
      visitTatgetType: '',
      search: {
        party: '' //party=1 工业 party=2乙方
      },
      maxLabelWidth: ''
    };
  },
  async mounted() {
    await this.getCtxInfo().then(({ data: { data } }) => {
      this.cdInfo = data.cdInfo;
      this.feedBackUrl = data.feedBackUrl;
      this.forwardUrl = data.forwardUrl;
      this.visitPlanInformation = data.visitPlanInformation;
      this.visitTatgetType = data.visitTatgetType;
      this.ctxInfo = createCtxInfo(this.visitTatgetType, data);

      const labels = this.ctxInfo.map(i => i.label.length);
      // this.maxLabelWidth = Math.max.apply(null, labels) * 17 + 'px';
    });

    let baseInfoFields = [
      { label: '项目执行人', key: 'fullName', value: '' },
      { label: '项目名称', key: 'projectName', value: '' },
      { label: '电话', key: 'phone', value: '' },
      { label: '发行单位', key: 'industryEnterpriseName', value: '' },
      { label: '服务商', key: 'enterpriseName', value: '' },
      { label: '任务提交时间', key: 'createDt', value: '' },
      { label: '任务编码', key: 'taskCode', value: '' }
    ];
    this.$nextTick(() => {
      this.getBaseInfo().then(({ data: { data } }) => {
        let res = {};
        baseInfoFields.map(i => {
          res[i.key] = data[i.key];
        });
        this.baseInfo = res;
      });
    });
    const search = window.location.search
      .slice(1)
      .split('&')
      .reduce((acc, cur) => {
        let [key, val] = cur.split('=');
        acc[key] = val;
        return acc;
      }, {});
    this.search = search;
  }
};
</script>
<style scoped>
.panel-row {
  margin-top: 25px;
  line-break: anywhere;
  display: flex;
  flex-wrap: wrap;
}

.panel-row:not(:last-child) {
  border-bottom: 1px solid #f4f4f4;
}

.panel-cell {
  /* display: inline-table; */
  /* min-height: 50px; */
  line-height: 25px;
  padding-bottom: 10px;
  transform: translateY(1px);
  margin-right: 10px;
  width: 30%;
  color: #9aa2b2;
}

.panel-cell-label {
  color: #a9b0bd;
  margin-right: 0.5em;
}

.panel-cell-ctx {
  display: inline-block;
  padding-right: 10px;
}

.task-log-pdf-title {
  position: relative;
  /*padding-left: 29px;*/
  text-indent: 12px;
  margin-bottom: 20px;
  /*background: #fff;*/
}

.task-log-pdf-title::before {
  content: '';
  display: block;
  width: 5px;
  height: 100%;
  background: #1989fa;
  position: absolute;
  left: 0;
  top: 0;
}
</style>