equipment/src/views/bjd/zf_list.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <sticky style="margin-bottom: 10px;">
        <div class="sub-navbar">
          <router-link to="/bjd/bjd-dj-create/定期检验">
            <el-button type="success" icon="el-icon-circle-plus-outline">
              起草报检单
            </el-button>
          </router-link>
          <el-button type="warning" icon="el-icon-check" @click="invalidBjd">
            恢复
          </el-button>
          <el-button type="info" icon="el-icon-delete" style="margin-left: -1px;" @click="delBjd">
            删除
          </el-button>
        </div>
      </sticky>
      <el-form>
        <el-form-item>
          <el-input v-model="listQuery.serialNumber" placeholder="报检单号/流水号" clearable style="width: 200px" @keyup.enter.native="handleFilter" />
          <el-select v-model="listQuery.shebeizhongleidaima" placeholder="请选择设备种类" clearable>
            <el-option v-for="item in sbzlList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input v-model="listQuery.shiyongdanwei" placeholder="使用单位名称" clearable style="width: 300px" @keyup.enter.native="handleFilter" />
          <el-date-picker v-model="listQuery.shouliriqi" type="date" value-format="yyyy-MM-dd" placeholder="选择报检日期" style="width: 180px" />
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      ref="bjdList"
      v-adaptive="{bottomOffset: 50}"
      height="0"
      :data="list"
      element-loading-text="拼命加载中"
      border
      fit
      highlight-current-row
      stripe
      @row-click="onRowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="45" />
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="流水号" prop="serialNumber" min-width="80" />
      <el-table-column align="center" :formatter="formatter.formatterCategory" label="检验类别" prop="jianyanleibie" min-width="50" />
      <el-table-column align="center" label="设备种类" prop="shebeizhonglei" min-width="50" />
      <el-table-column align="center" label="使用单位" prop="shiyongdanwei" min-width="150" />
      <el-table-column align="center" label="报检日期" prop="shouliriqi" min-width="60" />
      <el-table-column align="center" label="报检状态" prop="bjState" min-width="50">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.bjState===0" type="success">
            新建
          </el-tag>
          <el-tag v-else-if="scope.row.bjState===1" type="primary">
            待审核
          </el-tag>
          <el-tag v-else-if="scope.row.bjState===2" type="info">
            已审核
          </el-tag>
          <el-tag v-else-if="scope.row.bjState===3" type="info">
            已分配
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备台数" prop="totalNum" min-width="50" />
      <el-table-column align="center" label="操作" min-width="60">
        <template slot-scope="scope">
          <el-button type="primary" icon="edit" @click="editBjd(scope.$index)">
            查看
          </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" style="float: left" @pagination="getList" />
  </div>
</template>

<script>
import Sticky from '@/components/Sticky'
import Pagination from '@/components/Pagination'
export default {
  name: 'ProjectZFList',
  components: { Sticky, Pagination },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        pageNum: 1, // 页码
        pageSize: 20, // 每页条数
        orderBy: 'id desc',
        zfState: true
      },
      sbzlList: [],
      ids: '',
      multipleSelection: [],
      params: {
        bjdIds: this.ids
      }
    }
  },
  created() {
    this.getList()
    this.getSbzlList()
  },
  mounted() {
    const that = this
    this.common.$on('bjd-list', function() {
      that.handleFilter()
    })
  },
  methods: {
    getList() {
      this.apibjd({
        url: '/bjd/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
      })
    },
    getIndex($index) {
      // 表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageSize + $index + 1
    },
    handleFilter() {
      // 查询事件
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 表格单击选中行
    onRowClick(row) {
      this.$refs.bjdList.toggleRowSelection(row)
    },
    // 获取选中行的bdjId
    handleSelectionChange: function(val) {
      this.multipleSelection = val
    },
    // 删除报检单---只有未审核的报检单才能删除
    delBjd: function() {
      this.ids = ''
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'error',
          message: '请选中需要删除的数据！'
        })
        return false
      } else {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].bjState === 2) {
            this.$message({
              type: 'error',
              message: '选择的数据中有办结的项目，请重新选择！'
            })
            return false
          } else {
            this.ids += this.multipleSelection[i].id + ','
          }
        }
        this.$confirm('共' + this.multipleSelection.length + '条报检项目将删除，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apibjd({
            url: '/bjd',
            method: 'delete',
            params: { bjdIds: this.ids }
          }).then(data => {
            this.$message({
              message: data + '条项目删除成功',
              type: 'success'
            })
            this.getList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    editBjd($index) {
      const bjd = this.list[$index]
      const jylb = bjd.jianyanleibie
      if (jylb === 'DJ') {
        this.$router.push({ path: '/bjd/bjd-dj-input' + '/' + bjd.id + '/' + bjd.shebeizhongleidaima + '/' + bjd.shebeizhonglei + '/finish' })
      } else if (jylb === 'JJ') {
        this.$router.push({ path: '/bjd/bjd-jj-input' + '/' + bjd.id + '/' + bjd.shebeizhongleidaima + '/' + bjd.shebeizhonglei + '/finish' })
      }
    }
  }
}
</script>