| | |
| | | <el-divider direction="vertical"></el-divider> |
| | | <span class="less-style">ç©æç¼å·ï¼ {{ row.materielCode }} </span> |
| | | <el-divider direction="vertical"></el-divider> |
| | | <span class="less-style" |
| | | >éæ±æ°éï¼ {{ row.orderQuantity }} |
| | | </span> |
| | | <span class="less-style">éæ±æ°éï¼ {{ row.qty }} </span> |
| | | <el-divider direction="vertical"></el-divider> |
| | | <span :class="selectionClass" |
| | | >已鿰éï¼ {{ selectionSum }} |
| | | </span> |
| | | <span :class="selectionClass">已鿰éï¼ {{ selectionSum }} </span> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <!-- <el-link |
| | | type="primary" |
| | | size="small" |
| | | style="float: right; height: 20px" |
| | | @click="getData(false)" |
| | | >{{ kcname }}</el-link |
| | | > --> |
| | | <el-link |
| | | type="primary" |
| | | size="small" |
| | |
| | | @click="getData" |
| | | >å·æ°</el-link |
| | | > |
| | | <!-- <el-link |
| | | <el-link |
| | | type="primary" |
| | | size="small" |
| | | style="float: right; height: 20px; margin-right: 10px" |
| | | @click="revokeAssign" |
| | | >æ¤éåé
</el-link |
| | | > --> |
| | | @click="openOutboundDialog" |
| | | >ç´æ¥åºåº</el-link |
| | | > |
| | | </el-col> |
| | | </el-row> |
| | | </el-alert> |
| | | </div> |
| | | |
| | | <!-- æ°å¢çéåºå --> |
| | | <div class="filter-area" style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px;"> |
| | | <el-form :model="filterForm" inline @submit.prevent> |
| | | <el-form-item label="ç©æç¼å·ï¼"> |
| | | <el-input |
| | | v-model="filterForm.materielCode" |
| | | placeholder="模ç³çéç©æç¼å·" |
| | | clearable |
| | | style="width: 180px" |
| | | @input="filterTable" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ç©ææ¡ç ï¼"> |
| | | <el-input |
| | | v-model="filterForm.barcode" |
| | | placeholder="模ç³çéç©ææ¡ç " |
| | | clearable |
| | | style="width: 180px" |
| | | @input="filterTable" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="æçç¼å·ï¼"> |
| | | <el-input |
| | | v-model="filterForm.palletCode" |
| | | placeholder="模ç³çéæçç¼å·" |
| | | clearable |
| | | style="width: 180px" |
| | | @input="filterTable" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="è´§ä½ç¼å·ï¼"> |
| | | <el-input |
| | | v-model="filterForm.locationCode" |
| | | placeholder="模ç³çéè´§ä½ç¼å·" |
| | | clearable |
| | | style="width: 180px" |
| | | @input="filterTable" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="filterTable">æç´¢</el-button> |
| | | <el-button @click="resetFilter">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <div class="box-table" style="margin-top: 1%"> |
| | | <el-table |
| | | ref="singleTable" |
| | |
| | | @row-click="handleRowClick" |
| | | height="500px" |
| | | @selection-change="handleSelectionChange" |
| | | > |
| | | > |
| | | <el-table-column type="selection" width="55"> </el-table-column> |
| | | <el-table-column |
| | |
| | | </el-table> |
| | | </div> |
| | | <template #footer> |
| | | <!-- <el-button type="primary" size="small" @click="outbound" |
| | | >ç´æ¥åºåº</el-button |
| | | > |
| | | <el-button type="primary" size="small" @click="lockStock" |
| | | >éå®åºå</el-button |
| | | > --> |
| | | <!-- 廿éå®åºåæé®ï¼åªä¿çå
³éæé® --> |
| | | <el-button type="danger" size="small" @click="showDetialBox = false" |
| | | >å
³é</el-button |
| | | > |
| | | </template> |
| | | </vol-box> |
| | | |
| | | <!-- åºåºç«å°éæ©å¼¹çªï¼éææ¨¡æ¿å®ç°ï¼ --> |
| | | <el-dialog |
| | | v-model="showOutboundDialog" |
| | | title="åºåºæä½ - éæ©åºåºç«å°" |
| | | width="500px" |
| | | :append-to-body="true" |
| | | > |
| | | <el-form |
| | | :model="outboundForm" |
| | | :rules="outboundRules" |
| | | ref="outboundFormRef" |
| | | label-width="100px" |
| | | style="padding: 0 20px" |
| | | > |
| | | <el-form-item label="åºåºç«å°" prop="selectedPlatform" style="margin-bottom: 24px"> |
| | | <el-select |
| | | v-model="outboundForm.selectedPlatform" |
| | | placeholder="è¯·éæ©åºåºç«å°ï¼3-12ï¼" |
| | | style="width: 100%; height: 40px" |
| | | > |
| | | <el-option |
| | | v-for="platform in platformOptions" |
| | | :key="platform.value" |
| | | :label="platform.label" |
| | | :value="platform.value" |
| | | ></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button @click="showOutboundDialog = false" style="margin-right: 8px">åæ¶</el-button> |
| | | <el-button type="primary" @click="confirmOutbound">ç¡®å®åºåº</el-button> |
| | | </template> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import VolBox from "@/components/basic/VolBox.vue"; |
| | | import { fa } from "element-plus/es/locales.mjs"; |
| | | import { ElMessage } from "element-plus"; |
| | | |
| | | export default { |
| | | components: { VolBox }, |
| | | data() { |
| | | return { |
| | | row: null, |
| | | kcname: "", |
| | | pkcx: false, |
| | | row: null, // æ¥æ¶ç¶ç»ä»¶ä¼ éç宿´æ°æ®ï¼å
嫿ç»IDéåï¼ |
| | | showDetialBox: false, |
| | | tableData: [], |
| | | originalTableData: [], // åå¨åå§æ°æ®ï¼ç¨äºçé |
| | | tableColumns: [ |
| | | { |
| | | prop: "materielCode", |
| | | title: "ç©æç¼å·", |
| | | type: "string", |
| | | width: 150, |
| | | }, |
| | | { |
| | | prop: "materielName", |
| | | title: "ç©æåç§°", |
| | | type: "string", |
| | | width: 150, |
| | | }, |
| | | { |
| | | prop: "palletCode", |
| | | title: "æçç¼å·", |
| | | type: "string", |
| | | width: 150, |
| | | }, |
| | | { |
| | | prop: "locationCode", |
| | | title: "è´§ä½ç¼å·", |
| | | type: "string", |
| | | width: 180, |
| | | }, |
| | | { |
| | | prop: "useableQuantity", |
| | | title: "å¯ç¨æ°é", |
| | | type: "string", |
| | | }, |
| | | { prop: "materielCode", title: "ç©æç¼å·", type: "string", width: 150 }, |
| | | { prop: "barcode", title: "ç©ææ¡ç ", type: "string", width: 150 }, |
| | | { prop: "palletCode", title: "æçç¼å·", type: "string", width: 150 }, |
| | | { prop: "locationCode", title: "è´§ä½ç¼å·", type: "string", width: 180 }, |
| | | { prop: "useableQuantity", title: "å¯ç¨æ°é", type: "string" }, |
| | | ], |
| | | selection: [], |
| | | selectionSum: 0, |
| | | selection: [], // éä¸çåºåæ°æ® |
| | | selectionSum: 0, // 已鿰鿻å |
| | | selectionClass: "less-style", |
| | | originalQuantity: 0, |
| | | |
| | | // çéè¡¨åæ°æ® |
| | | filterForm: { |
| | | materielCode: "", |
| | | barcode: "", |
| | | palletCode: "", |
| | | locationCode: "" |
| | | }, |
| | | |
| | | // åºåºå¼¹çªç¸å
³æ°æ® |
| | | showOutboundDialog: false, |
| | | outboundForm: { selectedPlatform: "" }, // 表åç»å®æ°æ® |
| | | outboundRules: { |
| | | selectedPlatform: [ |
| | | { required: true, message: "è¯·éæ©åºåºç«å°", trigger: "change" }, |
| | | ], |
| | | }, |
| | | platformOptions: [ |
| | | { label: "ç«å°2", value: "2-1" }, |
| | | { label: "ç«å°3", value: "3-1" }, |
| | | ], |
| | | pkcx: false, // æ°å¢ï¼é»è®¤falseï¼å¦æéè¦å¯ä»ç¶ç»ä»¶ä¼ éï¼ |
| | | }; |
| | | }, |
| | | methods: { |
| | | open(row) { |
| | | console.log(row); |
| | | this.row = row; |
| | | // æ¥æ¶ç¶ç»ä»¶ä¼ éçæ°æ®ï¼å
嫿ç»IDéååç©æä¿¡æ¯ï¼ |
| | | open(data) { |
| | | this.row = data; // dataç»æï¼{materielCode, materielName, qty, orderNo, detailIds, mainOrderId, groupRow} |
| | | this.showDetialBox = true; |
| | | this.originalQuantity = this.row.lockQuantity; |
| | | this.selectionSum = this.row.lockQuantity; |
| | | this.getData(); |
| | | if (this.selectionSum == this.row.orderQuantity) { |
| | | this.selectionClass = "equle-style"; |
| | | } else if (this.selectionSum < this.row.orderQuantity) { |
| | | this.selectionClass = "less-style"; |
| | | } else { |
| | | this.selectionClass = "more-style"; |
| | | this.getData(); // å è½½åºåæ°æ® |
| | | this.updateSelectionClass(); // åå§åå·²éæ°éæ ·å¼ |
| | | console.log("æ¥æ¶çåç»æç»IDéåï¼", this.row.detailIds); |
| | | console.log("æ¥è¯¢åºåçç©æç¼ç ï¼", this.row.materielCode); |
| | | }, |
| | | |
| | | // æå¼åºåºå¼¹çª |
| | | openOutboundDialog() { |
| | | if (this.selection.length === 0) { |
| | | return ElMessage.error("è¯·éæ©åºåæ°æ®"); |
| | | } |
| | | // æ ¡éªæç»IDéå |
| | | if (!this.row?.detailIds || this.row.detailIds.length === 0) { |
| | | return ElMessage.error("没æè·åå°åæ®æç»IDï¼æ æ³åºåº"); |
| | | } |
| | | // é置表åé¿å
æ®çå¼ |
| | | this.outboundForm.selectedPlatform = ""; |
| | | this.showOutboundDialog = true; |
| | | }, |
| | | lockStock() { |
| | | this.http |
| | | .post( |
| | | "api/OutboundOrderDetail/LockOutboundStock?id=" + this.row.id, |
| | | this.selection, |
| | | "æ°æ®å¤çä¸" |
| | | ) |
| | | .then((x) => { |
| | | if (!x.status) return this.$message.error(x.message); |
| | | this.$message.success("æä½æå"); |
| | | this.showDetialBox = false; |
| | | this.$emit("parentCall", ($vue) => { |
| | | $vue.getData(); |
| | | }); |
| | | }); |
| | | }, |
| | | outbound() { |
| | | |
| | | // æ ¸å¿ä¿®æ¹ï¼URLæ¼æ¥ä¼ éint[] orderDetailIdï¼éå¤åæ°åï¼åstationï¼è¯·æ±ä½ä¼ åºåæ°æ® |
| | | confirmOutbound() { |
| | | this.$refs.outboundFormRef.validate((valid) => { |
| | | if (!valid) return; |
| | | |
| | | // æ ¡éªéä¸åºååæç»ID |
| | | if (this.selection.length <= 0) { |
| | | return this.$message.error("请å¾é"); |
| | | return this.$message.error("请å¾éåºåæ°æ®"); |
| | | } |
| | | let url = this.pkcx |
| | | ? "api/Task/GenerateOutboundTask?orderDetailId=" |
| | | : "api/Task/GenerateOutboundTask?orderDetailId="; |
| | | if (!this.row?.detailIds || this.row.detailIds.length === 0) { |
| | | return this.$message.error("没æè·åå°åæ®æç»IDï¼æ æ³åºåº"); |
| | | } |
| | | |
| | | try { |
| | | // 1. 转æ¢IDä¸ºæ´æ°æ°ç»ï¼ç¡®ä¿å端è½è¯å«ä¸ºint[]ï¼ |
| | | const orderDetailId = this.row.detailIds.map(id => { |
| | | const num = Number(id); |
| | | if (isNaN(num) || !Number.isInteger(num)) { |
| | | throw new Error(`ID ${id} 䏿¯ææçæ´æ°`); |
| | | } |
| | | return num; |
| | | }); |
| | | |
| | | // 2. æ¼æ¥URLï¼int[] ç¨éå¤åæ°åæ ¼å¼ï¼?orderDetailId=1&orderDetailId=2&...ï¼ |
| | | let url = "api/Task/GenerateOutboundTask"; |
| | | // æ¼æ¥IDæ°ç»åæ° |
| | | const idParams = orderDetailId.map(id => `orderDetailId=${id}`).join("&"); |
| | | // æ¼æ¥ç«å°åæ° |
| | | const stationParam = `station=${encodeURIComponent(this.outboundForm.selectedPlatform)}`; |
| | | // 宿´URLï¼å¤çåæ°æ¼æ¥é»è¾ï¼ |
| | | const fullUrl = idParams |
| | | ? `${url}?${idParams}&${stationParam}` |
| | | : `${url}?${stationParam}`; |
| | | |
| | | console.log("åºåºè¯·æ±URLï¼", fullUrl); |
| | | |
| | | // 3. åé请æ±ï¼URLæ¼æ¥IDåç«å°ï¼è¯·æ±ä½ä¼ åºåæ°æ®ï¼éé
FromBodyï¼ |
| | | this.http |
| | | .post(url + this.row.id, this.selection, "æ°æ®å¤çä¸") |
| | | .post(fullUrl, this.selection, "æ°æ®å¤çä¸") |
| | | .then((x) => { |
| | | if (!x.status) return this.$message.error(x.message); |
| | | this.$message.success("æä½æå"); |
| | | this.showDetialBox = false; |
| | | this.$emit("parentCall", ($vue) => { |
| | | $vue.getData(); |
| | | $vue.getData(); // å·æ°ç¶ç»ä»¶æ°æ® |
| | | }); |
| | | }) |
| | | .catch((err) => { |
| | | console.error("åºåºå¤±è´¥ï¼", err); |
| | | this.$message.error(`åºåºå¤±è´¥ï¼${err.message || '请ç¨åéè¯'}`); |
| | | }); |
| | | } catch (err) { |
| | | this.$message.error(err.message); |
| | | } |
| | | }); |
| | | }, |
| | | getData(a) { |
| | | if (!a) this.pkcx = !this.pkcx; |
| | | let url = this.pkcx |
| | | ? "api/StockInfo/GetStockSelectViews?materielCode=" |
| | | : "api/StockInfo/GetStockSelectViews?materielCode="; |
| | | this.kcname = this.pkcx ? "ç«åºåºå" : "å¹³åºåºå"; |
| | | |
| | | // æç¬¬ä¸ä¸ªç©æç¼ç æ¥è¯¢åºåæ°æ® |
| | | getData() { |
| | | const url = "api/StockInfo/GetSelectViewDTOs?materielCode="; |
| | | // 使ç¨ç¶ç»ä»¶ä¼ éçç©æç¼ç ï¼ç¬¬ä¸ä¸ªæç»çç¼ç ï¼ |
| | | this.http |
| | | .post( |
| | | url + this.row.materielCode + "&orderId=" + this.row.orderId, |
| | | url + this.row.materielCode + "&orderNo=" + (this.row.upperOrderNo || this.row.orderNo), |
| | | null, |
| | | "æ¥è¯¢ä¸" |
| | | ) |
| | | .then((x) => { |
| | | this.tableData = x; |
| | | this.tableData = x || []; |
| | | this.originalTableData = [...this.tableData]; // ä¿ååå§æ°æ® |
| | | // å·æ°åæ¸
空ä¹åçéæ©åè®¡æ° |
| | | this.clearSelection(); |
| | | this.selectionSum = 0; |
| | | this.originalQuantity = 0; |
| | | this.updateSelectionClass(); |
| | | // å·æ°åéç½®ç鿡件 |
| | | this.resetFilter(); |
| | | }) |
| | | .catch((err) => { |
| | | console.error("åºåæ¥è¯¢å¤±è´¥ï¼", err); |
| | | ElMessage.error("åºåæ¥è¯¢å¤±è´¥ï¼è¯·ç¨åéè¯"); |
| | | this.tableData = []; |
| | | this.originalTableData = []; |
| | | }); |
| | | }, |
| | | |
| | | // æ¤éæå®åºåï¼å¦æéè¦ï¼ |
| | | revokeAssign() { |
| | | console.log(this.row); |
| | | if (!this.row?.detailIds || this.row.detailIds.length === 0) { |
| | | return ElMessage.error("没æè·åå°åæ®æç»IDï¼æ æ³æ¤é"); |
| | | } |
| | | |
| | | try { |
| | | // IDè½¬ä¸ºæ´æ°æ°ç»ï¼æ¼æ¥URL |
| | | const detailIds = this.row.detailIds.map(id => Number(id)); |
| | | const idParams = detailIds.map(id => `detailIds=${id}`).join("&"); |
| | | const url = `api/OutboundOrderDetail/RevokeLockOutboundStock?id=${this.row.mainOrderId}&${idParams}`; |
| | | |
| | | this.http |
| | | .post( |
| | | "api/OutboundOrderDetail/RevokeLockOutboundStock?id=" + this.row.id, |
| | | null, |
| | | "æ°æ®å¤çä¸" |
| | | ) |
| | | .post(url, null, "æ°æ®å¤çä¸") |
| | | .then((x) => { |
| | | if (!x.status) return this.$message.error(x.message); |
| | | this.$message.success("æä½æå"); |
| | | if (!x.status) return ElMessage.error(x.message); |
| | | ElMessage.success("æ¤éæå"); |
| | | this.showDetialBox = false; |
| | | this.$emit("parentCall", ($vue) => { |
| | | $vue.getData(); |
| | | }); |
| | | }); |
| | | } catch (err) { |
| | | this.$message.error(`æ¤é失败ï¼${err.message}`); |
| | | } |
| | | }, |
| | | |
| | | // å¤çè¡¨æ ¼éæ©ååï¼è®¡ç®å·²éæ°éï¼ |
| | | handleSelectionChange(val) { |
| | | this.selection = val; |
| | | this.selectionSum = |
| | | val.reduce( |
| | | (accumulator, currentValue) => |
| | | accumulator + currentValue["useableQuantity"], |
| | | // 计ç®å·²éæ°éï¼è½¬æ°åé¿å
åç¬¦ä¸²æ¼æ¥ï¼ |
| | | this.selectionSum = val.reduce( |
| | | (acc, curr) => acc + Number(curr.useableQuantity || 0), |
| | | 0 |
| | | ) + this.originalQuantity; |
| | | if (this.selectionSum == this.row.orderQuantity) { |
| | | this.updateSelectionClass(); |
| | | }, |
| | | |
| | | // æ´æ°å·²éæ°éæ ·å¼ï¼å¯¹æ¯åç»æ»éæ±æ°éï¼ |
| | | updateSelectionClass() { |
| | | if (!this.row) return; |
| | | if (this.selectionSum === this.row.qty) { |
| | | this.selectionClass = "equle-style"; |
| | | } else if (this.selectionSum < this.row.orderQuantity) { |
| | | } else if (this.selectionSum < this.row.qty) { |
| | | this.selectionClass = "less-style"; |
| | | } else { |
| | | this.selectionClass = "more-style"; |
| | | } |
| | | }, |
| | | |
| | | // åæ¢è¡¨æ ¼éæ© |
| | | toggleSelection(rows) { |
| | | if (rows) { |
| | | rows.forEach((row) => { |
| | | this.$refs.singleTable.toggleRowSelection(row); |
| | | }); |
| | | } else { |
| | | rows |
| | | ? rows.forEach((row) => this.$refs.singleTable.toggleRowSelection(row)) |
| | | : this.clearSelection(); |
| | | }, |
| | | |
| | | // æ¸
ç©ºéæ© |
| | | clearSelection() { |
| | | if (this.$refs.singleTable) { |
| | | this.$refs.singleTable.clearSelection(); |
| | | } |
| | | }, |
| | | clearSelection() { |
| | | this.$refs.singleTable.clearSelection(); |
| | | }, |
| | | |
| | | // è¡ç¹å»äºä»¶ |
| | | handleRowClick(row) { |
| | | this.$refs.singleTable.toggleRowSelection(row); |
| | | }, |
| | | |
| | | // 徿 æé®ç¹å»å 使¹æ³ï¼å¯æ ¹æ®éæ±æ©å±ï¼ |
| | | tableButtonClick(row, item) { |
| | | console.log("徿 æé®ç¹å»ï¼", item.title, row); |
| | | }, |
| | | |
| | | // çéè¡¨æ ¼æ°æ® |
| | | filterTable() { |
| | | if (!this.originalTableData.length) return; |
| | | |
| | | // è§£æçéæ¡ä»¶å¹¶è½¬ä¸ºå°åï¼å¿½ç¥å¤§å°åï¼ |
| | | const { materielCode, barcode, palletCode, locationCode } = this.filterForm; |
| | | const mc = materielCode.toLowerCase().trim(); |
| | | const bc = barcode.toLowerCase().trim(); |
| | | const pc = palletCode.toLowerCase().trim(); |
| | | const lc = locationCode.toLowerCase().trim(); |
| | | |
| | | // 模ç³çéé»è¾ |
| | | this.tableData = this.originalTableData.filter(item => { |
| | | // æ¯ä¸ªå段é½å空å¼å¤çåå°å转æ¢ï¼æ¯ææ¨¡ç³å¹é
|
| | | const itemMc = (item.materielCode || "").toLowerCase(); |
| | | const itemBc = (item.barcode || "").toLowerCase(); |
| | | const itemPc = (item.palletCode || "").toLowerCase(); |
| | | const itemLc = (item.locationCode || "").toLowerCase(); |
| | | |
| | | return ( |
| | | itemMc.includes(mc) && |
| | | itemBc.includes(bc) && |
| | | itemPc.includes(pc) && |
| | | itemLc.includes(lc) |
| | | ); |
| | | }); |
| | | |
| | | // çé忏
ç©ºéæ©ç¶æ |
| | | this.clearSelection(); |
| | | this.selectionSum = 0; |
| | | this.updateSelectionClass(); |
| | | }, |
| | | |
| | | // éç½®ç鿡件 |
| | | resetFilter() { |
| | | this.filterForm = { |
| | | materielCode: "", |
| | | barcode: "", |
| | | palletCode: "", |
| | | locationCode: "" |
| | | }; |
| | | // æ¢å¤åå§æ°æ® |
| | | this.tableData = [...this.originalTableData]; |
| | | // éç½®éæ©ç¶æ |
| | | this.clearSelection(); |
| | | this.selectionSum = 0; |
| | | this.updateSelectionClass(); |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .less-style { |
| | | color: black; |
| | |
| | | |
| | | .more-style { |
| | | color: red; |
| | | } |
| | | |
| | | /* çéåºåæ ·å¼ä¼å */ |
| | | .filter-area :deep(.el-form-item) { |
| | | margin-bottom: 0; |
| | | margin-right: 10px; |
| | | } |
| | | </style> |
| | | |
| | |
| | | |
| | | .box-table .el-table tbody tr:hover > td { |
| | | background-color: #d8e0d4 !important; |
| | | /* color: #ffffff; */ |
| | | } |
| | | |
| | | .box-table .el-table tbody tr.current-row > td { |
| | | background-color: #f0f9eb !important; |
| | | /* color: #ffffff; */ |
| | | } |
| | | |
| | | .el-table .success-row { |