<rate组件后台数据回显并修改

Question

怎么让存到数据库中的分值回显并能进行修改，现在是分数显示出来了，但是评分修改了之后分值不变

<template>
  <el-dialog @close="closeEvaluation" :workBaseId="workBaseId" :evaluationOption = "evaluationOption"
             :visible="evaluationOpen" :title="title" width="50%" append-to-body destroy-on-close
             :close-on-click-modal="false" center class="DialogStyle DialogInputStyle" v-if="evaluationOpen">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
        <template #title>
          <img src="@/assets/images/by.png" alt="" style="margin-left: -25px;height: 18px;padding-right: 25px">作业评价
        </template>
        <div>
           <li v-for="(item, index) in evaluationList" style="display: flex; justify-content: space-around;" v-if="item.workCategory === null||item.workCategory === ''||item.workCategory === '1'">

            <div style="width: 200px;font-size:15px">
              {{item.workScoringItems}}
            </div>
              <div style="margin-left: 10px;width: 200px">
              <el-rate
                v-model="item.value"
                @change="changeValue(index,item.value,item.workUuid,item.workCategoriesScore)"
                text-color="#ff9900">
              </el-rate>
              </div>
             <span>分值：</span>
             <span>{{scoreValue[index]=item.evaluationScore}}</span>
          </li>
        </div>
        </el-collapse-item>
          <el-collapse-item name="2" >
            <template #title>
              <img src="@/assets/images/by.png" alt="" style="margin-left: -25px;height: 18px;padding-right: 25px">作业内容
            </template>
        <div class="remarkBox" style="padding: 0 1% 0" >
          <el-input v-model="form.evalutionContent" type="textarea" style="text-align: center ; padding: 5px 15px;" :autosize="{ minRows: 7}"
                    resize="none"
                    :maxlength="600" placeholder="请输入内容"
                    ref="masklayer"
          />
        </div>
        </el-collapse-item>
        </el-collapse>
        </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="closeEvaluation">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import {getEvaluation, listNoPage} from "@/api/special/safety/evaluation";
import {addRecords, baseRecords, getRecords, listRecords, updateRecords} from "@/api/special/safety/records";
import {
  getBreakgroundInfo,
  getBreakInfo,
  getConfinedInfo,
  getElectricityInfo, getHighworkInfo, getHoistingInfo,
  getHotWorkInfo, getPluggingInfo
} from "@/api/special/safety/workBaseinfo";


export default {
  name: "index",
  props: {
    evaluationOpen: {
      type: Boolean,
      default: false
    },
    workBaseId: {
      type: String,
      default: null
    },
    evaluationOption:{
      type:String,   //0 更新，1新增
      default: null
    },
    width: {
      type: String,
      default: "70%"
    },
    title: {
      type: String,
      default: "作业评价"
    }
  },
  data() {
    return {
      activeNames: ['1', '2'],
      detail: null,
      value:3,
      scoreValue:[],
      // 作业评价设置表格数据
      evaluationList: [],
      workScoringItems:[],
      updateList:[],
      // 评价记录表格数据
      recordsList: [],
      // 评价记录子表格数据
      specialSafetymanaEvaluationRecordsChildList:[],
      // 表单参数
      form: {
        evalutionContent:''
      },
      // 表单校验
      rules: {
        workScoringItems: [],
        workCategoriesScore: [],
      }
    }
  },
  watch: {
    evaluationOpen(val) {
      console.log(123);
      console.log('val:',val);
      if (val) {
        console.log(456);
        console.log('this.evaluationOption:',this.evaluationOption);
        this.evaluationOpen = true;
        this.getList();
        this.reset();
      }
    },
  },
  created(){
    this.getList();
  },
  methods: {
    reset() {
      this.form = {
        evalutionContent: null
      };
      this.detail = null;
      this.evaluationList = []
      this.value=[];
      this.scoreValue=[];
    },
    /** 查询作业评价设置列表 */
    getList() {
        listNoPage().then(response => {
          console.log('response:', response)
          this.evaluationList = response.data;
          console.log('evaluationList', this.evaluationList)
          this.loading = false;
          if(this.evaluationOption=='0'){
          this.getUpdataList(this.workBaseId);
          console.log('this.workBaseId',this.workBaseId);
          }
        })
    },
    getUpdataList(workBaseId){
        console.log('workBaseId2', workBaseId);
        baseRecords(workBaseId).then(response => {
          console.log('dfssfdff', response);
          this.form.evalutionContent = response.data[0].evalutionContent;
          this.form.uuid = response.data[0].subUuid;
          console.log('qqqqqq1', this.evaluationList);
          response.data.forEach(items => {
            this.evaluationList.forEach(item => {
              if (items.subWorkUuid == item.workUuid) {
                item.workScoringItems = items.item;
                item.evaluationScore = items.subEvaluationScore;
                item.value = (item.evaluationScore) / (item.workCategoriesScore);
              }
            })
          })
          console.log(' this.form', this.form);
        })
      },
    closeEvaluation() {
      this.reset();
      this.$emit("closeEvaluation");
    },
    changeValue(index,value1,workUuid,value2){
      console.log("第几行",index)
      console.log('选择第几个星星:',value1);
      console.log('分值:',value2);
      console.log('workUuid:',workUuid);
      let thisScore = parseInt(value1)*parseInt(value2);
      this.scoreValue[index] = thisScore;
      let sum = 0;
      for( let i=0;i<this.scoreValue.length;i++){
        if(this.scoreValue[i] != undefined) {
          sum += this.scoreValue[i];
        }
      }
      this.totalScore = sum;
      console.log('sum:',sum);
      let obj = {};
      obj.evaluationScore = thisScore;
      obj.workUuid = workUuid;
      this.specialSafetymanaEvaluationRecordsChildList.push(obj);
      console.log('scords',this.specialSafetymanaEvaluationRecordsChildList);
    },
    /** 提交按钮 */
    submitForm() {
      this.form.workBaseId = this.workBaseId;
      this.form.specialSafetymanaEvaluationRecordsChildList = this.specialSafetymanaEvaluationRecordsChildList;
      this.form.totalScore = this.totalScore;
      console.log('this.form',this.form);
      // if(this.evaluationOption == 1 ) {
      //   addRecords(this.form).then(response => {
      //     this.$modal.msgSuccess("评价成功");
      //     console.log('chenggong', response.code);
      //     if (response.code === 200) {
      //       this.closeEvaluation();
      //     }
      //     this.getList();
      //   });
      // }
      // if(this.evaluationOption == 0){
        updateRecords(this.form).then(response => {
          this.$modal.msgSuccess("更新成功");
          console.log('chenggong2', response.code);
          if (response.code === 200) {
            this.closeEvaluation();
          }
          this.getList();
        });
      // }
  }
  }
}
</script>

Answer 1

这里改成 {{scoreValue[index]}}