simulation-front/src/views/algorithmsLibrary/algorithmsLibraryList.vue

<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">ID</span>
                <el-input
                    v-model="searchParams.algorithmCode"
                    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.algorithmName"
                    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.description"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                    @keyup.enter.native="doSearch"
                >
                </el-input>
            </template>
            <template slot="searchItem4">
                <span class="label">校验状态</span>
                <el-select v-model="searchParams.validationStatus">
                    <el-option
                        v-for="item in validationStatusList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </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 myTabsBoxThreeTabs">
            <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-tab-pane label="私有仓库" name="3"></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"
            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="
                            (roleCode === '0' || roleCode === '1') &&
                             (activeName === '2' || activeName === '3')
                        "
                        @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' || activeName === '3'"
                        @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 { mapState } from "vuex";

export default {
    name: "algorithmsLibraryList", // 算法库列表
    components: { searchLayout, tableList },
    data() {
        return {
            activeName: "2",
            searchParams: {
                //搜索参数
                algorithmCode: "", // ID
                algorithmName: "", // 算法名称
                description: "", // 算法描述
                validationStatus: "", // 校验状态
                uploadMode: "", // 私有类型
            },
            validationStatusList: [],
            columns: [
                //表格列
                {
                    label: "ID",
                    prop: "algorithmCode",
                },
                {
                    label: "算法名称",
                    prop: "algorithmName",
                },
                {
                    label: "算法描述",
                    prop: "description",
                },
                {
                    label: "校验状态",
                    prop: "validationStatus",
                },
                {
                    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",
            },
        };
    },
    computed: {
        ...mapState(["roleCode"]),
        getDataWay() {
            if (this.activeName === "2" || this.activeName === "3") {
                // 私有
                return {
                    //加载表格数据
                    dataType: "url",
                    type: "post",
                    // firstRequest: false,
                    data: this.$api.algorithmsLibrary.selectAlgorithmList,
                    param:
                        this.activeName === "2"
                            ? { uploadMode: "1" }
                            : { uploadMode: "2" },
                };
            } else {
                // 公有
                return {
                    //加载表格数据
                    dataType: "url",
                    type: "post",
                    // firstRequest: false,
                    data: this.$api.algorithmsLibrary.selectSharedAlgorithmList,
                    param: {},
                };
            }
        },
    },
    created() {
        if (this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName;
        }
        this.$route.query.activeName = "2";
    },
    methods: {
        doSearch() {
            if (this.activeName === "2") {
                // 私有导入
                this.searchParams.uploadMode = "1";
            } else if (this.activeName === "3") {
                // 私有仓库
                this.searchParams.uploadMode = "2";
            } else {
                // 公有
                this.searchParams.uploadMode = "";
            }
            this.$nextTick(() => {
                this.refreshList(this.searchParams);
            });
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                algorithmCode: "",
                algorithmName: "",
                description: "",
                validationStatus: "",
                uploadMode: "",
            };
            this.doSearch();
        },
        pageControl(data) {
            this.activeName = data.name;
            this.doSearch();
        },
        addOne() {
            if (this.activeName === "2") {
                // 私有导入
                this.$router.push({
                    path: "/exportAlgorithms",
                    query: { activeName: this.activeName },
                });
            } else {
                // 私有仓库
                this.$router.push({
                    path: "/gitAlgorithms",
                    query: { activeName: this.activeName },
                });
            }
        },
        editRow(row) {
            if (row.uploadMode === "1") {
                // 私有导入
                this.$router.push({
                    path: "/exportAlgorithms",
                    query: {
                        id: row.id,
                        share: row.share,
                        activeName: this.activeName,
                    },
                });
            } else {
                // 私有仓库
                this.$router.push({
                    path: "/gitAlgorithms",
                    query: {
                        id: row.id,
                        share: row.share,
                        activeName: this.activeName,
                    },
                });
            }
        },
        delOne(row) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.algorithmsLibrary.deleteByid,
                    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.algorithmsLibrary.shareAlgorithm,
                    data: {
                        id: row.id,
                    },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("分享成功");
                    } else {
                        this.$message.error(res.message || "分享失败");
                    }
                    this.doSearch();
                });
            });
        },
    },
    async mounted() {
        await this.$dicsListsInit({
            validationStatusList: "validationStatus",
        });
    },
};
</script>

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

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

.myTabsBox {

    /deep/
        .el-tabs--top.el-tabs--card
        > .el-tabs__header
        .el-tabs__item:nth-child(2) {
        border-left-color: @gray;

        &.is-active {
            border-left-color: @themeColor;
        }
    }
}
</style>