storevisit-ui-mobile/src/views/clew/complaintDetail/radioGroup.vue

<template>
  <div class="radioGroup">
    <template v-for="(val, ind) in clueOptionList">
      <!-- <div class="title" v-if="val.customerClueName">
        <span class="van-f-red" v-if="val.isMust == 0">*</span>
        {{ val.customerClueName }}
      </div> -->
      <template v-if="val.answerType == 'dx'">
        <div class="title" v-if="val.customerClueName">
          <span class="van-f-red" v-if="val.isMust == 0">*</span>
          {{ val.customerClueName }}
        </div>
        <van-radio-group v-model="val.searchValue" @change="radioGroupChange">
          <template v-for="(item, index) in val.customerClueOptionList">
            <van-radio :name="item.customerClueOptionId" :key="index" @click="radioClick">
              {{ item.customerClueOption }}
            </van-radio>
            <radioGroup
              :clueOptionList="item.customerClueItemList"
              :parentOptionList="val"
              :parentId="item.customerClueOptionId"
              v-if="val.searchValue == item.customerClueOptionId"></radioGroup>
          </template>
        </van-radio-group>
      </template>
      <!-- 回答类型:wb-文本，sz-数字，rq-日期，zp-照片，dx-单选，bg-表格 -->
      <template v-if="val.answerType == 'wb'">
        <div class="title" v-if="val.customerClueName">
          <span class="van-f-red" v-if="val.isMust == 0">*</span>
          {{ val.customerClueName }}
        </div>
        <template v-if="parentOptionList.searchValue == val.itemOptionParentId">
          <van-field
            v-model="val.answerValue"
            :placeholder="val.remark"
            :minTextLength="val.minTextLength"
            :error-message="val.remark"
            :class="{
              fieldInput: true,
              rulesClass: val.answerValue != null && val.answerValue.length < val.minTextLength,
            }" />
          <span
            class="rulesErrorMessage"
            v-if="val.answerValue != null && val.answerValue.length < val.minTextLength">
            {{ val.remark }}
          </span>
        </template>
      </template>
      <!-- 数字输入框 -->
      <template v-if="val.answerType == 'sz'">
        <div class="title" v-if="val.customerClueName">
          <span class="van-f-red" v-if="val.isMust == 0">*</span>
          {{ val.customerClueName }}
        </div>
        <van-field
          class="fieldInput"
          v-model="val.answerValue"
          :placeholder="val.remark"
          :minTextLength="val.minTextLength"
          :error-message="val.remark"
          type="number"></van-field>
      </template>
      <!-- 照片 -->
      <template v-if="val.answerType == 'zp'">
        <van-cell>
          <template #title>
            <span v-if="val.isMust == 0" class="van-f-red">*</span>
            {{ val.customerClueName }}
            <!-- 操作说明图片和电话 -->
            <taskTips
              v-if="val.contactPhone || val.examplePhoto"
              :contactPhone="val.contactPhone"
              :examplePhoto="val.examplePhoto">
            </taskTips>
          </template>
          <template #right-icon>
            <span v-if="val.isMust == '0'" style="color: red">图片必填</span>
            <div class="uploadImg">
              <complaintImg
                uploadid="uploadid2"
                :itemData="val"
                @newimgarr="newimgarr1"
                :customerClueId="val.customerClueId"
                :customerClueItemId="val.customerClueItemId"
                :required="false">
              </complaintImg>
            </div>
            <!-- <van-icon color="#666" name="photograph" size="24" @click="imgClick(val)" /> -->
          </template>
        </van-cell>
        <deletComplaintImg :itemData="val" @deleteImg="deleteImg"></deletComplaintImg>
      </template>
      <!-- 表格 -->
      <template v-if="val.answerType == 'bg'">
        <div class="title" v-if="val.customerClueName">
          <span class="van-f-red" v-if="val.isMust == 0">*</span>
          {{ val.customerClueName }}
        </div>
        <el-table :data="val.tableData.data" style="width: 100%; position: relative; left: -10px">
          <el-table-column
            v-for="(item, index) in val.tableData.title"
            :prop="item.prop"
            :label="item.label"
            align="center">
            <template slot-scope="scope">
              <template v-if="item.answerType == 'text'">
                {{ scope.row[item.prop] }}
              </template>
              <template v-if="item.answerType == 'wb'">
                <van-field v-model="scope.row[item.prop]" />
              </template>
              <template v-if="item.answerType == 'sz'">
                <van-field v-model="scope.row[item.prop]" type="number" />
              </template>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </template>
  </div>
</template>
<script>
import taskTips from '@/views/deviceWithin/taskTips';
import deletComplaintImg from '@/components/deletComplaintImg';
import complaintImg from '@/components/complaintImg';
export default {
  components: { deletComplaintImg, taskTips, complaintImg },
  name: 'radioGroup',
  props: {
    clueOptionList: {
      type: Array,
      default: () => [],
    },
    parentOptionList: {
      type: Object,
      default: () => {},
    },
    parentId: {
      type: [Number, null],
      default: null,
    },
  },
  data() {
    return {};
  },
  watch: {
    clueOptionList: {
      handler(val) {
        val.forEach((item) => {
          if (item.answerType == 'bg') {
            this.$set(item, 'tableData', JSON.parse(item.remark));
            // this.$forceUpdate();
          }
        });
      },
      immediate: true,
    },
  },
  created() {
    // console.log(this.clueOptionList);
  },
  methods: {
    radioGroupChange(name) {
      if (!name) return;
      // console.log(name);
      // console.log(this.clueOptionList);
      // 如果选中的数据有父级，将父级数据修改为选中状态
      if (this.parentOptionList && this.parentId) {
        this.$set(this.parentOptionList, 'searchValue', this.parentId);
      }
      // 获取选中数据
      let clueOptionList = this.clueOptionList.find((val) => val.searchValue == name);
      let activaRadio = clueOptionList.customerClueOptionList.find(
        (val) => val.customerClueOptionId == name
      );
      // 修改选中状态
      this.$set(activaRadio, 'value', 'Y');

      // 过滤未选中的数据
      let exceptItself = clueOptionList.customerClueOptionList.filter(
        (val) => val.customerClueOptionId !== name
      );
      // 删除未选中数据状态兄弟级和子级
      // console.log(exceptItself);
      this.toggleOtheChildren(exceptItself);
    },
    toggleOtheChildren(exceptItself) {
      if (!exceptItself) return;
      exceptItself.forEach((val) => {
        this.$set(val, 'value', 'N');
        if (val.customerClueItemList && val.customerClueItemList[0]) {
          this.$set(val.customerClueItemList[0], 'searchValue', null);
          if (
            val.customerClueItemList[0] &&
            val.customerClueItemList[0].customerClueOptionList.length
          ) {
            this.toggleOtheChildren(val.customerClueItemList[0].customerClueOptionList);
          }
        }
      });
    },
    radioClick(event) {
      // console.log(event);
    },
    imgClick(val) {
      this.show = true;
    },
    // 设置照片数据
    newimgarr1(val) {
      console.log(val);
      let fileInfoList = [{ fileUrl: val.fileUrl, id: val.id }].concat(
        val.itemData.fileInfoList ? val.itemData.fileInfoList : []
      );
      this.$set(val.itemData, 'fileInfoList', fileInfoList);
      this.setFileIdList(val);
    },
    // 设置照片id
    setFileIdList(val) {
      let fileIdList = [];
      let fileInfoList = val.itemData.fileInfoList || [];
      fileInfoList.forEach((val) => {
        fileIdList.push(val.id);
      });
      this.$set(val.itemData, 'fileIdList', fileIdList);
    },
    // 删除照片
    deleteImg(val) {
      val.itemData.fileInfoList.splice(val.index, 1);
      this.setFileIdList(val);
    },
  },
};
</script>
<style lang="scss">
.radioGroup {
  font-size: 15px;
  .van-radio {
    padding: 5px 0;
  }
  .van-radio-group {
    padding-left: 20px;
  }
  .van-cell {
    padding: 10px 0;
    /* font-size: 14px; */
  }
  .van-cell::after {
    border: 0;
  }
  .van-field {
    padding: 0;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    background-color: unset;
    height: 30px;
    line-height: 30px;
    border: 1px solid #cdc8c8;
  }
  .van-field__control {
    /* padding: 0 10px; */
    /* margin: 5px 0; */
    padding-left: 10px;
  }
  .van-radio__label {
    /* font-size: 14px; */
  }
  .van-f-red {
    font-size: 14px;
  }
  .rulesClass {
    border: 1px solid #ff0505;
  }
  .fieldInput {
    /* height: 38px; */
  }
  .rulesErrorMessage {
    color: red;
    font-size: 12px;
    padding: 3px 0;
  }
  .uploadImg {
    width: 50px;
  }
  .el-table {
    .el-table__cell {
      padding: 3px 0;
    }
  }
}
</style>