aio-hl-new/src/pages/modules/semifinished/semi-finished-out-mater-search.vue

<template>
    <div class="order-wraper">
        <div class="search-confirm-wrap">
            <div class="search-wrap">
                <div class="search-item">
                    <div class="search-label">货位</div>
                    <div class="filter_input_wraper">
                        <input type="text" class="filter-input" v-model="val1">
                    </div>
                </div>
                <div class="search-item">
                    <div class="search-label">物料</div>
                    <div class="filter_input_wraper">
                        <input type="text" class="filter-input" v-model="val2">
                    </div>
                </div>
                <div class="search-item flexend">
                    <div class="filter_radius" @click="toChange">
                        <button class="iconfont select_icon select_square_icon" :class="isV === '1' ? 'selected_icon' : 'unselect_icon'"></button>
                        <div class="filter_radius_label">已挑料</div>
                    </div>
                    <button class="button button--primary" @click="_outgetMaterial">查询</button>
                    <button class="button button--primary" :class="{'button--defalut': pkId === ''}" @click="toSure">确定</button>
                    <button class="button button--primary" @click="clearUp">清除</button>
                    <button class="button button--primary" @click="colseUp">关闭</button>
                </div>
            </div>
        </div>
        <div class="grid_wraper" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
            <table class="filter-table">
                <thead>
                    <tr>
                        <th>库区</th>
                        <th>货位</th>
                        <th>物料编号</th>
                        <th>物料名称</th>
                        <th>数量</th>
                        <th>单重(g)</th>
                        <th>载具号</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(e, i) in dataList" :key="i" :class="{'selected_icon': pkId === e.struct_name}" @click="toRadio(e)">
                        <td>{{ e.sect_name }}</td>
                        <td>{{e.struct_name}}</td>
                        <td>{{e.material_code}}</td>
                        <td>{{e.material_name}}</td>
                        <td>{{e.canuse_qty | numeric(3)}}</td>
                        <td>{{ e.unit_weight | numeric(3) }}</td>
                        <td>{{ e.storagevehicle_code }}</td>
                    </tr>
                </tbody>
            </table>
            <div class="loading-tips">{{desc}}</div>
        </div>
    </div>
</template>

<script>
import {outgetMaterial} from '@config/getData2.js'
export default {
  data () {
    return {
      val1: '',
      val2: '',
      isV: '1',
      dataList: [],
      pkId: '',
      pkObj: {},
      page: 1,
      size: '30',
      busy: false,
      desc: ''
    }
  },
  created () {
    this._outgetMaterial()
  },
  methods: {
    // grid
    async _outgetMaterial () {
      this.page = 1
      this.busy = false
      this.desc = ''
      let res = await outgetMaterial(this.val2, this.val1, this.isV, this.page + '', this.size)
      this.dataList = []
      this.dataList = [...res.data]
      if (res.data.length < 30) {
        this.busy = true
        this.desc = '已加载全部数据'
      }
    },
    async loadMore () {
      this.busy = true
      this.page++
      let res = await outgetMaterial(this.val2, this.val1, this.isV, this.page + '', this.size)
      this.dataList = [...this.dataList, ...res.data]
      if (res.data.length < 30) {
        this.busy = true
        this.desc = '已加载全部数据'
      } else {
        this.busy = false
      }
    },
    colseUp () {
      this.$router.push('/semifinishedoutstore')
    },
    toChange () {
      this.isV = this.isV === '1' ? '0' : '1'
    },
    toRadio (e) {
      this.pkId = this.pkId === e.struct_name ? '' : e.struct_name
      this.pkObj = this.pkId === e.struct_name ? e : {}
    },
    toSure () {
      this.$store.dispatch('setMaterObj', JSON.stringify(this.pkObj))
      this.colseUp()
    },
    clearUp () {
      this.pkId = ''
      this.pkObj = {}
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin.styl'
.search-item
    width 27%
    &:nth-child(3)
        width 42%
.filter_radius
    _fj()
    margin-right 15px
.filter_radius_label
    margin-left 5px
    _font(12px, 30px, #fff,,)
</style>