ccl-lnj-vue/src/views/modules/finshProduct/outWarehouse.vue

<script>
import OutWarehouseDetail from './outWarehouse/outWarehouseDetail.vue'
import {getShipmentPage, printShipment} from '../../../api/shipment'
import {getShipmentDetailList} from '../../../api/shipment/detail'
import ShipmentBox from './outWarehouse/shipmentBox.vue'
import {addShipmentBox, getShipmentBoxList} from '../../../api/shipment/box'
import {printShipmentInnerLabel} from '../label/print_shipment_inner_label'
import dayjs from 'dayjs'
import {printShipmentBoxLabel} from '../label/print_shipment_box_label'
import {printShipmentPackingBoxLabel} from '../label/print_shipment_packing_box_label'

export default {
  name: "outWarehouse",
  components: {ShipmentBox, OutWarehouseDetail},
  props:{
    height:{
      type: Number,
      default:300,
    }
  },
  data(){
    return{
      loading: false,
      open: false,
      queryForm:{
        shipmentId: "",
        startDate: "",
        endDate: "",
      },
      no: 1,
      size: 50,
      total: 0,
      dataList:[],
      // selectDataList:[],
      form:{},
      columnList:[
        {
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002TableShipmentId',
          tableId: "400002Table",
          tableName: "shipment",
          columnProp: "shipmentId",
          headerAlign: "center",
          align: "left",
          columnLabel: "发货ID",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 70
        },{
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002TableShipDate',
          tableId: "400002Table",
          tableName: "shipment",
          columnProp: "shipDate",
          headerAlign: "center",
          align: "center",
          columnLabel: "发货日期",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 100
        },{
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002TableCustomerNo',
          tableId: "400002Table",
          tableName: "shipment",
          columnProp: "customerNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户编码",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 70
        },{
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002TableCustomerName',
          tableId: "400002Table",
          tableName: "shipment",
          columnProp: "customerName",
          headerAlign: "center",
          align: "left",
          columnLabel: "客户名称",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 360
        },
      ],
      row:{},
      activeName:'detail',
      detailDataList:[],
      detailLoading: false,
      columnDetailList:[
        {
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002Table2PartNo',
          tableId: "400002Table2",
          tableName: "ShipmentDetail",
          columnProp: "partNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "料号",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        // {
        //   userId: this.$store.state.user.name,
        //   functionId: 400002,
        //   serialNumber: '400002Table2PartDesc',
        //   tableId: "400002Table2",
        //   tableName: "ShipmentDetail",
        //   columnProp: "partDesc",
        //   headerAlign: "center",
        //   align: "left",
        //   columnLabel: "物料描述",
        //   columnHidden: false,
        //   columnImage: false,
        //   columnSortable: false,
        //   sortLv: 0,
        //   status: true,
        //   fixed: '',
        //   columnWidth: 100
        // },
        {
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002Table2SaleQty',
          tableId: "400002Table2",
          tableName: "ShipmentDetail",
          columnProp: "saleQty",
          headerAlign: "center",
          align: "left",
          columnLabel: "数量",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002Table2OrderNumber',
          tableId: "400002Table2",
          tableName: "ShipmentDetail",
          columnProp: "orderNumber",
          headerAlign: "center",
          align: "left",
          columnLabel: "关联单号1",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002Table2LineNo',
          tableId: "400002Table2",
          tableName: "ShipmentDetail",
          columnProp: "lineNo",
          headerAlign: "center",
          align: "left",
          columnLabel: "关联单号2",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        },
        {
          userId: this.$store.state.user.name,
          functionId: 400002,
          serialNumber: '400002Table2RelNo',
          tableId: "400002Table2",
          tableName: "ShipmentDetail",
          columnProp: "relNo",
          headerAlign: "center",
          align: "center",
          columnLabel: "关联单号3",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: '',
          columnWidth: 80
        }
      ],

      boxDataList:[],
    }
  },
  methods:{
    getDataList(){
      let params = {
        ...this.queryForm,
        no: this.no,
        size: this.size,
        site:this.$store.state.user.site
      }
      this.dataList = [];
      this.loading = true;
      getShipmentPage(params).then(({data})=>{
        this.loading = false;
        if (data && data.code === 0){
          this.dataList = data.page.records;
          this.total = data.page.total;
          if (this.total > 0){
            this.handleRowClick(this.dataList[0])
          }
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.loading = false;
        this.$message.error(error)
      })
    },
    handleQuery(){
      this.getDataList();
    },
    handleSizeChange(val){
      this.size = val;
      this.getDataList();
    },
    handleCurrentChange(val){
      this.no = val;
      this.getDataList();
    },
    handleOutWarehouse(row){
      this.form = {...row}
      this.getBoxDataList();
      this.open = true;
    },
    getDetailDataList(){
      let params = {
        shipmentId: this.row.shipmentId,
        site:this.row.site
      }
      this.detailDataList = [];
      this.detailLoading = true;
      getShipmentDetailList(params).then(({data})=>{
        this.detailLoading = false;
        if (data && data.code === 0){
          this.detailDataList = data.rows;
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.detailLoading = false;
        this.$message.error(error)
      })
    },
    rowStyle({row}){
      if (row.site === this.row.site && row.shipmentId === this.row.shipmentId){
        return {
          background: '#E8F7F6'
        }
      }
    },
    handleRowClick(row){
      this.row = {...row};
    },
    getBoxDataList(){
      let params = {
        shipmentId: this.form.shipmentId,
        site:this.form.site
      }
      this.boxDataList = [];
      getShipmentBoxList(params).then(({data})=>{
        if (data && data.code === 0){
          this.boxDataList = data.rows;
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    handleAddBox(){
      let params = {
        shipmentId: this.form.shipmentId,
        site:this.form.site,
        createBy:this.$store.state.user.name,
      }
      addShipmentBox(params).then(({data})=>{
        if (data && data.code === 0){
          this.$message.success(data.msg)
          this.getBoxDataList();
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    },
    handleEndShip(){
      this.open = false;
      this.getDataList();
    },
    handlePrint(row){
      printShipment(row).then(({data})=>{
        if (data && data.code === 0){
          let arr = data.rows.map(item=>{
            item.productionDate = `${dayjs(item.productionDate).format("YYYYMMDD")}`
            return item
          })
          printShipmentPackingBoxLabel(arr);
        }else {
          this.$message.warning(data.msg)
        }
      }).catch((error)=>{
        this.$message.error(error)
      })
    }
  },
  watch:{
    row(newVal,oldVal){
      if (newVal){
        this.getDetailDataList();
      }
    }
  },
  created () {
    // this.getDataList();
  },
}
</script>

<template>
  <div>
    <div style="width: 1100px">
      <el-form :model="queryForm" ref="queryForm" label-position="top">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-form-item label="发货ID">
              <el-input v-model="queryForm.shipmentId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-row :gutter="10">
              <el-col :span="11">
                <el-form-item label="发货日期">
                  <el-date-picker
                    style="width: 100%"
                    v-model="queryForm.startDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label=" ">
                  <label style="margin-left: 0px;font-size: 19px">&#10142</label>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label=" ">
                  <el-date-picker
                    style="width: 100%"
                    v-model="queryForm.endDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-form-item label=" ">
              <el-button type="primary" @click="handleQuery">查询</el-button>
<!--              <el-button type="primary" @click="handlePrint">打印</el-button>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-table :data="dataList" v-loading="loading" border :height="height" @row-click="handleRowClick" :row-style="rowStyle">
      <el-table-column align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-link v-if="scope.row.createDate" @click="handlePrint(scope.row)">装箱单标签</el-link>
          <el-link v-else  @click="handleOutWarehouse(scope.row)">装箱出库</el-link>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="!item.columnHidden"> {{ scope.row[item.columnProp] }}</span>
          <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                             style="width: 100px; height: 80px"/></span>
        </template>
      </el-table-column>
    </el-table>
<!--    <div style="float: left;margin-top: 10px;color: gray;font-size: 13px" v-html="`共 <span style='color: #16B3A3'>${total}</span> 条 记 录，已 选 <span style='color: #16B3A3'>${selectDataList.length}</span> 条`"></div>-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="no"
      :page-sizes="[50, 100, 1000]"
      :page-size="size"
      :total="total"
      style="margin-top: 0px"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-tabs v-model="activeName">
      <el-tab-pane label="出库明细" name="detail">
        <out-warehouse-detail :height="420"
                              :loading="detailLoading"
                              :data-list="detailDataList"
                              :column-list="columnDetailList"></out-warehouse-detail>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="装箱出库" v-drag :visible.sync="open" width="1000px" :close-on-click-modal="false">
      <el-form :model="form" ref="form" label-position="top">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-form-item label="发货ID">
              <el-input v-model="form.shipmentId" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="客户编码">
              <el-input v-model="form.customerNo" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称">
              <el-input v-model="form.customerName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <shipment-box :data-list="boxDataList"
                    :shipment="form"
                    @add="handleAddBox"
                    @end="handleEndShip"
                    @refresh="getBoxDataList"
                    :height="300"></shipment-box>
      <el-footer style="height: 20px"></el-footer>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>