aio-hl-new/src/pages/modules/finished/select-finished-mater.vue

<template>
    <div class="order-wraper">
        <div class="search-confirm-wrap">
            <div class="search-wrap">
                <div class="search-item">
                    <div class="search-label search-label_1">日期</div>
                    <div class="filter_input_wraper filter_input_wraper_1">
                        <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </div>
                </div>
                <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 spesite">
                    <button class="button button--primary" @click="_getMaterial">快速查询</button>
                    <button class="button button--primary" @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>数量</th>
                        <th>物料编码</th>
                        <th>客户</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="e in dataList" :key="e.sale_code" @click="toRadio(e)">
                        <td>
                          <button class="iconfont select_icon select_square_icon" :class="e.checked ? 'selected_icon' : 'unselect_icon'"></button>
                        </td>
                        <td>{{e.plandeliver_date}}</td>
                        <td>{{e.sale_code}}</td>
                        <td>{{e.seq_no}}</td>
                        <td>{{e.material_spec}}</td>
                        <td>{{e.sale_qty | numeric(0)}}</td>
                        <td>{{e.material_code}}</td>
                        <td>{{e.remark}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { getMaterial } from '../../../config/getData1.js'
import {dateTimeFtt} from '@config/utils.js'
export default {
  data () {
    return {
      page: 1,
      size: '22',
      busy: false,
      desc: '',
      val1: '',
      val2: '',
      date: [new Date((new Date().getTime() - 6 * 24 * 60 * 60 * 1000)), new Date((new Date().getTime()))],
      dataList: [],
      // dataList: [{sale_code: '111', checked: false}, {sale_code: '222', checked: false}],
      checkArr: []
    }
  },
  created () {
    this._getMaterial()
  },
  methods: {
    // grid
    async _getMaterial () {
      this.page = 1
      this.busy = false
      this.desc = ''
      let res = await getMaterial(this.page + '', this.size, this.date !== null ? dateTimeFtt(this.date[0]) : '', this.date !== null ? dateTimeFtt(this.date[1]) : '', this.val1, this.val2)
      if (res.code === 200) {
        this.dataList = []
        res.content.map(el => {
          this.$set(el, 'checked', false)
        })
        this.dataList = [...res.content]
        if (res.content.length < 22) {
          this.busy = true
          this.desc = '已加载全部数据'
        }
      }
    },
    async loadMore () {
      this.busy = true
      this.page++
      let res = await getMaterial(this.page + '', this.size, this.date !== null ? dateTimeFtt(this.date[0]) : '', this.date !== null ? dateTimeFtt(this.date[1]) : '', this.val1, this.val2)
      if (res.code === 200) {
        res.content.map(el => {
          this.$set(el, 'checked', false)
        })
        this.dataList = [...this.dataList, ...res.content]
        if (res.content.length < 22) {
          this.busy = true
          this.desc = '已加载全部数据'
        } else {
          this.busy = false
        }
      }
    },
    colseUp () {
      this.$router.push('/finishedinstore')
    },
    toSure () {
      if (this.checkArr.length === 0) {
        return
      }
      // 添加的物料订单号必须一样
      if (this.checkArr.every(e => e.sale_code === this.checkArr[0].sale_code)) {
        this.$store.dispatch('setMaterArr', this.checkArr)
        this.colseUp()
      } else {
        this.toast('添加的物料订单号必须一样')
      }
    },
    clearUp () {
      this.checkArr.map(el => {
        this.$set(el, 'checked', false)
      })
      this.checkArr = []
    },
    toRadio (e) {
      e.checked = !e.checked
      this.checkArr = this.dataList.filter(i => { return i.checked === true })
    }
  }
}
</script>

<style lang="stylus" scoped>
.grid_wraper
    height calc(100% - 1.1rem)
.filter_input_wraper_1
    width calc(100% - 45px)
.search-label_1
    width 45px
.spesite
  position relative
  left 68%
</style>