AMS/ruoyi-ui/src/views/wms/docOrder/docOrderDetails-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.id ? '明细新增' : '明细修改'"
    :close-on-click-modal="false"
    :modal="false"
    :width="'50%'"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="入库单号" prop="orderNo">
            <el-input v-model="dataForm.orderNo" :disabled="true" placeholder=""></el-input>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8">-->
<!--          <el-form-item label="客户" prop="customerId">-->
<!--            <el-select v-model="dataForm.customerId" placeholder="请选择" style="width: 100%" clearable>-->
<!--              <el-option-->
<!--                v-for="item in customerIdCombo"-->
<!--                :key="item.value"-->
<!--                :label="item.customerName"-->
<!--                :value="item.customerId">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="单据状态" prop="orderStatus">
            <el-select v-model="dataForm.lineStatus" :disabled="true" placeholder="请选择" style="width: 100%">
              <el-option
                v-for="dict in dict.type.so_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料" prop="sku">
            <el-input v-model="dataForm.sku" placeholder="">
              <i class="el-icon-search el-input__icon" slot="suffix" @click="handleSkuIconClick"></i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单数" prop="qtyOrdered">
            <el-input v-model="dataForm.qtyOrdered" placeholder=""></el-input>
          </el-form-item>
        </el-col>
      </el-row>

<!--        <el-col :span="8">-->
<!--          <el-form-item label="指定库区" prop="pickZone">-->
<!--            <el-select v-model="dataForm.pickZone" @change="locationZoneChange" placeholder="请选择库区" clearable-->
<!--                       size="small" style="width: 100%">-->
<!--              <el-option-->
<!--                v-for="dict in this.locationZoneCombo"-->
<!--                :key="dict.zoneId"-->
<!--                :label="dict.zoneName"-->
<!--                :value="dict.zoneId"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="8">-->
<!--          <el-form-item label="指定库位" prop="location">-->
<!--            <el-select v-model="dataForm.location" placeholder="请选择库位" clearable size="small" style="width: 100%">-->
<!--              <el-option-->
<!--                v-for="dict in locationCombo"-->
<!--                :key="dict.id"-->
<!--                :label="dict.locationNo"-->
<!--                :value="dict.id"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

      <div style="cursor: pointer;" @click="showHidden">
        <el-divider content-position="center">批次属性信息...</el-divider>
      </div>
      <el-table v-show="attShowFlag" :data="tableOption" ref="flowConfigDetails">
        <el-table-column label="批次属性" prop="lotattId">
          <template slot-scope="scope">
            <div style="display: inline-block;width: 10px;color:red;">
              <div v-show="scope.row.lotattFlag === 'Required'">*</div>
            </div>
            <div style="display: inline-block;width: 185px;">
              {{scope.row.lotattName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="属性值" prop="defaultValue">
          <template slot-scope="scope">
            <div v-if="scope.row.inputType === 'Text'">
              <el-input v-model="scope.row.defaultValue" placeholder=""/>
            </div>
            <div v-if="scope.row.inputType === 'DateBox'">
              <el-date-picker v-model="scope.row.defaultValue" type="date" placeholder="" style="width: 100%"
                              value-format="yyyy-MM-dd"/>
            </div>
            <div v-if="scope.row.inputType === 'ComboBox'">
              <el-select v-model="scope.row.defaultValue" placeholder="请选择" clearable size="small" style="width: 100%">
                <el-option
                  v-for="dict in dict.type[scope.row.inputScope]"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <sku-search-dialog v-if="skuSearchDialogVisible" ref="skuSearch" @dochose="afterChoseSku"></sku-search-dialog>
    </el-form>
    <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
       <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
     </span>
  </el-dialog>
</template>

<script>
  import {lotattConfigList} from "@/api/ams/config"
  import {queryCustomerDict} from "@/api/base/customer"
  import SkuSearchDialog from '@/views/base/baseSku/skuSearchDialog'
  import {queryLocationZoneDict} from "@/api/base/locationZone"
  import {queryLocationDict} from "@/api/base/locationInfo"
  import {addDocOrderDetails, queryOrderDetails, updateDocOrderDetails} from "@/api/docOrder/docOrder"

  export default {
    dicts: ['sys_yes_no', 'ams_inv_quality', 'so_status'],
    data () {
      return {
        visible: false,
        attShowFlag: false,
        skuSearchDialogVisible: false,
        roleList: [],
        id: '',
        dataForm: {
          orderNo: '',
          orderLineNo: '',
          customerId: '',
          lineStatus: '00',
          sku: '',
          pickZone: '',
          location: '',
          qtyOrdered: 0,
          qtyAllocated: 0,
          qtyPicked: 0,
          qtyShipped: 0
        },
        dataRule: {},
        tableOption: [],
        customerIdCombo: [],
        locationCombo: [],
        locationZoneCombo: [],
        isAdd: true
      }
    },
    components: {
      SkuSearchDialog
    },
    methods: {
      init (orderNo,orderLineNo) {
        if(orderLineNo != ''){
          this.isAdd = false
        } else {
          this.isAdd = true
        }
        this.dataForm.orderNo = orderNo
        this.dataForm.orderLineNo = orderLineNo
        this.dataForm.sku = ''
        this.dataForm.customerId = ''
        this.dataForm.lineStatus = '00'
        this.dataForm.pickZone = ''
        this.dataForm.location = ''
        this.dataForm.qtyOrdered = 0
        this.dataForm.qtyAllocated = 0
        this.dataForm.qtyPicked = 0
        this.dataForm.qtyShipped = 0
        this.initData()
        this.visible = true
        this.$nextTick(() => {
          if(this.isAdd == false) {
            //查询明细
            queryOrderDetails(this.dataForm.orderNo,this.dataForm.orderLineNo).then(response => {
              this.dataForm.orderNo = response.data.orderNo
              this.dataForm.orderLineNo = response.data.orderLineNo
              this.dataForm.lineStatus = response.data.lineStatus
              this.dataForm.customerId = parseInt(response.data.customerId)
              this.dataForm.sku = response.data.sku
              if(response.data.pickZone) {
                this.dataForm.pickZone = parseInt(response.data.pickZone)
                this.locationZoneChange(this.dataForm.pickZone)
              }
              if(response.data.location) {
                this.dataForm.location = response.data.location
              }
              this.dataForm.qtyOrdered = response.data.qtyOrdered
            });
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.isAdd) {
              for (let i = 0; i < this.tableOption.length; i++) {
                this.dataForm['' + this.tableOption[i].lotattId] = this.tableOption[i].defaultValue
              }
              addDocOrderDetails(this.dataForm).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.visible = false
                this.$emit('refreshDataList',this.dataForm.orderNo)
              });
            } else {
              updateDocOrderDetails(this.dataForm).then(response => {
                this.$modal.msgSuccess("更新成功");
                this.visible = false
                this.$emit('refreshDataList',this.dataForm.orderNo)
              });
            }
          }
        })
      },
      initData () {
        queryCustomerDict().then(response => {
          this.customerIdCombo = response.data;
        });

        this.tableOption.length = 0
        lotattConfigList().then(response => {
          this.tableOption = response.data
        })

        queryLocationZoneDict().then(response => {
          this.locationZoneCombo = response.data
        })
      },
      showHidden() {
        this.attShowFlag = !this.attShowFlag
      },
      handleSkuIconClick() {
        this.skuSearchDialogVisible = true
        this.$nextTick(() => {
          this.$refs.skuSearch.init()
        })
      },
      afterChoseSku: function (userName, value) {
        this.dataForm.sku = value
      },
      locationZoneChange: function (value) {
        let param = 0
        if (value != '') {
          param = value
        }
        queryLocationDict(param).then(response => {
          this.locationCombo = response.data
        })
      }
    }
  }
</script>