From 03cfba0f636b42417070fc8caef44bcdd792a085 Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期二, 07 五月 2024 17:34:37 +0800 Subject: [PATCH] 概述 出库模块 编辑的时候循环处理对应产品调用接口获取在库数量的逻辑处理 --- src/views/overview/OverviewListView.vue | 421 +++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 366 insertions(+), 55 deletions(-) diff --git a/src/views/overview/OverviewListView.vue b/src/views/overview/OverviewListView.vue index 5ba0d19..48dc227 100644 --- a/src/views/overview/OverviewListView.vue +++ b/src/views/overview/OverviewListView.vue @@ -8,39 +8,75 @@ :add-title="'鏂板缓'" :placeholder="'璇疯緭鍏ュ崟鍙�/鏉ユ簮鍗曟嵁'" :amount-view="false" + :search-task-map="searchTaskMap" @addCommonClick="addBtnClick" @searchClick="getList" + @delSelectClick="delSelectClick" /> </div> - <div class="list-view"> - <div class="table"> - <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol"> - <template slot="tableButton"> - <el-table-column label="鎿嶄綔" width="100"> - <template slot-scope="scope"> - <el-button @click="tableRowClick(scope.row, '鏌ョ湅')" type="text" size="small">鏌ョ湅</el-button> - <el-button - v-if="scope.row.status !== 4" - @click="tableRowClick(scope.row, '缂栬緫')" - type="text" - size="small" - >缂栬緫</el-button - > - </template> - </el-table-column> - </template> - </TableCommonView> + <div class="body"> + <!-- <div class="body-card"> --> + <div class="content-top"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + :table-list="tableList" + @selTableCol="selTableCol" + @tableRowClick="tableRowClick" + :selectClassRow="selectRow" + > + <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="100"> + <template slot-scope="scope"> + <el-button @click="viewEditClick(scope.row, '鏌ョ湅')" type="text" size="small">鏌ョ湅</el-button> + <el-button + v-if="scope.row.status !== 4 && scope.row.status !== 5" + @click="viewEditClick(scope.row, '缂栬緫')" + type="text" + size="small" + >缂栬緫</el-button + > + </template> + </el-table-column> + </template> + </TableCommonView> + <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> + </div> </div> - <div class="btn-pager"> - <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + <div class="content-bottom"> + <div class="bottom-tabs"> + <div + class="tab-pane" + @click="getTab(0)" + :style="{ + background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8', + color: TabsIndex == 0 ? '#fff' : '#666' + }" + > + 浜у搧淇℃伅 + </div> + </div> + <div class="list-view"> + <TableCommonView :table-list="productTableList" @selTableCol="selBottomTableCol"> + <!-- <template slot="tableButton"> + <el-table-column label="鎿嶄綔" width="160" fixed="right"> + <template slot-scope="scope"> + <el-button @click="viewClick(scope.row)" type="text" size="small">鏌ョ湅</el-button> + </template> + </el-table-column> + </template> --> + </TableCommonView> + </div> </div> </div> <!-- 鏂板缓/缂栬緫 --> <AddOverviewDialog v-if="editConfig.visible" - :work-type="workType" + :workType="workType" :edit-common-config="editConfig" - :add-name="this.$route.params.name" + :add-name="addName" :display-edit="displayEdit" /> </div> @@ -61,7 +97,7 @@ data() { return { tableList: {}, - showcol: ["浠撳簱浣嶇疆", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鐘舵��"], + showcol: ["浠撳簱浣嶇疆", "鏉ユ簮","鏉ユ簮鍗曟嵁","璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "閿�鍞槑缁嗗崟", "鐘舵��" ,"涓荤","浼氳","淇濈鍛�",], searchOptions: [], commonDetail: { visible: false, @@ -73,16 +109,53 @@ title: "鏂板缓", infomation: {} }, - workType: this.$route.params.workType, + workType: this.$route.query.workType, keyword: "", params: {}, displayEdit: false, formLabel: "", - toLabel: "" + toLabel: "", + addName: "", + searchTaskMap: [], + numberLabel: "鍗曞彿", + TabsIndex: "0", + productTableList: {}, + showBottomCol: ["浜у搧缂栧彿", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "浜у搧鍨嬪彿", "璁¢噺鍗曚綅", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鏁伴噺","涓荤","浼氳","淇濈鍛�",'杈呭姪鏁伴噺','杈呭姪鍗曚綅','姣涢噸','鎬绘瘺閲�','鍑�閲�','鎬诲噣閲�'], + tableBottomColumn: [], + selectRow: {}, + productColumn: [ + { label: "浜у搧缂栧彿", prop: "id", default: true }, + { label: "浜у搧鍚嶇О", prop: "productName" }, + { label: "浜у搧瑙勬牸", prop: "specs" }, + { label: "浜у搧鍨嬪彿", prop: "model" }, + { label: "鏁伴噺", prop: "amount" }, + { label: "璁¢噺鍗曚綅", prop: "unit" }, + { label: "杈呭姪鏁伴噺", prop: "adjunctAmount" }, + { label: "杈呭姪鍗曚綅", prop: "adjunctUnit" }, + { label: "姣涢噸", prop: "grossWeight" }, + { label: "鎬绘瘺閲�", prop: "totalGrossWeight" }, + { label: "鍑�閲�", prop: "netWeight" }, + { label: "鎬诲噣閲�", prop: "totalNetWeight" } + ], + allotProductColumn: [ + { label: "浜у搧缂栧彿", prop: "id", default: true }, + { label: "浜у搧鍚嶇О", prop: "productName" }, + { label: "浜у搧瑙勬牸", prop: "specs" }, + { label: "浜у搧鍨嬪彿", prop: "model" }, + { label: "璁¢噺鍗曚綅", prop: "unit" }, + { label: "璋冨嚭浣嶇疆", prop: "location" }, + { label: "璋冨叆浣嶇疆", prop: "toLocation" }, + { label: "鏁伴噺", prop: "amount" }, + { label: "杈呭姪鏁伴噺", prop: "adjunctAmount" }, + { label: "杈呭姪鍗曚綅", prop: "adjunctUnit" }, + { label: "姣涢噸", prop: "grossWeight" }, + { label: "鎬绘瘺閲�", prop: "totalGrossWeight" }, + { label: "鍑�閲�", prop: "netWeight" }, + { label: "鎬诲噣閲�", prop: "totalNetWeight" } + ] } }, created() { - console.log(this.workType) this.setFormToLabel() this.setTable() var paramsData = sessionStorage.getItem("paramsData") @@ -90,10 +163,13 @@ if (paramsData) { params = JSON.parse(sessionStorage.getItem("paramsData")) } else { - params = this.$route.params + params = this.$route.query + params.id=Number(params.id) sessionStorage.setItem("paramsData", JSON.stringify(params)) } this.params = params + this.searchTaskMap = + this.params.status > 0 ? [{ id: this.params.id, title: this.getStatus(this.params.status) }] : [] this.getData() // console.log(this.$route.params.workType) }, @@ -106,12 +182,16 @@ if (this.workType === 1) { this.formLabel = "渚涘簲鍟嗕綅缃�" this.toLabel = "浠撳簱浣嶇疆" + this.numberLabel = "鍏ュ簱鍗曞彿" } else if (this.workType === 2) { this.formLabel = "浠撳簱浣嶇疆" this.toLabel = "瀹㈡埛浣嶇疆" + this.numberLabel = "鍑哄簱鍗曞彿" } else { + this.showcol=["浠撳簱浣嶇疆", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�","鏃ユ湡", "閿�鍞槑缁嗗崟", "鐘舵��","涓荤","浼氳","淇濈鍛�",], this.formLabel = "璋冨嚭浣嶇疆" this.toLabel = "璋冨叆浣嶇疆" + this.numberLabel = "璋冩嫧鍗曞彿" } }, setTable() { @@ -131,14 +211,31 @@ } } this.tableList.allcol = allcol + this.tableBottomColumn = this.workType == 3 ? this.allotProductColumn : this.productColumn + this.setBottomList() }, setTableColumn(showcol) { let tableColumn = [ { - label: "鍗曞彿", + label: this.numberLabel, prop: "number", isShowColumn: true, default: true + }, + { + label: "鏉ユ簮", + prop: "operationSource", + isShowColumn: showcol.includes("鏉ユ簮"), + default: false, + // status: true, + isCallMethod: true, + getCallMethod: this.getSourceStatus + }, + { + label: "鏉ユ簮鍗曟嵁", + prop: "sourceNumber", + isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"), + default: false }, { label: this.formLabel, @@ -172,12 +269,6 @@ date: true }, // { - // label: "浜у搧鍙敤鎬�", - // prop: "status", - // isShowColumn: showcol.includes("浜у搧鍙敤鎬�"), - // default: false - // }, - // { // label: "鎴鏃ユ湡", // prop: "faultTime", // isShowColumn: showcol.includes("鎴鏃ユ湡"), @@ -190,17 +281,11 @@ // default: false // }, { - label: "鏉ユ簮鍗曟嵁", - prop: "sourceNumber", - isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"), + label: "閿�鍞槑缁嗗崟", + prop: "salesDetailsNumber", + isShowColumn: showcol.includes("閿�鍞槑缁嗗崟"), default: false }, - // { - // label: "娆犲崟", - // prop: "status", - // isShowColumn: showcol.includes("娆犲崟"), - // default: false - // }, { label: "鍏ュ簱绫诲瀷", prop: "operationTypeName", @@ -216,7 +301,25 @@ status: true, isCallMethod: true, getCallMethod: this.getStatus - } + }, + { + label: "涓荤", + prop: "manager", + isShowColumn: showcol.includes("涓荤"), + default: false + }, + { + label: "浼氳", + prop: "accountant", + isShowColumn: showcol.includes("浼氳"), + default: false + }, + { + label: "淇濈鍛�", + prop: "custodian", + isShowColumn: showcol.includes("淇濈鍛�"), + default: false + }, ] return tableColumn }, @@ -228,7 +331,7 @@ async getData() { await getOperation({ number: this.keyword, - operationTypeId: this.params.id, + operationTypeId: this.$route.query.id ? Number(this.$route.query.id) : this.params.id, page: this.pagerOptions.currPage, pageSize: this.pagerOptions.pageSize, status: this.params.status @@ -238,14 +341,70 @@ const list = res.data.map((item) => { return { ...item, - from: item.fromLocation.name, - to: item.toLocation.name + from: item.location.jointName, + to: item.location.jointName } }) this.tableList.tableInfomation = list || [] this.pagerOptions.totalCount = res.total + if (res.total > 0) { + this.selectRow = this.tableList.tableInfomation.length > 0 ? this.tableList.tableInfomation[0] : {} + this.tableRowClick(this.selectRow) + this.bottomProductData(this.selectRow) + } } }) + }, + // bottom浜у搧淇℃伅鏁版嵁澶勭悊 + bottomProductData(arr) { + const list = arr.details.map((item) => { + // let adjunctUnit='' + // let adjunctAmount='' + // if(item.product.moreUnit&&item.product.moreUnitList){ + // let moreUnitList=item.product.moreUnitList + // if(moreUnitList.length>0){ + // let isValue=false + // for(let j in moreUnitList){ + // if(moreUnitList[j].floating){ + // isValue=true; + // adjunctUnit=moreUnitList[j].unit + // adjunctAmount=moreUnitList[j].amount + // break; + // } + // } + // if(!isValue){ + // for(let j in moreUnitList){ + // if(moreUnitList[j].unit){ + // adjunctUnit=moreUnitList[j].unit + // adjunctAmount=moreUnitList[j].amount + // break; + // } + // } + // } + // } + // } + return { + ...item, + productName: item.product.name, + unit: item.product.unit, + model:item.product.model, + specs:item.product.specs, + location: arr.location.name, + toLocation: arr.toLocation.name, + adjunctUnit:item.auxiliaryUnit, + adjunctAmount:item.auxiliaryAmount, + grossWeight:item.product.grossWeight==0?'':item.product.grossWeight, + totalGrossWeight:item.totalGrossWeight==0?'':item.totalGrossWeight, + netWeight:item.product.netWeight==0?'':item.product.netWeight, + totalNetWeight:item.totalNetWeight==0?'':item.totalNetWeight, + } + }) + this.productTableList.tableInfomation = list + }, + // top 琛岀偣鍑� + tableRowClick(row) { + this.selectRow = row + this.bottomProductData(this.selectRow) }, // 鎼滅储 getList(val) { @@ -255,24 +414,104 @@ this.getData() }, // 鏌ョ湅 缂栬緫 - tableRowClick(row, val) { - console.log(row) + viewEditClick(row, val) { this.editConfig.visible = true this.editConfig.title = val - this.editConfig.operationTypeId = this.$route.params.id + this.editConfig.operationTypeId = this.params.id + this.editConfig.code = this.params.code + row.details.map((item) => { + item.fromLocationId = item.fromLocation.jointName + item.toLocationId = item.toLocation.jointName + }) + row.location = { + value: row.location.id || row.location.value, + label: row.location.jointName || row.location.label + } + row.toLocation = { + value: row.toLocation.id || row.toLocation.value, + label: row.toLocation.jointName || row.toLocation.label + } + row.locationID = row.location.jointName + row.locationId = row.location.value + row.managerObj={ + label:row.manager, + value:row.managerId + } + row.accountantObj={ + label:row.accountant, + value:row.accountantId + } + row.custodianObj={ + label:row.custodian, + value:row.custodianId + } + // row.tolocationId=row.tolocation.value this.editConfig.infomation = { ...row } }, // 鏂板缓 addBtnClick() { this.editConfig.title = "鏂板缓" - this.editConfig.operationTypeId = this.$route.params.id - this.editConfig.code=this.$route.params.code - this.editConfig.infomation = {} + this.addName = this.params.name + this.editConfig.operationTypeId = this.params.id + this.editConfig.code = this.params.code + this.editConfig.infomation = { + // location:{jointName:""} + } this.editConfig.visible = true }, // 鐘舵�� getStatus(val) { - return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" : "瀹屾垚" + return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" : val === 4 ? "瀹屾垚" : val === 5 ? "鍙栨秷" : "" + }, + // 鏉ユ簮 + getSourceStatus(val){ + return val===0 ? '--':val === 1 ? "閲囪喘鍏ュ簱" : val === 2 ? "鐢熶骇鍏ュ簱" : val === 3 ? "濮斿鍏ュ簱" : val === 4 ? "鐢熶骇棰嗘枡" : val=== 5 ? "濮斿棰嗘枡": val === 6?"閿�鍞彂璐�": "--" + }, + // 鍒犻櫎鎼滅储鐘舵�� + delSelectClick() { + this.params.status = 0 + this.getData() + }, + // bottom 浜у搧淇℃伅 + // bom 鍒楄〃 + setBottomList() { + this.productTableList = { + selectIndex: true, + tableInfomation: [], + allcol: [], + showcol: this.showBottomCol, + tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn) + } + this.setTableList(this.productTableList) + }, + setTableList(tableList) { + tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label) + // this.searchOptions = [] + // for (let i = 0; i < tableList.tableColumn.length; i++) { + // const label = tableList.tableColumn[i].label + // const value = tableList.tableColumn[i].prop + // this.searchOptions.push({ value: value, label: label }) + // } + }, + setColumnVisible(showCol, tableColumn) { + return tableColumn.map((ele) => { + return { + ...ele, + isShowColumn: showCol.includes(ele.label) + } + }) + }, + selBottomTableCol(val) { + this.showBottomCol = val + this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn) + }, + getTab(tab) { + this.TabsIndex = tab + // if (this.TabsIndex == 0) { + // // 浜у搧淇℃伅鍒楄〃 + // this.setBottomList() + // this.getProductInventoryInfo(this.selectRow) + // } } } } @@ -280,9 +519,72 @@ <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped> +.rightContent { + height: 100%; + overflow: hidden; + .body { + box-sizing: border-box; + padding: 10px 0px; + border-radius: 12px; + height: calc(100% - 70px); + .content-top { + background-color: #fff; + border-radius: 12px; + min-height: 70px; + height: 48%; + position: relative; + .list-view { + height: calc(100% - 50px); + } + } + .content-bottom { + .bottom-tabs { + height: 40px; + line-height: 40px; + background: #e6ecf2; + display: flex; + .tab-pane { + width: 100px; + margin-right: 20px; + font-size: 14px !important; + text-align: center; + cursor: pointer; + background: #2a78fb; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + } + } + .lable-view { + background: #e6ecf2; + height: 40px; + line-height: 40px; + .name { + border-left: 4px solid #2a78fb; + padding-left: 10px; + } + } + background-color: #fff; + border-radius: 12px; + min-height: 70px; + height: calc(52% - 60px); + margin-top: 10px; + // padding: 10px 20px; + .list-view { + height: calc(100% - 10px); + } + } + .btn-pager { + display: flex; + margin-top: 0px; + .page { + margin-left: auto; + } + } + } +} .label-fixed-element { - background: #e6ecf2; position: fixed; + background:#f8f8f9; font-size: 14px; width: calc(100% - 530px); height: 45px; @@ -293,4 +595,13 @@ margin-top: -60px; margin-left: -5px; } +::v-deep { + .el-table__header-wrapper { + position: sticky; + width: 100%; + // left:0px; + top: 0px; + z-index: 2000; + } +} </style> -- Gitblit v1.8.0