FE_occupationlab_server/src/components/page/Program.vue

<template>
  <!-- 编程类 -->
  <div>
      <el-card shadow="hover" class="mgb20">
        <div class="per_title" v-preventReClick @click="goback()">
            <i class="el-icon-arrow-left"></i>
            <span class="per_back">返回</span>
            <span class="per_school">查看判分点</span>
        </div>
      </el-card>
      <el-card shadow="hover" class="mgb20">
        <div class="flex-center mgb20 user_header">
            <p class="addhr_tag"></p>
            <span>基本信息</span>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
          <el-form-item label="请输入判分点名称" prop="judgmentPointsName">
            <el-input :disabled="true" v-model="ruleForm.judgmentPointsName"></el-input>
          </el-form-item>
          <el-form-item label="实验要求" prop="experimentalRequirements">
            <quill :border="true" :readonly="true" v-model="ruleForm.experimentalRequirements" :minHeight="150" :height="150" />
          </el-form-item>
        </el-form>
      </el-card>
      
      <el-card shadow="hover" class="mgb20">
        <div class="flex-center mgb20 user_header">
            <p class="addhr_tag"></p>
            <span>实验代码</span>
        </div>

        <div class="footer_inputs1">
          <p style=" text-align: center;">参考答案</p>
          <textarea id="memo1" :disabled="true" v-model="ruleForm.experimentcode" style="outline:none;"></textarea>
        </div>
      </el-card>

      <el-card shadow="hover" class="mgb20">
        <div class="flex-center mgb20 user_header">
            <p class="addhr_tag"></p>
            <span>判分规则</span>
        </div>

        <el-table
          :data="tableData"
          :stripe="true"
          :cell-style="rowClass"
          :header-cell-style="headClass"
          header-align="center"
          ref="editTable"
        >
          <el-table-column
            prop="decisionPointRule"
            type="index"
            label="序号"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column label="编译器中正确答案" align="center">
            <template slot-scope="scope">
              <p class="p">字段一致性规则：用户编辑器中至少出现如下语句</p>
              <el-input
                type="textarea"
                :rows="2"
                v-model="scope.row.judgmentRulesRule"
                :disabled="scope.row.isShow"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" width="150">
            <template slot-scope="scope">
              <el-button
                type="primary"
                :disabled="scope.row.isShow"
                style="cursor:pointer;border-radius: 50%;"
                circle
                @click="getPerhaps(scope.row)"
              >{{scope.row.perhaps==0?"且":"或"}}</el-button>
            </template>
          </el-table-column>
          <el-table-column label="终端中正确答案" align="center">
            <template slot-scope="scope">
              <p class="p">运行结果一致性规则：用户运行结果需要与下方代码运行结果一致</p>
              <el-input
                type="textarea"
                :rows="2"
                v-model="scope.row.judgmentRulesPoint"
                :disabled="scope.row.isShow"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <el-link
                size="mini"
                type="primary"
                :underline="false"
                :disabled="scope.row.isShow"
                v-show="scope.row.isShow"
                @click="getHandleEdit(scope.row)"
              >编辑</el-link>
              <el-link
                type="primary"
                size="mini"
                :underline="false"
                v-show="!scope.row.isShow"
                @click="getRule(scope.row)"
              >保存</el-link>
              <el-link
                size="mini"
                type="primary"
                :underline="false"
                v-show="!scope.row.isShow"
                @click="dialogFormVisible(scope.$index,scope.row)"
              >取消</el-link>
              <el-link
                size="mini"
                type="primary"
                :underline="false"
                v-show="!scope.row.isShow"
                @click="getRuleDelete(scope.$index,scope.row)"
              >删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  </div>
</template>

<script>
import quill from '@/components/common/quill'
export default {
  data() {
    return {
      ruleForm: {
        judgmentPointsName: "",
        experimentalRequirements: "",
        experimentcode: ""
      },
      tableData: [],
      id: "",
      rules: {
        judgmentPointsName: [
          { required: true, message: "内容不能为空", trigger: "blur" }
        ],
        experimentalRequirements: [
          { required: true, message: "实验要求不能为空", trigger: "blur" }
        ],
        experimentcode: [
          { required: true, message: "参考答案不能为空", trigger: "blur" }
        ]
      },
      decisionPointRule: "",
      systemId: this.$config.systemId,
      userId: "",
      ruleIds: [],
      jRP: "",
      jRR: "",
      isAdd: false
    };
  },
  components: {quill},
  mounted() {
    this.getMesg();
  },

  methods: {
    //且或判断
    getPerhaps(a) {
      if (a.perhaps == 1) {
        a.perhaps = "0";
      } else {
        a.perhaps = "1";
      }
    },
    //判分点详细信息查询(通过首页编辑按钮)
    getMesg() {
      if (this.$route.query.judgmentPointsId) {
        this.$get(this.api.QueryPfdInformation, {
          judgmentPointsId: this.$route.query.judgmentPointsId
        })
          .then(res => {
            res.message.rules.map(e => {
              this.$set(e, "isQie", true);
              this.$set(e, "isShow", true);
            });
            this.ruleForm = {
              judgmentPointsName: res.message.point.judgmentPointsName,
              experimentalRequirements:
                res.message.point.experimentalRequirements,
              experimentcode: res.message.point.experimentcode
            };
            this.tableData = res.message.rules;
            let arr1 = this.tableData;
            let result1 = arr1.map(e => e.decisionPointRule);
            this.ruleIds = this.ruleIds.concat(result1);
            // this.decisionPointRule=res.message.rules[0].decisionPointRule;
          })
          .catch(err => {});
      }
    },
    goback() {
      this.$router.back()
    },

    // 表头样式设置
    headClass() {
      return "text-align: center;";
    },

    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 编辑判分点规则 保存按钮
    getRule(row) {
      if (!row.judgmentRulesRule || !row.judgmentRulesPoint) {
        this.$message({
          showClose: true,
          message: "内容不能为空",
          type: "warning"
        });
      } else {
        if (row.decisionPointRule) {
          this.$post(this.api.UpdatePointOfJudgementRule, {
            judgmentRulesRule: row.judgmentRulesRule,
            judgmentRulesPoint: row.judgmentRulesPoint,
            perhaps: String(row.perhaps),
            decisionPointRule: row.decisionPointRule
          })
            .then(res => {
              this.isAdd = false;
              row.isShow = true;
              this.getContent();
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          //新增判分规则
          this.$post(this.api.AddPfdgzInformation, {
            judgmentRulesRule: row.judgmentRulesRule,
            judgmentRulesPoint: row.judgmentRulesPoint,
            perhaps: String(row.perhaps)
          })
            .then(s => {
              this.isAdd = false;
              row.isShow = true;
              this.id = s.message;
              this.ruleIds.push(this.id);
              console.log(this.ruleIds);
              this.getContent();
            })
            .catch(err => {
              console.log(err);
            });
        }
      }
    },

    //取消
    dialogFormVisible(index, row) {
      this.isAdd = false;
      if (!row.decisionPointRule) {
        this.tableData.splice(index, 1);
      } else {
        if (!row.judgmentRulesRule || !row.judgmentRulesPoint) {
          this.$message({
            showClose: true,
            message: "内容不能为空",
            type: "warning"
          });
        } else {
          row.isShow = true;
          row.judgmentRulesRule = this.jRR;
          row.judgmentRulesPoint = this.jRP;
        }
      }
    },
    //编辑
    getHandleEdit(row) {
      this.isAdd = true;
      row.isShow = false;
      this.jRR = row.judgmentRulesRule;
      this.jRP = row.judgmentRulesPoint;
    },
    //删除
    getRuleDelete(index, row) {
      this.getContent();
      if (!row.decisionPointRule) {
        this.tableData.splice(index, 1);
        this.isAdd = false;
      } else {
        this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        })
          .then(() => {
            this.$post(this.api.DeletePointOfJudgementRule, {
              decisionPointRule: this.decisionPointRule
            })
              .then(res => {
                this.getContent();
                this.isAdd = false;
              })
              .catch(err => {
                console.log(err);
              });
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    // 判分点规则信息查询
    getContent() {
      this.$get(this.api.QueryPfdgzInformation, {
        ruleIds: this.ruleIds.join()
      })
        .then(s => {
          s.message.map(e => {
            this.$set(e, "isQie", true);
            this.$set(e, "isShow", true);
          });
          this.tableData = s.message;
          this.decisionPointRule = s.message[0].decisionPointRule;
        })
        .catch(err => {
          console.log(err);
        });
    },

    
  }
};
</script>

<style lang="scss" scoped>
// 后面修改的样式
/deep/ .el-link.el-link--primary {
  padding-right: 10px;
}
/deep/ .el-button {
  line-height: 0;
  height: 30px;
  width: 80px;
  margin-top: 7px;
  border-radius: 20px;
  position: absolute;
  right: 30px;
}

/deep/ .el-input__inner {
  border: 1px solid #9278ff;
}
/deep/ .el-form-item {
  margin-top: 15px;
}
// 第二部分
/deep/ .el-button--text {
  color: #9278ff;
}
/deep/ .el-button--text:focus,
.el-button--text:hover {
  color: #9278ff;
}
.border {
  width: 50px;
  height: 50px;
  border: 1px solid #9278ff;
  border-radius: 50%;
  margin: auto;
}
.p {
  font-size: 12px;
  font-weight: 600;
}
// 文本框
/deep/ .el-textarea__inner {
  height: 145px;
  width: 650px;
  resize: none;
  border: 1px solid #9278ff;
  font-size: 12px;
  border-radius: 5px;
}
/deep/ .el-textarea__inner:hover {
  border: 1px solid #9278ff;
}

// 滚动条的宽度
/deep/ ::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ ::-webkit-scrollbar-thumb {
  background-color: #9278ff;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 5px #dddddd;
}
/deep/ ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #dddddd;
  border-radius: 0;
  background: #dddddd;
}
/deep/ .el-row {
  padding: 0 20px;
}

/deep/ .el-table th {
  font-size: 14px;
  font-family: Microsoft YaHei;
  color: rgba(255, 255, 255, 1);
  background-color: #9278ff;
}
/deep/ .el-table td,
.el-table th {
  padding-top: 0;
}
.footer_b p {
  margin: 0;
  padding-left: 10px;
  font-size: 14px;
}
.footer_b {
  padding: 10px 0;
  border-top: 1px dashed #cccccc;
  margin: 0 15px;
  height: 45px;
  line-height: 45px;
}

// 第一部分

#memo {
  margin-left: 10px;
  height: 200px;
  width: 800px;
  resize: none;
  border: 1px solid #9278ff;
  font-size: 12px;
  border-radius: 5px;
}
#memo1 {
  height: 300px;
  width: 1700px;
  resize: none;
  border: 1px solid #9278ff;
  font-size: 12px;
  border-radius: 5px;
  padding: 10px 20px;
}
/deep/ .el-input--suffix .el-input__inner {
  border: 1px solid #9278ff;
}
.footer_input p {
  font-size: 12px;
  padding-right: 20px;
}
.footer_input {
  padding: 30px 0 20px 80px;
}
.footer_inputs {
  padding: 30px 0 20px 80px;
}
.footer_inputs1 {
  padding-bottom: 50px;
  text-align: center;
}
.footer_inputs1 p {
  margin: 0 0 15px 0;
  font-size: 14px;
}
.footer_inputs p {
  font-size: 12px;
  padding-right: 20px;
}
/deep/ .el-input {
  width: 30%;
}
/deep/ [class*=" el-icon-"],
[class^="el-icon-"] {
  line-height: 3;
  padding-left: 10px;
}
.header {
  background-color: #ffffff;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
}
.header span {
  font-size: 14px;
  font-weight: 600;
  padding-left: 5px;
}
.header p {
  padding-left: 20px;
  margin: 0;
}
.footer_h {
  border-top: 1px dashed #cccccc;
  border-bottom: 1px dashed #cccccc;
  margin: 0 15px;
  height: 45px;
  line-height: 45px;
}
.flex {
  display: flex;
  justify-content: flex-start;
}
.footer {
  background-color: #ffffff;
}
.footer_h p {
  padding-left: 10px;
  font-size: 14px;
  margin: 0;
}
.black {
  width: 8px;
  height: 18px;
  background-color: #333;
  margin-top: 10px;
}
.content {
  position: relative;
  top: 10px;
}
</style>