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

<template>
    <div class="sensorModelPanel">
        <model-list
            ref="modelList"
            class="modelList"
            :getListApi="getListApi"
            :showName="showName"
            @showInfo="showInfo"
            @addOne="addOne"
            @delOne="delOne"
        ></model-list>
        <div class="contentPanel">
            <toolbarTab
                :isConnect="true"
                position="top"
                :subPageActiveName="subPageActiveName"
                :toolbarItem="subPageList"
                @toolbarClick="toolsControl"
            >
            </toolbarTab>

            <div class="tabContent">
                <form-camera
                    v-show="subPageActiveName === 1"
                    ref="form1"
                    @getList="getList"
                    @changeShare="changeShare"
                    @clearForm="addOne"
                ></form-camera>
                <form-perfect-sensor
                    v-show="subPageActiveName === 2"
                    ref="form2"
                    @getList="getList"
                    @changeShare="changeShare"
                    @clearForm="addOne"
                ></form-perfect-sensor>
                <form-laser-radar
                    v-show="subPageActiveName === 3"
                    ref="form3"
                    @getList="getList"
                    @changeShare="changeShare"
                    @clearForm="addOne"
                ></form-laser-radar>
                <!-- <form-millimeter-wave-radar
                    v-show="subPageActiveName === 4"
                ></form-millimeter-wave-radar> -->
                <form-gps
                    v-show="subPageActiveName === 4"
                    ref="form4"
                    @getList="getList"
                    @changeShare="changeShare"
                    @clearForm="addOne"
                ></form-gps>
                <div class="model">
                    <img :src="imgSrc" width="100%" />
                </div>
            </div>
            <div class="btns">
                <el-button
                    type="primary"
                    v-show="currentShare === '0' || currentShare === ''"
                    @click="save(false)"
                    >保存</el-button
                >
                <el-button
                    type="primary"
                    v-show="currentShare === '0'"
                    @click="share"
                    >分享</el-button
                >
                <el-button
                    type="primary"
                    v-show="currentShare === '0' || currentShare === '1'"
                    @click="save(true)"
                    >另存为</el-button
                >
                <el-button type="primary" plain @click="cancel">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import modelList from "./components/modelList.vue";
import toolbarTab from "@/components/toolbar/toolbarTab";
import { mapState } from "vuex";
import formCamera from "./components/formCamera.vue";
import formPerfectSensor from "./components/formPerfectSensor.vue";
import formLaserRadar from "./components/formLaserRadar.vue";
import formMillimeterWaveRadar from "./components/formMillimeterWaveRadar.vue";
import formGps from "./components/formGps.vue";

export default {
    name: "sensorModel", // 传感器模型
    components: {
        modelList,
        toolbarTab,
        formCamera,
        formPerfectSensor,
        formLaserRadar,
        formMillimeterWaveRadar,
        formGps,
    },
    data() {
        return {
            getListApi: this.$api.modelLibrary.getCameraList,
            showName: "sensorName",
            subPageActiveName: 1,
            fromId: 1,
            imgSrc: require("@/assets/common/image/others/carTopView.png"),
            currentShare: "",
        };
    },

    computed: {
        ...mapState(["configTitleList"]),
        subPageList() {
            return [
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[0],
                    disabled: false,
                    api: this.$api.modelLibrary.getCameraList,
                    fromId: 1,
                },
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[1],
                    disabled: false,
                    api: this.$api.modelLibrary.getOgtList,
                    fromId: 2,
                },
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[2],
                    disabled: false,
                    api: this.$api.modelLibrary.getLidarList,
                    fromId: 3,
                },
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[3],
                    disabled: false,
                    api: this.$api.modelLibrary.getGpsList,
                    fromId: 4,
                },
                // {
                //     type: "primary",
                //     plain: true,
                //     title: this.configTitleList[4],
                //     disabled: false,
                //     fromId: 5,
                // },
            ];
        },
    },

    methods: {
        toolsControl(item) {
            this.addOne();
            this.getListApi = item.api;
            this.subPageActiveName = item.fromId;
            this.$nextTick(() => {
                this.getList();
            });
        },
        showInfo(id) {
            this.$refs[`form${this.subPageActiveName}`].showInfo(id);
        },
        getList() {
            this.$refs.modelList.getList();
        },
        save(isAdd) {
            this.$refs[`form${this.subPageActiveName}`].save(isAdd);
        },
        share() {
            this.$refs[`form${this.subPageActiveName}`].share();
        },
        cancel() {
            this.$refs[`form${this.subPageActiveName}`].cancel();
        },
        changeShare(share) {
            // 根据form传回的share进行按钮展示
            this.currentShare = share;
        },
        addOne() {
            this.$refs[
                `form${this.subPageActiveName}`
            ].$refs.form.resetFields();
            this.$refs[`form${this.subPageActiveName}`].form.sensorCode = "";
            this.$refs[`form${this.subPageActiveName}`].form.share = "";
            this.$refs[`form${this.subPageActiveName}`].form.id = "";
            this.currentShare = "";
        },
        delOne(id) {
            const delApis = [
                this.$api.modelLibrary.delCameraById,
                this.$api.modelLibrary.delOgtById,
                this.$api.modelLibrary.delLidarById,
                this.$api.modelLibrary.delGpsById,
            ];
            this.$axios({
                method: "post",
                url: delApis[this.subPageActiveName - 1],
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.$refs.modelList.getList();
                    if (
                        this.$refs[`form${this.subPageActiveName}`].form.id &&
                        id ===
                            this.$refs[`form${this.subPageActiveName}`].form.id
                    ) {
                        this.addOne();
                    }
                } else {
                    this.$message.error(res.message || "删除失败");
                }
            });
        },
    },

    // mounted() {},
};
</script>

<style lang='less' scoped>
.sensorModelPanel {
    display: flex;
    flex: 1;
    padding: 15px 30px 30px;

    .modelList /deep/ .listPanel {
        min-height: 400px;
        height: calc(100vh - 200px);
    }

    .contentPanel {
        flex: 1;
        padding-left: 30px;
    }

    .tabContent {
        display: flex;
        padding-top: 15px;

        .model {
            flex: 1;
            min-width: 300px;
            // padding-left: 40px;
            padding-left: 6%;
            padding-right: 3%;
        }
    }

    .btns {
        padding-top: 30px;
        padding-left: 390px;
    }

    /deep/ .el-tabs__item {
        width: 150px;
    }
}
</style>