RuoYi-Vue/ruoyi-ui/src/views/people/practice/practice3.vue

<template>
  <div class="app-container">
    <div>  
      <div class="djs">得分成绩/满分成绩: <span class="df">50</span>/100</div>
    </div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%;margin-top:1%">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="评分标准">
      </el-table-column>
      <el-table-column
        prop="name2"

        label="扣分">
      </el-table-column>
      <el-table-column
        prop="name3"
        label="维修情况">
        <template scope="scope">
            <span v-if="scope.row.name3==='排除'" style="color: green">排除</span>
            <span v-else-if="scope.row.name3==='未排除'" style="color: red">未排除</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name4"
        label="题目">
      </el-table-column>
    </el-table>

    <el-table
      :data="tableData1"
      :span-method="arraySpanMethod"
      border
      style="width: 100%;">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="评分标准">
      </el-table-column>
      <el-table-column
        prop="name2"
        label="扣分">
      </el-table-column>
      <el-table-column 
        prop="name3"
        label="报告情况">
        <template scope="scope">
            <span v-if="scope.row.name3==='正确'" style="color: green">正确</span>
            <span v-else-if="scope.row.name3==='错误'" style="color: red">错误</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name4"
        label="学生答题情况">
      </el-table-column>
    </el-table>

    <el-form ref="elForm" :model="formData"  size="medium" label-width="100px" style="margin-top: 2%;text-align: center;">
        <el-form-item size="large">
            <el-button type="primary" @click="submitForm" style="width: 8%;">结束</el-button>
        </el-form-item>
    </el-form>

  </div>
</template>
<style>
.djs{
  margin-right: 5%;
  text-align: right;
  line-height:8px;
  font-size:20px;
}
.df {
  color:red;
}
</style>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id:'一.故障排除(75分)',
          name: '',
          name2: '',
          name3: '',
          name4: '',
        },{
          id:1,
          name: '故障一未排除扣25分',
          name2: '',
          name3: '排除',
          name4: '',
        }, {
          id:2,
          name: '故障二未排除扣25分',
          name2: '',
          name3: '未排除',
          name4: '',
        }, {
          id:3,
          name: '故障三未排除扣25分',
          name2: '',
          name3: '排除',
          name4: '',
        }],

        tableData1: [{
          id:'二.修理报告表(15分)',
          name: '',
          name2: '',
          name3: '',
          name4: '',
        },{
          id:1,
          name: '故障现象少写或错写1条扣1分',
          name2: '',
          name3: '正确',
          name4: '',
        }, {
          id:2,
          name: '可能原因少写或错写1条扣1分',
          name2: '',
          name3: '错误',
          name4: '',
        }, {
          id:3,
          name: '故障部位少写或错写1条扣1分',
          name2: '',
          name3: '正确',
          name4: '',
        }, {
          id:4,
          name: '排除方法少写或错写1条扣1分',
          name2: '',
          name3: '正确',
          name4: '',
        }, {
          id:5,
          name: '修复结论错扣2分',
          name2: '',
          name3: '正确',
          name4: '',
        }, {
          id:'三.维修时间(10分)',
          name: '',
          name2: '',
          name3: '',
          name4: '',
        }, {
          id:'按没超过1分钟扣1分的比例扣分',
          name: '',
          name2: '',
          name3: '',
          name4: '',
        }, {
          id:'扣分小计',
          name: '',
          name2: '超时：',
          name3: '',
          name4: '',
        }, {
          id:'五.成绩',
          name: '',
          name2: '-50',
          name3: '',
          name4: '',
        }, {
          id:'说明',
          name: '',
          name2: '',
          name3: '',
          name4: '',
        }],
      };
    },
    methods: {
      //首页合并
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          if (columnIndex === 0) {
            return [1, 5];
          } else {
            return [0, 0];
          }
        }
        if (rowIndex === 6) {
          if (columnIndex === 0) {
            return [1, 5];
          } else {
            return [0, 0];
          }
        }
        //按每超时1分钟扣分的比例扣分
        if (rowIndex>6) {
          if (columnIndex === 0) {
            return [1, 2];
          }else if(columnIndex ===2){
            return [1, 3];
          } else {
            return [0, 0];
          }
        }
      },
      /** 结束按钮 */
      submitForm() {
        this.$router.push("/practice");
        // const userId = this.form.userId;
        // const roleIds = this.roleIds.join(",");
        // updateAuthRole({ userId: userId, roleIds: roleIds }).then((response) => {
        //   this.$modal.msgSuccess("授权成功");
        //   this.close();
        // });
      },
    }
  };
</script>