| | |
| | | :amount-view="false" |
| | | @addCommonClick="addBtnClick" |
| | | @searchClick="getList" |
| | | :isDisabled="true" |
| | | /> |
| | | </div> |
| | | |
| | | <div class="content_wrap"> |
| | | <div class="con_left"> |
| | | <p>类别</p> |
| | | <el-checkbox-group v-model="checkList"> |
| | | <el-checkbox label="丝绸制品"></el-checkbox> |
| | | <el-checkbox label="丝绸制品/家具服"></el-checkbox> |
| | | <el-checkbox label="丝绸制品/真丝吊带"></el-checkbox> |
| | | <el-checkbox label="丝绸制品/真丝套装"></el-checkbox> |
| | | <el-checkbox label="丝绸制品/真丝睡袍"></el-checkbox> |
| | | <el-checkbox label="丝绸制品/蚕丝被"></el-checkbox> |
| | | <p>仓库</p> |
| | | <div class="stash"> |
| | | <template> |
| | | <el-radio |
| | | v-for="(item, index) in warehouseList" |
| | | :key="index" |
| | | v-model="stashRadio" |
| | | :label="item.name" |
| | | @change="radioHandleChange" |
| | | >{{ item.name }}</el-radio |
| | | > |
| | | <!-- <el-radio v-model="stashRadio" label="2">备选项</el-radio> --> |
| | | </template> |
| | | </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-group> |
| | | </div> |
| | | <div class="con_right"> |
| | |
| | | :showSummary="true" |
| | | > |
| | | <template slot="tableButton"> |
| | | <el-table-column |
| | | label="操作" |
| | | width="220" |
| | | align="center" |
| | | > |
| | | <el-table-column label="操作" width="220" align="center"> |
| | | <template slot-scope="scope"> |
| | | <span @click="handleHistoryClick(scope.row)"> |
| | | <i class="el-icon-refresh-left"></i> |
| | |
| | | <PagerView |
| | | class="page" |
| | | :pager-options="pagerOptions" |
| | | :page-size="pageSizes" |
| | | v-on="pagerEvents" |
| | | /> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import pageMixin from "@/components/makepager/pager/mixin/pageMixin"; |
| | | import { getProductOperatonList } from "@/api/product/product"; |
| | | import AddOverviewDialog from "@/views/overview/AddOverviewDialog"; |
| | | import { |
| | | getInventoryData, |
| | | getProductCategoryList, |
| | | getWarehouseList, |
| | | } from "@/api/reportForm/inventoryRwport"; |
| | | |
| | | export default { |
| | | name: "InboundOutboundDetail", |
| | |
| | | computed: {}, |
| | | data() { |
| | | return { |
| | | keyword: "", |
| | | checkList: [], |
| | | |
| | | testArr: [ |
| | | testArr: [], |
| | | testArr2: [ |
| | | { |
| | | product: "南方丝巢xxx", |
| | | category: "丝绸制品/真丝睡袍", |
| | | cost: "800.00", |
| | | totalPrices: "0.00", |
| | | inStore: "0.00", |
| | | availableStore: "0.00", |
| | | inStorage: "0.00", |
| | | toStore: "0.00", |
| | | forecast: "0.00", |
| | | unit: "件", |
| | | product: "南方丝巢xxx", //产品 |
| | | category: "丝绸制品/真丝睡袍", // 产品类别 |
| | | cost: "100.00", //单位成本 |
| | | inStore: "12.00", // 在库 |
| | | totalPrices: 10, // 总价值 |
| | | availableStore: "0.00", //可用库存 |
| | | inStorage: "100.00", // 入库 |
| | | toStore: "20.00", // 出库 |
| | | forecast: "0.00", //预测 |
| | | unit: "件", //单位 |
| | | }, |
| | | { |
| | | product: "南方丝巢12306xxx", |
| | | category: "丝绸制品/真丝睡袍", |
| | | cost: "9980.00", |
| | | totalPrices: "0.00", |
| | | inStore: "0.00", |
| | | inStore: "10.00", |
| | | availableStore: "0.00", |
| | | inStorage: "0.00", |
| | | toStore: "0.00", |
| | |
| | | ], |
| | | tableList: {}, |
| | | showcol: ["产品类别", "单位成本", "总价值", "入库", "出库"], |
| | | countcol:["总价值","在库","可用库存","入库","出库","预测"], |
| | | countcol: ["总价值", "在库", "可用库存", "入库", "出库", "预测"], |
| | | searchOptions: [], |
| | | commonDetail: { |
| | | visible: false, |
| | |
| | | }, |
| | | productId: this.$route.params.id, |
| | | productName: this.$route.params.name, |
| | | categoryList: [], // 类别 |
| | | categoryListId: [], //类别id |
| | | warehouseList: [], // 仓库 |
| | | warehouseListName: "", // 仓库名称 |
| | | stashRadio: "1", |
| | | pageSizes: [15, 30], |
| | | oldRadioBtn:"", |
| | | }; |
| | | }, |
| | | created() { |
| | | this.setTable(); |
| | | // this.getData(); |
| | | this.getData(); //库存报表 |
| | | this.getStashData(); // 仓库列表数据 |
| | | this.getProductCategoryList(); |
| | | }, |
| | | mounted() { |
| | | this.countSums(); |
| | | }, |
| | | methods: { |
| | | checkListHandler(e) { |
| | | this.categoryListId = e; |
| | | this.getData() |
| | | console.log(this.categoryListId, e, " 选中的产品id"); |
| | | }, |
| | | radioHandleChange(e) { |
| | | this.warehouseListName=e |
| | | this.getData() |
| | | console.log(e, "单选"); |
| | | }, |
| | | setTable() { |
| | | if (this.isIconIndex === "1") { |
| | | this.pageSizes = [30, 60] |
| | | this.pagerOptions.pageSize = 30 |
| | | } |
| | | this.tableList = { |
| | | tableInfomation: [], |
| | | selectBox: true, |
| | | showcol: this.showcol, |
| | | countcol:this.countcol, |
| | | countcol: this.countcol, |
| | | allcol: [], |
| | | tableColumn: this.setTableColumn(this.showcol), |
| | | }; |
| | | this.tableList.tableInfomation = this.testArr; |
| | | // this.tableList.tableInfomation = this.testArr; |
| | | let allcol = []; |
| | | for (let i = 0; i < this.tableList.tableColumn.length; i++) { |
| | | if (!this.tableList.tableColumn[i].default) { |
| | |
| | | let tableColumn = [ |
| | | { |
| | | label: "产品", |
| | | prop: "product", |
| | | prop: "productName", |
| | | default: true, |
| | | width:300, |
| | | |
| | | width: 300, |
| | | isShowColumn: true, |
| | | // date: true, // 是否为日期格式 |
| | | }, |
| | | { |
| | | label: "产品类别", |
| | | prop: "category", |
| | | prop: "productType", |
| | | default: true, |
| | | isShowColumn: showcol.includes("产品类别"), |
| | | }, |
| | |
| | | }, |
| | | { |
| | | label: "总价值", |
| | | prop: "totalPrices", |
| | | prop: "value", |
| | | default: false, |
| | | isShowColumn: showcol.includes("总价值"), |
| | | unit: "¥", |
| | | }, |
| | | { |
| | | label: "在库", |
| | | prop: "inStore", |
| | | prop: "amount", |
| | | default: true, |
| | | isShowColumn: true, |
| | | unit: "", |
| | | }, |
| | | { |
| | | label: "可用库存", |
| | | prop: "availableStore", |
| | | prop: "availableNumber", |
| | | default: true, |
| | | isShowColumn: true, |
| | | unit: "", |
| | | }, |
| | | { |
| | | label: "入库", |
| | | prop: "inStorage", |
| | | prop: "in", |
| | | default: false, |
| | | isShowColumn: showcol.includes("入库"), |
| | | unit: "", |
| | | }, |
| | | { |
| | | label: "出库", |
| | | prop: "toStore", |
| | | prop: "out", |
| | | isShowColumn: showcol.includes("出库"), |
| | | default: false, |
| | | unit: "", |
| | | }, |
| | | { |
| | | label: "预测", |
| | | prop: "forecast", |
| | | isShowColumn: showcol.includes("预测"), |
| | | default: false, |
| | | unit: "", |
| | | }, |
| | | { |
| | | label: "单位", |
| | | prop: "unit", |
| | | default: true, |
| | | isShowColumn: true, |
| | | }, |
| | | ]; |
| | | return tableColumn; |
| | |
| | | this.showcol = val; |
| | | this.tableList.tableColumn = this.setTableColumn(val); |
| | | }, |
| | | // 请求数据 |
| | | // async getData() { |
| | | // await getProductOperatonList({ |
| | | // productId: this.productId, |
| | | // page: this.pagerOptions.currPage, |
| | | // pageSize: this.pagerOptions.pageSize, |
| | | // }).then((res) => { |
| | | // if (res.code === 200) { |
| | | // const list = res.data.map((item) => { |
| | | // return { |
| | | // ...item, |
| | | // from: item.fromLocation.name, |
| | | // to: item.toLocation.name, |
| | | // productName: this.productName, |
| | | // }; |
| | | // }); |
| | | // this.tableList.tableInfomation = list || []; |
| | | // this.pagerOptions.totalCount = res.total; |
| | | // } |
| | | // }); |
| | | // }, |
| | | // 搜索 |
| | | getList(val) { |
| | | console.log(val); |
| | | }, |
| | |
| | | }, |
| | | // 新建 |
| | | addBtnClick() { |
| | | this.editConfig.visible = true; |
| | | // this.editConfig.visible = true; |
| | | this.editConfig.title = "新建"; |
| | | this.getData(); |
| | | }, |
| | | // 状态 |
| | | getStatus(val) { |
| | |
| | | }, |
| | | // 历史 |
| | | handleHistoryClick(row) { |
| | | this.$router.push('/operate/allot') |
| | | console.log(row) |
| | | this.$router.push("/operate/allot"); |
| | | }, |
| | | // 补货 |
| | | handleAddGoods(row) {}, |
| | | handleAddGoods(row) { |
| | | console.log(row) |
| | | |
| | | }, |
| | | // 位置 |
| | | handleLocation() { |
| | | this.$router.push('/reportForm/locationReport') |
| | | this.$router.push("/reportForm/locationReport"); |
| | | }, |
| | | // 预测 |
| | | handleForecast() {}, |
| | | //总价计算 |
| | | countSums() { |
| | | this.testArr2.map((item) => { |
| | | let obj = { |
| | | product: item.product, //产品 |
| | | category: item.category, // 产品类别 |
| | | cost: item.cost, //单位成本 |
| | | inStore: item.inStore, // 在库 |
| | | totalPrices: item.cost * item.inStore, // 总价值 |
| | | availableStore: item.availableStore, //可用库存 |
| | | inStorage: item.inStorage, // 入库 |
| | | toStore: item.toStore, // 出库 |
| | | forecast: item.forecast, //预测 |
| | | unit: item.unit, //单位 |
| | | }; |
| | | this.testArr.push(obj); |
| | | console.log(this.testArr, "this"); |
| | | }); |
| | | }, |
| | | |
| | | //接口请求----------------------------------------------------------------------------------------------- |
| | | // 获取库存报表数据 |
| | | async getData() { |
| | | let params = { |
| | | categoryIds: this.categoryListId, |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize, |
| | | warehouseCode: this.warehouseListName, |
| | | }; |
| | | await getInventoryData(params).then((res) => { |
| | | if (res.code === 200) { |
| | | console.log(res.data, "接口请求成功"); |
| | | const list = res.data |
| | | this.tableList.tableInfomation = list || [] |
| | | this.pagerOptions.totalCount = res.total |
| | | } |
| | | }); |
| | | }, |
| | | // 获取产品类型列表数据 |
| | | async getProductCategoryList() { |
| | | await getProductCategoryList({ |
| | | keyWord: "", |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }).then((res) => { |
| | | if (res.code === 200) { |
| | | this.categoryList = res.data; |
| | | } |
| | | }); |
| | | }, |
| | | // 请求仓库列表数据 |
| | | async getStashData() { |
| | | await getWarehouseList({ |
| | | keyword: "", |
| | | page: this.pagerOptions.currPage, |
| | | pageSize: this.pagerOptions.pageSize |
| | | }).then((res) => { |
| | | if (res.data.code === 200) { |
| | | this.warehouseList = res.data.data; |
| | | console.log(this.warehouseList, "warehouseList"); |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | 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); |