11-wms/src/views/wmsOutStore/outStoreOperation.vue

<template>
  <div class="app-container">
    <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :height="tableH"
      :table-config="tableProps"
      :table-data="list"
      :is-loading="listLoading"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :method-list="tableBtn"
        :width="trueWidth"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList()"
    />
    <out-store-documents-add ref="outStoreDocumentsAdd" :dialog-title="showTitle" />
  </div>
</template>
<script>
import HeadForm from '@/components/basicData/HeadForm'
import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import { tableHeight } from '@/utils/index'
import outStoreDocumentsAdd from './components/outStoreDocumentsAdd.vue'
import { getOperationCode2List, getOutboundNoList, getStoreList, getTimeArr, getDriverCodeList } from '@/utils/wmsDic'
const tableProps = [
  {
    prop: 'operationCode',
    label: '作业号'
  },
  {
    prop: 'outboundOrderNo',
    label: '出库单号'
  },
  {
    prop: 'goodsArea',
    label: '货位'
  },
  {
    prop: 'shipmentCacheArea',
    label: '缓存区号'
  },
  {
    prop: 'startTime',
    label: '开始时间'
  },
  {
    prop: 'endTime',
    label: '结束时间'
  },
  {
    prop: 'driverCode',
    label: '司机/AGV编号'
  }
]
const tableBtn = [
  {
    type: 'complete',
    btnName: 'btn.complete'
  },
  {
    type: 'cancellation',
    btnName: 'btn.cancellation'
  }
]
export default {
  name: 'OutStoreOperation',
  components: { HeadForm, BaseTable, Pagination, MethodBtn, outStoreDocumentsAdd },
  data() {
    return {
      headFormConfig: [
        {
          type: 'input',
          label: '关键字',
          placeholder: '作业号或出库单号',
          param: 'name',
          width: 300
        },
        {
          type: 'datePicker',
          label: '时间范围',
          dateType: 'daterange',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'searchTime'
        },
        {
          type: 'button',
          btnName: 'btn.search',
          name: 'search',
          color: 'primary'
        }
      ],
      listQuery: {
        current: 1,
        size: 20
      },
      tableH: tableHeight(290),
      tableProps,
      list: [],
      listLoading: false,
      tableBtn,
      total: 0,
      trueWidth: 80,
      showTitle: ''
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(290)
    })
    this.getList()
  },
  methods: {
    getList() {
      const temp = []
      const temp2 = []
      const num = 17
      for (let i = 0; i < num; i++) {
        const obj = {}
        const timeArrList = getTimeArr()
        obj.operationCode = 'CQ1510433590'
        obj.outboundOrderNo = getOutboundNoList()
        obj.store = getStoreList()
        obj.goodsArea = '成品库C-C区-' + (i + 8)
        obj.shipmentCacheArea = 'HCQC' + (2631 - i)
        obj.startTime = timeArrList[0]
        obj.endTime = timeArrList[1]
        obj.driverCode = getDriverCodeList()
        temp.push(obj)
      }
      const arr = ['备件库-13-2', '辅材库-14', '备件库-13-4']
      for (let i = 0; i < 3; i++) {
        const obj = {}
        const timeArrList = getTimeArr()
        obj.operationCode = getOperationCode2List()
        obj.outboundOrderNo = getOutboundNoList()
        obj.store = getStoreList()
        obj.goodsArea = arr[i]
        obj.shipmentCacheArea = 'HCQC' + (2897 - i)
        obj.startTime = timeArrList[0]
        obj.endTime = timeArrList[1]
        obj.driverCode = getDriverCodeList()
        temp2.push(obj)
      }
      this.list = temp.concat(temp2)
      console.log(this.list)
      this.total = 20
    },
    btnClick(val) {
      console.log(val)
      this.getList()
    },
    handleClick(val) {
      // console.log(val)
      if (val.type === 'complete') {
        this.$confirm('确定完成[ ' + val.data.outboundOrderNo + ' ]的吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.$message({
            type: 'success',
            message: '确定完成成功'
          })
          this.getList()
        })
      } else {
        this.$confirm('确定作废[ ' + val.data.outboundOrderNo + ' ]的吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.$message({
            type: 'success',
            message: '确定作废成功'
          })
          this.getList()
        })
      }
    }
  }
}
</script>