simulation-front/src/views/modelLibrary/components/formGps.vue

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="160px">
            <div class="inputBox flexBox">
                <span class="label">传感器ID</span>
                <div>{{ form.sensorCode }}</div>
            </div>
            <el-form-item label="传感器名称:" prop="sensorName">
                <el-input
                    placeholder="请输入"
                    maxlength="60"
                    v-autoTrim="{ obj: form, key: 'sensorName' }"
                    v-model="form.sensorName"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="传感器描述:" prop="description">
                <el-input
                    v-autoTrim="{
                        obj: form,
                        key: 'description',
                    }"
                    v-model="form.description"
                    type="textarea"
                    placeholder="请输入传感器描述"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    maxlength="200"
                ></el-input>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">内参</div>
            </div>
            <el-form-item label="经度偏移量(deg):" prop="longitudeOffset">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'longitudeOffset' }"
                    v-model="form.longitudeOffset"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="纬度偏移量(deg):" prop="latitudeOffset">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'latitudeOffset' }"
                    v-model="form.latitudeOffset"
                >
                </el-input>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">其他</div>
            </div>
            <el-form-item label="帧率(HZ):" prop="frameRate">
                <el-select v-model="form.frameRate">
                    <el-option
                        v-for="item in frameRateList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "formGps", // form-GPS
    components: {},
    data() {
        // 校验非负且最多4位小数
        let validateNum = (rule, value, callback) => {
            !/^(0|[1-9][0-9]*)(\.\d{1,4})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于180
        let validateNoMore180 = (rule, value, callback) => {
            if (value > 180) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };
        // 校验不大于360
        let validateNoMore360 = (rule, value, callback) => {
            if (value > 360) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            frameRateList: [],
            form: {
                id: "", // id
                sensorCode: "", // 传感器编码
                sensorName: "", // 传感器名称
                description: "", // 传感器描述
                longitudeOffset: "", // 经度偏移量
                latitudeOffset: "", // 纬度偏移量
                frameRate: "", // 帧率
                share: "", // 是否分享
            },
            rules: {
                sensorName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                description: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                longitudeOffset: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore360,
                        message: "请输入不大于360的非负数",
                        trigger: ["blur"],
                    },
                ],
                latitudeOffset: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore180,
                        message: "请输入不大于180的非负数",
                        trigger: ["blur"],
                    },
                ],
                frameRate: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
            },
        };
    },

    computed: {},

    methods: {
        // 展示详情
        showInfo(id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getGpsInfo,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.$refs.form.clearValidate();
                    this.form = res.info;
                    // 传回当前展示form的share，从而改变按钮的展示
                    this.$emit("changeShare", this.form.share);
                } else {
                    this.$message.error(res.message || "获取失败");
                }
            });
        },
        save(isAdd = false) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 判断是否新增
                    if (isAdd) {
                        this.form.id = "";
                    }

                    this.$axios({
                        method: "post",
                        url: this.$api.modelLibrary.saveGps,
                        data: {
                            ...this.form,
                        },
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            this.form.id = res.info.id;
                            this.form.share = res.info.share;
                            this.$message.success("保存成功");
                            this.$emit("changeShare", this.form.share);
                            this.$emit("getList");
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        share() {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.shareGps,
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("分享成功");
                    this.$emit("getList");
                } else {
                    this.$message.error(res.message || "分享失败");
                }
            });
        },
        cancel() {
            if (this.form.id) {
                // 取消时有id则重新请求表单
                this.showInfo(this.form.id);
            } else {
                // 清空
                this.$emit("clearForm");
            }
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            frameRateList: "frameRate",
        });
    },
};
</script>

<style lang='less' scoped>
@import "../common/util.less";
</style>