web/src/views/dashboard-screen/screen/sjdr/tab3.vue

<template>
  <div>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" style="position: relative">
      <!-- 操作按钮区域 -->
      <div class="table-operator" style="margin: 5px 0;float: right">
        <a-button
          class="right-upload-btn"
          ghost
          type="primary"
          icon="upload"
          @click="$refs.fileDom.click()"
        >导入
        </a-button>
        <input id="fileDom" type="file" ref="fileDom" style="display: none" @change="handleImport($event)">
        <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>
          <j-dict-select-tag
            v-model="queryParam.ssgq"
            style="width: 150px"
            placeholder="选择工区"
            dict-code="dlyc_sygq"
          />
        </a-form-item>
        <a-form-item>
          <j-dict-select-tag
            v-model="queryParam.gravity"
            style="width: 150px"
            placeholder="选择严重性"
            dict-code="dlycyzx"
          />
        </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 v-if="readyRender">

      <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 './tab3Columns'
import { getAction } from '@/api/request'
import { ChartImport } from '@/api/dashboard-json'

export default {
  name: 'Tab3',
  components: {},
  mixins: [listMixin],
  data() {
    return {
      // 查询条件
      queryParam: {},
      treeData: [],
      // 表头
      columns: columns(this),
      url: {
        list: '/show/bpdjxjh/list',
        delete: '/business/catenary/bus/jcb/fdfxjyq/',
        tree: '/system/dept/treeSelect',
        exportXlsUrl: '/business/catenary/bus/jcb/fdfxjyq/export'
      },
      readyRender: true
    }
  },
  created() {
    this.loadTree()
  },
  methods: {
    loadTree() {
      this.treeData = []
      getAction(this.url.tree).then((res) => {
        if (res.code === 200) {
          this.treeData = res.data
        }
      })
    },
    handleImport(evt) {
      window.console.log('evt', evt)
      const file = evt.target.files[0]
      evt.target.value = null
      ChartImport('bdsjxjhb', file).then(res => {
        console.log('res => ', res)
        if (res.code === 200) {
          this.$message.success('导入成功')
          this.readyRender = false
          setTimeout(() => {
            this.readyRender = true
          }, 200)
        } else {
          this.$message.success('导入失败')
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@/assets/less/common.less'
</style>