From 059dd10838d3055cac8853087305df41926fe5b1 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期五, 22 三月 2024 10:41:05 +0800 Subject: [PATCH] 概述下调拨、出入库列表页改为上下结构 --- src/assets/style/reset-element.scss | 14 +- src/views/overview/OverviewListView.vue | 251 +++++++++++++++++++++++++++++++++++++++++++------ src/components/makepager/TableCommonView.vue | 32 +++--- 3 files changed, 242 insertions(+), 55 deletions(-) diff --git a/src/assets/style/reset-element.scss b/src/assets/style/reset-element.scss index 61d1fe2..35ceb8a 100644 --- a/src/assets/style/reset-element.scss +++ b/src/assets/style/reset-element.scss @@ -43,8 +43,8 @@ // background:#2c60c5; } -.color_F56C6C{ - color:#F56C6C; +.color_F56C6C { + color: #f56c6c; } // .el-menu-item { // margin: 8px; @@ -59,8 +59,8 @@ // background-position: center; // width: 160px !important; // } -.line_height_30px{ - line-height:30px; +.line_height_30px { + line-height: 30px; } .el-button--primary { @@ -83,4 +83,8 @@ color: #fff; background-color: #2a78fb; border-color: #2a78fb; -} \ No newline at end of file +} +// 棰滆壊 +.el-table .onSelect { + background: #ebf2ff; +} diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue index 56dc900..9fc74a7 100644 --- a/src/components/makepager/TableCommonView.vue +++ b/src/components/makepager/TableCommonView.vue @@ -1,6 +1,6 @@ <!-- eslint-disable vue/no-use-v-if-with-v-for --> <template> - <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading"> + <div class="table-view" v-loading="loading"> <el-table ref="table" border @@ -43,10 +43,10 @@ <span class="Badge" :class="{ - greenSlot: scope.row.status == '4'||scope.row.status == '瀹屾垚', + greenSlot: scope.row.status == '4' || scope.row.status == '瀹屾垚', redSlot: scope.row.status == '5', - blueSlot: scope.row.status == '3'||scope.row.status == '灏辩华', - graySlot: scope.row.status == '1', + blueSlot: scope.row.status == '3' || scope.row.status == '灏辩华', + graySlot: scope.row.status == '1' }" >{{ item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop] @@ -116,7 +116,7 @@ highlight: false, tableColumn: [ // table琛ㄥ崟 - { label: "", prop: "", min: 200, tooltip: true,textAlign:"center"} + { label: "", prop: "", min: 200, tooltip: true, textAlign: "center" } ] } }, @@ -239,11 +239,11 @@ if (!isNaN(value)) { return prev + curr } else { - return prev + return prev } }, 0) - let unitIndex = this.tableList.tableColumn.findIndex(obj => obj.label === column.label); - sums[index]=this.tableList.tableColumn[unitIndex].unit+sums[index] + let unitIndex = this.tableList.tableColumn.findIndex((obj) => obj.label === column.label) + sums[index] = this.tableList.tableColumn[unitIndex].unit + sums[index] } else { sums[index] = "" } @@ -348,10 +348,10 @@ border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: auto; - .exceed_width{ - width: 100%; - white-space: nowrap; - overflow: hidden; + .exceed_width { + width: 100%; + white-space: nowrap; + overflow: hidden; text-overflow: ellipsis; } } @@ -383,13 +383,13 @@ height: 35px; text-align: center; } - .el-table__body-wrapper{ + .el-table__body-wrapper { height: unset !important; } - .el-table__cell.is-left{ + .el-table__cell.is-left { text-align: left !important; } - .el-table__cell.is-right{ + .el-table__cell.is-right { text-align: right !important; } } @@ -402,7 +402,7 @@ background: rgba(0, 0, 0, 0); z-index: 10; } -.el-table__cell{ +.el-table__cell { text-align: unset !important; } </style> diff --git a/src/views/overview/OverviewListView.vue b/src/views/overview/OverviewListView.vue index 974ba53..36c3d35 100644 --- a/src/views/overview/OverviewListView.vue +++ b/src/views/overview/OverviewListView.vue @@ -14,27 +14,61 @@ @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 && scope.row.status !== 5" - @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> <!-- 鏂板缓/缂栬緫 --> @@ -61,6 +95,15 @@ 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: "amount" } + ] return { tableList: {}, showcol: ["浠撳簱浣嶇疆", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鐘舵��"], @@ -83,7 +126,12 @@ toLabel: "", addName: "", searchTaskMap: [], - numberLabel: "鍗曞彿" + numberLabel: "鍗曞彿", + TabsIndex: "0", + productTableList: {}, + showBottomCol: ["浜у搧缂栧彿", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "浜у搧鍨嬪彿", "璁¢噺鍗曚綅", "鏁伴噺"], + tableBottomColumn: productColumn, + selectRow: {} } }, created() { @@ -140,6 +188,7 @@ } } this.tableList.allcol = allcol + this.setBottomList() }, setTableColumn(showcol) { let tableColumn = [ @@ -253,8 +302,29 @@ }) 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) => { + return { + ...item, + productName: item.product.name, + unit: item.product.unit + } + }) + this.productTableList.tableInfomation = list + }, + // top 琛岀偣鍑� + tableRowClick(row) { + this.selectRow = row + this.bottomProductData(this.selectRow) }, // 鎼滅储 getList(val) { @@ -264,26 +334,26 @@ this.getData() }, // 鏌ョ湅 缂栬緫 - tableRowClick(row, val) { + viewEditClick(row, val) { this.editConfig.visible = true this.editConfig.title = val 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.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.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.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.locationID = row.location.jointName + row.locationId = row.location.value + // row.tolocationId=row.tolocation.value this.editConfig.infomation = { ...row } }, @@ -306,6 +376,47 @@ 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) + // } } } } @@ -313,6 +424,69 @@ <!-- 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 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); + } + } + .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; @@ -326,4 +500,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