FE_middlePlatform_server/src/views/serve/Configure.vue

<template>
    <div>
        <el-card shadow="hover" class="mgb20">
            <div>
                <div class="flex-center mgb20">
                    <p class="hr_tag"></p>
                    <span>筛选</span>
                </div>
                <div>
                    <el-form label-width="80px">
                        <div>
                            <el-col :span="4">
                                <el-form-item label="系统归属">
                                    <el-select v-model="systemAttribution" clearable placeholder="请选择系统归属"
                                                @change="initData">
                                        <el-option v-for="(item,index) in systemBelongList" :key="index"
                                                    :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="系统类型">
                                    <el-select v-model="systemType" clearable placeholder="请选择系统类型"
                                                @change="initData">
                                        <el-option v-for="(item,index) in systemTypeList" :key="index"
                                                    :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </div>
                        <el-col :span="6">
                            <el-form-item>
                                <el-input placeholder="请输入系统名称" prefix-icon="el-icon-search"
                                            v-model.trim="systemSearch" clearable></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </div>
            </div>
        </el-card>

        <el-card shadow="hover" class="card">
            <div class="flex-center mgb20">
                <p class="hr_tag"></p>
                <span>服务列表</span>
            </div>
            <el-table :data="systemData" class="table" stripe header-align="center">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" width="100" label="序号" align="center">
                </el-table-column>
                <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
                <el-table-column prop="type" label="系统类型" align="center">
                    <template slot-scope="scope">
                        {{ systemTypeKeys[scope.row.type] }}
                    </template>
                </el-table-column>
                <el-table-column prop="belong" label="系统归属" align="center">
                    <template slot-scope="scope">
                        {{ systemBelongKeys[scope.row.belong] }}
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="系统状态" align="center">
                    <template slot-scope="scope">
                        {{ systemStatusKeys[scope.row.state] }}
                    </template>
                </el-table-column>
                <el-table-column prop="payamount" label="系统后台" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toBackstage(scope.row)" v-auth="'/configure:系统后台进入'">进入</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="payamount" label="项目系统" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getIntoProject(scope.row)" v-auth="'/configure:项目系统进入'">进入</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="payamount" label="判分系统" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="getIntoJudgement(scope.row)" v-auth="'/configure:判分系统进入'">进入</el-button>
                    </template>
                </el-table-column>
                <!--
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
                -->
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange"
                                layout="total, prev, pager, next" :total="totals">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
import Setting from "@/setting";
export default {
    data() {
        return {
            userId: this.$store.state.userLoginId,
            token: btoa(sessionStorage.getItem('token')),
            systemAttribution: "",
            systemType: "",
            systemSearch: "",
            searchTimer: null,
            systemData: [],
            totals: 1,
            systemBelongList: [
                {
                    label: "外部产品",
                    value: 1
                },
                {
                    label: "内部系统",
                    value: 0
                }
            ],
            systemBelongKeys: {
                1: '外部产品',
                0: '内部系统'
            },
            systemTypeList: [
                {
                    label: "编程类",
                    value: 0
                },
                {
                    label: "流程类",
                    value: 1
                }
            ],
            systemTypeKeys: {
                0: '编程类',
                1: '流程类'
            },
            systemStatusKeys: {
                0: '运行中',
                1: '默认'
            },
            pageNo: 1,
            pageSize: 10
        };
    },
    watch: {
        systemSearch: function(val) {
            clearTimeout(this.searchTimer);
            this.searchTimer = setTimeout(() => {
                this.initData();
            }, 500);
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        initData() {
            this.pageNum = 1;
            this.getData();
        },
        getData() {
            let data = {
                belong: this.systemAttribution,
                type: this.systemType,
                systemName: this.systemSearch,
                pageNum: this.pageNo,
                pageSize: this.pageSize
            };
            this.$post(this.api.queryServiceConfig, data).then(res => {
                this.systemData = res.serviceList.records;
                this.totals = res.serviceList.total;
            }).catch(res => {
            });
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getData();
        },
        edit(row) {
            this.$store.commit("configData", { config_id: row.systemId });
            this.$router.push("/addconfigure");
        },
        // 进入系统后台
        toBackstage(row) {
            this.$router.push(`/backstage?systemId=${row.systemId}&show=1&name=${row.systemName}`)
        },
        getIntoProject(row) {
            this.$router.push(`/projectList?systemId=${row.systemId}&show=1&name=${row.systemName}`)
        },
        getIntoJudgement(row) {
            // console.log(`${Setting.jumpPath}#/?systemId=${row.systemId}&token=${this.token}&referrer=${btoa(location.href)}`);
            location.href = `${Setting.jumpPath}#/?systemId=${row.systemId}&token=${this.token}&referrer=${btoa(location.href)}`;
        },
        setCookie(name, value) {
            if (value) {
                var days = 1;//定义一天
                var exp = new Date();
                exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);
                //写入Cookie,toGMTString将时间转换成字符串
                document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString + ";path=/;";
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.card {
    min-height: calc(100vh - 300px);
}
.mag {
    margin-right: 20px;
}
</style>