AntDesign 表单+表格型标准化代码写法

<template>
  <div>
    <div>
      <a-form layout="inline" style="margin-bottom:24px;">
        <a-form-item label="记录时间" style="margin-left:15px;">
          <a-range-picker
            :show-time="{format:'HH:mm'}"
            format="YYYY-MM-DD HH:mm"
            style="width: 320px"
            @change="onSearch"
            v-model="searchParams.dateRange"/>
        </a-form-item>
        <a-form-item style="float:right;margin:0px;">
          <a-radio-group v-model="logType" @change="handleLogType">
            <a-radio-button :value="'MQTT'">MQTT</a-radio-button>
            <a-radio-button :value="'HTTP'">HTTP</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="查询" style="margin-left:20px;">
          <a-input-search
            v-model="searchParams.searchValue"
            :placeholder="searchParams.searchPlaceHolder"
            style="width: 210px"
            type="text"
            @search="onSearch"
          />
        </a-form-item>
      </a-form>
    </div>
    <!-- MQTT列表 -->
    <a-table
      v-if="logType==='MQTT'"
      :rowKey="getId"
      :dataSource="data"
      :loading="loading"
      :pagination="pagination"
      @change="change"
    >
      <a-table-column
        title="请求时间"
        dataIndex="requestTime"
        width="160px"
        :sorter="true"
        :sortOrder="sortOrder"
      >
      </a-table-column>
      <!-- 长表格字段设置ellipsis 省略 -->
      <a-table-column
        title="来源IP"
        dataIndex="ip"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="会话"
        dataIndex="session"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="事件"
        dataIndex="event"
        width="125px"
      >
      </a-table-column>
      <a-table-column
        title="服务质量"
        dataIndex="qos"
        width="125px"
      >
      </a-table-column>
      <a-table-column
        title="主题"
        dataIndex="topic"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="保留信息"
        dataIndex="retain"
        width="125px"
      >
      </a-table-column>
      <a-table-column
        title="消息体"
        dataIndex="payload"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
    </a-table>
    <!-- HTTP列表 -->
    <a-table
      v-if="logType==='HTTP'"
      :rowKey="getId"
      :dataSource="data"
      :loading="loading"
      :pagination="pagination"
      @change="change"
    >
      <a-table-column
        title="请求时间"
        dataIndex="requestTime"
        width="190px"
        :sorter="true"
        :sortOrder="sortOrder"
      >
      </a-table-column>
      <a-table-column
        title="来源IP"
        dataIndex="ip"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="请求ID"
        dataIndex="traceId"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="请求方法"
        dataIndex="method"
        width="100px"
      >
      </a-table-column>
      <a-table-column
        title="请求接口"
        dataIndex="url"
        width="115px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="请求头"
        dataIndex="headers"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="请求体"
        dataIndex="requestBody"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="返回值"
        dataIndex="response"
        width="125px"
      >
        <template slot-scope="text">
          <ellipsis :length="12" tooltip>
            {
   
   { text }}
          </ellipsis>
        </template>
      </a-table-column>
      <a-table-column
        title="状态码"
        dataIndex="statusCode"
        width="100px"
      >
      </a-table-column>
      <a-table-column
        title="耗时（ms）"
        dataIndex="timeCost"
        width="110px"
      >
      </a-table-column>
    </a-table>
  </div>
</template>

<script>
// moment时间控件
import moment from 'moment'
import uuidv1 from 'uuid/v1'
import Ellipsis from '@/components/Ellipsis'
import {
     
      queryHttpLogs, queryMttpLogs } from '@/api/device'
export default {
     
     
  components: {
     
     
    Ellipsis
  },
  // 父组件传值
  props: {
     
     
    deviceId: {
     
     
      type: String,
      default: ''
    }
  },
  // mounted挂载完成时调用初始化获取数据接口
  mounted () {
     
     
    this.getData()
  },
  data () {
     
     
    return {
     
     
      searchParams: {
     
     
        searchPlaceHolder: '请输入topic',
        dateRange: [moment().add(-7, 'days'), moment()], // 开始和结束时间
        searchValue: ''
      }, // 查询传参
      loading: false, // 是否加载中
      sortOrder: 'descend', // 排序
      data: [], // table数据
      logType: 'MQTT',
      pagination: {
     
      // 分页
        current: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0, // 总数
        showTotal: total => `共${
       
       total}项`, // 显示总数
        pageSizeOptions: ['5', '10', '20', '50', '100'], // 分页选项
        showSizeChanger: true, // determine whether pageSize can be changed
        showQuickJumper: true // 	determine whether you can jump to pages directly
      }
    }
  },
  methods: {
     
     
    /**
     * 获取随机列表唯一码
     */
    getId () {
     
     
      return uuidv1().replace(/-/g, '')
    },
    /**
     * 重新查询时清空页码信息
     */
    clearPageParams () {
     
     
      this.sortOrder = 'descend'
      this.pagination.current = 1
      this.pagination.pageSize = 10
    },
    /**
     * 修改日志类型
     */
    handleLogType () {
     
     
      if (this.logType === 'MQTT') {
     
     
        this.searchParams.searchPlaceHolder = '请输入topic'
      } else if (this.logType === 'HTTP') {
     
     
        this.searchParams.searchPlaceHolder = '请输入接口名称'
      }
      this.searchParams.searchValue = ''
      this.onSearch()
    },
    /**
     * 时间选择、下拉框、点击查询icon时绑定onSearch 
     */
    onSearch () {
     
     
      this.clearPageParams()
      this.getData()
    },
    /**
     * 获取请求参数
     */
    getParams () {
     
     
      if (this.logType === 'HTTP') {
     
     
        return {
     
     
          deviceId: this.deviceId,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          startTime: this.searchParams.dateRange[0] ? this.searchParams.dateRange[0].format('YYYY-MM-DD HH:mm') : '',
          endTime: this.searchParams.dateRange[1] ? this.searchParams.dateRange[1].format('YYYY-MM-DD HH:mm') : '',
          order: this.sortOrder === 'ascend' ? 'asc' : 'desc',
          urlName: this.searchParams.searchValue // 按接口名查询
        }
      } else {
     
     
        return {
     
     
          deviceId: this.deviceId,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          startTime: this.searchParams.dateRange[0] ? this.searchParams.dateRange[0].format('YYYY-MM-DD HH:mm') : '',
          endTime: this.searchParams.dateRange[1] ? this.searchParams.dateRange[1].format('YYYY-MM-DD HH:mm') : '',
          order: this.sortOrder === 'ascend' ? 'asc' : 'desc',
          topic: this.searchParams.searchValue
        }
      }
    },
    /**
     * 列表change
     */
    async change (pagination, filters, sorter) {
     
     
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.sortOrder = sorter.order === 'descend' ? 'descend' : 'ascend'
      await this.getData()
    },
    /**
     * 请求接口返回值
     */
    async getData () {
     
     
      this.loading = true
      try {
     
     
        var result
        if (this.logType === 'MQTT') {
     
     
          result = await queryMttpLogs(this.getParams())
        } else if (this.logType === 'HTTP') {
     
     
          // 接口名
          result = await queryHttpLogs(this.getParams())
        }
        this.pagination.total = result.data.count
        this.data = result.data.list
      } catch (e) {
     
     
        console.log(e)
      } finally {
     
     
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>