profitManage1.2/src/views/resource/mtrProbe/mtrProbe.vue

<template>
  <div class="app-container pageTopForm">
    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
      <el-col :span="6">
        <el-form-item label="搜索" title="搜索" prop="queryName">
          <el-input
            v-model="queryParams.queryName"
            placeholder="请输入策略名称/MTRClientID/ClientID"
            clearable
            @keyup.enter.native="handleQuery"/>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <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 #tempCopy="{ row, column}">
        {{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
      </template>
      <!--   更新方式   -->
      <template #tempMethod="{ row, column }">
        <dict-tag :options="dict.type.policy_method" :value="row.method"/>
      </template>
      <!--    多公网IP状态    -->
      <template #tempMultipubStatus="{ row, column }">
        <dict-tag :options="dict.type.rm_moreip_status" :value="row.multiPublicIpStatus"/>
      </template>
      <!--    注册状态    -->
      <template #tempStatus="{ row, column }">
        <dict-tag :options="dict.type.rm_register_status" :value="row.registerStatus"/>
      </template>
      <!--    在线状态    -->
      <template #tempOnlineStatus="{ row, column }">
        <dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
      </template>
    </TableList>
  </div>
</template>

<script setup name="Register">
  import Form from '@/components/form/index.vue';
  import {listMtrAgent} from '@/api/disRevenue/resource';
  import TableList from '@/components/table/index.vue';
  export default {
    name: 'mtrProbe',
    components: {TableList,Form},
    dicts: ['rm_moreip_status', 'rm_register_status', 'rm_register_online_state', 'policy_method'],
    data() {
      return {
        roleList: [],
        showSearch: true,
        ids: [],
        single: true,
        // 列显隐信息
        columns: {
          id: { label: `ID`,width: '50'},
          mtrTC: { label: `MTR探测策略`, minWidth: '120'},
          policyName: { label: `策略名称`, minWidth: '120', visible: true},
          priority: { label: `优先级`,minWidth: '150', visible: true },
          mtrClientId: { label: `MTRClientID`, minWidth: '320', visible: true},
          description:{ label: `服务器集合`,minWidth: '90', visible: true},
          heartbeatInterval: { label: `是否探测`, minWidth: '100', visible: true},
          heartbeatCount: { label: `开始时间`, minWidth: '80'},
          networkInfo: { label: `结束时间`, minWidth: '100'},
          scheduledUpdateTime: { label: `探测频率`,minWidth: '160'},
          filePath: { label: `探测目标IP集合`,minWidth: '200'},
          updateTime:{ label: `修改时间`,minWidth: '160'},
          createTime: { label: `创建时间`,minWidth: '160'},
        },
        config: {
          tableButton: {
            top: [
              {content: '添加', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:mtrProbe:add'},
              {content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'resource:mtrProbe:delete'},
              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:mtrProbe:export'},
            ],
            line: [
              {content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'resource:mtrProbe:edit'},
              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:mtrProbe:details'},
              {content: '删除', fnCode: 'delete', type: 'text', icon: 'el-icon-delete', hasPermi: 'resource:mtrProbe:delete'},
            ]
          }
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          total: 0
        },
      }
    },
    created() {
      this.getList();
    },
    activated() {
      this.$nextTick(() => {
        this.getList();
      });
    },
    methods: {
      // 处理子组件传递的新值
      handleValueChange(newValue) {
        // 父组件更新自身数据，实现同步
        this.showSearch = newValue;
        // console.log('父组件拿到新值:', newValue);
      },
      /** 查询角色列表 */
      getList() {
        let params = JSON.parse(JSON.stringify(this.queryParams));
        if (params && !params.queryName) {
          params.queryName = null;
        }
        listMtrAgent(this.addDateRange(params)).then(response => {
          this.roleList = response.rows;
          this.queryParams.total = response.total;
        })
      },

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

      /** 重置按钮操作 */
      resetQuery() {
        this.$refs['queryRef'].resetFields();
        this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
        this.handleQuery();
      },

      /** 多选框选中数据 */
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.roleId);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 复制代码成功 */
      clipboardSuccess() {
        this.$modal.msgSuccess("复制成功")
      },
      fnDialogResult(res){
        this.viewOpen = false;
        if (res && res.open) {
          this.getList();
        }
      },
      callback(result, rowData, selectChange, selectList) {
        if (result && result.fnCode) {
          switch (result.fnCode) {
            case 'add':
              this.$router.push({
                path:'/resource/mtrProbe/view'
              });
              break;
            case 'edit':
              this.$router.push({
                path:'/resource/mtrProbe/view',
                query: {id: rowData.id}
              });
              break;
            case 'details':
              this.$router.push({
                path:'/resource/mtrProbe/view',
                query: {id: rowData.id, readonly: true}
              });
              break;
            case 'delete':
              let ids = '';
              if (rowData && rowData.id) {
                ids = rowData.id;
              } else {
                if (selectList && selectList.length <= 0) {
                  this.$modal.msgWarning("请选择数据！");
                }
                ids = selectChange;
              }
              if (!ids) return;
              let content = '<p style="font-size: 1rem;font-weight: 600;">删除MTR探测策略</p>' +
                '<p style="height: 0px;margin-bottom: 50px;">删除后数据将不能恢复，请确认是否继续！！！</p>';
              this.$modal.confirm(content).then(function() {
                return delMonitorPolicy(rowData.id)
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功")
              }).catch(() => {});
              break;
            case 'export':
              let paramsList = Object.assign({}, this.queryParams,rowData);
              this.download("mtragent/mtrClientRegistration/export", paramsList, `MTR探测策略_${new Date().getTime()}.xlsx`, null, 'json');
              break;
            default:

          }
        }
      },
    }
  }
</script>

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