From 05b72b58002a8733b8b31825ea5edabe7e279283 Mon Sep 17 00:00:00 2001 From: zuozhengqing <a13193816592@163.com> Date: 星期五, 22 三月 2024 18:56:14 +0800 Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/WMS --- src/views/operate/allot/index.vue | 365 ++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 280 insertions(+), 85 deletions(-) diff --git a/src/views/operate/allot/index.vue b/src/views/operate/allot/index.vue index c846757..5704c39 100644 --- a/src/views/operate/allot/index.vue +++ b/src/views/operate/allot/index.vue @@ -9,27 +9,72 @@ @searchClick="getList" /> </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="content-top"> + <div class="list-view"> + <TableCommonView + ref="tableListRef" + :table-list="tableList" + @selTableCol="selTableCol" + @tableRowClick="topTableRowClick" + :selectClassRow="selectRow" + > + <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="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> <!-- 鏂板缓/缂栬緫 --> @@ -43,10 +88,10 @@ </template> <script> -import pageMixin from "@/components/makepager/pager/mixin/pageMixin" -import { getAllList } from "@/api/overview/overview" +import pageMixin from "@/components/makepager/pager/mixin/pageMixin"; +import { getAllList } from "@/api/overview/overview"; // import DetailProduct from "@/views/productManage/product/DetailProduct" -import AddOverviewDialog from "@/views/overview/AddOverviewDialog" +import AddOverviewDialog from "@/views/overview/AddOverviewDialog"; export default { name: "AllotView", @@ -55,21 +100,45 @@ mixins: [pageMixin], computed: {}, data() { + // 浜у搧淇℃伅 + const productColumn = [ + { 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" } + ] return { tableList: {}, - showcol: ["璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鍏徃", "鐘舵��"], + showcol: [ + "璋冨嚭浣嶇疆", + "璋冨叆浣嶇疆", + "鑱旂郴浜�", + "鏃ユ湡", + "鏉ユ簮鍗曟嵁", + "鍏徃", + "鐘舵��", + ], searchOptions: [], editConfig: { visible: false, title: "鏂板缓", - infomation: {} + infomation: {}, }, - keyword: "" - } + keyword: "", + TabsIndex: "0", + productTableList: {}, + showBottomCol: ["浜у搧缂栧彿", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "浜у搧鍨嬪彿", "璁¢噺鍗曚綅","璋冨嚭浣嶇疆","璋冨叆浣嶇疆", "鏁伴噺"], + tableBottomColumn: productColumn, + selectRow: {} + }; }, created() { - this.setTable() - this.getData() + this.setTable(); + this.getData(); }, methods: { setTable() { @@ -79,16 +148,17 @@ selectIndex: true, showcol: this.showcol, allcol: [], - tableColumn: this.setTableColumn(this.showcol) - } - let allcol = [] + tableColumn: this.setTableColumn(this.showcol), + }; + let allcol = []; for (let i = 0; i < this.tableList.tableColumn.length; i++) { if (!this.tableList.tableColumn[i].default) { - const label = this.tableList.tableColumn[i].label - allcol.push(label) + const label = this.tableList.tableColumn[i].label; + allcol.push(label); } } - this.tableList.allcol = allcol + this.tableList.allcol = allcol; + this.setBottomList() }, setTableColumn(showcol) { let tableColumn = [ @@ -96,38 +166,38 @@ label: "鍗曞彿", prop: "number", isShowColumn: true, - default: true + default: true, }, { label: "璋冨嚭浣嶇疆", prop: "from", isShowColumn: showcol.includes("璋冨嚭浣嶇疆"), - default: false + default: false, }, { label: "璋冨叆浣嶇疆", prop: "to", isShowColumn: showcol.includes("璋冨叆浣嶇疆"), - default: false + default: false, }, { label: "鑱旂郴浜�", prop: "companyName", isShowColumn: showcol.includes("鑱旂郴浜�"), - default: false + default: false, }, { label: "璐熻矗浜�", prop: "contacterName", isShowColumn: showcol.includes("璐熻矗浜�"), - default: false + default: false, }, { label: "鏃ユ湡", prop: "operationDate", isShowColumn: showcol.includes("鏃ユ湡"), default: false, - date: true + date: true, }, // { // label: "浜у搧鍙敤鎬�", @@ -152,7 +222,7 @@ label: "鏉ユ簮鍗曟嵁", prop: "sourceNumber", isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"), - default: false + default: false, }, // { // label: "娆犲崟", @@ -194,7 +264,7 @@ label: "鍏ュ簱绫诲瀷", prop: "operationTypeName", isShowColumn: showcol.includes("鎿嶄綔绫诲瀷"), - default: false + default: false, }, // { // label: "鍏徃", @@ -210,75 +280,200 @@ default: false, status: true, isCallMethod: true, - getCallMethod: this.getStatus - } - ] - return tableColumn + getCallMethod: this.getStatus, + }, + ]; + return tableColumn; }, selTableCol(val) { - this.showcol = val - this.tableList.tableColumn = this.setTableColumn(val) + this.showcol = val; + this.tableList.tableColumn = this.setTableColumn(val); }, // 璇锋眰鏁版嵁 async getData() { await getAllList({ number: this.keyword, page: this.pagerOptions.currPage, - pageSize: this.pagerOptions.pageSize + pageSize: this.pagerOptions.pageSize, }).then((res) => { if (res.code === 200) { const list = res.data.map((item) => { return { ...item, from: item.location.jointName, - to: item.toLocation.name - } - }) - this.tableList.tableInfomation = list || [] - this.pagerOptions.totalCount = res.total + to: item.toLocation.name, + }; + }); + 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.topTableRowClick(this.selectRow) + this.bottomProductData(this.selectRow) + } } - }) + }); }, // 鎼滅储 getList(val) { - console.log(val) - this.keyword = val - this.pagerOptions.currPage = 1 - this.getData() + console.log(val); + this.keyword = val; + this.pagerOptions.currPage = 1; + this.getData(); }, // 鏌ョ湅 缂栬緫 tableRowClick(row, val) { - console.log(row,"鏌ョ湅") - this.editConfig.visible = true - this.editConfig.title = val - 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 - this.editConfig.infomation = { ...row } + console.log(row, "鏌ョ湅"); + this.editConfig.visible = true; + this.editConfig.title = val; + 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; + this.editConfig.infomation = { ...row }; }, // 鏂板缓 addBtnClick() { - this.editConfig.visible = true - this.editConfig.title = "鏂板缓" + this.editConfig.visible = true; + this.editConfig.title = "鏂板缓"; }, // 鐘舵�� getStatus(val) { - return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" :val===4? "瀹屾垚": "鍙栨秷" - } - } -} + return val === 1 + ? "鑽夌" + : val === 3 + ? "灏辩华" + : val === 4 + ? "瀹屾垚" + : "鍙栨秷"; + }, + // top 琛岀偣鍑� + topTableRowClick(row) { + this.selectRow = row + this.bottomProductData(this.selectRow) + }, + // 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) + } + }) + }, + getTab(tab) { + this.TabsIndex = tab + }, + selBottomTableCol(val) { + this.showBottomCol = val + this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn) + }, + // bottom浜у搧淇℃伅鏁版嵁澶勭悊 + bottomProductData(arr) { + const list = arr.details.map((item) => { + return { + ...item, + productName: item.product.name, + unit: item.product.unit, + location:arr.location.name, + toLocation:arr.toLocation.name, + } + }) + this.productTableList.tableInfomation = list + }, + }, +}; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.body { + box-sizing: border-box; + padding: 10px 20px; + 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); + } + } + .btn-pager { + display: flex; + margin-top: 0px; + .page { + margin-left: auto; + } + } + .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); + } + } +} +</style> -- Gitblit v1.8.0