simulation-front/src/views/sceneLibrary/scenarioTestPackageManagementList.vue

<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">指标ID</span>
                <el-input
                    v-model="searchParams.packageCode"
                    size="small"
                    clearable
                    maxlength="60"
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">指标名称</span>
                <el-input
                    v-model="searchParams.packageName"
                    size="small"
                    clearable
                    maxlength="60"
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem3">
                <span class="label">创建时间</span>
                <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </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
                class="addBtn"
                icon="el-icon-circle-plus-outline"
                @click="addConfig"
                type="primary"
                :disabled="activeName === '1'"
                >新增</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
                        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="delRow(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: "scenarioTestPackageManagementList", // 场景测试包管理
    components: { searchLayout, tableList, toolbarTab },
    data() {
        return {
            searchParams: {
                //搜索参数
                packageCode: "", //指标ID
                packageName: "", //指标名称
                yearMin: "", // 开始时间
                yearMax: "", // 结束时间
            },
            searchDate: "", // 创建时间
            activeName: "1",
            columns: [
                {
                    label: "指标ID",
                    prop: "packageCode",
                },
                {
                    label: "指标名称",
                    prop: "packageName",
                },
                {
                    label: "场景数量",
                    prop: "sceneNum",
                },
                {
                    label: "创建时间",
                    prop: "startDateStr",
                    formatter(row) {
                        return row.createTime.slice(0, 10);
                    },
                },
                {
                    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.sceneLibrary.queryScenePackageList,
                param: {
                    share: "1",
                },
            },
        };
    },
    methods: {
        doSearch() {
            if (this.searchDate) {
                this.searchParams.yearMin = `${this.searchDate[0]} 00:00:00`;
                this.searchParams.yearMax = `${this.searchDate[1]} 23:59:59`;
            } else {
                this.searchParams.yearMin = "";
                this.searchParams.yearMax = "";
            }

            let pageMap = {
                packageCode: this.searchParams.packageCode,
                packageName: this.searchParams.packageName,
                yearMin: this.searchParams.yearMin,
                yearMax: this.searchParams.yearMax,
                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 = {
                packageCode: "",
                packageName: "",
                yearMin: "",
                yearMax: "",
            };
            this.searchDate = "";
            this.doSearch();
        },
        pageControl(data) {
            this.activeName = data.name;
            this.doSearch();
        },
        addConfig() {
            this.$router.push({ path: "/scenePacketList" });
        },
        shareRow(row) {
            this.$confirm("确认是否分享？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.instShareList,
                    data: {
                        packageId: row.packageId,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("分享成功");
                    } else {
                        this.$message.error(res.message || "分享失败");
                    }
                    this.doSearch();
                });
            });
        },
        delRow(row) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then((e) => {
                this.$axios({
                    method: "post",
                    url: this.$api.sceneLibrary.deleteList,
                    data: {
                        packageId: row.packageId,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error(res.message || "删除失败");
                    }
                    this.doSearch();
                });
            });
        },
        editRow(row) {
            this.$router.push({
                path: "/scenePacketList",
                query: { packageId: row.packageId, share: row.share },
            });
        },
    },
    // created() {},
};
</script>

<style scoped lang="less">
</style>