光阴的故事123123

<template>
  <div class="activityIndex page">
    <van-field
      v-model="item.complaint"
      label="文本"
      placeholder="级联选择器赋值到这里"
    />
    <van-button @click="multiplePopupVisible = true" type="primary"
      >打开级联框</van-button
    >
    <cascade-mutiple-select
      title="选择原因"
      :trees="multipleTrees"
      v-model="multiplePopupVisible"
      :actionChoose.sync="item.actionChoose"
      :parentMenuIndex="menuIndex"
      @changeVisible="openDeparment"
      @select="selectDeparment"
      @updateMenuIndex="updateMenuIndex"
      @actionChoose="inputText"
      @selectEnd="selectEnd"
    ></cascade-mutiple-select>
    <van-button @click="save" type="primary">提交</van-button>
  </div>
</template>


<script>
import Vue from 'vue'
import { Button, Popup, Field } from 'vant'

Vue.use(Button)
Vue.use(Popup)
Vue.use(Field)

import cascadeMutipleSelect from './components/CascadeMutipleSelect.vue'
// import arrData from './data.js' //接口返回的数据在这里

export default {
  mounted() {},
  data() {
    return {
      visible: true,
      multipleTrees: [],
      replayComplaintReasons: [
        {
          actionChoose: [
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            },
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            },
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            }
          ],
          complaintReasonLastCodeContent: '', // 其他内容
          complaintReasonOneCode: '', // 1层
          complaintReasonOneCodeRemark: '',
          complaintReasonTwoCode: '', // 2层
          complaintReasonTwoCodeRemark: '',
          complaintReasonLastCode: '', // 3层
          complaintReasonLastCodeRemark: '',
          complaintReasonType: '', // 问题模块
          complaintReasonRemark: '',
          ReasonTitle: '',
          solutionSuggestion: [
            {
              suggestionType: '', // 建议分类
              suggestionRemark: '' // 建议描述
            }
          ]
        },
        {
          actionChoose: [
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            },
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            },
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            }
          ],
          complaintReasonLastCodeContent: '', // 其他内容
          complaintReasonOneCode: '', // 1层
          complaintReasonOneCodeRemark: '',
          complaintReasonTwoCode: '', // 2层
          complaintReasonTwoCodeRemark: '',
          complaintReasonLastCode: '', // 3层
          complaintReasonLastCodeRemark: '',
          complaintReasonType: '', // 问题模块
          complaintReasonRemark: '',
          ReasonTitle: '',
          solutionSuggestion: [
            {
              suggestionType: '', // 建议分类
              suggestionRemark: '' // 建议描述
            }
          ]
        }
      ],
      threeData: {
        complaintReasonOneCodeList: [
          {
            typeCode: '1',
            typeName: '金额',
            typePcode: null,
            levelNum: '1',
          },
          {
            typeCode: '2',
            typeName: '时效',
            typePcode: null,
            levelNum: '1',
          },
          {
            typeCode: '3',
            typeName: '品质',
            typePcode: null,
            levelNum: '1',
          },
          {
            typeCode: '5',
            typeName: '态度',
            typePcode: null,
            levelNum: '1',
          },
          {
            typeCode: '6',
            typeName: '其他',
            typePcode: null,
            levelNum: '1',
          },
        ],
        complaintReasonTwoCodeList: [
          {
            typeCode: '1#7',
            typeName: '其他金额问题',
            typePcode: '1',
            levelNum: '2',
          },
          {
            typeCode: '2#4',
            typeName: '其他时效问题',
            typePcode: '2',
            levelNum: '2',
          },
          {
            typeCode: '2#6',
            typeName: '维修时效慢',
            typePcode: '2',
            levelNum: '2',
          },
          {
            typeCode: '3#1',
            typeName: '理赔流程问题',
            typePcode: '3',
            levelNum: '2',
          },
          {
            typeCode: '3#5',
            typeName: '其他服务品质问题（第三方）',
            typePcode: '3',
            levelNum: '2',
          },
          {
            typeCode: '3#7',
            typeName: '车辆维修质量差',
            typePcode: '3',
            levelNum: '2',
          },
          {
            typeCode: '5#2',
            typeName: '第三方态度问题',
            typePcode: '5',
            levelNum: '2',
          },
          {
            typeCode: '6#1',
            typeName: '其他',
            typePcode: '6',
            levelNum: '2',
          },
        ],
        complaintReasonLastCodeList: [
          {
            typeCode: '1#7#1',
            typeName: '其他金额问题',
            typePcode: '1#7',
            levelNum: '3',
          },
          {
            typeCode: '2#4#1',
            typeName: '其他时效问题',
            typePcode: '2#4',
            levelNum: '3',
          },
          {
            typeCode: '2#6#1',
            typeName: '维修单位开始慢',
            typePcode: '2#6',
            levelNum: '3',
          },
          {
            typeCode: '2#6#2',
            typeName: '维修单位修理慢',
            typePcode: '2#6',
            levelNum: '3',
          },
          {
            typeCode: '2#6#3',
            typeName: '维修单位交车慢',
            typePcode: '2#6',
            levelNum: '3',
          },
          {
            typeCode: '3#1#1',
            typeName: '客户认为理赔资料繁琐',
            typePcode: '3#1',
            levelNum: '3',
          },
          {
            typeCode: '3#1#2',
            typeName: '客户认为理赔流程繁琐',
            typePcode: '3#1',
            levelNum: '3',
          },
          {
            typeCode: '3#1#3',
            typeName: '跨保单年度结案影响保费',
            typePcode: '3#1',
            levelNum: '3',
          },
          {
            typeCode: '3#5#1',
            typeName: '其他服务品质问题（第三方）',
            typePcode: '3#5',
            levelNum: '3',
          },
          {
            typeCode: '3#7#1',
            typeName: '配件质量差',
            typePcode: '3#7',
            levelNum: '3',
          },
          {
            typeCode: '3#7#2',
            typeName: '维修工艺不行',
            typePcode: '3#7',
            levelNum: '3',
          },
          {
            typeCode: '6#1#1',
            typeName: '其他',
            typePcode: '6#1',
            levelNum: '3',
          },
          {
            typeCode: '3#7#1#1',
            typeName: '我司定损原厂件但实际更换 非原厂件',
            typePcode: '3#7#1',
            levelNum: '4',
          },
          {
            typeCode: '3#7#1#2',
            typeName: '我司定损非原厂件，非原厂 件质量差',
            typePcode: '3#7#1',
            levelNum: '4',
          },
          {
            typeCode: '3#7#2#1',
            typeName: '维修人员技能差',
            typePcode: '3#7#2',
            levelNum: '4',
          },
          {
            typeCode: '3#7#2#2',
            typeName: '无维修设备、资质',
            typePcode: '3#7#2',
            levelNum: '4',
          },
        ],
      },
      multiplePopupVisible: false,
      actionChoose: [
        {
          typeCode: null,
          typeName: '请选择',
          typePcode: null,
          levelNum: null,
        },
        {
          typeCode: null,
          typeName: '请选择',
          typePcode: null,
          levelNum: null,
        },
        {
          typeCode: null,
          typeName: '请选择',
          typePcode: null,
          levelNum: null,
        },
      ],
      menuIndex: 1,
      complaint: '',
    }
  },
  components: {
    cascadeMutipleSelect,
  },
  async created() {
    this.getReasonList()
  },
  watch: {
    // actionChoose(newVal) {
    //   console.log(newVal, 'newVal')
    //   let arr = []
    //   for (let i = 0; i < newVal.length; i++) {
    //     console.log('~~~', newVal[i]);
    //     if(newVal[i].levelNum === '1') {
    //         this.complaintReasonOneCode = newVal[i].typeCode; // 2
    //         console.log('this.complaintReasonOneCode', this.complaintReasonOneCode);
    //         this.complaintReasonOneCodeRemark = newVal[i].typeName; // 时效
    //     }
    //     if(newVal[i].levelNum === '2') {
    //         this.complaintReasonTwoCode = newVal[i].typeCode; //2#6
    //         console.log('this.complaintReasonTwoCode', this.complaintReasonTwoCode);
    //         this.complaintReasonTwoCodeRemark = newVal[i].typeName; // 维修时效慢
    //     }
    //     if(newVal[i].levelNum === '3') {
    //         this.complaintReasonLastCode = newVal[i].typeCode; // 2#6#2
    //         console.log('this.complaintReasonLastCode', this.complaintReasonLastCode);
    //         this.complaintReasonLastCodeRemark = newVal[i].typeName; // 维修单位修理慢
    //     }
    //     if (newVal[i].typeName === '请选择') {
    //       break
    //     }
    //     arr.push(newVal[i].typeName)
    //   }
    //   this.complaint = arr.join('>')
    // },
  },
  computed: {
    // isOther() {
    //   for (let i = 0; i < this.actionChoose.length; i++) {
    //     if (this.actionChoose[i].typeName.indexOf('其他') !== -1) {
    //       return true
    //     }
    //   }
    //   return false
    // },
  },
  methods: {
    selectEnd(params) {
      const { replayComplaintReasons } = this;
      let arr = []
      for (let i = 0; i < replayComplaintReasons.length; i++) {
        for (let k = 0; k < params.length; k++) {
          if (params[k].levelNum === '1') {
            replayComplaintReasons[i].complaintReasonOneCode = params[k].typeCode; // 2
            replayComplaintReasons[i].complaintReasonOneCodeRemark = params[k].typeName; // 时效
          }
          if (params[k].levelNum === '2') {
            replayComplaintReasons[i].complaintReasonTwoCode = params[k].typeCode; // 2#6
            replayComplaintReasons[i].complaintReasonTwoCodeRemark = params[k].typeName; // 维修时效慢
          }
          if (params[k].levelNum === '3') {
            replayComplaintReasons[i].complaintReasonLastCode = params[k].typeCode; // 2#6#2
            replayComplaintReasons[i].complaintReasonLastCodeRemark = params[k].typeName; // 维修单位修理慢
          }
        if (params[i].typeName === '请选择') {
          break;
        }
        arr.push(newVal[i].typeName);
        }
      }
      // 显示出标题
      // item.complaint = arr.join('-');
    },
    // 传给后台格式
    //     { 
    //     "auditTimes": "1", 
    //     "businessKey": "430672525", 
    //     "handleLeaderUm": "HUJUN389", 
    //     "replayComplaintReasons": [ 
    //         {
    //             "complaintReasonLastCode": "1#7#1", 
    //             "complaintReasonLastCodeContent": "其他金额问题", 
    //             "complaintReasonLastCodeRemark": "为什么会有金额问题？", 
    //             "complaintReasonOneCode": "1", 
    //             "complaintReasonOneCodeRemark": "金额", 
    //             "complaintReasonRemark": "", 
    //             "complaintReasonTwoCode": "1#7", 
    //             "complaintReasonTwoCodeRemark": "其他金额问题", 
    //             "complaintReasonType": "car", 
    //             "complaintReasonTypeRemark": "", 
    //             "solutionSuggestion": [ 
    //                 { 
    //                     "suggestionRemark": "这是一个建议", 
    //                     "suggestionType": "pro" 
    //                 } 
    //             ] 
    //         },
    // {
    //             "complaintReasonLastCode": "3#1#2", 
    //             "complaintReasonLastCodeContent": "客户认为理赔流程繁琐", 
    //             "complaintReasonLastCodeRemark": "为什么会有金额问题？", 
    //             "complaintReasonOneCode": "3", 
    //             "complaintReasonOneCodeRemark": "品质", 
    //             "complaintReasonRemark": "", 
    //             "complaintReasonTwoCode": "3#1", 
    //             "complaintReasonTwoCodeRemark": "理赔流程问题", 
    //             "complaintReasonType": "car", 
    //             "complaintReasonTypeRemark": "", 
    //             "solutionSuggestion": [ 
    //                 { 
    //                     "suggestionRemark": "这是第二个建议", 
    //                     "suggestionType": "pro" 
    //                 } 
    //             ] 
    //         } 
    //     ], 
    //     "reportDetail": "复盘概述", 
    //     "reportReplay": "案件复盘", 
    //     "taskId": "6-ed8134da-bed2-11ec-994e-0671ba025ea0" 
    // }
    inputText(params) {
      console.log('!!!', params);
    },
    // 这是拿到的接口数据 在data.js里面 后台返回的数据格式
    async getReasonList() {
      this.multipleTrees = [
        this.threeData.complaintReasonOneCodeList,
        this.threeData.complaintReasonTwoCodeList,
        this.threeData.complaintReasonLastCodeList,
      ]
      const { data } = await getComplaintReasonList({
        businessKey: '430672447',
        userId: 'HUJUN684',
      })
      actionList[0] = data.complaintReasonOneCodeList
      actionList[1] = data.complaintReasonTwoCodeList
      actionList[2] = data.complaintReasonLastCodeList
    },
    openDeparment(bol) {
      this.multiplePopupVisible = bol
    },
    // 这里点击级联选择器赋值
    selectDeparment() {},
    save() {},
    updateMenuIndex(index) {
      this.menuIndex = index
    },
  },
}
</script>

<style>
.activityIndex .activeItem {
  margin: 10px 10px 0 10px;
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 5px;
}

</style>