storevisit-ui-mobile/src/views/week/reportCustom.vue

<template>
  <div class="reportCustom" v-if="fromData && fromData.length">
    <van-form ref="tabstoreVal" :readonly="disabled">
      <template v-for="(value, ind) in fromData">
        <template v-if="value.sfaReportCustomCollections">
          <div
            v-for="(item, index) in value.sfaReportCustomCollections"
            :key="item.reportCustomCollectionId">
            <div v-if="item.reportCustomCollectionType == 'sz'" class="formLabel z-cell">
              <van-cell>
                <template #title>
                  <span v-if="item.isMust == '1'" class="van-f-red">*</span>
                  {{ filterIndex(ind, index) + 1 + '.' }}
                  {{ item.reportCustomCollectionName }}
                </template>
              </van-cell>
              <van-field
                :name="item.reportCustomCollectionName"
                v-model="item.answerValue"
                :placeholder="item.remark"
                type="number"
                @input="numberFn(item, index)"
                :rules="[
                  {
                    required: item.isMust == '1',
                    message: item.remark || '请输入' + item.reportCustomCollectionName,
                  },
                ]"></van-field>
            </div>
            <div v-if="item.reportCustomCollectionType == 'wb'" class="formLabel z-cell">
              <van-cell>
                <template #title>
                  <span v-if="item.isMust == '1'" class="van-f-red">*</span>
                  {{ filterIndex(ind, index) + 1 + '.' }}
                  {{ item.reportCustomCollectionName }}
                </template>
              </van-cell>
              <van-field
                :name="item.reportCustomCollectionName"
                v-model="item.answerValue"
                :formatter="formatter"
                autosize
                type="textarea"
                maxlength="800"
                :placeholder="item.remark"
                :rules="[
                  {
                    required: item.isMust == '1',
                    message: item.remark || '请输入' + item.reportCustomCollectionName,
                  },
                ]"></van-field>
            </div>
            <div v-if="item.reportCustomCollectionType == 'duox'" class="formLabel z-cell">
              <van-cell>
                <template #title>
                  <span v-if="item.isMust == '1'" class="van-f-red">*</span>
                  {{ filterIndex(ind, index) + 1 + '.' }}
                  {{ item.reportCustomCollectionName }}
                </template>
              </van-cell>
              <van-field
                :name="item.reportCustomCollectionName"
                :rules="[
                  {
                    required: item.isMust == '1',
                    message: '请选择' + item.reportCustomCollectionName,
                  },
                ]">
                <template #input>
                  <z-checkbox
                    :textc="item.reportCustomOptionId"
                    :zCheckboxcolumns="item.sfaReportCustomOptions"
                    :id="'reportCustomOptionId'"
                    :disabled="disabled"
                    @zSelectVal="zSelectVal"></z-checkbox>
                </template>
              </van-field>
              <p style="color: red; font-size: 12px; margin: 0; text-align: right">
                {{ item.remark }}
              </p>
            </div>
            <div v-if="item.reportCustomCollectionType == 'dx'" class="formLabel z-cell">
              <van-cell>
                <template #title>
                  <span v-if="item.isMust == '1'" class="van-f-red">*</span>
                  {{ filterIndex(ind, index) + 1 + '.' }}
                  {{ item.reportCustomCollectionName }}
                </template>
              </van-cell>
              <van-field
                :name="item.reportCustomCollectionName"
                :rules="[
                  {
                    required: item.isMust == '1',
                    message: '请选择' + item.reportCustomCollectionName,
                  },
                ]">
                <template #input>
                  <z-radio
                    :answerType="item.reportCustomCollectionType"
                    :collectionType="item.collectionType"
                    :textc="item.reportCustomOptionId"
                    :zRadiocolumns="item.sfaReportCustomOptions"
                    :id="'reportCustomOptionId'"
                    :disabled="disabled"
                    @zSelectVal="zSelectVal"></z-radio>
                </template>
              </van-field>
              <p style="color: red; font-size: 12px; margin: 0; text-align: right">
                {{ item.remark }}
              </p>
            </div>
          </div>
        </template>
      </template>
    </van-form>
  </div>
</template>
<script>
import zRadio from '@/components/componentZRadio';
import zCheckbox from '@/components/componentZCheckbox';
export default {
  components: { zRadio, zCheckbox },
  props: {
    reportCustomData: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    reportCustomData: {
      handler(val) {
        this.postName = localStorage.getItem('postName');
        this.filterFromData(val);
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      fromData: null,
      postName: '',
    };
  },
  methods: {
    filterIndex(index, subIndex) {
      let count = 0;
      for (let i = 0; i < index; i++) {
        count += this.fromData[i].sfaReportCustomCollections
          ? this.fromData[i].sfaReportCustomCollections.length
          : 0;
      }
      return count + subIndex;
    },
    filterFromData(val) {
      // 公装销售专员 写死 不用填写 未拜访原因
      // if (this.postName == '公装销售专员') {
      //   let fromData = JSON.parse(JSON.stringify(val));
      //   let reportCustomAnswers = [];
      //   for (let i = 0; i < fromData.length; i++) {
      //     let arr1 = fromData[i];
      //     let sfaReportCustomCollections = [];
      //     let customData = fromData[i].sfaReportCustomCollections
      //       ? fromData[i].sfaReportCustomCollections
      //       : [];
      //     for (let x = 0; x < customData.length; x++) {
      //       // sameDayWhetherVisit 2 未拜访
      //       if (customData[x].sameDayWhetherVisit != '2') {
      //         sfaReportCustomCollections.push(customData[x]);
      //       }
      //     }
      //     arr1.sfaReportCustomCollections = sfaReportCustomCollections;
      //     reportCustomAnswers.push(arr1);
      //   }
      //   console.log(reportCustomAnswers);
      //   this.fromData = reportCustomAnswers;
      // } else {
      this.fromData = val;
      // }
    },
    numberFn(val, index) {
      if (val.answerValue) {
        if (!/^[+-]?\d*\.{0,1}\d{0,1}$/.test(val.answerValue)) {
          val.answerValue = val.answerValue.replace(
            /\.\d{2,}$/,
            val.answerValue.substr(val.answerValue.indexOf('.'), 3),
          );
        }
      }
    },
    formatter(value) {
      return value.replace(
        /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
        '',
      );
    },
    zSelectVal(value) {
      console.log(value);
      // var collectionAnswerlisd = this.collectionAnswerlisd;
      // if (collectionAnswerlisd.length > 0) {
      //   var num = 0;
      //   for (var a = 0; a < collectionAnswerlisd.length; a++) {
      //     if (collectionAnswerlisd[a].id == value.id) {
      //       collectionAnswerlisd[a] = value;
      //       num = 0;
      //     } else {
      //       num = 1;
      //     }
      //   }
      //   if (num > 0) {
      //     collectionAnswerlisd.push(value);
      //   }
      // } else {
      //   collectionAnswerlisd.push(value);
      // }
      // this.collectionAnswerlisd = collectionAnswerlisd;
    },
  },
};
</script>
<style lang="scss">
.reportCustom {
  .van-f-red {
    color: red;
    width: 8px;
    display: inline-block;
    line-height: 26px;
  }

  .formLabel {
    // margin: 0 16px;
    border-bottom: 1px solid #f1f1f1;
  }

  .formLabel .van-cell {
    padding: 10px 0;
  }

  .formLabel .van-cell::after {
    border: 0;
  }

  .formLabel .van-field {
    border: 1px solid #f1f1f1;
    padding: 0;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }
  .van-field__control {
    background-color: white !important;
    padding: 0 10px;
  }

  .formLabel .formLabeltitle {
    position: absolute;
    top: 8px;
  }

  .lineGrey {
    height: 10px;
    width: 100%;
    background: #f1f1f1;
  }

  .z-checkbox .van-radio {
    padding: 6px 0;
  }

  .z-cell .van-cell__title {
    font-size: 16px;
  }
  .van-form {
    background-color: white;
  }
}
</style>