wms / wms4_wuhanfeipu · Files

<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" :rules="validatorRules">
        <!-- 主表单区域 -->
        <a-row class="form-row" :gutter="0">
          <a-col :lg="8">
            <a-form-model-item label="库区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zoneCode">
              <j-search-select-tag
                placeholder="请选择库区"
                v-model="model.zoneCode"
                dict="zone,name,code"
                :pageSize="10"
                :async="true">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="单据类型" prop="type">
              <j-search-select-tag
                placeholder="请选择单据类型"
                v-model="model.type"
                dict="shipment_type,name,code"
                :pageSize="5"
                :async="true">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>

          <a-col :lg="8">
            <a-form-model-item label="领料单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userdef2" v-if="model.type !== 'QTC'">
              <a-input placeholder="请输入领料单号" v-model="model.userdef2"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departName">
              <j-search-select-tag
                v-model="model.departName"
                dict="sys_depart,depart_name,depart_name,parent_id='2'"
                placeholder="请选择部门"
                :pageSize="10"
                :async="true"
              />
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="保管人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="preserver">
              <j-search-select-tag
                v-model="model.preserver"
                dict="fp_user,username,username, type = 0"
                placeholder="请选择保管人"
                :pageSize="10"
                :async="true"
              />
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="发料人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="issuer">
              <j-search-select-tag
                v-model="model.issuer"
                dict="fp_user,username,username, type = 0"
                placeholder="请选择发料人"
                :pageSize="10"
                :async="true"
              />
            </a-form-model-item>
          </a-col>


          <a-col :lg="8">
            <a-form-model-item label="头计划号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-input placeholder="请输入头计划号" v-model="model.startPlanNumber"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="尾计划号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="endPlanNumber">
              <a-input placeholder="请输入尾计划号" v-model="model.endPlanNumber"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="排除计划号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ignore">
              <a-input placeholder="请输入排除计划号" v-model="model.ignore"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="追加计划号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="append">
              <a-input placeholder="请输入追加计划号" v-model="model.append"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="班组" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userdef3">
              <j-search-select-tag
                placeholder="请选择班组"
                v-model="model.userdef3"
                dict="team,code,name"
                :pageSize="30"
                :async="true">
              </j-search-select-tag>
            </a-form-model-item>
          </a-col>
          <a-col :lg="8">
            <a-form-model-item label="单据时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="receiptDate">
              <j-date :show-time="true" date-format="YYYY-MM-DD" placeholder="请选择单据时间"
                      class="query-group-cust" v-model="model.receiptDate"></j-date>
            </a-form-model-item>
          </a-col>

          <a-col :lg="8">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <a-textarea placeholder="请输入备注" v-model="model.remark"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>



      <!-- 子表单区域 -->
      <a-tabs defaultActiveKey="1">
        <a-tab-pane tab="物料信息" key="1">
          <div style=""> 
            <a-row type="flex" style="margin-bottom:10px;margin-top:5px" :gutter="8">
              <a-col :span="8">物料编码</a-col>
              <a-col :span="5">数量</a-col>
              <a-col :span="2">操作</a-col>
            </a-row>

            <a-row type="flex" style="margin-bottom:10px;" :gutter="16"
                   v-for="(item, index) in model.shipmentDetailList" :key="index">
              <a-col :span="6" style="display: none">
                <a-form-model-item>
                  <a-input placeholder="id" v-model="item.id"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item>
                  <j-search-select-tag
                    placeholder="请选择"
                    v-model="item.materialCode"
                    :dict="'material,name,code '"
                    :pageSize="3"
                    :async="true"
                    :adjustY="true"
                  style="width:200px ;border: 1px solid red">
                  </j-search-select-tag>
                </a-form-model-item>
              </a-col>
              <a-col :span="5">
                <a-form-model-item>
                  <a-input placeholder="数量" v-model="item.qty"/>
                </a-form-model-item>
              </a-col>

              <a-col :span="2">
                <a-form-model-item>
                  <a-icon type="minus-circle" @click="delRowCustom(index)" style="fontSize :20px"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type="flex" style="margin-bottom:10px;margin-top:5px" :gutter="8">
              <a-col :span="8">&nbsp;</a-col>
              <a-col :span="5">&nbsp;</a-col>
              <a-col :span="2">&nbsp;</a-col>
            </a-row>
            <a-button type="dashed" style="width: 98%;margin-top: 10px" @click="addRowCustom">
              <a-icon type="plus"/>
              添加物料信息
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>

import JEditableTable from '@/components/jeecg/JEditableTable'
import {duplicateCheck, execute, quickShipment} from '@/api/api'
import JDate from '@/components/jeecg/JDate'
import JSelectMultiCanUseContainer from "../../../../components/jeecgbiz/JSelectMultiCanUseContainer";

export default {
  name: 'QuickShipmemtModal',
  components: {
    JDate, JEditableTable,JSelectMultiCanUseContainer
  },
  data() {
    return {
      title: '快速出库',
      visible: false,
      confirmLoading: false,
      wraningMsg: '',
      model: {
        shipmentDetailList: [{}],
      },
      labelCol: {
        xs: {span: 24},
        sm: {span: 6}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 24 - 6}
      },
      activeKey: '1',
      validatorRules: {
        type: [
          {required: true, message: '请选择出库单类型!'},
        ],
        zoneCode: [
          {required: true, message: '请选择库区!'},
        ],
        userdef2: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                this.validateMaterialCode(rule,value,callback)
              }
              if (!value) {
                if (this.model.type === 'QTC') {
                  callback()
                } else {
                  callback('请输入领料单号!')
                }
              }

            }
          }
          // { required: true, message: '请输入领料单号!' },
        ],
        userdef3: [
          {required: true, message: '请选择班组!'},
        ],
        receiptDate: [
          {required: true, message: '请选择单据时间!'},
        ],
        departName: [
          {required: true, message: '请选择部门!'},
        ],
        preserver: [
          {required: true, message: '请选择保管人!'},
        ],
        issuer: [
          {required: true, message: '请选择发料人!'},
        ],
      },
      // 客户信息
      url: {
        add: '/test/jeecgOrderMain/add',
        edit: '/test/jeecgOrderMain/edit',
      }
    }
  },
  created() {
  },
  methods: {
    validateMaterialCode(rule, value, callback) {
      if (value && value.length > 0) {
        //校验授权标识是否存在
        var params = {
          tableName: 'shipment_header',
          fieldName: 'userdef2',
          fieldVal: value,
          dataId: this.model.id
        };
        duplicateCheck(params).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback("领料单号已存在!")
          }
        })
      } else {
        callback()
      }
    },
    handleOk() {
      this.validateFields()
    },
    handleCancel() {
      this.close()
    },

    addRowCustom() {
      this.model.shipmentDetailList.push({});
      this.$forceUpdate();
    },
    delRowCustom(index) {
      console.log(index)
      this.model.shipmentDetailList.splice(index, 1);
      this.$forceUpdate();
    },
    addRowTicket() {
      this.model.jeecgOrderTicketList.push({});
      console.log(this.model.jeecgOrderTicketList)
      this.$forceUpdate();
    },
    delRowTicket(index) {
      console.log(index)
      this.model.jeecgOrderTicketList.splice(index, 1);
      this.$forceUpdate();
    },

    edit(record) {
      this.visible = true
      this.activeKey = '1'
      this.model = Object.assign({
        zoneCode: null,
        type: null,
        userdef2: null,
        shipmentDetailList: [{}]
      }, record);
    },
    /** 触发表单验证 */
    validateFields() {
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if(valid){
          console.log('进入程序'+valid);
          this.receipt(this.model);
        }else {
          console.log('退出程序');
          return false
        }
      })
    },

    receipt(record) {
      this.confirmLoading = true
      this.model = Object.assign({}, record);
      if(this.model.type === 'QTC'){
        this.model['userdef2'] = '';
      }
      quickShipment(this.model).then((res) => {
        this.loading = false;
        if (res.success) {
          this.$message.success(res.message);
          this.visible = false
          this.$emit('refreshList', '');
        } else {
          this.$message.error(res.message);
        }
        this.confirmLoading = false
      }).finally(() => {
        this.confirmLoading = false;
        this.close();
      });
    },
    close() {
      this.$emit('close');
      this.visible = false;
      this.$refs.form.clearValidate();
    },
  }
}
</script>

<style lang="less" scoped>
::v-deep .ant-row-flex:nth-child(1){
  margin-top:69px;
}

</style>