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>
      <template #tempDiskStatus="{ row, column }">
        <dict-tag :options="dict.type.disk_status" :value="row.status"/>
      </template>
      <template #tempOmountFlag="{ row, column }">
        <dict-tag :options="dict.type.disk_omount_flag" :value="row.omountFlag"/>
      </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'
  import {diskIssuanceOperat, delDiskName} from "@/api/disRevenue/resource";
  export default {
    name: "serRegisTable",
    dicts: ['disk_status', 'disk_omount_flag'],
    components: {TableList, relevantData},
    props: {
      activeName: {
        type: String,
        default: ''
      },
      modelVal: {
        type: Array,
        default: () => []
      },
      clientId : {
        type: String,
        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,
          };
        } else if (this.activeName === '硬盘设备监控') {
          // 列显隐信息
          this.columns = {
            id: {label: `ID`, width: '50'},
            clientId: {label: `clientID`, minWidth: '280'},
            name: {label: `磁盘名称`, minWidth: '60', visible: true},
            serial: {label: `序列号`, minWidth: '120', visible: true},
            total: {label: `总大小(GB)`, minWidth: '100',visible: true},
            type: {label: `类型`, minWidth: '60',visible: true},
            usedSpace: {label: `已用空间(GB)`, minWidth: '100',visible: true},
            readSpeed: {label: `读速率(KB/s)`, minWidth: '90',visible: true},
            writeSpeed: {label: `写速率(KB/s)`, minWidth: '90',visible: true},
            readIops: {label: `读IOPS`, minWidth: '60',visible: true},
            writeIops: {label: `写IOPS`, minWidth: '60',visible: true},
            status: {label: `状态`, minWidth: '50', slotName: 'tempDiskStatus', visible: true},
            omountFlag: {label: `执行卸载`, minWidth: '60', slotName: 'tempOmountFlag', visible: true},
          };
          this.config = {
            colHiddenCheck: true, colTopHiddenIcon: true,
            tableButton: {
              line: [
                {content: '测试磁盘IOOS', fnCode: 'testIoos', type: 'primary', showName: 'status', showVal: '1'},
                {content: '卸载', fnCode: 'uninstall', type: 'danger', showName: 'status', showVal: '0'},
                {content: '删除记录', fnCode: 'delete', type: 'danger', showName: 'status', showVal: '0'},
              ]
            }
          };
        }
        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;
            case 'testIoos':
              let params = {id: rowData.id, clientId: this.clientId, name: rowData.name, processType: 1};
              diskIssuanceOperat(params).then(res => {
                this.$modal.msgSuccess("测试成功！");
                this.$emit('diskTableData');
              });
              break;
            case 'uninstall':
              let paramsTow = {id: rowData.id, clientId: this.clientId, name: rowData.name, processType: 2};
              diskIssuanceOperat(paramsTow).then(res => {
                this.$modal.msgSuccess("卸载成功！");
                this.$emit('diskTableData');
              });
              break;
            case 'delete':
              delDiskName(rowData.id).then(res => {
                this.$modal.msgSuccess("删除成功！");
                this.$emit('diskTableData');
              });
              break;
            default:
          }
        }
      },
    }
  }
</script>

<style scoped>
</style>