profitManage/src/views/disRevenue/earnManage/serverRevenue/index.vue

<template>
    <div class="app-container pageTopForm">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto" class="demo-ruleForm">
          <el-col :span="7">
              <el-form-item label="节点名称" prop="nodeName">
                  <el-select
                          v-model="queryParams.nodeName"
                          placeholder="请选择节点名称"
                          clearable>
                      <el-option
                              v-for="item in nodeNameList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"/>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="硬件SN" prop="hardwareSn">
                <el-input
                        v-model="queryParams.hardwareSn"
                        placeholder="请输入硬件SN"
                        clearable
                        @keyup.enter="handleQuery"
                />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item class="lastBtnSty">
                <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        <!-- 表格数据 -->
        <TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
          <template #tempRevenue="{ row, column }">
            <dict-tag :options="dict.type.eps_revenue_method" :value="row.revenueMethod"/>
          </template>
        </TableList>
        <!-- 修改-->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="noticeRef" :model="formList" label-width="90px">
                <el-form-item label="节点名称" prop="nodeName">
                    <el-input v-model="formList.nodeName" :disabled="true" />
                </el-form-item>
                <el-form-item label="业务名称" prop="businessName">
                    <el-select v-model="formList.businessName" placeholder="请选择收益方式">
                        <el-option
                                v-for="item in busNameList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                    </el-select>
                </el-form-item>
              <el-form-item label="收益方式" prop="revenueMethod">
                    <el-select v-model="formList.revenueMethod" placeholder="请选择收益方式">
                        <el-option
                                v-for="item in dict.type.eps_revenue_method"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="流量端口" prop="trafficPort" v-show="formList.revenueMethod === '1'">
                    <el-select v-model="formList.trafficPort" placeholder="请选择流量端口">
                        <el-option
                                v-for="item in profitTypeList"
                                :key="item.id"
                                :label="item.interfaceName"
                                :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="包端带宽值" prop="packageBandwidth" v-show="formList.revenueMethod === '2'">
                    <el-input-number v-model="formList.packageBandwidth" :min="1" class="mr10"/> Mbps
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="ServerRevenue">
    import TableList from "@/components/table/index.vue";
    import {listRevenueConfig, listAllBusinessList,updateRevenueConfig} from "@/api/disRevenue/earnManage"
    import {postInterFaceName, listAllResourList} from "@/api/disRevenue/resource"
    export default {
      name: 'serverRevenue',
      dicts: ['sys_normal_disable', 'eps_revenue_method'],
      components: {TableList},
      data() {
        return {
          tableList: [],
          loading: true,
          showSearch: true,
          open: false,
          title: '',
          profitTypeList: [],
          // 列显隐信息
          columns: {
            id: { label: `id`, width: '50', visible: false },
            nodeName: { label: `节点名称`, minWidth: '200', visible: true },
            hardwareSn: { label: `硬件SN`, minWidth: '200', visible: false},
            businessName: { label: `业务名称`, minWidth: '150', visible: true},
            businessCode: { label: `业务编码`, minWidth: '150', visible: false},
            revenueMethod: { label: `收益方式`, slotName: 'tempRevenue',minWidth: '100', visible: true },
            trafficPort: { label: `流量网口`, minWidth: '250', visible: true },
            bandwidth95: { label: `包端带宽值（Mbps）`, minWidth: '150', visible: true },
            lastModifyTime: { label: `修改时间`, minWidth: '160', visible: true }
          },
          config: {
            // searcherForm: [
            //   {label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
            // ],
            tableButton: {
              top: [
                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:earnManage:serverRevenue:export'},
              ],
              line: [
                {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-tickets', hasPermi: 'disRevenue:earnManage:serverRevenue:edit'}
              ]
            }
          },
          formList: {
            nodeName: '',
            businessName: '',
            revenueMethod: '1',
            trafficPort: '',
            packageBandwidth: '',

          },
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            total: 0
          },
          busNameList: [],
          nodeNameList: [],
        }
      },
      created() {
        this.getList();
        this.fnNodeName();
      },
      methods: {
        fnNodeName() {
          listAllResourList({resourceType: 1}).then(val => {
            this.nodeNameList = val && val.map(item => {
              return Object.assign({label: item.resourceName, value: item.resourceName});
            });
          });
        },
        /** 查询角色列表 */
        getList() {
          this.loading = true;
          listRevenueConfig(this.queryParams).then(response => {
            this.tableList = response.rows;
            this.queryParams.total = response.total;
            this.loading = false;
          })
        },

        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },

        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryRef");
          this.handleQuery();
        },

        /** 修改弹窗 */
        handleUpdate(row) {
          this.resetForm("noticeRef");
          this.formList = {};
          this.open = true;
          this.title = "修改收益方式";
          this.formList = {
            id: row.id,
            nodeName: row.nodeName,
            businessName: row.businessCode,
            revenueMethod: row.revenueMethod || '1',
            serverIp: row.serverIp,
            packageBandwidth: row.packageBandwidth,
            trafficPort: row.trafficPort
          };
          this.busiName();
          this.interFaceNameList();
        },
        // 业务名称查询
        busiName() {
          listAllBusinessList().then(val => {
            this.busNameList = val && val.data.map(item => {
              return Object.assign({label: item.businessName, value: item.id});
            });
          });
        },
        // 流量端口
        interFaceNameList() {
          postInterFaceName({resourceType: 1, serverIp: this.formList.serverIp}).then(res => {
            this.profitTypeList = res && res;
          });
        },
        /** 提交按钮 */
        submitForm() {
          this.profitTypeList.find(item => {
            if (item.id === this.formList['trafficPort'] || item.interfaceName === this.formList['trafficPort']) {
              this.formList['trafficPort'] = item.interfaceName;
            }
          });
          this.busNameList.find(item => {
            if (item.value === this.formList['businessName'] || item.label === this.formList['businessName']) {
              this.formList['businessName'] = item.label;
              this.formList['businessCode'] = item.value;
            }
          });
          if (this.formList.revenueMethod === '2') {
            this.formList['trafficPort'] = null;
          } else {
            this.formList['packageBandwidth'] = null;
          }
          updateRevenueConfig(this.formList).then(res => {
            this.open = false;
            this.getList();
            this.$modal.msgSuccess("操作成功！");
          });
        },
        /** 取消按钮 */
        cancel() {
          this.open = false;
        },
        // 处理子组件传递的新值
        handleValueChange(newValue) {
          // 父组件更新自身数据，实现同步
          this.showSearch = newValue;
          // console.log('父组件拿到新值:', newValue);
        },
        callback(result, rowData, selectChange, selectList) {
          if (result && result.fnCode) {
            switch (result.fnCode) {
              case 'edit':
                this.handleUpdate(rowData);
                break;
              case 'export':
                // let dataList = [];
                // Object.keys(this.columns).forEach(item => {
                //   if (item.visible) {
                //     dataList.push(item.prop);
                //   }
                // });
                // this.download("system/revenueConfig/export", {properties: dataList, resourceType: 1}, `服务器收益方式配置_${new Date().getTime()}.xlsx`);
                let paramsList = Object.assign(this.queryParams,rowData, {resourceType: 1});
                this.download("system/revenueConfig/export", paramsList, `服务器收益方式配置_${new Date().getTime()}.xlsx`, null, 'json');
                break;
              default:
            }
          }
        }
      }
    }
</script>

<style scoped>
  ::v-deep .lastBtnSty .el-form-item__content{
    margin-left: 10px!important;
  }
</style>