configurable.vue

<template>
  <div>
    <div v-if="+projectType === 20" class="block_box">
      <div class="bi_title">
        <div class="bi_title_text">
          <div class="bi_title_text_content">
            <div class="bi_title_text_index">02</div>
            目标基础信息
          </div>
          <img
            src="//cdn.yxvzb.com/WEB/SaaS/images/bi/svg/title.png"
            alt
            class="bi_title_text_icon"
            width="62"
          />
        </div>
      </div>
      <div class="info">
        <div
          class="info-item"
          style="display: inline-block; vertical-align: top; width: 550px"
        >
          <div>{{ resData.targetTitle }}</div>
          <div style="margin-top: 40px">{{ resData.customerName }}</div>
        </div>
        <div
          class="info-item"
          style="display: inline-block; vertical-align: top"
        >
          <div>{{ resData.timeTitle }}</div>
          <div style="margin-top: 40px">
            {{ `${dateFormat(resData.startDt)}-${dateFormat(resData.endDt)}` }}
          </div>
        </div>
      </div>
      <div class="info">
        <div class="info-item" style="display: inline-block; width: 100%">
          <div>{{ resData.locationTitle }}</div>
          <img
            style="
              width: 530px;
              height: 265px;
              display: block;
              margin-top: 40px;
            "
            width="530"
            height="265"
            :src="resData.addressWatermarkPicUrl"
            alt="img"
          />
        </div>
      </div>
    </div>
    <div class="block_box">
      <div class="bi_title">
        <div class="bi_title_text">
          <div class="bi_title_text_content">
            <!-- 任务内容信息标题顺序  可配置是03 调研是02 -->
            <div class="bi_title_text_index">
              {{ +projectType === 20 ? '03' : '02' }}
            </div>
            任务内容信息
          </div>
          <img
            src="//cdn.yxvzb.com/WEB/SaaS/images/bi/svg/title.png"
            alt
            class="bi_title_text_icon"
            width="62"
          />
        </div>
      </div>
      <div>
        <div class="block_box information" v-if="+projectType === 21">
          <img :src="resData.channelInformation.picUrl" />
          <div style="margin:10px">
            <span>资讯标题：</span>
            <strong>
              {{ resData.channelInformation.title }}
            </strong>
          </div>
        </div>
        <div v-html="resData.channelInformation.content"></div>
      </div>
      <div v-for="(item, index) in resData.contentTitleList" :key="item.id">
        <!-- 单选题/多选/投票题 -->
        <div v-if="[1, 2, 3].includes(item.type)" class="question-item">
          <div class="question-item-title">
            <span>{{ `${index + 1}.${item.title}` }}</span>
            <span>{{ titleMap(item.type) }}</span>
            <div>
              此条任务收集的选择项为：{{ isMultiple(item.type, item.answer) }}
            </div>
          </div>
          <div
            v-for="(cItem, cIndex) in item.options"
            :key="cIndex"
            :class="`question-item-option${item.type == 2 ? ' checkbox' : ''}`"
          >
            {{ cItem }}
          </div>
          <div
            style="color: #666666; font-size: 14px; margin-top: 30px"
            v-if="item.remark"
          >
            备注：{{ item.remark }}
          </div>
        </div>

        <!-- 单填空/多填空/数字填空/打分/时间/月度/描述 -->
        <div
          v-else-if="[4, 5, 6, 7, 19, 14, 15, 17, 18].includes(item.type)"
          class="question-item"
        >
          <div class="question-item-title">
            <span>{{ `${index + 1}.${item.title}` }}</span>
            <span>{{ titleMap(item.type) }}</span>
          </div>
          <div class="question-item-answer">
            {{
              item.type == 5 || item.type == 18
                ? item.answer.join(',')
                : item.type == 6
                ? item.answer + '分'
                : item.answer
            }}
          </div>
          <div
            style="color: #666666; font-size: 14px; margin-top: 30px"
            v-if="item.remark"
          >
            备注：{{ item.remark }}
          </div>
        </div>
        <!-- 图片题/签名题/定位题 -->
        <div v-else-if="[20, 13, 16].includes(item.type)" class="question-item">
          <div class="question-item-title">
            <span>{{ `${index + 1}.${item.title}` }}</span>
            <span>{{ titleMap(item.type) }}</span>
          </div>
          <img
            v-if="item.type === 20 || item.type === 16"
            style="margin-top: 10px"
            width="180"
            :src="item.type === 20 ? item.answer : item.addressPicUrl"
            alt="img"
          />
          <img
            v-else
            v-for="file in item.answer"
            :key="file"
            style="margin-top: 10px"
            width="180"
            :src="file"
            alt="img"
          />
          <div
            style="color: #666666; font-size: 14px; margin-top: 30px"
            v-if="item.remark"
          >
            备注：{{ item.remark }}
          </div>
        </div>
        <!-- 文件题 -->
        <div
          v-else-if="[8, 9, 10, 11, 12].includes(item.type)"
          class="question-item"
        >
          <div class="question-item-title">
            <span>{{ `${index + 1}.${item.title}` }}</span>
            <span>{{ titleMap(item.type) }}</span>
          </div>
          <div
            v-for="file in item.answer"
            :key="file"
            class="question-item-answer"
          >
            {{ file }}
          </div>
          <div
            style="color: #666666; font-size: 14px; margin-top: 30px"
            v-if="item.remark"
          >
            备注：{{ item.remark }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dateFormat from '@/utils/dateFormat';

const qustionMap = {
  1: '【单选题】',
  2: '【多选题】',
  3: '【单选投票题】',
  4: '【单项填空题】',
  5: '【多项填空题】',
  6: '【打分题】',
  7: '【地址题】',
  8: '【上传附件】',
  9: '【上传pdf】',
  10: '【上传word】',
  11: '【上传excel】',
  12: '【上传ppt】',
  13: '【图片题】',
  14: '【时间题】',
  15: '【月度题】',
  16: '【定位题】',
  17: '【描述题】',
  18: '【描述题】',
  19: '【数字填空题】',
  20: '【图片题】',
  22: '【姓名填空题】'
};
export default {
  props: {
    resData: Object,
    projectType: [String, Number]
  },
  data() {
    return {};
  },
  methods: {
    dateFormat(e) {
      return dateFormat(e);
    },
    isMultiple(type, answer) {
      if (type == 2) {
        if (Array.isArray(answer)) {
          return answer.join(',');
        } else {
          return JSON.parse(answer).join(',');
        }
      } else {
        return answer;
      }
    },
    titleMap(type) {
      return qustionMap[type];
    }
  }
};
</script>

<style lang="scss" scoped>
.information {
  display: flex;
  align-items: center;
  margin: 15px;
  img {
    width: 300px;
    height: 150px;
  }
}
</style>