| | |
| | | @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> |
| | | <!-- 新建/编辑 --> |
| | |
| | | toLabel: "", |
| | | addName: "", |
| | | searchTaskMap: [], |
| | | numberLabel: "单号" |
| | | numberLabel: "单号", |
| | | TabsIndex: "0", |
| | | productTableList: {}, |
| | | showBottomCol: ["产品编号", "产品名称", "产品规格", "产品型号", "计量单位", "调出位置", "调入位置", "数量"], |
| | | tableBottomColumn: [], |
| | | selectRow: {}, |
| | | productColumn: [ |
| | | { label: "产品编号", prop: "id", default: true }, |
| | | { label: "产品名称", prop: "productName" }, |
| | | { label: "产品规格", prop: "specs" }, |
| | | { label: "产品型号", prop: "model" }, |
| | | { label: "计量单位", prop: "unit" }, |
| | | { label: "数量", prop: "amount" } |
| | | ], |
| | | 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" } |
| | | ] |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | } |
| | | } |
| | | this.tableList.allcol = allcol |
| | | this.tableBottomColumn = this.workType == 3 ? this.allotProductColumn : this.productColumn |
| | | this.setBottomList() |
| | | }, |
| | | setTableColumn(showcol) { |
| | | let tableColumn = [ |
| | |
| | | }) |
| | | 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, |
| | | location: arr.location.name, |
| | | toLocation: arr.toLocation.name |
| | | } |
| | | }) |
| | | this.productTableList.tableInfomation = list |
| | | }, |
| | | // top 行点击 |
| | | tableRowClick(row) { |
| | | this.selectRow = row |
| | | this.bottomProductData(this.selectRow) |
| | | }, |
| | | // 搜索 |
| | | getList(val) { |
| | |
| | | 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 } |
| | | }, |
| | |
| | | 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) |
| | | // } |
| | | } |
| | | } |
| | | } |
| | |
| | | |
| | | <!-- 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; |
| | |
| | | margin-top: -60px; |
| | | margin-left: -5px; |
| | | } |
| | | ::v-deep { |
| | | .el-table__header-wrapper { |
| | | position: sticky; |
| | | width: 100%; |
| | | // left:0px; |
| | | top: 0px; |
| | | z-index: 2000; |
| | | } |
| | | } |
| | | </style> |