profitManage/src/views/disRevenue/earnManage/server/relevantData.vue

<template>
    <div class="app-container">
        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="roleList">
            <template v-for="(item,index) of columns">
                <el-table-column :label="item.label" :prop="item.prop" :sortable="item.sortable" :width="item.width" v-if="item.visible" :show-overflow-tooltip="true">
                  <template v-if="item.slotName" #default="scope">
                    <span v-if="scope.row && scope.row[item.prop]">{{scope.row[item.prop]}}/{{scope.row.createTime}}</span>
                  </template>
                </el-table-column>
            </template>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        <div style="float: right;margin-top: 20px;">
          <el-button type="primary" @click="goBack">返回</el-button>
        </div>
    </div>
</template>

<script setup name="ServerEdit">
    import {relatedBandWidth} from "@/api/disRevenue/earnManage";
    export default {
      name: 'relevantData',
      data() {
        return {
          roleList: [],
          loading: true,
          total: 0,
          serverId: '',
          // 列显隐信息
          columns: [],
          queryParams: {
            pageNum: 1,
            pageSize: 10
          },
        }
      },
      created() {
        this.serverId = this.$route.query && this.$route.query.id;
        this.columsList(this.$route.query && this.$route.query.bandwidthType);
        this.getList();
      },
      methods: {
        columsList(num) {
          let type = false;
          if (num === '4') {
            type = true;
          }
          this. columns = [
            {label: `时间`, prop: 'createTime', visible: !type},
            {label: `业务代码`, prop: 'businessId',visible: true},
            {label: `95宽带值Mbps/日`, prop: 'bandwidth95Daily', slotName: true, visible: type},
            {label: `有效95带宽值Mbps/日`, prop: 'effectiveAvgMonthlyBandwidth95', slotName: true, visible: type},
            {label: `包端带宽值Mbps/日`, prop: 'packageBandwidthDaily', slotName: true, visible: type},
            {label: `流量端口`, prop: 'name', visible: !type},
            {label: `发送流量值（bytes）`, prop: 'outSpeed', visible: !type},
          ];
        },
        /** 查询角色列表 */
        getList() {
          this.loading = true;
          relatedBandWidth(this.serverId).then(response => {
            this.loading = false;
            this.roleList = response && response.rows;
            this.total = response && response.total || response && response.data.length;
          })
        },
        goBack() {
          this.$router.go(-1);
        }
      }
    }
</script>

<style scoped>
</style>