| <template> | 
|   <TableLayout v-permissions="['ext:wtransferext:query']"> | 
|     <!-- 搜索表单 --> | 
|     <el-form slot="search-form" ref="searchForm" :model="searchForm" label-width="110px" label-suffix=":" inline> | 
|       <el-form-item label="转出组织" prop="outDepartId"> | 
|         <el-select v-model="searchForm.outDepartId" clearable filterable placeholder="请选择转出组织" @change="selectOutD"> | 
|           <el-option | 
|             v-for="(item, index) in departments" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="转出仓库" prop="outWarehouseId"> | 
|         <el-select v-model="searchForm.outWarehouseId" clearable filterable placeholder="请选择转出仓库"> | 
|           <el-option | 
|             v-for="(item, index) in outWarehouse" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <!-- <el-form-item label="转库类型" prop="type"> | 
|         <el-select v-model="searchForm.type" placeholder="请选择转库类型" clearable> | 
|           <el-option | 
|             v-for="(item, index) in transferTypes" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> --> | 
|       <el-form-item label="单据类型" prop="type"> | 
|         <el-select v-model="searchForm.type" placeholder="请选择单据类型" clearable filterable> | 
|           <el-option | 
|             v-for="(item, index) in billType" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="转入组织" prop="inDepartId"> | 
|         <el-select v-model="searchForm.inDepartId" placeholder="请选择转入组织" clearable filterable @change="selectInD"> | 
|           <el-option | 
|             v-for="(item, index) in departments" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           > | 
|           </el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="转入仓库" prop="inWarehouseId"> | 
|         <el-select v-model="searchForm.inWarehouseId" clearable filterable placeholder="请选择转入仓库"> | 
|           <el-option | 
|             v-for="(item, index) in inWarehouse" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           ></el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="转库单号" prop="code"> | 
|         <el-input | 
|           v-model="searchForm.code" | 
|           placeholder="请输入转库单号" | 
|           @keypress.enter.native="search" | 
|         ></el-input> | 
|       </el-form-item> | 
|        | 
|       <el-form-item label="单据状态" prop="status"> | 
|         <el-select v-model="searchForm.status" clearable placeholder="请选择单据状态"> | 
|           <el-option | 
|             v-for="(item, index) in statusList" | 
|             :key="index" | 
|             :label="item.name" | 
|             :value="item.id" | 
|           ></el-option> | 
|         </el-select> | 
|       </el-form-item> | 
|       <el-form-item label="计划转出日期"> | 
|         <el-date-picker | 
|           v-model="Plandate" | 
|           type="daterange" | 
|           value-format="yyyy-MM-dd" | 
|           range-separator="~" | 
|           start-placeholder="开始日期" | 
|           end-placeholder="结束日期" | 
|           @change="selectDate" | 
|         ></el-date-picker> | 
|       </el-form-item> | 
|       <section> | 
|         <el-button type="primary" @click="search">搜索</el-button> | 
|         <el-button @click="reset">重置</el-button> | 
|       </section> | 
|     </el-form> | 
|     <!-- 表格和分页 --> | 
|     <template v-slot:table-wrap> | 
|       <ul class="toolbar" v-permissions="['ext:wtransferext:create']"> | 
|         <li> | 
|           <el-button | 
|             type="primary" | 
|             @click="$refs.operaWrollOutStoreExt.open('新增转库')" | 
|           >新增</el-button> | 
|         </li> | 
|       </ul> | 
|       <el-table | 
|         v-loading="isWorking.search" | 
|         :data="tableData.list" | 
|         stripe | 
|         border | 
|         @selection-change="handleSelectionChange" | 
|       > | 
|         <!-- <el-table-column type="selection" width="55"></el-table-column> --> | 
|         <el-table-column prop="code" label="转库单号" fixed="left" min-width="140px"> | 
|           <template slot-scope="{ row }"> | 
|             <el-button | 
|               type="text" | 
|               @click="showDetail(row)" | 
|               >{{ row.code }}</el-button | 
|             > | 
|           </template> | 
|         </el-table-column> | 
|         <!-- <el-table-column prop="outPlandate" label="转库类型" min-width="80px"> | 
|           <template slot-scope="{ row }"> | 
|             {{ typeToStr(row.type) }} | 
|           </template> | 
|         </el-table-column> --> | 
|         <el-table-column label="单据类型" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             {{ billToStr(row.type) }} | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="name" label="物料信息" min-width="180px"> | 
|           <template slot-scope="{row}"> | 
|             <div :title="materailsStr(row)" style="width:100%"> | 
|               <div v-if="row.wtransferDetailList.length >= 1" class="long-title-style">{{ materailStr(row.wtransferDetailList[0]) }}</div> | 
|               <div v-if="row.wtransferDetailList.length >= 2" class="long-title-style">{{ materailStr(row.wtransferDetailList[1]) }}</div> | 
|               <div v-if="row.wtransferDetailList.length >= 3" class="long-title-style">{{ materailStr(row.wtransferDetailList[2]) }}</div> | 
|               <div v-if="row.wtransferDetailList.length >= 4" class="long-title-style">{{ materailStr(row.wtransferDetailList[3]) }}</div> | 
|             </div> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="outPlandate" label="来源单据类型" min-width="100px"> | 
|           <template slot-scope="{row}">{{ originTypeToStr(row.originType) }}</template> | 
|         </el-table-column> | 
|         <el-table-column prop="originCode" label="来源单据编号" min-width="130px"> | 
|           <template slot-scope="{row}">{{ row.originCode || '-' }}</template> | 
|         </el-table-column> | 
|         <el-table-column prop="outPlandate" label="计划转出日期" min-width="130px"></el-table-column> | 
|         <el-table-column prop="outDepartName" label="转出组织" min-width="100px"></el-table-column> | 
|         <el-table-column prop="outWarehouseName" show-overflow-tooltip label="转出仓库" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             <span class="long-title-style">{{ row.outWarehouseName }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="outActdate" label="实际转出日期" min-width="130px"> | 
|           <template slot-scope="{ row }"> | 
|             {{ row.outActdate || '-' }} | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="inPlandate" label="计划转入日期" min-width="130px"></el-table-column> | 
|         <el-table-column prop="inDepartName" label="转入组织" min-width="100px"></el-table-column> | 
|         <el-table-column prop="inWarehouseName" show-overflow-tooltip label="转入库仓" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             <span class="long-title-style">{{ row.inWarehouseName }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="inActdate" label="实际转入日期" min-width="130px"> | 
|           <template slot-scope="{ row }"> | 
|             {{ row.inActdate || '-' }} | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="createTime" label="创建时间" min-width="140px"></el-table-column> | 
|         <el-table-column prop="createName" label="创建人" min-width="140px"></el-table-column> | 
|         <el-table-column fixed="right" prop="status" label="单据状态" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             <span v-if="row.status == '0'">已计划</span> | 
|             <span v-if="row.status == '1'">已转出</span> | 
|             <span v-if="row.status == '2'">已转入</span> | 
|             <span v-if="row.status == '3'">已取消</span> | 
|             <span v-if="row.status == '4'">已退回</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="操作" min-width="80px" fixed="right"> | 
|           <template slot-scope="{ row }"> | 
|             <div v-if="row.status == '0'"> | 
|               <el-button type="text" @click="cancelOrder(row)" style="color: red" v-permissions="['ext:wtransferext:cancel']" >取消</el-button> | 
|             </div> | 
|             <div v-else-if="row.status == '1'"> | 
|               <el-button type="text" @click="withdraw(row.id)" v-permissions="['ext:wtransferext:cancel']" >退回</el-button> | 
|             </div> | 
|             <div v-else>-</div> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|       <pagination | 
|         @size-change="handleSizeChange" | 
|         @current-change="handlePageChange" | 
|         :pagination="tableData.pagination" | 
|       ></pagination> | 
|     </template> | 
|     <OperaWrollOutStore ref="operaWrollOutStoreExt" @success="handlePageChange"/> | 
|     <OperaWrollOutStoreDetail ref="operaWrollOutStoreDetailExt"/> | 
|     <OrderCancel ref="orderCancel" @success="handlePageChange"/> | 
|   </TableLayout> | 
| </template> | 
|   | 
| <script> | 
| import BaseTable from '@/components/base/BaseTable' | 
| import TableLayout from '@/layouts/TableLayout' | 
| import Pagination from '@/components/common/Pagination' | 
| import OperaWrollOutStore from '@/components/ext/OperaWrollOutStore' | 
| import OperaWrollOutStoreDetail from '@/components/ext/OperaWrollOutStoreDetail' | 
| import OrderCancel from '@/components/ext/OperaWOrderCancel' | 
| import { wTransferExt, withdrawWithId } from '@/api/ext/wTransferExt' | 
| import { getDepartmentListByConditon } from '@/api/ext/departmentExt' | 
| import { queryWarehouseAllData } from '@/api/ext/warehouseExt' | 
| export default { | 
|   name: 'WTransferExt', | 
|   extends: BaseTable, | 
|   components: { | 
|     TableLayout, | 
|     Pagination, | 
|     OperaWrollOutStore, | 
|     OperaWrollOutStoreDetail, | 
|     OrderCancel | 
|   }, | 
|   data () { | 
|     return { | 
|       options: [ | 
|         { name: '11', id: '1' }, | 
|         { name: '22', id: '2' } | 
|       ], | 
|       departments: [], | 
|       inWarehouse: [], | 
|       outWarehouse: [], | 
|       statusList: [ | 
|         { name: '已计划', id: '0' }, | 
|         { name: '已转出', id: '1' }, | 
|         { name: '已转入', id: '2' }, | 
|         { name: '已取消', id: '3' }, | 
|         { name: '已退回', id: '4' } | 
|       ], | 
|       transferTypes: [ | 
|         /** | 
|          * 1、车间领料; | 
|          * 2、机台备料; | 
|          * 3、 车间转库; | 
|          * 4、完工入库; | 
|          * 5、计划领料; | 
|          * 6、外协领料  ; | 
|          * 7、外协完工转库; | 
|          * 8、产品入库  ; | 
|          * 9、产品转库  ; | 
|          * 10、让步放行入库 ; | 
|          * 11、让步放行转库; | 
|          * 12、客返返修领料; | 
|          * 13、客返返修入库; | 
|          * 14、跨组织转库; | 
|          * 15、工单投料(出库),工单产出(入); | 
|          * 16、销售出库; | 
|          * 17、让步销售 | 
|          */ | 
|   | 
|         { name: '车间领料', id: 1 }, | 
|         { name: '计划领料;', id: 2 }, | 
|         { name: '机台备料', id: 3 }, | 
|         { name: '完工入库', id: 4 }, | 
|         { name: '车间转库', id: 5 }, | 
|         { name: '外协领料', id: 6 }, | 
|         { name: '外协完工转库', id: 7 }, | 
|         { name: '产品入库', id: 8 }, | 
|         { name: '产品转库', id: 9 }, | 
|         { name: '让步放行入库', id: 10 }, | 
|         { name: '让步放行转库', id: 11 }, | 
|         { name: '客返返修领料', id: 12 }, | 
|         { name: '客返返修入库', id: 13 }, | 
|         { name: '跨组织转库', id: 14 }, | 
|         { name: '工序报废', id: 15 }, | 
|         { name: '客退返修领料', id: 16 }, | 
|         { name: '客退返修入库', id: 17 }, | 
|         { name: '废品入库', id: 30 }, | 
|          | 
|       ], | 
|       // billType: [ | 
|       //   { name: '车间领料', id: 1 }, | 
|       //   { name: '计划领料', id: 2 }, | 
|       //   { name: '机台备料', id: 3 }, | 
|       //   { name: '完工入库', id: 4 }, | 
|       //   { name: '车间转库', id: 5 }, | 
|       //   { name: '外协领料转库', id: 6 }, | 
|       //   { name: '外协完工转库', id: 7 }, | 
|       //   { name: '产品入库', id: 8 }, | 
|       //   { name: '产品转库', id: 9 }, | 
|       //   { name: '让步放行入库', id: 10 }, | 
|       //   { name: '让步放行转库', id: 11 }, | 
|       //   { name: '客返品返修领料', id: 12 }, | 
|       //   { name: '客返返修入库', id: 13 }, | 
|       //   { name: '跨组织转库', id: 14 }, | 
|       //   { name: '工序报废', id: 15 }, | 
|       //   { name: '客退品返修领料', id: 16 }, | 
|       //   { name: '客退品返修入库', id: 17 }, | 
|       // ], | 
|       billType: [ | 
|         { name: '车间领料', id: 1 }, | 
|         { name: '计划领料', id: 2 }, | 
|         { name: '机台备料', id: 3 }, | 
|         { name: '完工入库', id: 4 }, | 
|         { name: '车间转库', id: 5 }, | 
|         { name: '外协领料转库', id: 6 }, | 
|         { name: '外协完工转库', id: 7 }, | 
|         { name: '产品入库', id: 8 }, | 
|         { name: '产品转库', id: 9 }, | 
|         { name: '让步放行入库', id: 10 }, | 
|         { name: '让步放行转库', id: 11 }, | 
|         { name: '客返返修领料', id: 12 }, | 
|         { name: '客返返修入库', id: 13 }, | 
|         { name: '跨组织转库', id: 14 }, | 
|         { name: '工序报废', id: 15 }, | 
|         { name: '客退返修领料', id: 16 }, | 
|         { name: '客退返修入库', id: 17 }, | 
|         { name: '废品入库', id: 30 }, | 
|       ], | 
|       originTypes: [ | 
|         { name: '销售订单', id: 0 }, | 
|         { name: '生产工单', id: 1 }, | 
|         { name: '其他', id: 2 }, | 
|         { name: '申请单', id: 3 } | 
|       ], | 
|       Plandate: [], | 
|       // 搜索 | 
|       searchForm: { | 
|         outPlanDateStart: '', | 
|         outPlanDateEnd: '', | 
|         code: '', | 
|         outDepartId: this.$store.state.userInfo.curComDepartment.id, | 
|         outWarehouseId: '', | 
|         inDepartId: this.$store.state.userInfo.curComDepartment.id, | 
|         inWarehouseId: '', | 
|         status: '', | 
|         type: '' | 
|       } | 
|     } | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       module: '换库单信息', | 
|       api: '/ext/wTransferExt', | 
|       'field.id': 'id', | 
|       'field.main': 'name', | 
|       sorts: [{ direction: 'DESC', property: 'CREATE_TIME' }] | 
|     }) | 
|     getDepartmentListByConditon({ type: 0 }) | 
|       .then(res => { | 
|         // console.log(res) | 
|         this.departments = res | 
|       }) | 
|       .catch(err => { | 
|         console.log(err) | 
|       }) | 
|     this.search() | 
|     this.getWhouseByRootDepartment(2, this.$store.state.userInfo.curComDepartment.id) | 
|   }, | 
|   methods: { | 
|     selectDate (v) { | 
|       this.searchForm.outPlanDateStart = v[0] | 
|       this.searchForm.outPlanDateEnd = v[1] | 
|     }, | 
|     selectOutD (v) { | 
|       this.outWarehouse = [] | 
|       this.getWhouseByRootDepartment(0, v) | 
|     }, | 
|     selectInD (v) { | 
|       this.inWarehouse = [] | 
|       this.getWhouseByRootDepartment(1, v) | 
|     }, | 
|     getWhouseByRootDepartment (type, id) { | 
|       queryWarehouseAllData({ status: 1, rootDepartId: id }) | 
|         .then(res => { | 
|           if (type === 0) { | 
|             this.outWarehouse = res | 
|           } else if (type === 1) { | 
|             this.inWarehouse = res | 
|           } else { | 
|             this.outWarehouse = res | 
|             this.inWarehouse = res | 
|           } | 
|         }) | 
|         .catch(err => { | 
|           console.log(err) | 
|         }) | 
|     }, | 
|     reset () { | 
|       this.$refs.searchForm.resetFields() | 
|       this.Plandate = [] | 
|       this.outWarehouse = [] | 
|       this.inWarehouse = [] | 
|       this.searchForm.outPlanDateStart = null | 
|       this.searchForm.outPlanDateEnd = null | 
|       this.search() | 
|     }, | 
|     showDetail (row) { | 
|       wTransferExt(row.id) | 
|         .then(res => { | 
|           this.$refs.operaWrollOutStoreDetailExt.open('转库详情', res) | 
|         }) | 
|         .catch(err => { | 
|           this.$tip.error(err) | 
|         }) | 
|     }, | 
|     materailsStr (row) { | 
|       let str = '' | 
|       for (const item of row.wtransferDetailList) { | 
|         if (str) { | 
|           str = str.concat('\n') | 
|         } | 
|         str = str.concat(this.materailStr(item)) | 
|       } | 
|       return str | 
|     }, | 
|     cancelOrder (row) { | 
|       this.$refs.orderCancel.open('取消转库', { id: row.id }, 1) | 
|     }, | 
|     materailStr (item) { | 
|       let str = ''; | 
|       str += `【${item.materialCode}】${item.materialName}` | 
|       if (item.batch) { | 
|         str += item.batch | 
|       } | 
|       if (item.procedureName) { | 
|         str += ` | ${item.procedureName}` | 
|       } | 
|       switch (item.qualityType) { | 
|         case 0: str += ' | 合格'; break; | 
|         case 1: str += ' | 不良'; break | 
|         case 2: str += ' | 报废'; break | 
|       } | 
|       str += ` X ${item.outPlannum}` | 
|       return str | 
|     }, | 
|     typeToStr (type) { | 
|       for (const item of this.transferTypes) { | 
|         if (item.id === type) return item.name | 
|       } | 
|       return '-' | 
|     }, | 
|     originTypeToStr (type) { | 
|       for (const item of this.originTypes) { | 
|         if (item.id === type) return item.name | 
|       } | 
|       return '-' | 
|     }, | 
|     billToStr (type) { | 
|       for (const item of this.billType) { | 
|         if (item.id === type) return item.name | 
|       } | 
|       return '-' | 
|     }, | 
|     withdraw (id) { | 
|       this.$confirm('确认退回当前出库物料?', '确认退回', { | 
|         distinguishCancelAndClose: true, | 
|         confirmButtonText: '确认', | 
|         cancelButtonText: '取消' | 
|       }) | 
|         .then(() => { | 
|           withdrawWithId(id) | 
|             .then(res => { | 
|               this.$message.success('退回成功') | 
|               this.handlePageChange() | 
|             }) | 
|             .catch(err => { | 
|               this.$tip.error(err) | 
|             }) | 
|         }) | 
|     } | 
|   } | 
| } | 
| </script> | 
| <style lang="scss" scoped> | 
| .divide { | 
|   width: 100%; | 
|   height: 2px; | 
|   background-color: rgb(204, 204, 204); | 
| } | 
| </style> |