equipment/src/views/archive/list.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <sticky style="margin-bottom: 10px;">
        <div class="sub-navbar">
          <el-button type="primary" @click="showScanDialog">
            <svg-icon icon-class="scan" />
            扫码归档
          </el-button>
          <ArchiveScan :id="archiveId" ref="archive_scan" :frame-nums="jianyijiahao" :is-append="isAppend" />
          <ArchiveInfo :id="archiveId" ref="archive_info" />
        </div>
      </sticky>
      <el-form>
        <el-form-item>
          <el-row :gutter="8">
            <el-col :span="2.5">
              <el-input v-model="listQuery.archiveNum" placeholder="归档单号" clearable style="width: 175px" size="small" @keyup.enter.native="handleFilter" />
            </el-col>
            <el-col :span="2.5">
              <el-input v-model="listQuery.frameNum" placeholder="归档架号" clearable style="width: 130px" size="small" @keyup.enter.native="handleFilter" />
            </el-col>
            <el-col :span="2.5">
              <el-input v-model="listQuery.columnNum" placeholder="列" clearable style="width: 130px" size="small" @keyup.enter.native="handleFilter" />
            </el-col>
            <el-col :span="2.5">
              <el-input v-model="listQuery.boxNum" placeholder="归档盒号" clearable style="width: 130px" size="small" @keyup.enter.native="handleFilter" />
            </el-col>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleFilter">
              查询
            </el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="list" :data="list" size="mini" border fit highlight-current-row stripe width="100%" @row-click="onRowClick" @selection-change="handleSelectionChange">
      <el-table-column align="center" type="selection" />
      <el-table-column type="index" fixed="left" align="center" label="序号" min-width="30" />
      <el-table-column align="center" label="归档单号" prop="archiveNum" />
      <el-table-column align="center" label="归档架号" prop="frameNum" />
      <el-table-column align="center" label="列" prop="columnNum" />
      <el-table-column align="center" label="归档盒号" prop="boxNum" />
      <el-table-column align="center" label="报告数量" prop="archiveCount" />
      <el-table-column :formatter="formatter.getChineseName" align="center" label="归档人" prop="createBy" />
      <el-table-column :formatter="formatterDate" align="center" label="归档日期" prop="createTime" />
      <el-table-column align="center" label="操作" min-width="50">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showAddDialog(scope.row.id)">
            追加
          </el-button>
          <el-button type="text" size="small" @click="viewDetails(scope.row.id)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page-num.sync="listQuery.pageNum" :page-row.sync="listQuery.pageSize" @pagination="getList" />
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
import ArchiveInfo from './archive_info'
import ArchiveScan from './archive_scan'
export default {
  name: 'ArchiveReport',
  components: { Sticky, Pagination, ArchiveInfo, ArchiveScan },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        pageNum: 1,
        pageSize: 20
      },
      multipleSelection: [],
      sbzlList: [],
      archiveId: 0,
      jianyijiahao: [],
      isAppend: false
    }
  },
  created() {
    this.getList()
    this.getSbzlList()
    this.getFrameNums()
  },
  mounted() {
    const that = this
    this.common.$on('archive-list', function() {
      that.handleFilter()
    })
  },
  methods: {
    getList() {
      this.api({
        url: '/archive/list',
        method: 'get',
        params: this.listQuery
      }).then(data => {
        this.list = data.list
        this.total = data.total
      })
    },
    // 获取设备种类列表方法
    getSbzlList() {
      this.api({
        url: '/sedirectory/getList',
        method: 'get',
        params: {
          sbzl: undefined,
          level: '1'
        }
      }).then(data => {
        this.sbzlList = data
      })
    },
    // 获取架编号输入建议框
    getFrameNums() {
      this.api({
        url: '/archive/listFrameNums',
        method: 'get'
      }).then((response) => {
        this.jianyijiahao = response
      })
    },
    handleFilter() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    onRowClick(row) {
      this.$refs.list.toggleRowSelection(row)
    },
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    showScanDialog() {
      this.isAppend = false
      this.$refs.archive_scan.dialog = true
      this.$refs.archive_scan.doInit()
    },
    viewDetails(id) {
      this.archiveId = id
      this.$refs.archive_info.dialog = true
      this.$refs.archive_info.doInit()
    },
    showAddDialog(id) {
      this.isAppend = true
      this.archiveId = id
      this.$refs.archive_scan.dialog = true
      this.$refs.archive_scan.doInit()
    },
    formatterDate(row, column, cellValue) {
      return this.formatter.dateFormat('YYYY-MM-dd', new Date(cellValue))
    }
  }
}
</script>