feat: 产品分析报告,提交错误的时候定位到错误的位置

src/modules/product-analysis/components/Compares.vue

 <template>
-  <box title="业绩比较基准" class="compares-box">
+  <box title="业绩比较基准" class="compares-box" :id="firstItem.id">
     <ul>
       <li v-for="(item, index) in inputList" :key="index">
         <div class="input-box">
@@ -30,6 +30,12 @@ export default {
       inputList: [{ input1: '', input2: '' }]
     }
   },
+  computed: {
+    firstItem() {
+      const [first = {}] = this.data.completions
+      return first
+    }
+  },
   methods: {
     inputAdd() {
       this.inputList.push({ input1: '', input2: '' })
@@ -43,9 +49,9 @@ export default {
     }
   },
   created() {
-    if (this.data.completions[0].commit_answer !== '') {
+    if (this.firstItem.commit_answer !== '') {
       this.inputList = []
-      this.data.completions[0].commit_answer.split(';').forEach(item => {
+      this.firstItem.commit_answer.split(';').forEach(item => {
         const val = item.split(',')
         this.inputList.push({ input1: val[0], input2: val[1] })
       })

src/modules/product-analysis/components/Cost.vue

@@ -10,7 +10,7 @@
         <img src="https://webapp-pub.ezijing.com/x-training-new/cost-i1.png" class="icon" v-else />
         <div class="right-con">
           <div class="num">
-            <input v-model="item.commit_answer" type="text" placeholder="请输入" />
+            <input v-model="item.commit_answer" type="text" placeholder="请输入" :id="item.id" />
             <span>%</span>
           </div>
           <div class="name">{{ item.subject }}</div>

src/modules/product-analysis/components/Features.vue

 <template>
   <box title="风险收益特征">
     <div class="content-box">
-      <input v-for="(item, index) in data.completions" :key="index" v-model="item.commit_answer" type="text" :class="`input-id${index + 1}`" placeholder="请输入基金类型">
+      <input
+        v-for="(item, index) in data.completions"
+        :key="index"
+        v-model="item.commit_answer"
+        type="text"
+        :class="`input-id${index + 1}`"
+        placeholder="请输入基金类型"
+        :id="item.id"
+      />
     </div>
   </box>
 </template>
@@ -20,36 +28,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content-box{
+.content-box {
   position: relative;
   margin: 29px 0 0 19px;
   width: 491px;
   height: 325px;
   background: url(https://webapp-pub.ezijing.com/x-training-new/features-bg.png);
   background-size: 100% 100%;
-  input{
+  input {
     width: 110px;
     font-size: 16px;
     color: #666666;
     background: none;
     outline: none;
   }
-  .input-id1{
+  .input-id1 {
     position: absolute;
     top: 45px;
     right: -10px;
   }
-  .input-id2{
+  .input-id2 {
     position: absolute;
     top: 106px;
     right: -45px;
   }
-  .input-id3{
+  .input-id3 {
     position: absolute;
     top: 170px;
     right: -80px;
   }
-  .input-id4{
+  .input-id4 {
     position: absolute;
     top: 238px;
     right: -118px;

src/modules/product-analysis/components/InvestTarget.vue

 <template>
   <box title="投资目标">
-    <textarea v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index"></textarea>
+    <textarea v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index" :id="item.id"></textarea>
   </box>
 </template>
 

src/modules/product-analysis/components/Products.vue

 <template>
   <box title="产品概括">
     <ul>
-      <li v-for="(item, index) in data.completions" :key="index">
+      <li v-for="(item, index) in data.completions" :key="index" :id="item.id">
         <img :src="iconUrl(item)" class="icon" />
         <div class="tag">{{ item.subject }}</div>
         <textarea placeholder="请输入" v-model="item.commit_answer"></textarea>

src/modules/product-analysis/components/ProductsResult.vue

@@ -2,7 +2,7 @@
   <box title="产品概括">
     <ul>
       <li v-for="(item, index) in data.completions" :key="index">
-        <img :src="`https://webapp-pub.ezijing.com/x-training-new/products${index + 1}.png`" class="icon" />
+        <img :src="iconUrl(item)" class="icon" />
         <div class="tag">{{ item.subject }}</div>
         <div class="text">{{ item.commit_answer }}</div>
         <!-- <textarea placeholder="请输入" v-model="item.commit_answer"></textarea> -->
@@ -21,7 +21,18 @@ export default {
   data() {
     return {}
   },
-  created() {
+  methods: {
+    iconUrl(item) {
+      const map = {
+        product_overview_completion: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
+        operation_mode_completion: 'https://webapp-pub.ezijing.com/x-training-new/products2.png',
+        open_frequency_completion: 'https://webapp-pub.ezijing.com/x-training-new/products3.png',
+        transaction_currency_completion: 'https://webapp-pub.ezijing.com/x-training-new/products4.png',
+        fund_manager_completion: 'https://webapp-pub.ezijing.com/x-training-new/products5.png',
+        fund_principal_completion: 'https://webapp-pub.ezijing.com/x-training-new/products6.png'
+      }
+      return map[item.tag]
+    }
   }
 }
 </script>
@@ -41,7 +52,7 @@ ul {
     background: #f1fcf9;
     border: 1px solid #b8ebde;
     border-radius: 12px;
-    .text{
+    .text {
       width: 151px;
       font-size: 22px;
       text-align: center;
@@ -57,7 +68,7 @@ ul {
         border-bottom: 1px solid #a5e1e9;
         color: #62c2d0;
       }
-      .text{
+      .text {
         border-bottom: 1px solid #a5e1e9;
         color: #62c2d0;
       }
@@ -70,7 +81,7 @@ ul {
         border-bottom: 1px solid #dad396;
         color: #d9d292;
       }
-      .text{
+      .text {
         border-bottom: 1px solid #dad396;
         color: #d9d292;
       }
@@ -82,7 +93,7 @@ ul {
         border-bottom: 1px solid #e2c485;
         color: #e2c485;
       }
-      .text{
+      .text {
         border-bottom: 1px solid #e2c485;
         color: #e2c485;
       }
@@ -94,7 +105,7 @@ ul {
         border-bottom: 1px solid #de9888;
         color: #de9888;
       }
-      .text{
+      .text {
         border-bottom: 1px solid #de9888;
         color: #de9888;
       }
@@ -107,7 +118,7 @@ ul {
         border-bottom: 1px solid #7bc1af;
         color: #7bc1af;
       }
-      .text{
+      .text {
         border-bottom: 1px solid #7bc1af;
         color: #7bc1af;
       }

src/modules/product-analysis/views/Report.vue

@@ -125,19 +125,25 @@ export default {
       }).completions[0]
       const titCount = [{ id: findTitleData.id, commit_answer: this.titleValue }]
       const allData = [
+        ...titCount,
         ...productCount,
         ...investTargetCount,
         ...[comparesData],
         ...featuresCount,
-        ...costCount,
-        ...titCount
+        ...costCount
       ]
-      console.log(allData)
-      if (
-        allData.findIndex(item => {
-          return item.commit_answer === ''
-        }) === -1
-      ) {
+      // 空数据的索引
+      let emptyDataIndex = allData.findIndex(item => item.commit_answer === '')
+      // 判断业绩比较基准是否为空
+      const hasEmptyInput = !!this.$refs.compares[0].inputList.find(item => {
+        return item.input1 === '' || item.input2 === ''
+      })
+      if (hasEmptyInput) {
+        const dataId = this.$refs.compares[0].data.completions[0].id
+        const dataIndex = allData.findIndex(item => item.id === dataId)
+        emptyDataIndex = emptyDataIndex > dataIndex && emptyDataIndex !== -1 ? dataIndex : emptyDataIndex
+      }
+      if (emptyDataIndex === -1) {
         commitCase({ answers: JSON.stringify(allData) })
           .then(res => {
             const data = {
@@ -164,6 +170,14 @@ export default {
             this.$message.error(err.message || '稍后再试')
           })
       } else {
+        // 空数据的元素
+        const emptyElement = document.querySelector(`[id="${allData[emptyDataIndex].id}"]`)
+        let top = 140
+        if (emptyElement) {
+          // 空数据元素的位置
+          top = emptyElement.getBoundingClientRect().top + document.documentElement.scrollTop
+        }
+        window.scrollTo(0, top)
         this.$message('请填写完整')
       }
     }