渠道客诉

src/views/clew/complaintDetail/followUpHistory.vue

@@ -40,8 +40,8 @@
             <p class="mg0" style="word-break: break-all">{{ item.answerValue }}</p>
           </div>
           <!-- <p style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right">
-              {{ item.remark }}
-            </p> -->
+            {{ item.remark }}
+          </p> -->
           <delete-upload-imgv :imgs="item.fileInfoList"></delete-upload-imgv>
         </div>
 
@@ -129,10 +129,6 @@ export default {
       type: Boolean,
       default: '',
     },
-    customerClueItemList: {
-      type: Array,
-      default: () => [],
-    },
   },
   data() {
     return {
@@ -150,64 +146,65 @@ export default {
   },
   methods: {
     getFollowUpHistory(val) {
-      // this.toastLoading(0, '加载中...', true);
-      // getCustomerClueAnswerById({ userCustomerClueId: this.historyId }).then((res) => {
-      this.toastLoading().clear();
-      this.customItemList = this.customerClueItemList;
-      for (var pl = 0; pl < this.customItemList[1].customerClueOptionList.length; pl++) {
-        if (
-          this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf('跟进中') !=
-          -1
-        ) {
-          if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
-            this.viewTextShow = true;
-            if (
-              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
-                '跟进'
-              ) != -1
-            ) {
-              this.customItemList[2].customerClueName =
-                '具体合作意向反馈(拜访时间、合同方向、预估合作时间)';
-            }
-          }
-        } else {
-          if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
-            this.viewTextShow = true;
-            if (
-              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
-                '意向'
-              ) != -1
-            ) {
-              this.customItemList[2].customerClueName = '没有意向原因';
-              this.customItemList[2].remark = '请输入';
-            }
-            if (
-              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
-                '开户'
-              ) != -1
-            ) {
-              this.customItemList[2].customerClueName = '开户经销商代码(例:0110067321)';
-              this.customItemList[2].remark = '请输入';
-            }
-            if (
-              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
-                '开店'
-              ) != -1
-            ) {
-              this.customItemList[2].customerClueName = '开户门店代码(例:0190129032)';
-              this.customItemList[2].remark = '请输入';
+      this.toastLoading(0, '加载中...', true);
+      getCustomerClueAnswerById({ userCustomerClueId: this.historyId }).then((res) => {
+        this.toastLoading().clear();
+        this.customItemList = res.data.customerClue.customerClueItemList;
+        for (var pl = 0; pl < this.customItemList[1].customerClueOptionList.length; pl++) {
+          if (
+            this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+              '跟进中'
+            ) != -1
+          ) {
+            if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
+              this.viewTextShow = true;
+              if (
+                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                  '跟进'
+                ) != -1
+              ) {
+                this.customItemList[2].customerClueName =
+                  '具体合作意向反馈(拜访时间、合同方向、预估合作时间)';
+              }
             }
-            if (
-              this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
-                '出货'
-              ) != -1
-            ) {
-              this.customItemList[2].customerClueName = '填写具体的产品和数量';
+          } else {
+            if (this.customItemList[1].customerClueOptionList[pl].value == 'Y') {
+              this.viewTextShow = true;
+              if (
+                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                  '意向'
+                ) != -1
+              ) {
+                this.customItemList[2].customerClueName = '没有意向原因';
+                this.customItemList[2].remark = '请输入';
+              }
+              if (
+                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                  '开户'
+                ) != -1
+              ) {
+                this.customItemList[2].customerClueName = '开户经销商代码(例:0110067321)';
+                this.customItemList[2].remark = '请输入';
+              }
+              if (
+                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                  '开店'
+                ) != -1
+              ) {
+                this.customItemList[2].customerClueName = '开户门店代码(例:0190129032)';
+                this.customItemList[2].remark = '请输入';
+              }
+              if (
+                this.customItemList[1].customerClueOptionList[pl].customerClueOption.indexOf(
+                  '出货'
+                ) != -1
+              ) {
+                this.customItemList[2].customerClueName = '填写具体的产品和数量';
+              }
             }
           }
         }
-      }
-      // });
+      });
     },
   },
 };

src/views/clew/complaintDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bgcolor assignPage">
+  <div class="bgcolor complaintDetail">
     <div class="navBarTOP">
       <van-nav-bar class="navBar" left-arrow :title="title" @click-left="onClickLeft" />
     </div>
@@ -12,14 +12,41 @@
     <infoDetail :infoData="infoData" v-if="infoData"> </infoDetail>
     <!-- 客诉记录 -->
     <complaintLog
-      v-if="infoData.customerClueInfoComplaintList.length"
+      v-if="infoData && infoData.customerClueInfoComplaintList.length"
       :customerClueInfoComplaintList="infoData.customerClueInfoComplaintList"></complaintLog>
     <!-- 跟进记录 userCustomerClueList -->
+    <!-- 历史跟进记录 -->
+    <p style="margin: 0 16px 8px; color: #888" v-if="infoData && infoData.userCustomerClueList">
+      该客诉历史跟进记录
+    </p>
+    <van-cell-group inset class="cardclewContentCell" v-if="infoData">
+      <div style="border-radius: 6px; overflow: hidden">
+        <van-cell
+          is-link
+          v-for="(item, index) in infoData.userCustomerClueList"
+          :key="index"
+          @click="viewFn(item.userCustomerClueId)">
+          <template #title>
+            <span class="custom-title">{{ item.nickName }}</span>
+          </template>
+          <div class="cardContent">
+            <p class="textLeft" style="padding-bottom: 0px; margin: 0">{{ item.createTime }}</p>
+          </div>
+        </van-cell>
+      </div>
+    </van-cell-group>
     <!-- 跟进任务填写 -->
     <div class="assign" v-if="infoData && infoData.isClose != 1">
-      <div class="followUp required">跟进结果</div>
-      <div class="taskGather" v-if="taskGather && taskGather">
-        <!-- <radioGroup :clueOptionList="taskGather"></radioGroup> -->
+      <!-- 来电分类 -->
+      <div class="complaintType">
+        <div class="typeItem">
+          <div class="label">来电分类一</div>
+          <div class="value"></div>
+        </div>
+      </div>
+      <!-- <div class="followUp required">跟进结果</div> -->
+      <div class="taskGather" v-if="taskGather">
+        <radioGroup :clueOptionList="taskGather"></radioGroup>
       </div>
       <div class="tc" style="padding: 0 16px">
         <van-button class="submitBtn" block type="info" color="#0057ba" @click="onSubmit">
@@ -27,6 +54,16 @@
         </van-button>
       </div>
     </div>
+    <!-- 客诉跟进历史 -->
+    <van-dialog
+      v-model="showView"
+      title="客诉历史"
+      show-cancel-button
+      cancel-button-text="关闭"
+      :show-confirm-button="false"
+      class="dialogz">
+      <followUpHistory :historyId="historyId" :showView="showView"></followUpHistory>
+    </van-dialog>
   </div>
 </template>
 
@@ -34,17 +71,18 @@
 import { getComplaintCustomerClueInfoById } from '@/api/complaintDetail';
 import infoDetail from './infoDetail.vue';
 import complaintLog from './complaintLog.vue';
-// import { selectCustomerClueInfoById, insertFollowCustomerClueAnswer } from '@/api/assignAwait';
+import { insertFollowCustomerClueAnswer } from '@/api/assignAwait';
 import { mapState } from 'vuex';
-// import radioGroup from './radioGroup';
+import radioGroup from './radioGroup';
+import followUpHistory from './followUpHistory';
 
 export default {
-  name: 'assignPage',
+  name: 'complaintDetail',
   components: {
     infoDetail,
     complaintLog,
-    // radioGroup,
-    // followUpHistory,
+    radioGroup,
+    followUpHistory,
   },
   computed: {
     ...mapState({
@@ -60,6 +98,8 @@ export default {
       taskGather: null, //跟进任务集合
       requiredFlag: true, //问题必填检验
       requiredMessage: '', //必填提示信息
+      showView: false,
+      historyId: '',
     };
   },
   watch: {},
@@ -77,21 +117,9 @@ export default {
         if (response.code == 200) {
           this.infoData = response.data;
           this.title = response.data.name;
-          // if (this.infoData.isClose != 1) {
-          //   this.getSelectCustomerClueInfoById();
-          // }
-        } else {
-          this.$toast(res.msg);
-        }
-      });
-    },
-    getSelectCustomerClueInfoById() {
-      selectCustomerClueInfoById({ customerClueInfoId: this.id }).then((res) => {
-        if (res.code == 200) {
-          // res.data.customerClue.searchValue.customerClueItemList
-          if (res.data.customerClue) {
-            res.data.customerClue.customerClueItemList[0].customerClueInfoId = this.id;
-            this.taskGather = res.data.customerClue.customerClueItemList;
+          if (this.infoData.isClose != 1) {
+            // response.data.customerClue.customerClueItemList[0].customerClueInfoId = this.id;
+            this.taskGather = response.data.customerClue.customerClueItemList;
           }
         } else {
           this.$toast(res.msg);
@@ -100,55 +128,52 @@ export default {
     },
     onSubmit() {
       // 没有选择跟进记录
-      if (!this.taskGather[0].searchValue) {
-        this.$toast('请选择跟进结果');
-        return;
-      }
+      // if (!this.taskGather[0].searchValue) {
+      //   this.$toast('请选择跟进结果');
+      //   return;
+      // }
       this.requiredFlag = true;
       let customerClueItemList = [];
       // 每一个层级都是一道题的题目，子级就是题，被选中和填写的题要带上题目一块上传（题的同级也要上传）
       // 第一级题目下的题默认都要上传
       let params = { customerClueItemList: [] };
       params.customerClueItemList.push(...this.deepClone(this.taskGather, 0));
-      let optionList = this.taskGather[0].customerClueOptionList;
-      this.filterOption(optionList, params);
+      // let optionList = this.taskGather[0].customerClueOptionList;
+      this.filterOption(this.taskGather, params);
       // 必填验证
       if (this.requiredFlag) {
-        this.toastLoading(0, '加载中...', true);
-        insertFollowCustomerClueAnswer(params).then((res) => {
-          this.toastLoading().clear();
-          if (res.code == 200) {
-            this.$toast(res.msg);
-            window.location.replace(window.location.origin + '/mobile/clew');
-          } else {
-            this.$toast(res.msg);
-          }
-        });
+        // this.toastLoading(0, '加载中...', true);
+        // insertFollowCustomerClueAnswer(params).then((res) => {
+        //   this.toastLoading().clear();
+        //   if (res.code == 200) {
+        //     this.$toast(res.msg);
+        //     window.location.replace(window.location.origin + '/mobile/clew');
+        //   } else {
+        //     this.$toast(res.msg);
+        //   }
+        // });
       } else {
         this.$toast(this.requiredMessage);
       }
     },
     filterOption(optionList, params) {
+      // debugger;
       let copy = null;
-      for (let i = 0; i < optionList.length; i++) {
-        if (optionList[i].value == 'Y') {
-          if (optionList[i].customerClueItemList) {
+      for (let val = 0; val < optionList.length; val++) {
+        // for (let i = 0; i < optionList[val].length; i++) {
+        if (optionList[val].value == 'Y') {
+          if (optionList[val].customerClueItemList) {
             // 必填校验
-            this.isRequiredFlag(optionList[i].customerClueItemList);
-            params.customerClueItemList.push(
-              ...this.deepClone(optionList[i].customerClueItemList, 0)
+            this.isRequiredFlag(optionList[val].customerClueItemList);
+            params.customerClueItemList[val].push(
+              ...this.deepClone(optionList[val].customerClueItemList, 0)
             );
-            if (
-              optionList[i].customerClueItemList[0] &&
-              optionList[i].customerClueItemList[0].customerClueOptionList.length
-            ) {
-              this.filterOption(
-                optionList[i].customerClueItemList[0].customerClueOptionList,
-                params
-              );
+            if (optionList[val].customerClueItemList[0]) {
+              this.filterOption(optionList[val].customerClueItemList, params);
             }
           }
         }
+        // }
       }
     },
     deepClone(obj, num) {
@@ -187,6 +212,12 @@ export default {
     onFailed(errorInfo) {
       console.log('failed', errorInfo);
     },
+    // 查看历史跟进记录
+    viewFn(val) {
+      //   this.viewTextShow = false;
+      this.historyId = val;
+      this.showView = true;
+    },
     onClickLeft() {
       this.$router.go(-1);
     },
@@ -194,7 +225,7 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.assignPage {
+.complaintDetail {
   .assign {
     margin: 10px;
     background-color: #fff;
@@ -205,10 +236,18 @@ export default {
       font-weight: 600;
     }
   }
+  .taskGather {
+    padding-left: 20px;
+    .title {
+      font-size: 15px;
+      font-weight: 600;
+      padding: 5px 0;
+    }
+  }
 }
 </style>
 <style lang="scss">
-.assignPage {
+.complaintDetail {
   .van-field__label {
     width: 100px;
     &::before {

src/views/clew/complaintDetail/radioGroup.vue

@@ -0,0 +1,136 @@
+<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'">
+        <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>
+      <template v-if="val.answerType == 'wb'">
+        <template v-if="parentOptionList.searchValue == val.itemOptionParentId">
+          <van-field v-model="val.answerValue" :placeholder="val.remark" />
+        </template>
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: 'radioGroup',
+  props: {
+    clueOptionList: {
+      type: Array,
+      default: () => [],
+    },
+    parentOptionList: {
+      type: Object,
+      default: () => {},
+    },
+    parentId: {
+      type: [Number, null],
+      default: null,
+    },
+  },
+  data() {
+    return {};
+  },
+  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);
+    },
+  },
+};
+</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 {
+    border: 1px solid #cdc8c8;
+    padding: 0;
+    width: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: unset;
+    height: 30px;
+    line-height: 30px;
+    margin: 5px 0;
+  }
+  .van-field__control {
+    padding: 0 10px;
+  }
+  .van-field__control {
+    padding: 0 10px;
+  }
+  .van-radio__label {
+    /* font-size: 14px; */
+  }
+}
+</style>