客资任务跟踪题目填写添加表格选项

src/views/clew/clewent.vue

@@ -49,151 +49,153 @@
       </div>
     </van-cell-group>
     <!-- 批量采购 -->
-    <template v-if="infoData.cid == 5">
-      <div class="taskGather" v-if="taskGather">
-        <radioGroup :clueOptionList="taskGather"></radioGroup>
-      </div>
-    </template>
-    <template v-else>
-      <div
-        v-if="infoData.isClose != 1"
-        class="container"
-        style="width: 94%; margin: 0px auto; border-radius: 6px">
-        <van-form ref="form">
-          <div v-for="(item, index) in collectionItemList" :key="index">
-            <div v-if="item.answerType == 'sz' && totalMoneyFlag" class="formLabel z-cell">
-              <van-cell>
-                <template #title>
-                  <span class="van-f-red">*</span>{{ item.customerClueName }}
-                  <!-- <span style="font-size: 12px; color: #888">{{ item.remark }}</span> -->
-                </template>
-              </van-cell>
-              <van-field
-                class="fieldNumber"
-                v-model="item.answerValue"
-                :placeholder="item.remark"
-                type="number"
-                @input="numberFn(item, index)"></van-field>
-            </div>
-            <div v-if="item.answerType == 'rq'" class="formLabel z-cell">
-              <van-cell>
-                <template #title>
-                  <span v-if="item.isMust == 0" class="van-f-red">*</span>{{ item.customerClueName
-                  }}<span style="font-size: 14px; color: #ccc">{{ item.remark }}</span>
-                </template>
-              </van-cell>
-              <van-field
-                v-model="item.answerValue"
-                clickable
-                name="calendar"
-                placeholder="点击选择日期"
-                readonly
-                @click="showCalendarClick(index)" />
-              <p
-                style="
-                  color: #444;
-                  font-size: 12px;
-                  margin: 0;
-                  padding: 10px 0;
-                  text-align: right;
-                "></p>
-            </div>
-            <div v-if="item.answerType == 'zp'" class="formLabel z-cell">
-              <van-cell>
-                <template #title>
-                  <span v-if="item.isMust == 0" class="van-f-red">*</span
-                  >{{ item.customerClueName }}
-                </template>
-              </van-cell>
-              <van-row gutter="10" style="margin-bottom: 10px">
-                <p style="margin-top: 0">
-                  <span style="font-size: 12px; color: #888">{{ item.remark }}</span>
-                </p>
-                <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
-                <upload-img
-                  :uploadid="uploadid2"
-                  @newimgarr="newimgarr1"
-                  imgText="上传照片"
-                  :indexImg="index"
-                  :customId="item.customerClueId"
-                  :summaryId="item.customerClueItemId"
-                  @click="imgClick(item, index)"></upload-img>
-              </van-row>
-            </div>
-            <div v-if="item.answerType == 'wb' && showv" class="formLabel z-cell formLabeltext">
-              <van-cell>
-                <template #title>
-                  <span class="van-f-red" v-if="requ">*</span>{{ item.customerClueName }}
-                </template>
-              </van-cell>
-              <van-field
-                v-model="item.answerValue"
-                :formatter="formatter"
-                :placeholder="item.remark"
-                rows="1"
-                autosize
-                type="textarea"></van-field>
-              <!--            <p style="color: #444;font-size: 12px;margin: 0;padding:10px 0;text-align: right">{{ item.remark }}</p>-->
-            </div>
-            <div v-if="item.answerType == 'wb' && showvnum" class="formLabel z-cell formLabeltext">
-              <van-cell>
-                <template #title>
-                  <span class="van-f-red" v-if="requ">*</span>{{ item.customerClueName }}
-                </template>
-              </van-cell>
-              <van-field
-                type="digit"
-                v-model="item.answerValue"
-                maxlength="10"
-                :formatter="formatter"
-                :placeholder="item.remark"></van-field>
-              <!--            <p style="color: #444;font-size: 12px;margin: 0;padding:10px 0;text-align: right">{{ item.remark }}</p>-->
-            </div>
-            <div v-if="item.answerType == 'duox'" class="formLabel z-cell">
-              <van-cell>
-                <template #title>
-                  <span v-if="item.isMust == 0" class="van-f-red">*</span
-                  >{{ item.customerClueName }}
-                </template>
-              </van-cell>
-              <z-checkbox
-                :answerType="item.answerType"
-                :checkboxval="item.answerValue"
-                :collectionType="item.customOptionList"
-                :textc="item.customerClueId"
-                :zCheckboxcolumns="item.customerClueOptionList"
-                @zSelectVal="zSelectVal"></z-checkbox>
+    <template v-if="infoData && infoData.isClose != 1">
+      <template v-if="infoData.cid == 5">
+        <div class="taskGather" v-if="taskGather">
+          <radioGroup :clueOptionList="taskGather"></radioGroup>
+        </div>
+      </template>
+      <template v-else>
+        <div class="container" style="width: 94%; margin: 0px auto; border-radius: 6px">
+          <van-form ref="form">
+            <div v-for="(item, index) in collectionItemList" :key="index">
+              <div v-if="item.answerType == 'sz' && totalMoneyFlag" class="formLabel z-cell">
+                <van-cell>
+                  <template #title>
+                    <span class="van-f-red">*</span>{{ item.customerClueName }}
+                    <!-- <span style="font-size: 12px; color: #888">{{ item.remark }}</span> -->
+                  </template>
+                </van-cell>
+                <van-field
+                  class="fieldNumber"
+                  v-model="item.answerValue"
+                  :placeholder="item.remark"
+                  type="number"
+                  @input="numberFn(item, index)"></van-field>
+              </div>
+              <div v-if="item.answerType == 'rq'" class="formLabel z-cell">
+                <van-cell>
+                  <template #title>
+                    <span v-if="item.isMust == 0" class="van-f-red">*</span
+                    >{{ item.customerClueName
+                    }}<span style="font-size: 14px; color: #ccc">{{ item.remark }}</span>
+                  </template>
+                </van-cell>
+                <van-field
+                  v-model="item.answerValue"
+                  clickable
+                  name="calendar"
+                  placeholder="点击选择日期"
+                  readonly
+                  @click="showCalendarClick(index)" />
+                <p
+                  style="
+                    color: #444;
+                    font-size: 12px;
+                    margin: 0;
+                    padding: 10px 0;
+                    text-align: right;
+                  "></p>
+              </div>
+              <div v-if="item.answerType == 'zp'" class="formLabel z-cell">
+                <van-cell>
+                  <template #title>
+                    <span v-if="item.isMust == 0" class="van-f-red">*</span
+                    >{{ item.customerClueName }}
+                  </template>
+                </van-cell>
+                <van-row gutter="10" style="margin-bottom: 10px">
+                  <p style="margin-top: 0">
+                    <span style="font-size: 12px; color: #888">{{ item.remark }}</span>
+                  </p>
+                  <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
+                  <upload-img
+                    :uploadid="uploadid2"
+                    @newimgarr="newimgarr1"
+                    imgText="上传照片"
+                    :indexImg="index"
+                    :customId="item.customerClueId"
+                    :summaryId="item.customerClueItemId"
+                    @click="imgClick(item, index)"></upload-img>
+                </van-row>
+              </div>
+              <div v-if="item.answerType == 'wb' && showv" class="formLabel z-cell formLabeltext">
+                <van-cell>
+                  <template #title>
+                    <span class="van-f-red" v-if="requ">*</span>{{ item.customerClueName }}
+                  </template>
+                </van-cell>
+                <van-field
+                  v-model="item.answerValue"
+                  :formatter="formatter"
+                  :placeholder="item.remark"
+                  rows="1"
+                  autosize
+                  type="textarea"></van-field>
+                <!--            <p style="color: #444;font-size: 12px;margin: 0;padding:10px 0;text-align: right">{{ item.remark }}</p>-->
+              </div>
+              <div
+                v-if="item.answerType == 'wb' && showvnum"
+                class="formLabel z-cell formLabeltext">
+                <van-cell>
+                  <template #title>
+                    <span class="van-f-red" v-if="requ">*</span>{{ item.customerClueName }}
+                  </template>
+                </van-cell>
+                <van-field
+                  type="digit"
+                  v-model="item.answerValue"
+                  maxlength="10"
+                  :formatter="formatter"
+                  :placeholder="item.remark"></van-field>
+                <!--            <p style="color: #444;font-size: 12px;margin: 0;padding:10px 0;text-align: right">{{ item.remark }}</p>-->
+              </div>
+              <div v-if="item.answerType == 'duox'" class="formLabel z-cell">
+                <van-cell>
+                  <template #title>
+                    <span v-if="item.isMust == 0" class="van-f-red">*</span
+                    >{{ item.customerClueName }}
+                  </template>
+                </van-cell>
+                <z-checkbox
+                  :answerType="item.answerType"
+                  :checkboxval="item.answerValue"
+                  :collectionType="item.customOptionList"
+                  :textc="item.customerClueId"
+                  :zCheckboxcolumns="item.customerClueOptionList"
+                  @zSelectVal="zSelectVal"></z-checkbox>
+              </div>
+              <div v-if="item.answerType == 'dx'" class="formLabel z-cell">
+                <van-cell>
+                  <template #title>
+                    <span v-if="item.isMust == 0" class="van-f-red">*</span
+                    >{{ item.customerClueName }}
+                  </template>
+                </van-cell>
+                <van-field>
+                  <template #input>
+                    <z-radio
+                      :answerType="item.answerType"
+                      :collectionType="item.collectionType"
+                      :radio="item.answerValue"
+                      :textc="item.customerClueId"
+                      :Tindex="index"
+                      :zRadiocolumns="item.customerClueOptionList"
+                      @zSelectVal="zSelectVal"></z-radio>
+                  </template>
+                </van-field>
+              </div>
+              <br />
             </div>
-            <div v-if="item.answerType == 'dx'" class="formLabel z-cell">
-              <van-cell>
-                <template #title>
-                  <span v-if="item.isMust == 0" class="van-f-red">*</span
-                  >{{ item.customerClueName }}
-                </template>
-              </van-cell>
-              <van-field>
-                <template #input>
-                  <z-radio
-                    :answerType="item.answerType"
-                    :collectionType="item.collectionType"
-                    :radio="item.answerValue"
-                    :textc="item.customerClueId"
-                    :Tindex="index"
-                    :zRadiocolumns="item.customerClueOptionList"
-                    @zSelectVal="zSelectVal"></z-radio>
-                </template>
-              </van-field>
+            <div style="height: auto" v-if="tipSHow">
+              <p style="color: orange; margin: 6px 16px; font-size: 14px">
+                <van-icon name="info-o" />&nbsp;{{ tipText }}
+              </p>
             </div>
             <br />
-          </div>
-          <div style="height: auto" v-if="tipSHow">
-            <p style="color: orange; margin: 6px 16px; font-size: 14px">
-              <van-icon name="info-o" />&nbsp;{{ tipText }}
-            </p>
-          </div>
-          <br />
-        </van-form>
-      </div>
+          </van-form>
+        </div>
+      </template>
     </template>
     <br />
     <div v-if="infoData.isClose != 1" class="tc" style="padding: 0 16px">
@@ -387,10 +389,10 @@
                         {{ scope.row[item.prop] }}
                       </template>
                       <template v-if="item.answerType == 'wb'">
-                        <van-field v-model="scope.row[item.prop]" />
+                        <span>{{ scope.row[item.prop] }}</span>
                       </template>
                       <template v-if="item.answerType == 'sz'">
-                        <van-field v-model="scope.row[item.prop]" type="number" />
+                        <span>{{ scope.row[item.prop] }}</span>
                       </template>
                     </template>
                   </el-table-column>
@@ -565,6 +567,9 @@ export default {
       taskGather: null, //跟进任务集合
     };
   },
+  activated() {
+    this.getCustomerClueInfoById();
+  },
   created() {
     this.formData.startTime = this.getThreeDaysAgo();
     this.strtcurrentDate = new Date(this.getThreeDaysAgo());
@@ -573,7 +578,7 @@ export default {
     this.powerGrade = localStorage.getItem('powerGrade');
     this.id = this.$route.query.id;
     this.getDeptInfo();
-    this.getCustomerClueInfoById();
+    // this.getCustomerClueInfoById();
   },
   watch: {
     $route(to, from) {
@@ -583,7 +588,7 @@ export default {
         this.SBshow = false;
         this.tipSHow = false;
         this.followUpResult = '';
-        this.getCustomerClueInfoById();
+        // this.getCustomerClueInfoById();
       }
     },
   },
@@ -992,24 +997,19 @@ export default {
           followUpResult: this.followUpResult,
           customerClueItemList: this.collectionItemList,
         };
-        if (this.flagclick) {
-          this.flagclick = false;
-          this.timer = null;
-          this.timer = setTimeout(() => {
-            this.flagclick = true;
-          }, 2000);
-          insertCustomerClueAnswer(form).then((res) => {
-            if (res.code == 200) {
-              if (this.$route.query.token != undefined) {
-                window.location.replace(window.location.origin + '/mobile/clew');
-              } else {
-                this.$router.go(-1);
-              }
+        this.toastLoading(0, '加载中...', true);
+        insertCustomerClueAnswer(form).then((res) => {
+          this.toastLoading().clear();
+          if (res.code == 200) {
+            if (this.$route.query.token != undefined) {
+              window.location.replace(window.location.origin + '/mobile/clew');
             } else {
-              this.$toast(res.msg);
+              this.$router.go(-1);
             }
-          });
-        }
+          } else {
+            this.$toast(res.msg);
+          }
+        });
       }
     },
     getThreeDaysAgo() {
@@ -1274,7 +1274,7 @@ export default {
 .containertext {
   .el-table {
     .el-table__cell {
-      padding: 0;
+      padding: 3px 0;
     }
   }
 }

src/views/clew/complaintDetail/index.vue

@@ -188,11 +188,9 @@ import radioGroup from './radioGroup';
 import followUpHistory from './followUpHistory';
 import { getDictOption } from '@/api/index';
 import { updateCustomerClueDept, getDeptInfo } from '@/api/clew';
-import { clewMixins } from '@/mixin/clew.js';
 
 export default {
   name: 'complaintDetail',
-  mixins: [clewMixins],
   components: {
     infoDetail,
     complaintLog,
@@ -254,9 +252,9 @@ export default {
       let item = this.customerClassifyOption.find(
         (val) => val.dictValue == this.infoData.customerClassify
       );
-      this.customerClassifyValue = item.remark || '';
-      this.customerClassify = item.dictValue;
-      this.getCustomerSubClassify(this.customerClassify);
+      this.customerClassifyValue = item ? item.remark : '';
+      this.customerClassify = item ? item.dictValue : '';
+      if (this.customerClassify != '') this.getCustomerSubClassify(this.customerClassify);
     },
     async getCustomerSubClassify(parentId) {
       let option = await customerSubClassify({ parentId: parentId });
@@ -301,13 +299,27 @@ export default {
       });
     },
     onSubmit() {
-      this.purchaseSubmit((data) => {
+      // 没有选择跟进记录
+      // if (!this.taskGather[0].searchValue) {
+      //   this.$toast('请选择跟进结果');
+      //   return;
+      // }
+      this.requiredFlag = true;
+      let customerClueItemList = [];
+      // 每一个层级都是一道题的题目，子级就是题，被选中和填写的题要带上题目一块上传（题的同级也要上传）
+      // 第一级题目下的题默认都要上传
+      let params = {
+        customerClueItemList: [],
+        customerClassify: this.customerClassify,
+        customerSubClassify: this.customerSubClassify,
+      };
+      params.customerClueItemList.push(...this.deepClone(this.taskGather, 0));
+      // let optionList = this.taskGather[0].customerClueOptionList;
+      this.filterOption(this.taskGather, params);
+      console.log(JSON.stringify(params));
+      // 必填验证
+      if (this.requiredFlag) {
         this.toastLoading(0, '加载中...', true);
-        let params = {
-          customerClueItemList: data.customerClueItemList,
-          customerClassify: this.customerClassify,
-          customerSubClassify: this.customerSubClassify,
-        };
         insertCustomerClueAnswerKs(params).then((res) => {
           this.toastLoading().clear();
           if (res.code == 200) {
@@ -317,7 +329,98 @@ export default {
             this.$toast(res.msg);
           }
         });
-      });
+      } else {
+        this.$toast(this.requiredMessage);
+      }
+    },
+    filterOption(optionList, params) {
+      for (let val = 0; val < optionList.length; val++) {
+        if (
+          optionList[val].isMust == '0' &&
+          optionList[val].searchValue == null &&
+          optionList[val].answerType == 'dx'
+        ) {
+          // 题目必填校验
+          this.requiredFlag = false;
+          this.requiredMessage = '请选择' + optionList[val].customerClueName;
+          return;
+        } else if (optionList[val].isMust == '0' && optionList[val].searchValue) {
+          // 子级题校验
+          let customerClueOptionList = optionList[val].customerClueOptionList;
+          for (let i = 0; i < customerClueOptionList.length; i++) {
+            // 选中的题目Y:选中，N:未选中
+            if (customerClueOptionList[i].value == 'Y') {
+              if (customerClueOptionList[i].customerClueItemList) {
+                // 必填校验
+                this.isRequiredFlag(customerClueOptionList[i].customerClueItemList);
+                // 赋值选中题
+                let customerClueItemList =
+                  params.customerClueItemList[val].customerClueOptionList[i].customerClueItemList;
+                customerClueItemList.push(
+                  ...this.deepClone(customerClueOptionList[i].customerClueItemList, 0)
+                );
+                if (customerClueOptionList[i].customerClueItemList[0]) {
+                  this.filterOption(customerClueOptionList[i].customerClueItemList, params);
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    // 深拷贝指定拷贝层级
+    deepClone(obj, num) {
+      // 检查是否为对象或数组
+      if (obj === null || typeof obj !== 'object') {
+        return obj; // 基本类型直接返回
+      }
+      // 创建一个数组或对象
+      const copy = Array.isArray(obj) ? [] : {};
+      // 遍历对象的每个属性
+      for (const key in obj) {
+        if (obj.hasOwnProperty(key) && num < 2) {
+          // 递归调用深拷贝
+          if (key == 'customerClueOptionList' || key == 'customerClueItemList') {
+            num = num + 1;
+          }
+          copy[key] = this.deepClone(obj[key], num);
+        }
+      }
+      return copy;
+    },
+    isRequiredFlag(optionList) {
+      // console.log(optionList);
+      for (let i = 0; i < optionList.length; i++) {
+        // 是否必填
+        if (optionList[i].isMust == 0) {
+          // 输入框
+          if (optionList[i].answerType == 'wb' || optionList[i].answerType == 'sz') {
+            if (!optionList[i].answerValue) {
+              // 必填类型
+              this.requiredFlag = false;
+              this.requiredMessage = optionList[i].remark;
+              return;
+            } else {
+              // 条件校验
+              if (optionList[i].minTextLength) {
+                // 输入内容长度校验
+                if (optionList[i].answerValue.length < optionList[i].minTextLength) {
+                  this.requiredFlag = false;
+                  this.requiredMessage = optionList[i].remark;
+                  return;
+                }
+              }
+            }
+          } else if (optionList[i].answerType == 'zp') {
+            // 照片
+            if (!optionList[i].fileInfoList || !optionList[i].fileInfoList.length) {
+              this.requiredFlag = false;
+              this.requiredMessage = optionList[i].remark;
+              return;
+            }
+          }
+        }
+      }
     },
     // 校验错误返回信息
     onFailed(errorInfo) {

src/views/clew/complaintDetail/infoDetail.vue

@@ -45,6 +45,7 @@ export default {
   },
   methods: {
     filterClassify(customerClassify) {
+      if (!customerClassify) return '';
       let item = this.customerClassify.find((val) => val.dictValue == customerClassify);
       return item.dictLabel || '';
     },