wms / wms4_qingdaoyunlu · Files

<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="客户名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="customerCode">
              <a-select
                show-search
                placeholder="请选择客户编码"
                option-filter-prop="children"
                v-model="model.customerCode">
                <a-select-option v-for="item in customerList" :key="item.name" :value="item.code">{{
                    item.name
                  }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="车次信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waveRemark">
              <a-input v-model="model.waveRemark"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <a-table ref="table" rowKey="id" size="middle" :columns="columns" :dataSource="dataSource" :pagination="ipagination">
      <span slot="action" slot-scope="text, record">
        <a-input-number placeholder="" v-model="record.shipmentQty" :value="text" />
      </span>


<!--      <span slot="inventoryStatus" slot-scope="inventoryStatus">-->
<!--          <a-tag :key="inventoryStatus" color="blue" :color="getStatusColor(inventoryStatus)">-->
<!--            {{ solutionInvStatus(inventoryStatus) }}-->
<!--          </a-tag>-->
<!--        </span>-->

    </a-table>
  </j-modal>
</template>

<script>
import { shipmentContainerCombination,getCustomerList} from '@/api/api'
import {getAction} from "@api/manage";

export default {
  name: 'QuickShipmentContainerCombineModal',
  components: {},
  data() {
    return {
      title: '操作',
      width: 800,
      inventoryDetailList: [],
      dataSource: [],
      customerList: [],
      ipagination:{
        current: 1,
        pageSize: 100,
        pageSizeOptions: ['20', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      querySource: {},
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      validatorRules: {
        customerCode: [{ required: true, message: '请选择客户名称!' }]
      },
      columns: [
        {
          title: '容器编码',
          dataIndex: 'containerCode',
          align: 'center',
        },
        {
          title: '物料编码',
          dataIndex: 'materialCode',
          align: 'center',
          width: 124
        },
        {
          title: '物料规格',
          dataIndex: 'materialSpec',
          align: 'center',
          width: 96
        },
        {
          title: '托号',
          dataIndex: 'lot',
          align: 'center'
        },
        {
          title: '卷号',
          dataIndex: 'batch',
          align: 'center'
        },
        {
          title: '库存数量',
          dataIndex: 'qty',
          align: 'center',
          width: 80
        },
        {
          title: '出库数量',
          dataIndex: 'shipmentQty',
          align: 'center',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        },
      ],
      url: {
        pageByMainIds: "/inventory/inventoryDetail/pageByMainIds",
      },
      // 选择用户查询条件配置
      selectUserQueryConfig: [],
      confirmLoading: false,
    }
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
  },
  watch: {
    dataSource: {
      handler(newDataSource) {
        newDataSource.forEach(record => {
          record.shipmentQty = record.qty;
        });
      },
      deep: true
    }
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.visible = true
      this.loadFrom();
      this.inventoryDetailList = record
      this.searchInventoryDetailList();
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.$refs.form.clearValidate()
    },
    loadFrom() {

      getCustomerList().then((res) => {
        if (res.success) {
          this.customerList = res.result
        }
      });
    },
    searchInventoryDetailList() {
      let params = {
        inventoryHeaderIds:""
      };
      this.inventoryDetailList.forEach(x=>{
        params.inventoryHeaderIds+=  + x.inventoryHeaderId + ","
      })
      params.pageNo = this.ipagination.current;
      params.pageSize = this.ipagination.pageSize;
      getAction(this.url.pageByMainIds, params).then((res) => {
        this.dataSource = res.result.records
        this.inventoryDetailList = res.result.records
      })
    },
    handleOk() {
      this.$refs.form.validate(valid => {
          if (valid) {
            if (this.model.customerCode === '') {
              this.$message.warning('请选择客户')
            }
            this.inventoryDetailList.forEach(x => {
              x['customerCode'] = this.model.customerCode
              x['waveRemark'] = this.model.waveRemark
            })
            shipmentContainerCombination(this.inventoryDetailList).then(res => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
              } else {
                this.$message.error(res.message)
              }
            })
            this.$emit('ok')
            this.close()
          }else{
            return false;
          }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>