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

<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">配置ID</span>
                <el-input
                    v-model="searchParams.configCode"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">配置名称</span>
                <el-input
                    v-model="searchParams.configName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem3">
                <span class="label">配置描述</span>
                <el-input
                    v-model="searchParams.configDescription"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="200"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem4">
                <span class="label">车辆名称</span>
                <el-input
                    v-model="searchParams.vehicleName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem5">
                <span class="label">车辆描述</span>
                <el-input
                    v-model="searchParams.vehicleDescription"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="200"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>

            <template slot="searchBtn1">
                <el-button type="primary" @click="doSearch">查询</el-button>
            </template>
            <template slot="searchBtn2">
                <el-button type="primary" @click="doReset">重置</el-button>
            </template>
        </search-layout>

        <div class="myTabsBox">
            <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
                <el-tab-pane label="公有" name="1"></el-tab-pane>
                <el-tab-pane label="私有" name="2"></el-tab-pane>
            </el-tabs>
            <el-button
                v-bind:class="{ addBtn: true, disabled: activeName === '1' }"
                icon="el-icon-circle-plus-outline"
                @click="addOne"
                type="primary"
                :disabled="activeName === '1'"
                >新增</el-button
            >
        </div>

        <tableList
            ref="table"
            class="myTable"
            style="margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <el-table-column
                label="传感器配置"
                slot="sensorCount"
                align="center"
            >
                <template v-slot="scope">
                    <i
                        class="sensorIcon sensorIconA"
                        v-show="scope.row.sensorCount.camera"
                        title="摄像头"
                    ></i
                    ><span
                        class="sensorCount"
                        v-show="scope.row.sensorCount.camera"
                        >{{ scope.row.sensorCount.camera }}</span
                    >
                    <i
                        class="sensorIcon sensorIconB"
                        v-show="scope.row.sensorCount.ogt"
                        title="完美传感器"
                    ></i
                    ><span
                        class="sensorCount"
                        v-show="scope.row.sensorCount.ogt"
                        >{{ scope.row.sensorCount.ogt }}</span
                    >
                    <i
                        class="sensorIcon sensorIconC"
                        v-show="scope.row.sensorCount.lidar"
                        title="激光雷达"
                    ></i
                    ><span
                        class="sensorCount"
                        v-show="scope.row.sensorCount.lidar"
                        >{{ scope.row.sensorCount.lidar }}</span
                    >
                    <i
                        class="sensorIcon sensorIconE"
                        v-show="scope.row.sensorCount.gps"
                        title="GPS"
                    ></i
                    ><span
                        class="sensorCount"
                        v-show="scope.row.sensorCount.gps"
                        >{{ scope.row.sensorCount.gps }}</span
                    >
                </template>
            </el-table-column>
            <el-table-column label="操作" slot="cgInfos" align="center">
                <template v-slot="scope">
                    <i
                        v-if="activeName === '2'"
                        @click="shareRow(scope.row)"
                        class="el-icon-share elIcon"
                        title="分享"
                    ></i>
                    <i
                        @click="editRow(scope.row)"
                        class="el-icon-edit-outline elIcon"
                        title="编辑"
                    ></i>
                    <i
                        v-if="activeName === '2'"
                        @click="delOne(scope.row)"
                        class="el-icon-delete elIcon"
                        title="删除"
                    ></i>
                </template>
            </el-table-column>
        </tableList>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";
import toolbarTab from "@/components/toolbar/toolbarTab";

export default {
    name: "vehicleConfigurationList", // 车辆配置
    components: { searchLayout, tableList, toolbarTab },
    data() {
        return {
            searchParams: {
                // 搜索参数
                configCode: "", // 配置ID
                configName: "", // 配置名称
                configDescription: "", // 配置描述
                vehicleName: "", // 车辆名称
                vehicleDescription: "", // 车辆描述
            },
            activeName: "2",
            columns: [
                {
                    label: "配置ID",
                    prop: "configCode",
                },
                {
                    label: "配置名称",
                    prop: "configName",
                },
                {
                    label: "配置描述",
                    prop: "configDescription",
                    // showOverflowTooltip: true,
                },
                {
                    label: "车辆名称",
                    prop: "vehicleName",
                },
                {
                    label: "车辆描述",
                    prop: "vehicleDescription",
                },
                {
                    label: "传感器配置",
                    prop: "sensorCount",
                    template: true,
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.modelLibrary.getConfigPageList,
                param: {
                    share: "0",
                },
            },
        };
    },
    methods: {
        pageControl(data) {
            this.activeName = data.name;
            this.doSearch();
        },
        doSearch() {
            let pageMap = {
                ...this.searchParams,
                share: this.activeName === "1" ? "1" : "0",
            };
            this.refreshList(pageMap);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                configCode: "",
                configName: "",
                configDescription: "",
                vehicleName: "",
                vehicleDescription: "",
            };
            this.doSearch();
        },
        addOne() {
            this.$router.push({ path: "/vehicleConfigurationDetail" });
        },
        editRow(row) {
            this.$router.push({
                path: "/vehicleConfigurationDetail",
                query: {
                    id: row.id,
                    share: row.share,
                },
            });
        },
        delOne(row) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.modelLibrary.delConfigById,
                    data: {
                        id: row.id,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error(res.message || "删除失败");
                    }
                    this.doSearch();
                });
            });
        },
        shareRow(row) {
            this.$confirm("确认是否分享？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.modelLibrary.shareConfigById,
                    data: {
                        id: row.id,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("分享成功");
                    } else {
                        this.$message.error(res.message || "分享失败");
                    }
                    this.doSearch();
                });
            });
        },
    },
    created() {},
};
</script>

<style scoped lang="less">
.myTable {
    .sensorIconA {
        background: url("../../assets/common/image/sensor/001.png") center
            no-repeat;
    }
    .sensorIconB {
        background: url("../../assets/common/image/sensor/002.png") center
            no-repeat;
    }
    .sensorIconC {
        background: url("../../assets/common/image/sensor/003.png") center
            no-repeat;
    }
    .sensorIconD {
        background: url("../../assets/common/image/sensor/004.png") center
            no-repeat;
    }
    .sensorIconE {
        background: url("../../assets/common/image/sensor/005.png") center
            no-repeat;
    }

    .sensorIcon {
        display: inline-block;
        width: 18px;
        height: 18px;
        background-size: contain;
        vertical-align: middle;
        cursor: pointer;
    }

    .sensorCount {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 6px;
        line-height: 18px;
        text-align: center;
    }
}
</style>