[游戏开发]级联选择器123123

html
<pa-fieldList>
        <template
          class="group-list"
          v-for="(item, index) in replayComplaintReasons"
        >
 <pa-fieldItem
              class="group-field not-border"
              label="投诉原因"
              :border="false"
            >
              <div @click="openSelect(item)" class="group-flex">
                <p :class="item.ReasonTitle ? 'group-text' : 'group-notText'" v-text="item.ReasonTitle || '请选择'"></p>
                <div class="iconfont" :class="'icon-right-arrow'"></div>
              </div>
              <!-- {{item.actionChoose}}-- -->
              <cascade-mutiple-select
                title="选择原因"
                :trees="multipleTrees"
                v-model="item.multiplePopupVisible"
                :actionChoose.sync="item.actionChoose"
                :parentMenuIndex="menuIndex"
                @changeVisible="openDeparment(index, ...arguments)"
                @updateMenuIndex="updateMenuIndex"
                @selectEnd="selectEnd(index, ...arguments)"
              ></cascade-mutiple-select>
        </template>
      </pa-fieldList>

data: {
  replayComplaintReasons: [
        {
          actionChoose: [
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            },
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            },
            {
              typeCode: null,
              typeName: '请选择',
              typePcode: null,
              levelNum: null
            }
          ],
          menuIndex: 0,
          multiplePopupVisible: false,
          complaintReasonLastCodeContent: '', // 其他内容
          complaintReasonOneCode: '', // 1层
          complaintReasonOneCodeRemark: '',
          complaintReasonTwoCode: '', // 2层
          complaintReasonTwoCodeRemark: '',
          complaintReasonLastCode: '', // 3层
          complaintReasonLastCodeRemark: '',
          complaintReasonType: '', // 问题模块
          complaintReasonRemark: '',
          complaintReasonTypeRemark: '',
          ReasonTitle: '',
          solutionSuggestion: [
            {
              suggestionType: '', // 建议分类
              suggestionRemark: '' // 建议描述
            }
          ]
        }
      ],
}

{
    "taskDefinitionKey": "PA003_OSMP_COMPLAINT_REPLAY_INPUT_HANDLE_MIX",
    "assignee": "HUJUN389",
    "complaintReplayInfoDTO": {
        "complaintNo": "430673179",
        "complaintMode": "0",
        "complaintModeName": "95511",
        "contentType": "2",
        "contentTypeName": "投诉件",
        "complainantName": "融一付",
        "content": "测试结案后推送MQ数据，受理通道95511，投诉模块：理赔，投诉环节：维修",
        "disposalContent": "1、投诉是否成立：\r\n2、投诉处理经过评价：（投诉处理经过中有无处理人、部门问题）\r\n3、追责落实情况：（是否已追责、需落实动作、动作落实如何）",
        "defendantUserId": "HUJUN684",
        "defendantName": "HUJUN684",
        "defendantPhone": "15173272972",
        "taskId": "5-2ca617a2-c382-11ec-a5b1-0605fe025e9f",
        "reportNo": "90516004100002662068",
        "caseTimes": "1",
        "taskStatus": "0"
    },
    "replaySubmissionPortalDTO": {
        "businessKey": "430673179",
        "auditTimes": "2",
        "taskId": null,
        "reportDetail": "dsfgfgsfgsdgsdf",
        "reportReplay": "大范甘迪是否个圣达菲gsdf干撒垫付刚",
        "auditStatus": null,
        "auditRemark": null,
        "handlerUm": "HUJUN684",
        "handlerDate": 1650772335000,
        "handleLeaderUm": "TIANRUI557",
        "oprUserId": null,
        "handleReplayHisDTO": {
            "businessKey": null,
            "auditTimes": "2",
            "handlerUm": "HUJUN684",
            "handleLeaderUm": "HUJUN389",
            "auditDate": 1650772441000,
            "handlerDate": 1650772441000,
            "auditStatus": "已退回",
            "auditRemark": "第二次退回"
        },
        "replayComplaintReasons": [
            {
                "complaintReasonType": "other",
                "complaintReasonTypeRemark": "阿什顿发撒旦法撒旦发生大dasfsadfsadfsadfsadfasdafsdafsdaf啊的撒飞洒发",
                "complaintReasonOneCode": "6", // 一层typecode
                "complaintReasonOneCodeRemark": "其他", // 一层typename
                "complaintReasonTwoCode": "6#1",// 二层typecode
                "complaintReasonTwoCodeRemark": "其他",// 二层typecode
                "complaintReasonLastCode": "6#1#1",// 三层typecode
                "complaintReasonLastCodeRemark": "其他",// 二层typename
                "complaintReasonLastCodeContent": "三个双方都刚圣达菲个圣达菲个圣达菲个圣达菲个圣达菲公司的法规始发地第三方广东双方各是梵蒂冈的s",
                "complaintReasonRemark": "师高飞第三个圣达菲个双方都刚第三方个",
                "solutionSuggestion": [
                    {
                        "suggestionType": "4",
                        "suggestionRemark": "双方都刚双方都刚圣达菲个三发的",
                        "suggestionResult": "N"
                    }
                ]
            }
        ]
    }
}

methods: {
 openDeparment(index, bol) {
      this.replayComplaintReasons[index].multiplePopupVisible = bol;
    },
    updateMenuIndex(index, item) {
      this.menuIndex = index;
      // this.replayComplaintReasons[index].menuIndex = item;
    },
    openSelect(item) {
      item.multiplePopupVisible = !item.multiplePopupVisible;
    },
   
//赋值方法
selectEnd(i, params) {
      const { replayComplaintReasons } = this;
      let arr = [];
      if (params[0]) {
        replayComplaintReasons[i].complaintReasonOneCode = params[0].typeCode; // 2
        replayComplaintReasons[i].complaintReasonOneCodeRemark =
          params[0].typeName; // 时效
      }
      if (params[1]) {
        replayComplaintReasons[i].complaintReasonTwoCode = params[1].typeCode; // 2#6
        replayComplaintReasons[i].complaintReasonTwoCodeRemark =
          params[1].typeName; // 维修时效慢
      }
      if (params[2]) {
        replayComplaintReasons[i].complaintReasonLastCode = params[2].typeCode; // 2#6#2
        replayComplaintReasons[i].complaintReasonLastCodeRemark =
          params[2].typeName; // 维修单位修理慢
      }
      params.map(item => {
        arr.push(item.typeName);
      });
      replayComplaintReasons[i].ReasonTitle = arr.join('-');
      return;
    },

//详情接口
async getReplayTaskInfo() {
      const { data } = await getComplaintReplayTaskInfo({
        businessKey: this.$route.query.businessKey,
        taskId: this.$route.query.taskId,
        auditTimes: this.$route.query.auditTimes
      });
      if (
        data.replaySubmissionPortalDTO.replayComplaintReasons &&
        data.replaySubmissionPortalDTO.replayComplaintReasons.length
      ) {
        this.replayComplaintReasons = this.PortalList.replayComplaintReasons;
        for (
          let i = 0;
          i < this.PortalList.replayComplaintReasons.length;
          i++
        ) {
          for (let j = 0; j < this.replayComplaintReasons.length; j++) {
            const playList = this.PortalList.replayComplaintReasons[i];
            this.replayComplaintReasons.actionChoose = playList;
            let actionChoose = this.replayComplaintReasons.actionChoose;
            actionChoose[0].typeCode = playList.complaintReasonOneCode;
            actionChoose[0].typeName = playList.complaintReasonOneCodeRemark;
            actionChoose[1].typeCode = playList.complaintReasonTwoCode;
            actionChoose[1].typeName = playList.complaintReasonTwoCodeRemark;
            actionChoose[2].typeCode = playList.complaintReasonLastCode;
            actionChoose[2].typeName = playList.complaintReasonLastCodeRemark;
            console.log('111', this.replayComplaintReasons.actionChoose);
            if (playList.complaintReasonOneCodeRemark) {
              this.replayComplaintReasons[i].ReasonTitle =
                playList.complaintReasonOneCodeRemark;
            }
            if (playList.complaintReasonTwoCodeRemark) {
              this.replayComplaintReasons[i].ReasonTitle +=
                '-' + playList.complaintReasonTwoCodeRemark;
            }
            if (playList.complaintReasonLastCodeRemark) {
              this.replayComplaintReasons[i].ReasonTitle +=
                '-' + playList.complaintReasonLastCodeRemark;
            }
          }
        }
      }
    },
     }

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖