profitManage1.2/src/views/resource/topology/index.vue

<template>
    <div class="app-container pageTopForm">
        <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px" @submit.native.prevent>
          <el-col :span="6">
              <el-form-item label="交换机名称" prop="switchName">
                  <el-input
                      v-model="queryParams.switchName"
                      placeholder="请输入交换机名称"
                      clearable
                      @keyup.enter.native="handleQuery"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <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" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
          <template #tempType="{ row, column }">
            <dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
          </template>
        </TableList>
    </div>
</template>

<script setup>
    import TableList from "@/components/table/index.vue"
    import {listTopology, delTopology} from "@/api/disRevenue/resource"
    export default {
      name: 'TopologyIndex',
      components: {TableList},
      dicts: ['rm_topology_type'],
      data() {
        return {
          loading: true,
          showSearch: true,
          roleList: [],
          queryParams: {
            total: 0,
            pageNum: 1,
            pageSize: 10
          },
          // 列显隐信息
          columns: {
            id: { label: `ID`, width: '50', visible: false },
            clientId: { label: `交换机ID`, minWidth: '320', visible: true},
            switchName: { label: `交换机名称`, minWidth: '120', visible: true },
            switchSn: { label: `交换机硬件SN`, minWidth: '150'},
            interfaceName: { label: `接口名称`, minWidth: '100', visible: true },
            connectedDeviceType: { label: `接口连接设备类型`, slotName: 'tempType', minWidth: '130',  visible: true },
            serverClientId: { label: `服务器ClientID`, minWidth: '180', visible: true},
            serverSn: { label: `服务器硬件SN`, minWidth: '150', visible: false},
            serverPort: { label: `服务器网口`, minWidth: '250', visible: true },
            peerName: { label: `对端交换机名称`, minWidth: '250', visible: true },
            peerSwitchInterface: { label: `对端交换机接口`, minWidth: '150', visible: true },
            createTime: { label: `创建时间`, minWidth: '160'},
            updateTime:{ label: `修改时间`, minWidth: '160'}
          },
          config: {
            searcherForm: [
              {label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
            ],
            tableButton: {
              top: [
                {content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:topology:add'},
                {content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'resource:topology:delete'},
                {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:topology:export'},
                {content: '拓扑展示', fnCode: 'echarts', type: 'warning', icon: 'el-icon-picture-outline-round', hasPermi: 'resource:topology:echarts'},
              ],
              line: [
                {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:topology:edit'},
              ]
            }
          }
        }
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询列表 */
        getList() {
          this.loading = true;
          listTopology(this.addDateRange(this.queryParams)).then(response => {
            this.roleList = response.rows;
            this.queryParams.total = response.total;
            this.loading = false;
          })
        },
        // 处理子组件传递的新值
        handleValueChange(newValue) {
          // 父组件更新自身数据，实现同步
          this.showSearch = newValue;
          // console.log('父组件拿到新值:', newValue);
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },

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

        callback(result, rowData, selectChange) {
          if (result && result.fnCode) {
            switch (result.fnCode) {
              case 'add':
                this.$router.push({
                  path:'/resource/topology/edit/index'});
                break;
              case 'edit':
                this.$router.push({
                  path:'/resource/topology/edit/index',
                  query:{
                    id: rowData.id
                  }
                });
                break;
              case 'delete':
                this.$modal.confirm('是否确认删除数据项？').then(function() {
                  return delTopology(selectChange)
                }).then(() => {
                  this.getList();
                  this.$modal.msgSuccess("删除成功")
                }).catch(() => {});
                break;
              case 'echarts':
                this.$router.push({
                  path:'/resource/topology/gplot/index',
                  query:{
                    id: rowData.id
                  }
                });
                break;
              case 'export':
                // let dataList = [];
                // Object.keys(this.columns).forEach(item => {
                //   if (item.visible) {
                //     dataList.push(item.prop);
                //   }
                // });
                // this.download("/system/management/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
                let paramsList = Object.assign({}, this.queryParams,rowData);
                this.download("system/management/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>