simulation-front/src/views/sceneLibrary/gradingRuleDetail.vue

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
            <el-form-item label="规则名称:" prop="ruleName">
                <el-input
                    placeholder="请输入"
                    maxlength="50"
                    v-autoTrim="{ obj: form, key: 'ruleName' }"
                    v-model="form.ruleName"
                >
                </el-input>
            </el-form-item>

            <el-form-item label="规则描述:" prop="ruleDescription">
                <el-input
                    placeholder="请输入"
                    maxlength="300"
                    v-autoTrim="{ obj: form, key: 'ruleDescription' }"
                    v-model="form.ruleDescription"
                >
                </el-input>
            </el-form-item>

            <el-form-item label="规则详情:" prop="ruleDetails">
                <!-- <el-input
                    v-autoTrim="{
                        obj: form,
                        key: 'ruleDetails',
                    }"
                    v-model="form.ruleDetails"
                    type="textarea"
                    placeholder="请输入"
                    :autosize="{ minRows: 8, maxRows: 8 }"
                    maxlength="10000"
                    show-word-limit
                ></el-input> -->
                <editor
                    :content="content"
                    ref="editor"
                    :isEdit="!!$route.query.rulesId"
                ></editor>
            </el-form-item>

            <div class="btns">
                <!-- 公有列表进，另存为+取消 另存为为新增一条数据 新增数据均为私有 1 -->
                <!-- 私有列表进，保存+另存为+取消 0 -->
                <!-- 新增进，保存+取消 -1 -->
                <el-button
                    type="primary"
                    v-if="share === '0' || share === '-1'"
                    @click="save(false)"
                    >保存</el-button
                >
                <el-button
                    type="primary"
                    v-if="share === '0' || share === '1'"
                    @click="save(true)"
                    >另存为</el-button
                >
                <el-button type="primary" plain @click="cancel">取消</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import editor from "./components/editor";

export default {
    name: "gradingRuleDetail", // 评分规则
    components: { editor },
    data() {
        return {
            share: "-1", //控制显示按钮
            form: {
                rulesId: "",
                ruleName: "",
                share: "-1",
                ruleDescription: "",
                ruleDetails: "",
            },
            content: "",
            rules: {
                ruleName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                ruleDescription: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                ruleDetails: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
            },
        };
    },

    computed: {},

    methods: {
        save(isAdd) {
            let ruleDetails = this.$refs.editor.editor.getText().trim();
            this.form.ruleDetails = ruleDetails;

            // 调用save时，应写成save()，给不给参数均可，不写小括号的话，isAdd会是事件源，则为true
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (ruleDetails && ruleDetails.length > 10000) {
                        this.$message.error("规则详情长度不得超过10000");
                        return;
                    }

                    if (isAdd || !this.$route.query.rulesId) {
                        // 另存为或新增页面
                        this.form.rulesId = "";
                        this.form.share = "0";
                    }

                    if (this.form.rulesId) {
                        this.$axios({
                            method: "post",
                            url: this.$api.sceneLibrary.queryCsbById,
                            data: {
                                rulesId: this.form.rulesId,
                            },
                        }).then((res) => {
                            if (res.code == 200) {
                                if (res.info === 0) {
                                    this.saveFn();
                                    return;
                                }

                                this.$confirm(
                                    "该评分规则已经被场景测试包引用，保存后同步更新场景测试包中的评分规则，是否确认保存？",
                                    "提示",
                                    {
                                        confirmButtonText: "确定",
                                        cancelButtonText: "取消",
                                        type: "warning",
                                    }
                                ).then(() => {
                                    this.saveFn();
                                });
                            } else {
                                this.$message.error(
                                    res.message ||
                                        "获取该评分规则是否被场景测试包引用失败"
                                );
                            }
                        });
                        return;
                    }

                    this.saveFn();
                }
            });
        },
        saveFn() {
            this.$axios({
                method: "post",
                url: this.$api.sceneLibrary.saveScoringRules,
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.cancel();
                } else {
                    this.$message.error(res.message || "保存失败");
                }
            });
            // .catch((error) => {
            //     this.$message.error(error || "保存失败！");
            // });
        },
        cancel() {
            this.$router.replace({ path: "/gradingRulesList" });
        },
    },

    mounted() {
        if (this.$route.query.rulesId) {
            let rulesId = "";
            this.form.rulesId = rulesId = this.$route.query.rulesId;
            this.form.share = this.share = this.$route.query.share;

            if (rulesId) {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.queryScoringRules,
                    data: {
                        rulesId,
                    },
                }).then((res) => {
                    if (res.code == 200 && res.info) {
                        this.form = res.info;
                        this.content = res.info.ruleDetails;
                    } else {
                        this.$message.error(res.message || "获取信息失败");
                    }
                });
            }
        }
    },
};
</script>

<style lang='less' scoped>
.el-form {
    width: 60%;
    padding-top: 60px;
    margin: 0 auto;

    .el-input {
        width: 100%;
    }
}

.btns {
    padding-top: 30px;
    text-align: center;
}
</style>