FE_judgmentPoint/src/views/Program.vue

<template>
    <!-- 编程类 -->
    <div class="content">
        <div class="header flex">
            <i class="el-icon-arrow-left"
               @click="Back()"
               style="cursor:pointer">
                <span>Back</span>
            </i>

            <p>判分点设置</p>
            <el-button type="primary"
                       @click="Savejump('ruleForm')">保存</el-button>
        </div>
        <div class="footer">
            <div>
                <div class="flex footer_h">
                    <div class="black"></div>
                    <p>基本信息</p>
                </div>

                <el-form :model="ruleForm"
                         :rules="rules"
                         ref="ruleForm"
                         label-width="150px">
                    <el-form-item label="请输入判分点名称"
                                  prop="judgmentPointsName">
                        <el-input v-model="ruleForm.judgmentPointsName" @change="nameChange"></el-input>
                    </el-form-item>
                    <el-form-item label="实验要求" prop="experimentalRequirements">
                        <quill :toref="'editor1'" :border="true" v-model="ruleForm.experimentalRequirements" :minHeight="150" :height="150" />
                    </el-form-item>
                </el-form>

                <div class="flex footer_b">
                    <div class="black"></div>
                    <p>实验代码</p>
                </div>

                <div class="footer_inputs1">
                    <p style=" text-align: center;">参考答案</p>
                    <div style="padding: 10px 50px">
                        <quill1 :toref="'editor2'" :border="true" v-model="ruleForm.experimentcode" :minHeight="300" :height="300" />
                        <!-- <textarea id="memo1"
                              v-model="ruleForm.experimentcode"
                              style="outline:none;"></textarea> -->
                    </div>
                </div>

                <div class="flex footer_b">
                    <div class="black"></div>
                    <p>判分规则</p>
                    <el-button type="primary"
                               :disabled="isAdd"
                               @click="AddListRow()">新增</el-button>
                </div>
            </div>

            <el-row>
                <el-col :span="24">
                    <el-card shadow="hover">
                        <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"
                                             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>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import quill from '@/components/quill'
import quill1 from '@/components/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.$route.query.systemId,
            userId: this.$route.query.userId,
            ruleIds: [],
            jRP: "",
            jRR: "",
            isAdd: false,
            originalName: '',
            nameRepeat: false
        };
    },
    components: {quill,quill1},
    mounted () {
        this.$route.query.token && this.$store.commit('setParam',{token: atob(decodeURI(this.$route.query.token)),referrer: atob(decodeURI(this.$route.query.referrer))})
        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.originalName = res.message.point.judgmentPointsName
                        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 => { });
            }
        },
        nameChange(){
            if(this.ruleForm.judgmentPointsName !== this.originalName){
                this.$get(`${this.api.JudgmentPointNameRepetition}?judgmentPointName=${this.ruleForm.judgmentPointsName}`).then(res => {
                    this.nameRepeat = false
                }).catch(res => {
                    this.nameRepeat = true
                })
            }else{
                this.nameRepeat = false
            }
        },
        //保存
        Savejump (formName) {
            if (this.ruleIds != "") {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        if(this.nameRepeat) return this.$message.error('当前判分点名称已存在!')
                        if (this.$route.query.judgmentPointsId) {
                            // 编辑判分点基本信息
                            this.$post(this.api.UpdatePointOfJudgement, {
                                points: {
                                    experimentalRequirements: this.ruleForm
                                        .experimentalRequirements,
                                    judgmentPointsName: this.ruleForm.judgmentPointsName,
                                    experimentcode: this.ruleForm.experimentcode,
                                    judgmentPointsId: this.$route.query.judgmentPointsId
                                },
                                ruleIds: this.ruleIds
                            })
                                .then(res => {
                                    this.$router.back()
                                })
                                .catch(err => {
                                    console.log(err);
                                });
                        } else {
                            // 新增判分点基本信息
                            this.$post(this.api.AddPfdInformation, {
                                points: {
                                    experimentalRequirements: this.ruleForm
                                        .experimentalRequirements,
                                    judgmentPointsName: this.ruleForm.judgmentPointsName,
                                    experimentcode: this.ruleForm.experimentcode,
                                    judgmentPointsType: 1,
                                      systemId: this.systemId,
                                      userId: this.userId,
                                    // systemId: 1,
                                    // userId: 4
                                },
                                ruleIds: this.ruleIds
                            })
                                .then(res => {
                                    this.$router.back()
                                })
                                .catch(err => {
                                    console.log(err);
                                });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            } else {
                this.$message.error("错了哦，判分规则不能为空");
            }
        },
        getCookie (cookie_name) {
            //获取cookie中指定key的value
            var allcookies = document.cookie; //索引长度，开始索引的位置
            var cookie_pos = allcookies.indexOf(cookie_name); // 如果找到了索引，就代表cookie存在,否则不存在

            if (cookie_pos != -1) {
                // 把cookie_pos放在值的开始，只要给值加1即可
                //计算取cookie值得开始索引，加的1为“=”
                cookie_pos = cookie_pos + cookie_name.length + 1; //计算取cookie值得结束索引
                var cookie_end = allcookies.indexOf(";", cookie_pos);

                if (cookie_end == -1) {
                    cookie_end = allcookies.length;
                } //得到想要的cookie的值
                var value = unescape(allcookies.substring(cookie_pos, cookie_end));
            }
            return value;
        },
        Back () {
            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) {
            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: row.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);
                });
        },

        //点击新增添加一行数据
        AddListRow () {
            this.isAdd = true;
            this.tableData.push({
                decisionPointRule: "",
                judgmentRulesRule: "",
                isQie: true,
                isShow: false,
                judgmentRulesPoint: "",
                perhaps: "0"
            });
            this.$nextTick(() => {
                this.scrollToTop();
            });
        },
        scrollToTop () {
            const c =
                document.documentElement.scrollHeight || document.body.scrollHeight;
            window.scrollTo(0, c);
        }
    }
};
</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;
    margin-bottom: 60px;
}
/deep/ .el-card__body {
    padding: 0;
}
/deep/ .el-card {
    border: none;
}

/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>