web-prod2/src/views/dashboard-screen/screen/sjdr/qb-dl/tab2.vue

<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 操作按钮区域 -->
      <div class="table-operator" style="margin: 5px 0;float: right">
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel">
              <a-icon type="delete"/>
              删除
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px">
            批量操作
            <a-icon type="down"/>
          </a-button>
        </a-dropdown>
      </div>
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-form-item>
          <a-input
            v-model="queryParam.lineName"
            style="width: 150px"
            placeholder="线别"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-model="queryParam.substationName"
            style="width: 150px"
            placeholder="所亭名称"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            v-model="queryParam.sbmc"
            style="width: 150px"
            placeholder="设备名称"
          />
        </a-form-item>
        <a-form-item>
          <a-date-picker :showToday="true" :locale="localeZH"   valueFormat="YYYY-MM-DD" v-model="queryParam.testPlanDateStart" placeholder="计划时间（起始）"/>
        </a-form-item>
        <a-form-item>
          <a-date-picker :showToday="true" :locale="localeZH"   valueFormat="YYYY-MM-DD" v-model="queryParam.testPlanDateEnd" placeholder="计划时间（结束）"/>
        </a-form-item>

        <a-form-item>
          <a-date-picker :showToday="true" :locale="localeZH"   valueFormat="YYYY-MM-DD" v-model="queryParam.completionDateStart" placeholder="实际时间（起始）"/>
        </a-form-item>
        <a-form-item>
          <a-date-picker :showToday="true" :locale="localeZH"   valueFormat="YYYY-MM-DD" v-model="queryParam.completionDateEnd" placeholder="实际时间（结束）"/>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="searchQuery">查询</a-button>
          <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>

      <a-table
        :scroll="{ x: 500 | true,y:  'calc(100vh - 400px)'}"
        ref="table"
        size="middle"
        bordered
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      />
    </div>
    <!-- table区域-end -->
    <!-- 表单区域 -->
  </div>
</template>
<script>
import {listMixin} from '@/mixin/listMixin'
import columns from './tab2Columns'
import {getAction} from '@/api/request'

export default {
  name: 'Tab2',
  components: {},
  mixins: [listMixin],
  data() {
    return {
      // 查询条件
      queryParam: {},
      treeData: [],
      // 表头
      columns: columns(this),
      url: {
        list: '/show/sbxj/listBd',
        delete: '/business/catenary/bus/jcb/fdfxjyq/',
        tree: '/system/dept/treeSelect',
        exportXlsUrl: '/business/catenary/bus/jcb/fdfxjyq/export'
      }
    }
  },
  created() {
    this.loadTree()
  },
  methods: {
    loadTree() {
      this.treeData = []
      getAction(this.url.tree).then((res) => {
        if (res.code === 200) {
          this.treeData = res.data
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@/assets/less/common.less'
</style>