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

<template>
    <div>
        <div class="infoBox">
            <div class="info">
                <span>账户名:</span>
                <b>{{ info.userName || "" }}</b>
            </div>
            <div class="info">
                <span>所属公司:</span>
                <b>{{ info.company || "" }}</b>
            </div>
        </div>

        <!-- <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">场景包名称</span>
                <el-input
                    v-model="searchParams.packageName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @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="flexBox summaryBox">
            <div class="left flexBox">
                <div class="num">
                    场景总数:
                    {{ total }}
                </div>
                <div class="numA">交通事故场景: {{ jtSceneNames }}</div>
                <div class="numA">自然驾驶场景: {{ zrSceneNames }}</div>
                <div class="numA">标准法规场景: {{ bzSceneNames }}</div>
                <div class="num">泛化场景: {{ fhSceneNames }}</div>
            </div>
            <div class="right">
                <el-button type="primary" @click="showNums">汇总</el-button>
            </div>
        </div>

        <div class="searchBox flexBox">
            <div class="isSelected">
                <el-checkbox v-model="selected" @change="selectedShow"
                    >已选择</el-checkbox
                >
            </div>
            <div class="inputPanel">
                <el-input
                    v-model="searchParams.packageName"
                    size="small"
                    clearable
                    placeholder="请输入场景包名称"
                    maxlength="60"
                    class="input-with-select"
                >
                    <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="doSearch"
                    ></el-button>
                </el-input>
            </div>
        </div>

        <tableList
            ref="table"
            style="margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            :checkedData="checkedArr"
            :needLoadedCallBack="true"
            :loadedCallBack="loadedCallBack"
            :needSelectedCallBack="true"
            :selectedCallBack="selectedCallBack"
            :selectedAllCallBack="selectedAllCallBack"
            index
            selection
        >
        </tableList>

        <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 searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";

export default {
    name: "scenePacketDistributionDetail", // 场景包分配详情
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                packageName: "", // 场景包名称
            },
            columns: [
                {
                    label: "场景包名称",
                    prop: "packageName",
                },
                {
                    label: "描述",
                    prop: "sceneDescribe",
                    showOverflowTooltip: true,
                },
                {
                    label: "自然驾驶场景",
                    prop: "zrCount",
                },
                {
                    label: "交通事故场景",
                    prop: "jtCount",
                },
                {
                    label: "标准法规场景",
                    prop: "bzCount",
                },
                {
                    label: "泛化场景",
                    prop: "fhCount",
                },
            ],
            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.systemManagement.querySystemScenePackageList,
                param: {},
            },
            selected: false, // 是否选中展示已选择项
            checkedArr: [], // 列表当前页已选
            checkedNames: [], // 列表所有已选
            total: 0,
            jtSceneNames: 0,
            zrSceneNames: 0,
            bzSceneNames: 0,
            fhSceneNames: 0,
            info: {},
        };
    },

    methods: {
        doSearch() {
            let data = {
                ...this.searchParams,
            };

            if (this.selected) {
                data.packageNames = this.checkedNames;
            } else {
                data.packageNames = null;
            }

            this.refreshList(data);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                packageName: "",
            };
            this.doSearch();
        },
        // 数据加载后的回调
        loadedCallBack() {
            this.checkedArr = [];
            this.$refs.table.tableData.forEach((i) => {
                if (this.checkedNames.includes(i.packageName)) {
                    // 显示已选中的项
                    this.$refs.table.$refs.ListTable.toggleRowSelection(
                        i,
                        true
                    );
                    this.checkedArr.push(i);
                }
            });
        },
        // 用户勾选完执行函数后的回调
        selectedCallBack(row, type) {
            if (type === 1) {
                if (!this.checkedNames.includes(row.packageName)) {
                    this.checkedNames.push(row.packageName);
                }
            } else {
                let index = this.checkedNames.indexOf(row.packageName);
                if (index > -1) {
                    this.checkedNames.splice(index, 1);
                }
            }
        },
        // 用户勾选全选执行函数后的回调
        selectedAllCallBack(selection, type) {
            if (type === 1) {
                selection.forEach((i) => {
                    if (!this.checkedNames.includes(i.packageName)) {
                        this.checkedNames.push(i.packageName);
                    }
                });
            } else {
                this.$refs.table.tableData.forEach((i) => {
                    let index = this.checkedNames.indexOf(i.packageName);
                    if (index > -1) {
                        this.checkedNames.splice(index, 1);
                    }
                });
            }
        },
        selectedShow() {
            this.doSearch();
        },
        showNums() {
            if (this.checkedNames.length === 0) {
                this.$message.error("请先选择场景包");
                this.zrSceneNames = 0;
                this.bzSceneNames = 0;
                this.jtSceneNames = 0;
                this.fhSceneNames = 0;
                this.total = 0;
                return;
            }

            this.zrSceneNames = 0;
            this.bzSceneNames = 0;
            this.jtSceneNames = 0;
            this.fhSceneNames = 0;
            this.total = 0;

            this.$axios({
                method: "post",
                url: this.$api.systemManagement.querySystemScenePackageListByTJ,
                data: { packageNames: this.checkedNames },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    res.info.forEach((i) => {
                        switch (i.scene_type) {
                            case "1":
                                this.zrSceneNames = i.aaa;
                                break;
                            case "2":
                                this.bzSceneNames = i.aaa;
                                break;
                            case "3":
                                this.jtSceneNames = i.aaa;
                                break;
                            case "4":
                                this.fhSceneNames = i.aaa;
                                break;
                            default:
                                break;
                        }
                    });

                    this.total =
                        this.zrSceneNames +
                        this.bzSceneNames +
                        this.jtSceneNames +
                        this.fhSceneNames;
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        },
        save() {
            if (this.checkedNames.length === 0) {
                this.$message.error("请先选择场景包");
                return;
            }

            let data = Object.assign({}, this.info, {
                packageNames: this.checkedNames,
            });

            this.$axios({
                method: "post",
                url: this.$api.systemManagement.savePackageByUserId,
                data,
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.cancel();
                } else {
                    this.$message.error(res.message || "保存失败");
                }
            });
        },
        cancel() {
            this.$router.replace({ path: "/scenePacketDistributionList" });
        },
    },

    mounted() {
        if (this.$route.query.userName) {
            this.$axios({
                method: "post",
                url: this.$api.systemManagement.queryPackageByUserId,
                data: { userName: this.$route.query.userName },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.info = res.info;
                    this.checkedNames = res.info.packageNames || [];
                    this.loadedCallBack();
                    this.showNums();
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        }
    },
};
</script>

<style lang='less' scoped>
.infoBox {
    display: flex;
    padding: 24px 12px 0;

    .info {
        display: flex;
        flex: 1;
        margin-right: 20px;
        word-break: break-all;

        span {
            display: block;
            width: 70px;
            padding-right: 10px;
            text-align: right;
        }

        b {
            flex: 1;
            font-weight: normal;
        }
    }
}

.summaryBox {
    padding: 30px 40px 0;
    color: @themeColor;
    font-size: 18px;
    font-weight: bold;

    .left {
        margin-right: 30px;
        line-height: 32px;

        > div {
            margin-right: 30px;
        }

        .num {
            min-width: 120px;
        }

        .numA {
            min-width: 156px;
        }
    }
}

.searchBox {
    align-items: center;
    justify-content: space-between;
    padding: 30px 40px 10px 40px;
}

.inputPanel {
    .el-input {
        width: 300px;
    }

    /deep/ .el-input-group__append {
        background-color: #fff;
        border-color: #e5e5e5;
        padding: 0;
        overflow: hidden;
    }

    /deep/ .el-input-group__append button.el-button,
    /deep/ .el-input-group__append div.el-select .el-input__inner,
    /deep/ .el-input-group__append div.el-select:hover .el-input__inner,
    /deep/ .el-input-group__prepend button.el-button,
    /deep/ .el-input-group__prepend div.el-select .el-input__inner,
    /deep/ .el-input-group__prepend div.el-select:hover .el-input__inner {
        border-color: transparent;
        background-color: transparent;
        color: inherit;
        border-top: 0;
        border-bottom: 0;
    }
}

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