| <template> | 
|   <GlobalWindow title="新建出库单" :visible.sync="isShowModal" :confirm-working="isLoading" width="1000px" @close="close" | 
|     @confirm="confirm"> | 
|     <el-form :model="param" ref="form" :rules="rules"> | 
|       <div class="df_ac"> | 
|         <el-form-item class="w3" label="出库仓库" prop="warehouseId"> | 
|           <el-select :disabled="param.id" @change="changeStore" v-model="param.warehouseId" placeholder="请选择"> | 
|             <el-option v-for="op in storeList" :key="op.id" :label="op.name" :value="op.id"></el-option> | 
|           </el-select> | 
|         </el-form-item> | 
|         <el-form-item class="w3" label="出库日期" prop="doneDate"> | 
|           <el-date-picker type="date" v-model="param.doneDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" | 
|             placeholder="请选择出库日期"></el-date-picker> | 
|         </el-form-item> | 
|         <el-form-item class="w3" label="出库类型" prop="type"> | 
|           <el-select :disabled="param.id" v-model="param.type" placeholder="请选择出库类型"> | 
|             <el-option v-for="op in StoreTypeOps" :key="op.id" :label="op.name" :value="op.id"></el-option> | 
|           </el-select> | 
|         </el-form-item> | 
|         <el-form-item class="w3" label="处理人" prop="name"> | 
|           <el-input v-model="param.createUserName" :disabled="true" v-trim /> | 
|         </el-form-item> | 
|         <el-form-item class="w6" label="备注" prop="remark"> | 
|           <el-input v-model="param.remark" placeholder="请输入" v-trim /> | 
|         </el-form-item> | 
|       </div> | 
|     </el-form> | 
|     <!--  --> | 
|     <el-tabs v-model="activeName"> | 
|       <el-tab-pane label="物料信息" name="first"></el-tab-pane> | 
|     </el-tabs> | 
|     <el-button type="primary" @click="handleOpenMaterial">选择物料</el-button> | 
|     <el-table :data="list" stripe> | 
|       <el-table-column align="center" label="序号" type="index" width="50" /> | 
|       <el-table-column prop="name" label="物料名称" show-overflow-tooltip min-width="80px"></el-table-column> | 
|       <el-table-column prop="code" label="物料编码" show-overflow-tooltip min-width="90px"></el-table-column> | 
|       <el-table-column prop="qrcode" label="条形码" show-overflow-tooltip min-width="70px"></el-table-column> | 
|       <el-table-column prop="brand" label="品牌" show-overflow-tooltip min-width="70px"></el-table-column> | 
|       <el-table-column prop="unitName" label="单位" show-overflow-tooltip min-width="70px"></el-table-column> | 
|       <el-table-column prop="dealUserName" label="出库数量" min-width="90px"> | 
|         <template v-slot="{ row }"> | 
|           <el-input oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" v-model="row.stock" | 
|             class="w100"></el-input> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column prop="maxStock" label="库存数量" show-overflow-tooltip min-width="80px"></el-table-column> | 
|       <el-table-column label="操作" min-width="60px"> | 
|         <template v-slot="scope"> | 
|           <span @click="handleDel(scope)" class="red pointer">删除</span> | 
|         </template> | 
|       </el-table-column> | 
|     </el-table> | 
|     <!--  --> | 
|     <AssetSel v-if="isShowSel" ref="AssetSelRef" @change="changeSel" @close="isShowSel = false" /> | 
|   </GlobalWindow> | 
| </template> | 
|   | 
| <script> | 
| import GlobalWindow from '@/components/common/GlobalWindow' | 
| import AssetSel from './AssetSel' | 
| import { fetchList as getStoreList } from '@/api/ywWarehouse' | 
| import { ywOutinboundCreate } from '@/api/store/index' | 
| import { StoreTypeOps, rules } from './config' | 
| import { Message } from 'element-ui' | 
| import dayjs from 'dayjs' | 
| export default { | 
|   name: 'OperaCategoryWindow', | 
|   components: { GlobalWindow, AssetSel }, | 
|   data() { | 
|     return { | 
|       // 表单数据 | 
|       param: { | 
|         createUserName: this.$store.state.userInfo.realname || this.$store.state.userInfo.username, | 
|         creator: this.$store.state.userInfo.id, | 
|         inOut: 1 | 
|       }, | 
|       activeName: 'first', | 
|       isShowModal: false, | 
|       isShowSel: false, | 
|       isLoading: false, | 
|       // 验证规则 | 
|       rules, | 
|       storeList: [], | 
|       list: [], | 
|       StoreTypeOps: StoreTypeOps.filter(i => i.type == 1), | 
|   | 
|       dataList: [], | 
|     } | 
|   }, | 
|   created() { | 
|     this.initData() | 
|   }, | 
|   methods: { | 
|     confirm() { | 
|       this.$refs['form'].validate((valid) => { | 
|         if (valid) { | 
|           const { param, list } = this | 
|           if(list.length == 0) return Message.warning('请先选择物料信息') | 
|           let count = 0 // 出库数量必填 | 
|           list.forEach(item => { | 
|             if(!item.stock) count ++ | 
|           }) | 
|           if(count > 0) return Message.warning('请输入正确的出库数量') | 
|           this.isLoading = true | 
|           ywOutinboundCreate({ | 
|             ...param, | 
|             recordList: list | 
|           }).then(res => { | 
|             this.isLoading = false | 
|             Message.success('提交成功') | 
|             this.$emit('success') | 
|             this.close() | 
|           }, () => { | 
|             this.isLoading = false | 
|           }) | 
|         } | 
|       }) | 
|     }, | 
|     changeStore() { | 
|       this.list = [] | 
|     }, | 
|     initData() { | 
|       this.$set(this.param, 'doneDate', dayjs().format('YYYY-MM-DD')) | 
|       getStoreList({ capacity: 9999, page: 1, model: {status: 0} }).then(res => { | 
|         this.storeList = res.records || [] | 
|       }) | 
|     }, | 
|     changeSel(val) { | 
|       const list = val | 
|       list.forEach(item => { | 
|         if(this.list.indexOf(item.id) === -1){ | 
|           item.materialId = item.id | 
|           item.stock = null | 
|           item.createDate = null | 
|           this.list.push(item) | 
|         } | 
|       }) | 
|     }, | 
|     handleDel(val) { | 
|       const index = val.$index | 
|       this.list.splice(index, 1) | 
|   | 
|     }, | 
|     handleOpenMaterial() { | 
|       if(!this.param.warehouseId) return Message.warning('请先选择出库仓库') | 
|       this.isShowSel = true | 
|       this.$nextTick(() => { | 
|         this.$refs.AssetSelRef.isShowModal = true | 
|         this.$refs.AssetSelRef.isOut = true | 
|         this.$refs.AssetSelRef.warehouseId = this.param.warehouseId | 
|         this.$refs.AssetSelRef.getList() | 
|         console.log('-----'); | 
|          | 
|       }) | 
|     }, | 
|     close() { | 
|       this.isShowModal = false | 
|       this.$emit('close') | 
|     }, | 
|     getDetail(id) { | 
|       getInfoById(id).then(res => { | 
|         this.param = res | 
|       }) | 
|     }, | 
|   } | 
| } | 
| </script> | 
| <style lang="scss" scoped> | 
| .df_ac { | 
|   display: flex; | 
|   align-items: center; | 
|   flex-wrap: wrap; | 
|   | 
|   .w3 { | 
|     width: 33.3%; | 
|     padding: 0 10px; | 
|     box-sizing: border-box; | 
|   } | 
|   | 
|   .w6 { | 
|     width: 66.6%; | 
|     padding: 0 10px; | 
|     box-sizing: border-box; | 
|   } | 
| } | 
| </style> |