<template> 
 | 
  <GlobalWindow 
 | 
    :title="title" 
 | 
    width="80%" 
 | 
    :visible.sync="visible" 
 | 
    :confirm-working="isWorking" 
 | 
    @confirm="confirm" 
 | 
  > 
 | 
    <div style="margin-bottom: 10px"> 
 | 
      <span class="title-add-style" style="vertical-align:middle">入库信息</span> 
 | 
      <!-- <el-button type="primary" style="margin-left: 10px;vertical-align:middle">选择来源单据</el-button> --> 
 | 
    </div> 
 | 
    <div class="form-data"> 
 | 
      <el-form :model="form" ref="form" inline :rules="rules" label-width="130px" label-suffix=":"> 
 | 
        <!-- <el-form-item label="来源单据类型" prop="originType"> 
 | 
          <el-input v-model="form.originTypeName" disabled placeholder="选择来源单据后默认带出" v-trim/> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="来源单据编号" prop="originCode"> 
 | 
          <el-input v-model="form.originCode" disabled placeholder="选择来源单据后默认带出" v-trim/> 
 | 
        </el-form-item> --> 
 | 
        <el-form-item label="计划入库日期" prop="planDate"> 
 | 
          <el-date-picker 
 | 
            v-model="form.planDate" 
 | 
            value-format="yyyy-MM-dd" 
 | 
            placeholder="选择日期" 
 | 
            :picker-options="pickerOptions" 
 | 
          ></el-date-picker> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="入库类型" prop="type"> 
 | 
          <el-select v-model="form.type" :disabled="disabled" placeholder="请选择入库类型"> 
 | 
            <el-option 
 | 
              v-for="(item, index) in type" 
 | 
              :key="index" 
 | 
              :label="item.name" 
 | 
              :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="入库仓库" prop="warehouseId"> 
 | 
          <el-select v-model="form.warehouseId" filterable clearable placeholder="请选择入库仓库" @change="selectWare"> 
 | 
            <el-option 
 | 
              v-for="(item, index) in tempWarehouses" 
 | 
              :key="index" 
 | 
              :label="item.name" 
 | 
              :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <div class="mark"> 
 | 
          <el-form-item label="单据摘要" prop="abstracts"> 
 | 
            <el-input v-model="form.abstracts" placeholder="请输入单据摘要" v-trim/> 
 | 
          </el-form-item> 
 | 
        </div> 
 | 
      </el-form> 
 | 
    </div> 
 | 
    <!-- 列表 --> 
 | 
    <el-tabs v-model="activeName"> 
 | 
      <el-tab-pane label="物料信息" name="first"></el-tab-pane> 
 | 
    </el-tabs> 
 | 
    <ul class="toolbar"> 
 | 
      <li><el-button type="primary" @click="addMaterial">选择物料</el-button></li> 
 | 
    </ul> 
 | 
  
 | 
    <el-table 
 | 
      :data="form.woutboundInBodyBeanList" 
 | 
      border 
 | 
      stripe 
 | 
    > 
 | 
      <el-table-column align="center" label="序号" type="index" /> 
 | 
      <el-table-column prop="code" label="物料编码" show-overflow-tooltip min-width="160px"> 
 | 
        <template slot-scope="{row}"> 
 | 
          <span class="long-title-style">{{ row.code }}</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="name" label="物料名称" show-overflow-tooltip min-width="100px"> 
 | 
        <template slot-scope="{row}"> 
 | 
          <span class="long-title-style">{{ row.name }}</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column v-if="whLocation.length" label="货位" min-width="100px"> 
 | 
        <template slot-scope="{row}"> 
 | 
          <el-select v-model="row.locationId" filterable placeholder="请选择" @select="selectLocation"> 
 | 
            <el-option 
 | 
              v-for="(item, index) in whLocation" 
 | 
              :key="index" 
 | 
              :label="item.unionName" 
 | 
              :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column label="质量属性" min-width="100px"> 
 | 
        <template slot-scope="scope"> 
 | 
          <el-select v-model="scope.row.qualityType" :disabled='canSelect(scope.$index)' filterable clearable placeholder="请选择"> 
 | 
            <el-option 
 | 
              v-for="(item, index) in properties" 
 | 
              :key="index" 
 | 
              :label="item.name" 
 | 
              :value="item.id"> 
 | 
            </el-option> 
 | 
          </el-select> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column label="批次号" min-width="100px"> 
 | 
        <template slot-scope="{row}"> 
 | 
          <el-input v-model="row.batch" placeholder="请输入批次号" v-trim/> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="umodelName" label="单位" min-width="60px"></el-table-column> 
 | 
      <el-table-column label="入库数量" min-width="100px"> 
 | 
        <template slot-scope="{row}"> 
 | 
          <el-input v-model="row.num" type="number" placeholder="入库数量" v-trim/> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column 
 | 
        label="操作" 
 | 
        min-width="60px" 
 | 
        align="center" 
 | 
        fixed="right" 
 | 
      > 
 | 
        <template slot-scope="{row}"> 
 | 
          <span class="delete-button-style" @click="deleteMaterail(row)">删除</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <SelectMaterail 
 | 
      ref="selectMaterail" 
 | 
      @selectData="selectData" 
 | 
    > 
 | 
    </SelectMaterail> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
// import SelectMaterail from '@/components/ext/OperaWOutboundExtWindow' 
 | 
import { getListByWarehouseId } from '@/api/ext/warehouseLocationExt' 
 | 
// import { queryListByCode } from '@/api/system/dictData' 
 | 
export default { 
 | 
  name: 'OperaWOutboundExtWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { 
 | 
    GlobalWindow, 
 | 
    SelectMaterail: () => import('@/components/ext/SelectMaterail') 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 表单数据 
 | 
      form: { 
 | 
        planDate: null, 
 | 
        warehouseId: null, 
 | 
        abstracts: null, 
 | 
        type: 25, 
 | 
        origin: 0, 
 | 
        woutboundInBodyBeanList: [] 
 | 
      }, 
 | 
      disabled: false, 
 | 
      pickerOptions: {}, 
 | 
      tempWarehouses: [], 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
        planDate: [{ required: true, message: '请选择入库日期', trigger: 'change' }], 
 | 
        type: [{ required: true, message: '请选择入库类型', trigger: 'blur' }], 
 | 
        warehouseId: [{ required: true, message: '请选择入库仓库', trigger: 'blur' }] 
 | 
      }, 
 | 
      activeName: 'first', 
 | 
      whLocation: [], 
 | 
      type: [ 
 | 
        {name:'采购入库', id: 25} 
 | 
      ], 
 | 
      tempMaterials: [ 
 | 
      ], 
 | 
      selectedMaterails: [], 
 | 
      properties: [ 
 | 
        // 0 1不良 2报废 
 | 
        {name:'合格', id: 0}, 
 | 
        {name:'不良', id: 1}, 
 | 
        {name:'报废', id: 2}, 
 | 
      ] 
 | 
    } 
 | 
  }, 
 | 
  inject: ['warehouses'], 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/ext/wOutboundExt', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
    this.pickerOptions.disabledDate = (time) => { 
 | 
        // 一天 
 | 
      let tempTime = 3600 * 1000 * 24  
 | 
      return time.getTime() < new Date()-tempTime 
 | 
    } 
 | 
    // queryListByCode('?dicCode=SYSTEM_APPLIANCE_TYPE') 
 | 
    //   .then(res => { 
 | 
    //     // console.log(res) 
 | 
    //     this.properties = res 
 | 
    //   }) 
 | 
    //   .catch(err => { 
 | 
    //     console.log(err) 
 | 
    //   }) 
 | 
  }, 
 | 
  methods: { 
 | 
    confirm() { 
 | 
      for (let i = 0; i < this.form.woutboundInBodyBeanList.length; i++) { 
 | 
        if (!this.form.woutboundInBodyBeanList[i].batch) { 
 | 
          this.$tip.warning('批次号不能为空') 
 | 
          return 
 | 
        } 
 | 
        if (!this.form.woutboundInBodyBeanList[i].num || this.form.woutboundInBodyBeanList[i].num <= 0) { 
 | 
          this.$tip.warning('出库数量必须大于0') 
 | 
          return 
 | 
        } 
 | 
      } 
 | 
      if (this.form.id == null || this.form.id === '') { 
 | 
        this.__confirmCreate() 
 | 
        return 
 | 
      } 
 | 
      this.__confirmEdit() 
 | 
    }, 
 | 
    open (title, type = 0) { 
 | 
      this.title = title 
 | 
      this.visible = true 
 | 
      // 新建 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.form.resetFields() 
 | 
        this.form[this.configData['field.id']] = null 
 | 
  
 | 
        if (title === '其它入库') { 
 | 
          this.form.planDate = new Date() 
 | 
          this.form.type = null 
 | 
          this.disabled = false 
 | 
          this.type = [ 
 | 
            { name:'客退检验入库', id: 26 }, 
 | 
            { name:'客返检验入库', id: 27 }, 
 | 
            { name:'库存调整', id: 28 } 
 | 
          ] 
 | 
        } else { 
 | 
          this.disabled = true 
 | 
          this.type = [ 
 | 
            { name:'采购入库', id: 25 } 
 | 
          ] 
 | 
        } 
 | 
  
 | 
        this.form.woutboundInBodyBeanList = [] 
 | 
  
 | 
        if (type == 1) { 
 | 
          this.tempWarehouses = this.warehouses() 
 | 
          this.form.planDate = new Date() 
 | 
          if (type) { 
 | 
            this.tempWarehouses = this.tempWarehouses.filter((item) => { 
 | 
              if (item.type === 0) { 
 | 
                return item 
 | 
              } 
 | 
            }) 
 | 
          } 
 | 
        } else { 
 | 
          this.tempWarehouses = this.warehouses() 
 | 
        } 
 | 
      }) 
 | 
      
 | 
    }, 
 | 
    selectWare (v) { 
 | 
      // console.log(v) 
 | 
      getListByWarehouseId(v) 
 | 
        .then(res => { 
 | 
          console.log(res) 
 | 
          this.whLocation = res 
 | 
          if (this.whLocation.length === 0 ) { 
 | 
            let temQualityType = 0 
 | 
            for (const item of this.tempWarehouses) { 
 | 
              if (item.id === v) { 
 | 
                switch (item.tmodel.label) { 
 | 
                  case 'APPLIANCE_ONTEST': { 
 | 
                    temQualityType = 0 
 | 
                    break 
 | 
                  } 
 | 
                  case 'APPLIANCE_OFFTEST': { 
 | 
                    temQualityType = 1 
 | 
                    break 
 | 
                  } 
 | 
                  case 'APPLIANCE_USELESS': { 
 | 
                    temQualityType = 2 
 | 
                    break 
 | 
                  } 
 | 
                  case 'APPLIANCE_MIX': { 
 | 
                    this.houseProperty = 0 
 | 
                    break 
 | 
                  } 
 | 
                } 
 | 
              } 
 | 
            } 
 | 
            this.setQuality(temQualityType) 
 | 
          } else { 
 | 
            for (const item of this.form.woutboundInBodyBeanList) { 
 | 
              item.locationId = this.whLocation[0].id 
 | 
            } 
 | 
          } 
 | 
        }) 
 | 
        .catch(err => { 
 | 
          console.log(err) 
 | 
        }) 
 | 
       
 | 
    }, 
 | 
    setQuality (type) { 
 | 
      for (const item of this.form.woutboundInBodyBeanList) { 
 | 
        item.qualityType = type 
 | 
      } 
 | 
    }, 
 | 
    canSelect(index) { 
 | 
      let tempRow = this.form.woutboundInBodyBeanList[index] 
 | 
      let cans = false 
 | 
      for (const item of this.whLocation) { 
 | 
        if (item.id === tempRow.locationId) { 
 | 
          switch (item.label) { 
 | 
            case 'APPLIANCE_ONTEST': { 
 | 
              tempRow.qualityType = 0 
 | 
              cans = false 
 | 
              break 
 | 
            } 
 | 
            case 'APPLIANCE_OFFTEST': { 
 | 
              tempRow.qualityType = 1 
 | 
              cans = false 
 | 
              break 
 | 
            } 
 | 
            case 'APPLIANCE_USELESS': { 
 | 
              tempRow.qualityType = 2 
 | 
              cans = false 
 | 
              break 
 | 
            } 
 | 
            case 'APPLIANCE_MIX': { 
 | 
              tempRow.qualityType = 0 
 | 
              cans = true 
 | 
              break 
 | 
            } 
 | 
          } 
 | 
        } 
 | 
      } 
 | 
      return !cans 
 | 
    }, 
 | 
    selectLocation (v) { 
 | 
      // console.log(index, row); 
 | 
      // for (const item of this.whLocation) { 
 | 
      //   if (item.id === v) { 
 | 
      //     switch (item.label) { 
 | 
      //       case 'APPLIANCE_ONTEST': { 
 | 
      //         this.houseProperty = 0 
 | 
      //         this.canChangeQualityType = false 
 | 
      //         break 
 | 
      //       } 
 | 
      //       case 'APPLIANCE_OFFTEST': { 
 | 
      //         this.houseProperty = 1 
 | 
      //         this.canChangeQualityType = false 
 | 
      //         break 
 | 
      //       } 
 | 
      //       case 'APPLIANCE_USELESS': { 
 | 
      //         this.houseProperty = 2 
 | 
      //         this.canChangeQualityType = false 
 | 
      //         break 
 | 
      //       } 
 | 
      //       case 'APPLIANCE_MIX': { 
 | 
      //         this.houseProperty = 0 
 | 
      //         this.canChangeQualityType = true 
 | 
      //         break 
 | 
      //       } 
 | 
      //     } 
 | 
      //   } 
 | 
      // } 
 | 
    }, 
 | 
    addMaterial () { 
 | 
      // console.log('增加物料') 
 | 
      // const ids = this.form.woutboundInBodyBeanList.map(e => { return e.materialId }).join(',') 
 | 
      this.$refs.selectMaterail.open('选择物料', { ids: '', multiple: true, isPurchase:true }) 
 | 
    }, 
 | 
    deleteMaterail (row) { 
 | 
      // console.log('删除物料') 
 | 
      this.form.woutboundInBodyBeanList.splice(this.form.woutboundInBodyBeanList.indexOf(row), 1) 
 | 
    }, 
 | 
    selectData (data) { 
 | 
      // 选择物料回调 
 | 
      console.log(data) 
 | 
      for (const item of data.selectedMaterails) { 
 | 
        this.form.woutboundInBodyBeanList.push({ 
 | 
          code: item.mmodelCode, 
 | 
          name: item.mmodelUnionName, 
 | 
          umodelName: item.umodelName, 
 | 
           
 | 
          locationId: this.whLocation.length ? this.whLocation[0].id : null, 
 | 
          qualityType: this.whLocation.length ? 0 : this.houseProperty, 
 | 
          materialId: item.id, 
 | 
          num: item.num, 
 | 
          unitId: item.unitId, 
 | 
          batch: null, 
 | 
        }) 
 | 
      } 
 | 
    }, 
 | 
    __confirmCreate () { 
 | 
      this.$refs.form.validate((valid) => { 
 | 
        if (!this.form.woutboundInBodyBeanList.length) { 
 | 
          this.$tip.error('至少选择一条物料') 
 | 
          return 
 | 
        } 
 | 
        for (const item of this.form.woutboundInBodyBeanList) { 
 | 
          if (item.num<=0) { 
 | 
            this.$tip.error('入库物料数量必须大于0!') 
 | 
            return 
 | 
          } 
 | 
        } 
 | 
        if (!valid) { 
 | 
          return 
 | 
        } 
 | 
        // 调用新建接口 
 | 
        this.isWorking = true 
 | 
        let obj = JSON.parse(JSON.stringify(this.form)) 
 | 
        obj.validDate = obj.planDate 
 | 
        this.api.wOutBoundForStockUp(obj) 
 | 
          .then(() => { 
 | 
            this.visible = false 
 | 
            this.$tip.apiSuccess('新建成功') 
 | 
            this.$emit('success') 
 | 
          }) 
 | 
          .catch(e => { 
 | 
            this.$tip.apiFailed(e) 
 | 
          }) 
 | 
          .finally(() => { 
 | 
            this.isWorking = false 
 | 
          }) 
 | 
      }) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
.toolbar { 
 | 
  border-bottom: 1px solid #eee; 
 | 
  padding-bottom: 10px; 
 | 
  li { 
 | 
    display: inline-block; 
 | 
    margin-right: 6px; 
 | 
  } 
 | 
} 
 | 
.form-data { 
 | 
  ::v-deep .el-form-item{ 
 | 
    width: 40%; 
 | 
    margin-right: 1%; 
 | 
  } 
 | 
  .mark { 
 | 
    .el-form-item { 
 | 
      width: 81%; 
 | 
      // margin-right: 1%; 
 | 
    } 
 | 
  } 
 | 
  ::v-deep .el-form-item__content { 
 | 
    width: calc(100% - 134px); 
 | 
  } 
 | 
} 
 | 
.delete-button-style { 
 | 
    color: red; 
 | 
    cursor: pointer; 
 | 
  } 
 | 
</style> 
 |