simulation-front/src/views/systemManagement/vehicleModelDetail.vue

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="160px">
            <div class="flexBox">
                <el-form-item label="车辆模型标识:" prop="modelLabel">
                    <el-input
                        placeholder="请输入"
                        maxlength="100"
                        v-autoTrim="{ obj: form, key: 'modelLabel' }"
                        v-model="form.modelLabel"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车辆类型:" prop="vehicleType">
                    <el-input
                        placeholder="请输入"
                        maxlength="100"
                        v-autoTrim="{ obj: form, key: 'vehicleType' }"
                        v-model="form.vehicleType"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车辆型号:" prop="vehicleModel">
                    <el-input
                        placeholder="请输入"
                        maxlength="100"
                        v-autoTrim="{ obj: form, key: 'vehicleModel' }"
                        v-model="form.vehicleModel"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车辆颜色:" prop="vehicleColour">
                    <el-input
                        placeholder="请输入"
                        maxlength="100"
                        v-autoTrim="{ obj: form, key: 'vehicleColour' }"
                        v-model="form.vehicleColour"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="序号:" prop="sort">
                    <el-input
                        placeholder="请输入"
                        maxlength="10"
                        v-autoTrim="{ obj: form, key: 'sort' }"
                        v-model="form.sort"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="是否有效:" prop="valid">
                    <el-select v-model="form.valid">
                        <el-option
                            v-for="item in validList"
                            :label="item.caption"
                            :value="item.code"
                            :key="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>

            <div class="titlePanel">
                <div class="titlePanelBor">控制参数</div>
            </div>
            <div class="flexBox">
                <el-form-item label="最大速度(km/h):" prop="maxSpeed">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'maxSpeed' }"
                        v-model="form.maxSpeed"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="发动机功率(kW):" prop="enginePower">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'enginePower' }"
                        v-model="form.enginePower"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="最大减速度(m/s²):" prop="maxDeceleration">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'maxDeceleration' }"
                        v-model="form.maxDeceleration"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="最大转向角度(deg):"
                    prop="maxSteeringAngle"
                >
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'maxSteeringAngle' }"
                        v-model="form.maxSteeringAngle"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="驱动方式:" prop="wheelDrive">
                    <el-select v-model="form.wheelDrive">
                        <el-option
                            v-for="item in wheelDriveList"
                            :label="item.caption"
                            :value="item.code"
                            :key="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </div>

            <div class="titlePanel">
                <div class="titlePanelBor">效率参数</div>
            </div>
            <div class="flexBox">
                <el-form-item label="总效率:" prop="overallEfficiency">
                    <el-input
                        placeholder="请输入"
                        maxlength="9"
                        v-autoTrim="{ obj: form, key: 'overallEfficiency' }"
                        v-model="form.overallEfficiency"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="前表面有效面积(㎡):"
                    prop="frontSurfaceEffective"
                >
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{
                            obj: form,
                            key: 'frontSurfaceEffective',
                        }"
                        v-model="form.frontSurfaceEffective"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="空气阻力系数:" prop="airDragCoefficient">
                    <el-input
                        placeholder="请输入"
                        maxlength="9"
                        v-autoTrim="{
                            obj: form,
                            key: 'airDragCoefficient',
                        }"
                        v-model="form.airDragCoefficient"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="滚动阻力系数:"
                    prop="rollingResistanceCoefficient"
                >
                    <el-input
                        placeholder="请输入"
                        maxlength="9"
                        v-autoTrim="{
                            obj: form,
                            key: 'rollingResistanceCoefficient',
                        }"
                        v-model="form.rollingResistanceCoefficient"
                    >
                    </el-input>
                </el-form-item>
            </div>

            <div class="titlePanel">
                <div class="titlePanelBor">几何参数</div>
            </div>
            <div class="flexBox">
                <el-form-item label="车轮直径(m):" prop="wheelDiameter">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'wheelDiameter' }"
                        v-model="form.wheelDiameter"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车前距(m):" prop="frontDistance">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'frontDistance' }"
                        v-model="form.frontDistance"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车后距(m):" prop="rearDistance">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'rearDistance' }"
                        v-model="form.rearDistance"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车左距(m):" prop="leftDistance">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'leftDistance' }"
                        v-model="form.leftDistance"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车右距(m):" prop="rightDistance">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'rightDistance' }"
                        v-model="form.rightDistance"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="车高(m):" prop="heightDistance">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'heightDistance' }"
                        v-model="form.heightDistance"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="轴距(m):" prop="wheelbase">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'wheelbase' }"
                        v-model="form.wheelbase"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="质量(kg):" prop="mass">
                    <el-input
                        placeholder="请输入"
                        maxlength="12"
                        v-autoTrim="{ obj: form, key: 'mass' }"
                        v-model="form.mass"
                    >
                    </el-input>
                </el-form-item>
            </div>

            <div class="titlePanel">
                <div class="titlePanelBor">视图</div>
            </div>
            <div class="tipBox flexBox">
                <div class="tip">侧视图</div>
                <div class="tip">俯视图</div>
            </div>
            <div class="modelBox flexBox">
                <div class="uploadBox flexBox">
                    <upload
                        ref="uploadA"
                        :multiple="false"
                        type="vehicleImg"
                        model="front"
                        @attachmentChange="attachmentChange"
                    ></upload>
                </div>
                <div class="uploadBox flexBox">
                    <upload
                        ref="uploadB"
                        :multiple="false"
                        type="vehicleImg"
                        model="top"
                        @attachmentChange="attachmentChange"
                    ></upload>
                </div>
            </div>
        </el-form>

        <div class="btns">
            <el-button type="primary" @click="save">确定</el-button>
            <el-button type="primary" plain @click="cancel">取消</el-button>
        </div>
    </div>
</template>

<script>
import upload from "./components/uploadVM";
import { mapState } from "vuex";

export default {
    name: "vehicleModelDetail", // 车辆设置详情
    components: { upload },
    data() {
        // 校验非负且最多4位小数
        let validateNum = (rule, value, callback) => {
            !/^(0|[1-9][0-9]*)(\.\d{1,4})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于1
        let validateNoMore1 = (rule, value, callback) => {
            if (value > 1) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            form: {
                modelLabel: "", // 车辆模型标识
                vehicleType: "", // 车辆类型
                vehicleModel: "", // 车辆型号
                vehicleColour: "", // 车辆颜色
                sort: "", // 序号
                valid: "", // 是否有效
                maxSpeed: "", // 最大速度
                enginePower: "", // 发动机功率
                maxDeceleration: "", // 最大减速度
                maxSteeringAngle: "", // 最大转角
                wheelDrive: "", // 驱动方式
                overallEfficiency: "", // 总效率
                frontSurfaceEffective: "", // 前表面有效面积
                airDragCoefficient: "", // 空气阻力系数
                rollingResistanceCoefficient: "", // 滚动阻力系数
                wheelDiameter: "", // 车轮直径
                frontDistance: "", // 车前距
                rearDistance: "", // 车后距
                leftDistance: "", // 车左距
                rightDistance: "", // 车右距
                heightDistance: "", // 车高
                wheelbase: "", // 轴距
                mass: "", // 质量
                id: "",
                vehicleFrontView: "", // 对应的图片相对地址
                vehicleTopView: "", // 对应的图片相对地址
            },
            wheelDriveList: [],
            validList: [
                {
                    code: "0",
                    caption: "无效",
                },
                {
                    code: "1",
                    caption: "有效",
                },
            ],
            rules: {
                modelLabel: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                vehicleType: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                vehicleModel: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                vehicleColour: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                sort: [{ required: true, message: "请输入", trigger: "blur" }],
                valid: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                maxSpeed: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                enginePower: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                maxDeceleration: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                maxSteeringAngle: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                overallEfficiency: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                frontSurfaceEffective: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                airDragCoefficient: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rollingResistanceCoefficient: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelDiameter: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                frontDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rearDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                leftDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rightDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                heightDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelbase: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                mass: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelDrive: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
            },
        };
    },

    computed: {
        ...mapState(["fileHost", "fileUrl"]),
    },

    methods: {
        save() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (
                        !this.form.vehicleFrontView ||
                        !this.form.vehicleTopView
                    ) {
                        this.$message.error("请先上传图片");
                        return;
                    }

                    this.$axios({
                        method: "post",
                        url: this.$api.systemManagement.saveVehicleTemp,
                        data: {
                            ...this.form,
                        },
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            this.$message.success("保存成功");
                            this.cancel();
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        cancel() {
            this.$router.push({ path: "/vehicleModelManagement" });
        },
        attachmentChange(fileName, model) {
            if (model === "top") {
                this.form.vehicleTopView = fileName;
            } else {
                this.form.vehicleFrontView = fileName;
            }
        },
        getImgUrl(addr) {
            let url = "";
            if (process.env.VUE_APP_IS_DEV == "true") {
                url = this.fileHost + this.fileUrl;
            } else {
                url = this.fileUrl;
            }

            let token = localStorage.getItem("Authorization").split(" ")[1];
            let src = `${url}?objectName=${addr}&access_token=${token}`;
            return src;
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            wheelDriveList: "driveType",
        });

        if (this.$route.query.id) {
            this.$axios({
                method: "post",
                url: this.$api.systemManagement.getVehicleTempInfo,
                data: { id: this.$route.query.id },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.form = res.info;
                    if (res.info.vehicleFrontView) {
                        this.$refs.uploadA.imageUrl = this.getImgUrl(
                            res.info.vehicleFrontView
                        );
                    }
                    if (res.info.vehicleTopView) {
                        this.$refs.uploadB.imageUrl = this.getImgUrl(
                            res.info.vehicleTopView
                        );
                    }
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        }
    },
};
</script>

<style lang='less' scoped>
.el-form {
    padding: 30px 10px;
}

.titlePanel {
    padding: 22px 0;
}

.tipBox {
    padding: 0 20px;

    .tip {
        text-align: center;
        width: 50%;
        padding-left: 10px;
        font-size: 12px;
    }
}

.modelBox {
    padding: 20px;

    .uploadBox {
        align-items: center;
        justify-content: center;
        width: 50%;
    }
}

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