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

<!--集群管理-->
<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">分配账户</span>
                <el-input
                    v-model="searchParams.userName"
                    size="small"
                    clearable
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">操作时间</span>
                <el-date-picker
                    v-model="modifyTimeRange"
                    type="daterange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </template>
            <template slot="searchItem3">
                <span class="label">到期时间</span>
                <el-date-picker
                    v-model="dueTimeRange"
                    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="reset">重置</el-button>
            </template>
        </search-layout>

        <!--<div class="btnsPanel">
            <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="addConfig"
                >新建配置</el-button
            >
        </div>-->

        <div style="border-top: none; margin: 30px 40px 10px 40px">
            <span>仿真软件已分配未到期节点数量：{{totalSimulation}}
                <span v-if = " totalSimulationAll && totalSimulationAll >= 0"> / {{totalSimulationAll}}</span>
            </span>
            <span style="margin-left: 20%">动力学软件已分配未到期节点数量：{{totalDynamic}}
                <span v-if = " totalDynamicAll && totalDynamicAll >= 0"> / {{totalDynamicAll}}</span>
            </span>
        </div>
        <tableList
            ref="table"
            style="border-top: none; margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <!--<el-table-column label="独占类型" slot="useType" align="center">
                <template v-slot="scope">
                    <span>
                        {{(useTypeList.find(item=>item.code==scope.row.useType)||{}).caption||''}}
                    </span>
                </template>
            </el-table-column>-->
            <el-table-column label="操作" slot="cgInfos" align="center">
                <template v-slot="scope">
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-edit-outline elIcon"
                    ></i>
                </template>
            </el-table-column>
        </tableList>
    </div>
</template>

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

export default {
    name: "clusteringManagement", // 账户管理
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                userName: "",
                dueTimeStart: "",
                dueTimeEnd: "",
                modifyTimeStart: "",
                modifyTimeEnd: ""
            },
            modifyTimeRange:[],
            dueTimeRange:[],
            list: [],
            totalSimulation:0,
            totalSimulationAll:-1,
            totalDynamic:0,
            totalDynamicAll:-1,
            useTypeList:[],
            columns: [
                //表格列
                {
                    label: "账户名称",
                    prop: "userName",
                },
                {
                    label: "独占类型",
                    prop: "useType",
                    //template:true
                },
                {
                    label: "仿真软件license",
                    prop: "numSimulationLicense",
                },
                {
                    label: "到期时间",
                    prop: "dateSimulationLicense",
                    formatter:(data)=>{
                        return data.dateSimulationLicense?data.dateSimulationLicense.slice(0,10):''
                    }
                },
                {
                    label: "动力学软件license",
                    prop: "numDynamicLicense",
                },
                {
                    label: "到期时间",
                    prop: "dateDynamicLicense",
                    formatter:(data)=>{
                        return data.dateDynamicLicense?data.dateDynamicLicense.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",
                data: this.$api.systemManagement.getClusterList,
                param: {},
            },
        };
    },
    created(){
        //获取未到期已分配节点数量
        this.$axios({
            method:'POST',
            url:this.$api.systemManagement.getClusterNum,
            data:{}
        }).then(res=>{
            if(res.code=='200'){
                this.totalSimulation=res.info.totalSimulation;
                this.totalSimulationAll=res.info.totalSimulationAll;
                this.totalDynamic=res.info.totalDynamic;
                this.totalDynamicAll=res.info.totalDynamicAll;
            }
        })
    },
    async mounted(){
        await this.$dicsListsInit({
            useTypeList: "useType"
        });
    },
    methods: {
        doSearch(){
            this.searchParams.modifyTimeStart=this.modifyTimeRange[0]||''
            this.searchParams.modifyTimeEnd=this.modifyTimeRange[1]||''
            this.searchParams.dueTimeStart=this.modifyTimeRange[0]||''
            this.searchParams.dueTimeEnd=this.modifyTimeRange[1]||''
            this.refreshList(this.searchParams)
        },
        reset(){
            this.searchParams = {
                userName: "",
                dueTimeStart: "",
                dueTimeEnd: "",
                modifyTimeStart: "",
                modifyTimeEnd: ""
            }
            this.modifyTimeRange=[]
            this.dueTimeRange=[]
            this.refreshList(this.searchParams)
        },
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        addConfig() {
            this.$router.push({
                path:'/clusteringDetail'
            })
        },
        addMarkDia(row) {
            let query = {...row}
            this.$router.push({
                path:'/clusteringDetail',
                query
            })
        },
    },
};
</script>

<style scoped lang="less">
.btnsPanel {
    margin: 45px 40px 15px;
}
</style>