simulation-front/src/views/modelLibrary/addVehicleConfiguration.vue

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="108px">
            <div class="inputBox flexBox">
                <span class="label">配置ID</span>
                <div>{{ confId }}</div>
            </div>
            <div class="flexBox headBox">
                <el-form-item label="配置名称:" prop="secrete">
                    <el-select v-model="form.secrete">
                        <el-option
                            v-for="item in confList"
                            :label="item.caption"
                            :value="item.code"
                            :key="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="配置描述:" prop="title">
                    <el-input
                        placeholder="请输入"
                        maxlength="150"
                        v-autoTrim="{ obj: form, key: 'title' }"
                        v-model="form.title"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车辆名称:" prop="title">
                    <el-input
                        placeholder="请输入"
                        maxlength="150"
                        v-autoTrim="{ obj: form, key: 'title' }"
                        v-model="form.title"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车辆描述:" prop="title">
                    <el-input
                        placeholder="请输入"
                        maxlength="150"
                        v-autoTrim="{ obj: form, key: 'title' }"
                        v-model="form.title"
                    >
                    </el-input>
                </el-form-item>
            </div>

            <div class="contentBox">
                <div>
                    <el-button type="primary" class="previewBtn"
                        >预览</el-button
                    >
                    <handle-config-list
                        v-for="index in 4"
                        :isActiveA="index === 1"
                        :titleCode="index - 1"
                        :key="index"
                        @curItem="curItem"
                    ></handle-config-list>
                </div>
                <div class="model">
                    <img src="../../assets/common/image/car.png" width="100%" />
                </div>
                <div class="conditions">
                    <div class="titlePanel">
                        <i class="el-icon el-icon-video-camera"></i>
                        <span class="name">{{ curTitle }}</span>
                    </div>
                    <div class="forms">
                        <el-form-item label="X(M):" prop="x">
                            <el-input
                                placeholder="请输入"
                                maxlength="15"
                                v-autoTrim="{ obj: form, key: 'x' }"
                                v-model="form.x"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="Y(M):" prop="y">
                            <el-input
                                placeholder="请输入"
                                maxlength="15"
                                v-autoTrim="{ obj: form, key: 'y' }"
                                v-model="form.y"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="Z(M):" prop="z">
                            <el-input
                                placeholder="请输入"
                                maxlength="15"
                                v-autoTrim="{ obj: form, key: 'z' }"
                                v-model="form.z"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="横摆角(deg):" prop="title">
                            <el-input
                                placeholder="请输入"
                                maxlength="15"
                                v-autoTrim="{ obj: form, key: 'title' }"
                                v-model="form.title"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="俯仰角(deg):" prop="title">
                            <el-input
                                placeholder="请输入"
                                maxlength="15"
                                v-autoTrim="{ obj: form, key: 'title' }"
                                v-model="form.title"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item label="翻滚角(deg):" prop="title">
                            <el-input
                                placeholder="请输入"
                                maxlength="15"
                                v-autoTrim="{ obj: form, key: 'title' }"
                                v-model="form.title"
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <div class="btns">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button type="primary">取消</el-button>
                <el-button type="primary">分享</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import handleConfigList from "./components/handleConfigList.vue";

export default {
    name: "addVehicleConfiguration", // 新增车辆配置
    components: { handleConfigList },
    data() {
        let validateNum = (rule, value, callback) => {
            // !/^(-?\d+)(\.\d{1,2})?$/.test(value) &&
            !/^(-?(0|[1-9][0-9]+))(\.\d{1,2})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        return {
            confId: "l2s2d3k4j5fl90898",
            confList: [{ caption: "玩儿", code: 1 }],
            curTitle: "水电费可接受的李逵负荆",
            form: {
                title: "",
                content: "",
                sendto: "",
                sendtoIds: "",
                md5PathList: [],
                secrete: "",
                x: "",
                y: "",
                z: "",
            },
            rules: {
                title: [
                    { required: true, message: "请输入标题", trigger: "blur" },
                ],
                content: [
                    { required: true, message: "请输入内容", trigger: "blur" },
                ],
                sendto: [
                    {
                        required: true,
                        message: "请选择发送对象",
                        trigger: "change",
                    },
                ],
                secrete: [
                    { required: true, message: "请选择密级", trigger: "blur" },
                ],
                x: [
                    {
                        required: true,
                        message: "请输入X轴坐标",
                        trigger: "blur",
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有2位小数的数字",
                        trigger: ["blur"],
                    },
                ],
                y: [
                    {
                        required: true,
                        message: "请输入Y轴坐标",
                        trigger: "blur",
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有2位小数的数字",
                        trigger: ["blur"],
                    },
                ],
                z: [
                    {
                        required: true,
                        message: "请输入Z轴坐标",
                        trigger: "blur",
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有2位小数的数字",
                        trigger: ["blur"],
                    },
                ],
            },
        };
    },

    computed: {},

    methods: {
        save() {
            this.$refs.form.validate().then(
                async (valid) => {
                    console.log(6);
                },
                (valid) => {
                    // 表单校验失败
                    this.$message.error("错了哦");
                }
            );
        },
        curItem(title) {
            this.curTitle = title;
        },
    },

    // mounted: {},
};
</script>

<style lang='less' scoped>
.el-form {
    margin: 55px 50px 0;
}

.headBox {
    .el-form-item {
        margin-right: 20px;
    }
}

.inputBox.flexBox {
    margin-bottom: 22px;

    .label {
        width: 88px;
    }

    div {
        line-height: 32px;
    }
}

.contentBox {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    .previewBtn {
        width: 100%;
        margin-bottom: 15px;
    }

    .model {
        width: 400px;
    }

    .conditions {
        .titlePanel {
            padding-bottom: 30px;
            color: @themeColor;

            .name {
                margin-left: 10px;
            }
        }

        .forms /deep/ .el-form-item__label {
            width: 120px !important;
        }

        .forms /deep/ .el-form-item__content {
            margin-left: 120px !important;
        }
    }
}

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