| | |
| | | </div> |
| | | <p style="margin-top: 30px">类别</p> |
| | | <el-checkbox-group v-model="checkList" @change="checkListHandler"> |
| | | <el-checkbox |
| | | v-for="item in categoryList" |
| | | :key="item.id" |
| | | :label="item.id" |
| | | >{{ item.name }}</el-checkbox |
| | | > |
| | | <el-checkbox v-for="item in categoryList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox> |
| | | </el-checkbox-group> |
| | | </div> |
| | | <div class="con_right"> |
| | | <div class="list-view"> |
| | | <div class="list-view"> |
| | | <div class="table"> |
| | | <TableCommonView |
| | | ref="tableListRef" |
| | | :table-list="tableList" |
| | |
| | | <span>补货</span> |
| | | </span> |
| | | <template> |
| | | <span |
| | | @click="handleLocation(scope)" |
| | | class="margin_left_5px" |
| | | > |
| | | <span @click="handleLocation(scope)" class="margin_left_5px"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>位置</span> |
| | | </span> |
| | | <span |
| | | @click="handleForecast(scope)" |
| | | class="margin_left_5px" |
| | | > |
| | | <span @click="handleForecast(scope)" class="margin_left_5px"> |
| | | <i class="el-icon-s-data"></i> |
| | | <span>预测</span> |
| | | </span> |
| | |
| | | </el-table-column> |
| | | </template> |
| | | </TableCommonView> |
| | | <div class="btn-pager"> |
| | | <PagerView |
| | | class="page" |
| | | :pager-options="pagerOptions" |
| | | :page-size="pageSizes" |
| | | v-on="pagerEvents" |
| | | /> |
| | | </div> |
| | | </div> |
| | | <div class="btn-pager"> |
| | | <PagerView class="page" :pager-options="pagerOptions" :page-size="pageSizes" v-on="pagerEvents" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 编辑 dialog--> |
| | | <AddOverviewDialog |
| | | v-if="editConfig.visible" |
| | | :edit-common-config="editConfig" |
| | | :add-name="this.$route.params.name" |
| | | /> |
| | | <AddOverviewDialog v-if="editConfig.visible" :edit-common-config="editConfig" :add-name="this.$route.params.name" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin"; |
| | | import AddOverviewDialog from "@/views/overview/AddOverviewDialog"; |
| | | import { |
| | | getInventoryData, |
| | | getProductCategoryList, |
| | | getWarehouseList, |
| | | } from "@/api/reportForm/inventoryRwport"; |
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin" |
| | | import AddOverviewDialog from "@/views/overview/AddOverviewDialog" |
| | | import { getInventoryData, getProductCategoryList, getWarehouseList } from "@/api/reportForm/inventoryRwport" |
| | | |
| | | export default { |
| | | name: "InboundOutboundDetail", |
| | |
| | | inStorage: "100.00", // 入库 |
| | | toStore: "20.00", // 出库 |
| | | forecast: "0.00", //预测 |
| | | unit: "件", //单位 |
| | | unit: "件" //单位 |
| | | }, |
| | | { |
| | | product: "南方丝巢12306xxx", |
| | |
| | | inStorage: "0.00", |
| | | toStore: "0.00", |
| | | forecast: "0.00", |
| | | unit: "件", |
| | | }, |
| | | unit: "件" |
| | | } |
| | | ], |
| | | tableList: {}, |
| | | showcol: ["产品类别", "单位成本", "总价值", "入库", "出库"], |
| | |
| | | commonDetail: { |
| | | visible: false, |
| | | title: "新建", |
| | | infomation: {}, |
| | | infomation: {} |
| | | }, |
| | | editConfig: { |
| | | visible: false, |
| | | title: "新建", |
| | | infomation: {}, |
| | | infomation: {} |
| | | }, |
| | | productId: this.$route.params.id, |
| | | productName: this.$route.params.name, |
| | |
| | | }; |
| | | }, |
| | | created() { |
| | | this.setTable(); |
| | | this.getData(); //库存报表 |
| | | this.getStashData(); // 仓库列表数据 |
| | | this.getProductCategoryList(); |
| | | this.setTable() |
| | | this.getData() //库存报表 |
| | | this.getStashData() // 仓库列表数据 |
| | | this.getProductCategoryList() |
| | | }, |
| | | mounted() { |
| | | this.countSums(); |
| | | this.countSums() |
| | | }, |
| | | methods: { |
| | | checkListHandler(e) { |
| | |
| | | showcol: this.showcol, |
| | | countcol: this.countcol, |
| | | allcol: [], |
| | | tableColumn: this.setTableColumn(this.showcol), |
| | | }; |
| | | tableColumn: this.setTableColumn(this.showcol) |
| | | } |
| | | // this.tableList.tableInfomation = this.testArr; |
| | | let allcol = []; |
| | | 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 |
| | | }, |
| | | setTableColumn(showcol) { |
| | | let tableColumn = [ |
| | |
| | | prop: "productName", |
| | | default: true, |
| | | width: 300, |
| | | isShowColumn: true, |
| | | isShowColumn: true |
| | | // date: true, // 是否为日期格式 |
| | | }, |
| | | { |
| | | label: "产品类别", |
| | | prop: "productType", |
| | | default: true, |
| | | isShowColumn: showcol.includes("产品类别"), |
| | | isShowColumn: showcol.includes("产品类别") |
| | | }, |
| | | { |
| | | label: "单位成本", |
| | | prop: "cost", |
| | | default: false, |
| | | isShowColumn: showcol.includes("单位成本"), |
| | | isShowColumn: showcol.includes("单位成本") |
| | | }, |
| | | { |
| | | label: "总价值", |
| | | prop: "value", |
| | | default: false, |
| | | isShowColumn: showcol.includes("总价值"), |
| | | unit: "¥", |
| | | unit: "¥" |
| | | }, |
| | | { |
| | | label: "在库", |
| | | prop: "amount", |
| | | default: true, |
| | | isShowColumn: true, |
| | | unit: "", |
| | | unit: "" |
| | | }, |
| | | { |
| | | label: "可用库存", |
| | | prop: "availableNumber", |
| | | default: true, |
| | | isShowColumn: true, |
| | | unit: "", |
| | | unit: "" |
| | | }, |
| | | { |
| | | label: "入库", |
| | | prop: "in", |
| | | default: false, |
| | | isShowColumn: showcol.includes("入库"), |
| | | unit: "", |
| | | unit: "" |
| | | }, |
| | | { |
| | | label: "出库", |
| | | prop: "out", |
| | | isShowColumn: showcol.includes("出库"), |
| | | default: false, |
| | | unit: "", |
| | | unit: "" |
| | | }, |
| | | { |
| | | label: "预测", |
| | | prop: "forecast", |
| | | isShowColumn: showcol.includes("预测"), |
| | | default: false, |
| | | unit: "", |
| | | unit: "" |
| | | }, |
| | | { |
| | | label: "单位", |
| | | prop: "unit", |
| | | default: true, |
| | | isShowColumn: true, |
| | | }, |
| | | ]; |
| | | return tableColumn; |
| | | isShowColumn: true |
| | | } |
| | | ] |
| | | return tableColumn |
| | | }, |
| | | selTableCol(val) { |
| | | this.showcol = val; |
| | | this.tableList.tableColumn = this.setTableColumn(val); |
| | | this.showcol = val |
| | | this.tableList.tableColumn = this.setTableColumn(val) |
| | | }, |
| | | getList(val) { |
| | | console.log(val); |
| | | console.log(val) |
| | | }, |
| | | // 行点击 |
| | | tableRowClick(row) { |
| | | console.log(row); |
| | | console.log(row) |
| | | // this.editConfig.visible = true; |
| | | this.editConfig.title = "查看"; |
| | | this.editConfig.infomation = { ...row }; |
| | | this.editConfig.title = "查看" |
| | | this.editConfig.infomation = { ...row } |
| | | }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | // this.editConfig.visible = true; |
| | | this.editConfig.title = "新建"; |
| | | this.getData(); |
| | | this.editConfig.title = "新建" |
| | | this.getData() |
| | | }, |
| | | // 状态 |
| | | getStatus(val) { |
| | | return val === 1 ? "草稿" : val === 3 ? "就绪" : "完成"; |
| | | return val === 1 ? "草稿" : val === 3 ? "就绪" : "完成" |
| | | }, |
| | | // 历史 |
| | | handleHistoryClick(row) { |
| | |
| | | }, |
| | | // 位置 |
| | | handleLocation() { |
| | | this.$router.push("/reportForm/locationReport"); |
| | | this.$router.push("/reportForm/locationReport") |
| | | }, |
| | | // 预测 |
| | | handleForecast() {}, |
| | |
| | | categoryIds: this.categoryListId, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize, |
| | | warehouseCode: this.warehouseListName, |
| | | }; |
| | | warehouseCode: this.warehouseListName |
| | | } |
| | | await getInventoryData(params).then((res) => { |
| | | if (res.code === 200) { |
| | | const list = res.data; |
| | | this.tableList.tableInfomation = list || []; |
| | | this.pagerOptions.totalCount = res.total; |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | // 获取产品类型列表数据 |
| | | async getProductCategoryList() { |
| | |
| | | pageSize: this.pagerOptions.pageSize, |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.categoryList = res.data; |
| | | this.categoryList = res.data |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | // 请求仓库列表数据 |
| | | async getStashData() { |
| | |
| | | if (res.data.code === 200) { |
| | | this.warehouseList = res.data.data; |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .rightContent { |
| | | height: 100%; |
| | | background: #e6ecf2; |
| | | // width: 100%; |
| | | padding: 10px; |
| | | .top { |
| | | margin-bottom: 20px; |
| | | height: 60px; |
| | | background: #fff; |
| | | border-radius: 8px; |
| | | .content_wrap { |
| | | height: calc(100% - 0px); |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .con_left { |
| | | width: 200px; |
| | | .el-checkbox-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .stash { |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | } |
| | | .content_wrap { |
| | | height: calc(100% - 50px); |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .con_left { |
| | | width: 200px; |
| | | .el-checkbox-group { |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .stash { |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | } |
| | | .con_right { |
| | | width: calc(100% - 200px); |
| | | } |
| | | .list-view { |
| | | flex: 1; |
| | | } |
| | | } |
| | | |
| | | // } |
| | | </style> |