修改面试评分页面交互

src/views/candidateManage/resume.vue

@@ -1,11 +1,3 @@
-<!--
- * @Description: create
- * @Version: 1.0
- * @Autor: XuTongZhang
- * @Date: 2020-07-30 10:32:00
- * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-02-25 14:08:25
--->
 <template>
   <div>
     <el-dialog
@@ -30,7 +22,7 @@
                 v-for="(item, index) in info.answerVideoList"
                 :key="item.id"
                 class="active"
-                @click="active = index"
+                @click="handleSwitch(index)"
                 :class="active === index ? 'is-active' : ''"
               >{{ item.questionName }}</div>
             </div>
@@ -128,11 +120,34 @@
               </el-table>
             </el-card>
           </div>
-          <div class="comprehensive">
-            <div class="rate-grounp">
-              综合评分：<el-rate :value="score.totalScore" disabled />
+          <el-card>
+            <div class="header-color-grounp" style="justify-content: start;">
+              <div class="success"></div>表示通过
             </div>
-          </div>
+            <div class="header-color-grounp" style="justify-content: start;">
+              <div class="warning"></div>表示建议修改
+            </div>
+            <div class="header-color-grounp" style="justify-content: start;">
+              <div class="danger"></div>表示没有体现这个部分或需要重新修改
+            </div>
+          </el-card>
+          <el-card>
+            <div class="comprehensive">
+              <div class="rate-grounp">
+                综合评分：<el-rate v-model="score.totalScore" />
+              </div>
+            </div>
+          </el-card>
+          <el-card>
+            <div class="flex-ju-al-start">
+              <div class="flex" style="padding-right:10px;"><el-rate :value="1" disabled />很差</div>
+              <div class="flex" style="padding-right:10px;"><el-rate :value="2" disabled />差</div>
+              <div class="flex" style="padding-right:10px;"><el-rate :value="3" disabled />一般</div>
+              <div class="flex" style="padding-right:10px;"><el-rate :value="4" disabled />好</div>
+              <div class="flex" style="padding-right:10px;"><el-rate :value="5" disabled />很好</div>
+            </div>
+          </el-card>
+          <el-card>
           <div class="score-form">
             <el-form :model="score" ref="scoreForm" label-position="top" label-width="80px">
               <el-form-item label="简历修改建议">
@@ -151,10 +166,13 @@
               </el-form-item>
             </el-form>
           </div>
+          </el-card>
+          <el-card>
           <div class="score-footer">
             <el-button @click="resetForm">重置</el-button>
             <el-button type="primary" @click="submitForm" style="background: #00a0e9;border-color:#00a0e9">确定</el-button>
           </div>
+          </el-card>
         </div>
       </div>
     </el-dialog>
@@ -202,24 +220,7 @@ export default {
           value: 0
         }
       ],
-      interviewScore: [
-        {
-          label: '个人介绍',
-          value: 0
-        },
-        {
-          label: '自我评价',
-          value: 0
-        },
-        // {
-        //   label: '问题',
-        //   value: 0
-        // },
-        {
-          label: '其他',
-          value: 0
-        }
-      ]
+      interviewScore: []
     }
   },
   props: {
@@ -315,49 +316,44 @@ export default {
               return item
             })
           // console.log(this.resumeScore)
-          const list = [
-            {
-              label: '个人介绍',
-              value: 0
-            },
-            {
-              label: '自我评价',
-              value: 0
-            },
-            // {
-            //   label: '问题',
-            //   value: 0
-            // },
-            {
-              label: '其他',
-              value: 0
-            }
-          ]
-          this.interviewScore = interviewScore
-            ? JSON.parse(interviewScore)
-            : (() => {
-              const num = this.info.answerVideoList ? this.info.answerVideoList.length : 0
-              let arr = []
-              for (let index = 0; index < num; index++) {
-                arr.push(
-                  {
-                    label: '问题' + (index + 1),
-                    value: 0
-                  }
-                )
-              }
-              list.splice(2, 0, ...arr)
-              console.log(list)
-              return list.map(item => {
-                item.value = 0
-                return item
-              })
-            })()
-            // this.interviewScore.map(item => {
-            //   item.value = 0
-            //   return item
-            // })
-            // info.answerVideoList && info.answerVideoList.length
+          // const list = [
+          //   {
+          //     label: '个人介绍',
+          //     value: 0
+          //   },
+          //   {
+          //     label: '自我评价',
+          //     value: 0
+          //   },
+          //   // {
+          //   //   label: '问题',
+          //   //   value: 0
+          //   // },
+          //   {
+          //     label: '其他',
+          //     value: 0
+          //   }
+          // ]
+          this.interviewScore = interviewScore ? JSON.parse(interviewScore) : this.interviewScore
+          // ? JSON.parse(interviewScore)
+          // : (() => {
+          //   const num = this.info.answerVideoList ? this.info.answerVideoList.length : 0
+          //   let arr = []
+          //   for (let index = 0; index < num; index++) {
+          //     arr.push(
+          //       {
+          //         label: '问题' + (index + 1),
+          //         value: 0
+          //       }
+          //     )
+          //   }
+          //   list.splice(2, 0, ...arr)
+          //   console.log(list)
+          //   return list.map(item => {
+          //     item.value = 0
+          //     return item
+          //   })
+          // })()
         })
     },
     openNewPage (url) {
@@ -409,6 +405,10 @@ export default {
     changeScore (index, val, arr) {
       // console.log(index, val)
       this.$set(this[arr][index], 'value', val)
+    },
+    handleSwitch (param) {
+      this.active = param
+      this.$api.post('/question/addUsedVideo')
     }
   },
   watch: {
@@ -417,6 +417,16 @@ export default {
       if (this.info.resumeFrom === 3) {
         this.details(this.info.id)
       }
+      this.interviewScore = [
+        ...this.info.answerVideoList.map((item, index) => ({
+          label: '问题' + (index + 1),
+          value: 0
+        })),
+        {
+          label: '其他',
+          value: 0
+        }
+      ]
     },
     dialogFormVisible (val) {
       this.resetForm()
@@ -428,6 +438,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.flex-ju-al-start{
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
 .flex {
   display: flex;
   justify-content: space-between;
@@ -469,7 +484,7 @@ export default {
     }
   }
   .resune {
-    overflow: scroll;
+    overflow: auto;
     flex: 3;
     max-height: 770px;
     iframe {
@@ -487,6 +502,7 @@ export default {
     .header-color-grounp {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       > div {
         width: 13px;
         margin: 0 6px;