pdms-oss-ui/src/views/device/storage/batchWarehousing.vue

<template>
  <div class="app-container">
    <h1><i class="el-icon-arrow-left" @click="goBack"></i>批次入库</h1>
		<el-form :inline="true" :model="listQuery" @keyup.enter.native="handleFilter()">
			<el-form-item label="批次号">
				<el-input v-model="listQuery.batchNum" placeholder="请输入批次号" clearable></el-input>
			</el-form-item>

			<div style="float: right;">
				<el-form-item>
					<el-button type="primary" @click="handleFilter()">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="resetForm()">重置</el-button>
				</el-form-item>
			</div>
		</el-form>

    <el-table
      v-loading="loading"
      :data="data"
      element-loading-text="Loading"
			:header-cell-style="{background:'rgba(242, 242, 242, 1)',borderColor:'rgba(242, 242, 242, 1);',textAlign:'center'}"
			:cell-style="{'text-align':'center'}"
      fit
      highlight-current-row
    >
			<el-table-column label="批次编号" sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.batch_num }}
        </template>
      </el-table-column>

      <el-table-column label="设备数量" prop="plateNumber">
        <template slot-scope="scope">
          {{ scope.row.total }}
        </template>
      </el-table-column>

      <el-table-column label="电池类型" prop="deptId">
        <template slot-scope="scope">
          {{ scope.row.type_title}}
        </template>
      </el-table-column>

      <el-table-column label="PACK厂">
        <template slot-scope="scope">
          {{ scope.row.pack_title }}
        </template>
      </el-table-column>

      <el-table-column label="已入库" width="80">
        <template slot-scope="scope">
          {{ scope.row.in_storage }}
        </template>
      </el-table-column>

      <el-table-column label="操作人">
        <template slot-scope="scope">
          {{ scope.row.operator }}
        </template>
      </el-table-column>

			<el-table-column label="发送地">
        <template slot-scope="scope">
          {{ scope.row.received_place }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="发货时间">
        <template slot-scope="scope">
          <span>{{ scope.row.deliver_time }}</span>
        </template>
      </el-table-column>

			<el-table-column align="center" label="录入时间">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="180">
        <template slot-scope="scope">
          <el-button v-if="scope.row.total - scope.row.in_storage > 0" @click="gotoHandle(scope.row)" type="text">入库</el-button>
        </template>
      </el-table-column>
    </el-table>

		<el-pagination style="float: right; margin-top: 30px;" :current-page="listQuery.index" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.length" :total="total"
			layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
			@current-change="pageCurrentChangeHandle">
		</el-pagination>
  </div>
</template>

<script>
import { getBatchList } from '@/api/device/info'
import Create from '@/views/device/storage/create.vue'

export default {
  components: { Create },
  data() {
    return {
      //列表加载动画
      loading: false,
      //列表数据
      data: [],
      //总条数
      total: 0,
			/**查询条件对象 */
			listQuery: {
        index: 1,
        length: 20,
        importance: undefined,
        type: undefined,
        sort: '',
        batchNum: ''
      },
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    //返回上一页面
    goBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    //搜索
    handleFilter() {
      this.listQuery.index = 1
      this.getDataList()
    },
    //重置
    resetForm() {
      this.listQuery = {
        index: 1,
        length: 20,
        importance: undefined,
        type: undefined,
        sort: '',
        batchNum: ''
      }
      this.getDataList()
    },
    /**请求列表数据 */
    getDataList() {
      this.loading = true
      getBatchList(this.listQuery).then(response => {
        if (response.code === 200) {
          this.data = response.data
          this.total = response.total
          this.loading = false
        } else {
          this.loading = false
          return this.$message.error(response.message)
        }
      })
    },
		// 分页, 每页条数
    pageSizeChangeHandle (val) {
      this.listQuery.index = 1
      this.listQuery.length = val
      this.getDataList()
    },
    // 分页, 当前页
    pageCurrentChangeHandle (val) {
      this.listQuery.index = val
      this.getDataList()
    },

    /**跳转入库页面 */
    gotoHandle(row) {
      this.$router.push({path:'/device/storage/warehousing',
        query: {
          batchId: row.batch_num,
          total: row.total,
          storage: row.in_storage
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.top-info {
		height: 53px;
		line-height: 53px;
		width: 100%;
		background-color: rgba(242, 242, 242, 1);
		box-shadow: none;
		text-align: left;
		color: #7F7F7F;
		font-size: 13px;
		padding-left: 20px;
		margin-bottom: 20px;
		>span {
			color: #0000FF;
			font-size: 13px;
		}
	}
</style>