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">
                    <button class="button button--primary" @click="_getMaterial">快速查询</button>
                    <button class="button button--primary" @click="toSure">确定</button>
                    <button class="button button--primary" @click="clear">清空</button>
                    <button class="button button--primary" @click="close">关闭</button>
                </div>
            </div>
        </div>
        <div class="grid_wraper">
            <table class="filter-table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>日期</th>
                        <th>单据号</th>
                        <th>客户</th>
                        <th>箱号</th>
                        <th>物料编码</th>
                        <th>物料名称</th>
                        <th>数量</th>
                        <th>单位</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(e, i) in dataList" :key="i" :class="{'selected_icon': pkId === e.sale_code}" @click="toRadio(e)">
                        <td>{{i + 1}}</td>
                        <td>{{e.create_time}}</td>
                        <td>{{e.sale_code}}</td>
                        <td>{{e.cust_name}}</td>
                        <td>{{e.bucketunique}}</td>
                        <td>{{e.material_code}}</td>
                        <td>{{e.material_name}}</td>
                        <td>{{e.sale_qty}}</td>
                        <td>{{e.qty_unit_name}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { getMaterial } from '../../../config/getData1.js'
export default {
  data () {
    return {
      val1: '',
      val2: '',
      date: [new Date((new Date().getTime() - 24 * 60 * 60 * 1000)), new Date((new Date().getTime() + 24 * 60 * 60 * 1000))],
      dataList: [{sale_code: '030301010031'}],
      pkId: '',
      pkObj: {}
    }
  },
  created () {
    this._getMaterial()
  },
  methods: {
    // 查询
    async _getMaterial () {
      let res = await getMaterial(this.date, this.val1, this.val2)
      this.dataList = [...res.data]
    },
    toRadio (e) {
      this.pkId = this.pkId === e.sale_code ? '' : e.sale_code
      this.pkObj = this.pkId === e.sale_code ? e : {}
    },
    toSure () {
      this.$router.push('/finishedinstore')
    },
    clear () {
      this.val1 = ''
      this.val2 = ''
      this.pkId = ''
      this.pkObj = {}
    },
    close () {
      this.$router.push('/finishedinstore')
    }
  }
}
</script>

<style lang="stylus" scoped>
.grid_wraper
    height calc(100% - 95px)
.filter_input_wraper_1
    width calc(100% - 45px)
.search-label_1
    width 45px
</style>