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

<!--参数管理-->
<template>
    <div>
        <div v-show="!$route.path.includes('parameterDetail')">
            <search-layout :needBox="true">
                <template slot="searchItem1">
                    <span class="label">账户名称</span>
                    <el-input v-model="searchParams.userName" size="small" clearable placeholder="请输入" maxlength="60"
                        @keyup.enter.native="doSearch(false)">
                    </el-input>
                </template>

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

            <div class="myTabsBox myTabsBoxThreeTabs">
            <!--<el-button
                    v-bind:class="{ addBtn: true}"
                    icon="el-icon-circle-plus-outline"
                    @click="addOne"
                    type="primary"
                    >新增参数配置</el-button
                            >-->
            </div>

            <tableList ref="table" style="margin: 0 30px" :columns="columns" :getDataWay="getDataWay"
                :pagination="pagination" index>
                <el-table-column label="操作" slot="cgInfos" align="center">
                    <template v-slot="scope">
                        <i @click="editRow(scope.row)" class="el-icon-edit-outline elIcon" title="编辑"></i>
                    <!--<i
                            @click="delOne(scope.row)"
                            class="el-icon-delete elIcon"
                            title="删除"
                                    ></i>-->
                    </template>
                </el-table-column>
            </tableList>
        </div>

        <router-view v-show="$route.path.includes('parameterDetail')"></router-view>
    </div>
</template>

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

export default {
    name: "parameterManagement", // 参数管理
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                userName: ''
            },
            getDataWay: {
                dataType: "url",
                type: "post",
                data: this.$api.systemManagement.getParameterList,
                param: {},
            },
            columns: [
                //表格列
                {
                    label: "账户名称",
                    prop: "userName",
                },
                {
                    label: "可创建子账户数量",
                    prop: "numCreateUser",
                },
                {
                    label: "最多可创建场景测试包数量",
                    prop: "numCreateScenePackage",
                },
                {
                    label: "场景数量包的最大场景数",
                    prop: "numScenePerPackage",
                },
                {
                    label: "操作时间",
                    prop: "createTime",
                    formatter: (data) => {
                        return this.$timeFormatter(data.createTime)
                    }
                },
                {
                    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",
            },
        };
    },

    watch: {
        $route(to, from) {
            if (to.name === "parameterManagement") {
                this.$nextTick(() => {
                    this.doSearch(true);
                });
            }
        },
    },

    methods: {
        // isBack为解决从详情回退时列表在当前页刷新
        doSearch(isBack = false) {
            let pageMap = {
                ...this.searchParams,
                resetPageNum: !isBack ? false : (this.pagination.currentPage || 1),
            };

            if (!isBack) this.pagination.currentPage = 1;

            this.refreshList(pageMap);
        },
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                userName: ''
            };
            this.doSearch();
        },
        addOne() {
            this.$router.push("/parameterDetail")
        },
        editRow(row) {
            this.$store.commit("getTabname", "parameterDetailTabName", row.userName);
            localStorage.setItem("parameterDetailTabName", row.userName);

            let query = { ...row }
            this.$router.push({
                path: 'parameterDetail',
                query
            })
        },
        delOne(row) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {

            });
        },
    },
}
</script>

<style scoped lang="less">
.tabsBox {
    position: relative;
    overflow: hidden;

    .el-button {
        position: absolute;
        right: 40px;
        top: 45px;
    }
}

.myTabsBox {
    min-height: 29px;
}
</style>