profitManage1.2/src/views/resource/serverRegister/table.vue

<template>
  <div class="w100 h100">
    <div v-if="activeName === '收益查看'">
      <span style="display: inline-block;font-size: 14px;font-weight: 600;">计算方式：</span>
      <el-select v-model="typeNum" @change="handleSelect">
        <el-option key="1000" :value="'1000'" :label="'1000'">1000计算方式</el-option>
        <el-option key="1024" :value="'1024'" :label="'1024'">1024计算方式</el-option>
      </el-select>
    </div>
    <TableList ref="tabref" class="w100 h100" :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnRenderList="fnRenderList" @fnClick="callback">
      <template #tempDay="{ valueKey, row, column }">
        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime}}</span>
      </template>
      <template #tempMonth="{ valueKey, row, column }">
        <span v-if="row && row[valueKey] || row[valueKey] === 0">{{row[valueKey]}}/{{row.createTime.slice(0, 7)}}</span>
      </template>
      <template #tempStatus="{ valueKey, row, column }">
        <span v-if="row[valueKey] === '0'">未连通</span>
        <span v-if="row[valueKey] === '1'">已连通</span>
      </template>
    </TableList>
    <el-dialog title="相关数据" :visible.sync="listOpen" width="900px" append-to-body style="padding-bottom: 20px;">
      <relevantData :rowDataList="rowDataList" @closeDialog="closeDialog"></relevantData>
    </el-dialog>
  </div>
</template>

<script>
  import TableList from '@/components/table/index.vue';
  import relevantData from '../../earnManage/server/relevantData'
  export default {
    name: "serRegisTable",
    components: {TableList, relevantData},
    props: {
      activeName: {
        type: String,
        default: ''
      },
      modelVal: {
        type: Array,
        default: () => []
      }
    },
    watch: {
      activeName: {
        handler(newVal, oldVal) {
          if (newVal && newVal !== oldVal) {
            this.$nextTick(() => {
              this.columnsList();
            });
          }
        },
        deep: true,
        immediate: true
      },
      modelVal: {
        handler(newVal) {
          if (newVal && newVal.length > 0) {
            this.queryParams = newVal[0].queryParams;
            this.tableList = newVal[0].tableList;
          }
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        typeNum: '1000',
        // 列显隐信息
        columns: {},
        config: {},
        tableList: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        listOpen: false,
        rowDataList: {},
      }
    },
    created() {
    },
    methods: {
      handleSelect(val) {
        this.$emit('fnPaging', {calculationMode: this.typeNum})
      },
      fnRenderList(val) {
        this.$emit('fnPaging', Object.assign({}, this.modelVal[0].queryParams, {calculationMode: this.typeNum}));
      },
      closeDialog() {
        this.listOpen = false;
      },
      columnsList() {
        this.columns = {};
        this.config = {};
        if (this.activeName === '收益查看') {
          // 列显隐信息
          this.columns = {
            id: {label: `ID`, width: '50'},
            clientId: {label: `ClientID`, minWidth: '280', visible: true},
            businessName: {label: `业务名称`, minWidth: '150', visible: true},
            bandwidth95Daily: {label: `95带宽值/日(Mbit)`, minWidth: '150', slotName: 'tempDay',visible: true},
            bandwidth95Monthly: {label: `95带宽值/月(Mbit)`, minWidth: '150', slotName: 'tempMonth',visible: true},
            avgMonthlyBandwidth95: {label: `月均日95值(Mbit)`, minWidth: '150',slotName: 'tempDay',visible: true},
          };
          this.config = {
            colHiddenCheck: true,
            colTopHiddenIcon: true,
            tableButton: {
              line: [
                {content: '相关数据', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'earnManage:server:relevantData'},
              ]
            }
          };
        } else if (this.activeName === '虚拟网卡信息') {
          // 列显隐信息
          this.columns = {
            id: {label: `ID`, width: '50'},
            clientId: {label: `clientID`, minWidth: '280'},
            isp: {label: `运营商`, minWidth: '60', visible: true},
            province: {label: `省`, minWidth: '60', visible: true},
            city: {label: `市`, minWidth: '80',visible: true},
            publicIp: {label: `公网地址`, minWidth: '100',visible: true},
            ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
            gateway: {label: `网关`, minWidth: '120',visible: true},
            interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
            interfaceType: {label: `接口类型`, minWidth: '80',visible: true},
            macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
            ipv6Address: {label: `IPv6`, minWidth: '100',visible: true},
            status: {label: `连通状态`, minWidth: '100', slotName: 'tempStatus', visible: true},
          };
          this.config = {
            colHiddenCheck: true, colTopHiddenIcon: true,
          };
        } else if (this.activeName === '网卡信息') {
          // 列显隐信息
          this.columns = {
            id: {label: `ID`, width: '50'},
            clientId: {label: `clientID`, minWidth: '280'},
            isp: {label: `运营商`, minWidth: '60', visible: true},
            province: {label: `省`, minWidth: '60', visible: true},
            city: {label: `市`, minWidth: '80',visible: true},
            publicIp: {label: `公网地址`, minWidth: '100',visible: true},
            ipv4Address: {label: `IPv4`, minWidth: '120',visible: true},
            gateway: {label: `网关`, minWidth: '150',visible: true},
            interfaceName: {label: `接口名称`, minWidth: '100',visible: true},
            interfaceType: {label: `接口类型`, minWidth: '100',visible: true},
            macAddress: {label: `MAC地址`, minWidth: '150',visible: true},
            ipv6Address: {label: `IPv6`, minWidth: '120',visible: true},
          };
          this.config = {
            colHiddenCheck: true, colTopHiddenIcon: true,
          };
        }
        this.$nextTick(() => {
          if (this.$refs.tabref) {
            this.$refs.tabref.tableKey++;
          }
        });
      },
      callback(result, rowData, selectChange, selectList) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'edit':
              this.listOpen = true;
              this.rowDataList = rowData;
              break;
            default:
          }
        }
      },
    }
  }
</script>

<style scoped>
</style>