rt-sim-training-client/src/views/trainingManage/gradeRules.vue

<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :modal="false" :before-close="doClose" center>
    <!--  -->
    <!-- <span>角色：</span> -->
    <el-form ref="form" :model="addModel" label-width="70px" :rules="rules">
      <el-form-item label="角色:" prop="memberId" style="display:inline-block">
        <el-select v-model="addModel.memberId" placeholder="" style="width:145px" size="mini" @change="changeMember">
          <el-option
            v-for="item in memberList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="总分:" prop="fullMarks" style="display:inline-block">
        <el-input-number v-model="addModel.fullMarks" style="width:145px" :min="0" size="mini" :step="1" />
      </el-form-item>
    </el-form>
    <!-- <span style="margin-left:10px">总分：</span> -->
    <!-- </el-form-item> -->
    <el-table
      id="gradeRules"
      ref="gradeRules"
      :data="allstepList"
      border
      :height="350"
      style="border:1px #ccc solid;"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
      />
      <el-table-column
        prop="description"
        label="步骤描述"
        width="468"
      />
      <el-table-column
        prop="score"
        label="扣分分值"
        width="200"
      >
        <template v-if="addModel.memberId==scope.row.memberId" slot-scope="scope">
          <el-input-number v-model="currentStepMap[scope.row.id]" style="width:145px" :min="0" :step="1" size="mini" />
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="center" style="margin-top:20px">
      <el-col :span="6" :offset="7">
        <el-button @click="cancel">取消</el-button>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-button type="primary" :loading="loading" @click="commit">确定 </el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { getTrainingStepList, getTrainingMmembers, updateTrainingGradeRules, getTrainingGradeRules } from '@/api/trainingManage';
export default {
    name: 'GradeRules',
    props: {},
    data() {
        return {
            dialogVisible: false,
            trainingId:'',
            loading:false,
            title:'评分',
            allstepList:[],
            memberList:[
                {code:'1', name:'行调'}
            ],
            currentStepMap:{},
            gradeRulesMap:{},
            addModel:{
                memberId:'',
                fullMarks:'',
                details:[
                ]
            },
            rules:{
                memberId: [
                    { required: true, message: '请选择角色', trigger: 'blur' },
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],
                fullMarks: [
                    { required: true, message: '请输入总分', trigger: 'blur' },
                    { required: true, message: '请输入总分', trigger: 'change' }
                ]
            }
        };
    },
    methods:{
        doShow(row) {
            this.dialogVisible = true;
            this.trainingId = row.id;
            // 获取步骤
            getTrainingStepList(row.id).then(resp => {
                if (resp.data) {
                    this.allstepList = resp.data;
                    // 获取规则
                    getTrainingGradeRules(row.id).then(response=>{
                        this.gradeRulesMap = {};
                        response.data.forEach(gradeRule=>{
                            this.gradeRulesMap[gradeRule.memberId] = gradeRule;
                        });
                        // 获取角色信息
                        getTrainingMmembers(row.id).then(res=>{
                            debugger;
                            // this.memberList = res.data;
                            if (this.memberList.length > 0) {
                                this.changeMember(this.memberList[0].code);
                            }
                        //
                        }).catch((e) => {
                            console.error(e);
                        });
                    });
                }
            }).catch((e) => {
                console.error(e);
                this.$message.error('获取实训步骤信息失败！');
            });
        },
        changeMember(memberId) {
            this.currentStepMap = {};
            if (this.gradeRulesMap[memberId]) {
                this.addModel.fullMarks = this.gradeRulesMap[memberId].fullMarks;
                this.gradeRulesMap[memberId].details.forEach(each=>{
                    this.currentStepMap[each.elementId] = each.score;
                });
            } else {
                this.allstepList.forEach(each=>{
                    if (each.memberId == memberId) {
                        this.currentStepMap[each.id] = 0;
                    }
                });
                this.addModel.fullMarks = '';
            }
            this.addModel.memberId = memberId;
        },
        doClose() {
            this.dialogVisible = false;
        },
        cancel() {
            this.doClose();
        },
        commit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const keyList = Object.keys(this.currentStepMap);
                    const details = [];
                    keyList.forEach(key=>{
                        details.push({elementId:key, score:this.currentStepMap[key]});
                    });
                    this.addModel.details = details;
                    updateTrainingGradeRules(this.trainingId, this.addModel).then(resp => {
                    }).catch((e) => {
                        console.error(e);
                        this.$message.error('更新实训评分规则失败！');
                    });
                }
            });
        }
    }
};
</script>