From 67517b477cbb05cd9dbe467b16192d95b9e2695f Mon Sep 17 00:00:00 2001 From: haoxuan <haoxuan> Date: 星期三, 17 四月 2024 16:50:51 +0800 Subject: [PATCH] 月度统计报表模块 前端开发+列表的接口联调 --- src/views/reportForm/monthboundDetail/index.vue | 240 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 240 insertions(+), 0 deletions(-) diff --git a/src/views/reportForm/monthboundDetail/index.vue b/src/views/reportForm/monthboundDetail/index.vue new file mode 100644 index 0000000..95aec7e --- /dev/null +++ b/src/views/reportForm/monthboundDetail/index.vue @@ -0,0 +1,240 @@ +<template> + <div class="rightContent"> + <div class="top"> + <SearchCommonView :add-title="'鏂板缓'" :showAdd="false" :placeholder="'璇锋牴鎹叧閿瘝杩涜鎼滅储'" :amount-view="false" + @searchClick="getList" > + <template slot="leftButton"> + <el-date-picker + v-model="monthBoundObject.date" + value-format="yyyy-MM" + type="month" + :clearable='false' + class='margin_left_20px' + @change='getData' + placeholder="閫夋嫨鏃ユ湡" + :picker-options="pickerOptions" + > + </el-date-picker> + </template> + </SearchCommonView> + </div> + <div class="list-view"> + <div class="table"> + <TableCommonView ref="tableListRef" :loading="isTableOneLoading" :table-list="tableList" :showCheckcol='false' @selTableCol="selTableCol"> + <template slot="tableButton"> + <el-table-column label="鏈熷垵搴撳瓨" prop='inventoryStart'> + <el-table-column label="浠�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.beginMoreUnitsArr,'浠�')}} + </template> + </el-table-column> + <el-table-column label="鍖�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.beginMoreUnitsArr,'鍖�')}} + </template> + </el-table-column> + <el-table-column label="绫虫暟" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.beginMoreUnitsArr,'绫虫暟')}} + </template> + </el-table-column> + <el-table-column label="閲嶉噺" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.beginMoreUnitsArr,'閲嶉噺')}} + </template> + </el-table-column> + </el-table-column> + <el-table-column label="鏈湀鍏ュ簱" prop='inInventoryCurrentMonth'> + <el-table-column label="浠�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.inputMoreUnitsArr,'浠�')}} + </template> + </el-table-column> + <el-table-column label="鍖�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.inputMoreUnitsArr,'鍖�')}} + </template> + </el-table-column> + <el-table-column label="绫虫暟" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.inputMoreUnitsArr,'绫虫暟')}} + </template> + </el-table-column> + <el-table-column label="閲嶉噺" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.inputMoreUnitsArr,'閲嶉噺')}} + </template> + </el-table-column> + </el-table-column> + <el-table-column label="鏈湀鍑哄簱" prop='outInventoryCurrentMonth'> + <el-table-column label="浠�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.outputMoreUnitsArr,'浠�')}} + </template> + </el-table-column> + <el-table-column label="鍖�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.outputMoreUnitsArr,'鍖�')}} + </template> + </el-table-column> + <el-table-column label="绫虫暟" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.outputMoreUnitsArr,'绫虫暟')}} + </template> + </el-table-column> + <el-table-column label="閲嶉噺" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.outputMoreUnitsArr,'閲嶉噺')}} + </template> + </el-table-column> + </el-table-column> + <el-table-column label="鏈熸湯搴撳瓨" prop='inventoryEnd'> + <el-table-column label="浠�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.MoreUnitsArr,'浠�')}} + </template> + </el-table-column> + <el-table-column label="鍖�" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.MoreUnitsArr,'鍖�')}} + </template> + </el-table-column> + <el-table-column label="绫虫暟" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.MoreUnitsArr,'绫虫暟')}} + </template> + </el-table-column> + <el-table-column label="閲嶉噺" prop='inventoryStart' min="90"> + <template slot-scope="scope"> + {{getUnitValue(scope.row.MoreUnitsArr,'閲嶉噺')}} + </template> + </el-table-column> + </el-table-column> + </template> + </TableCommonView> + </div> + <div class="btn-pager"> + <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" /> + </div> + </div> + </div> +</template> + +<script> + +import pageMixin from "@/components/makepager/pager/mixin/pageMixin" +import { getmonthStats } from "@/api/reportForm/inventoryRwport" +import newDate from "@/api/date"; +const { getPreviousMonth,formatTime} = newDate; +export default { + name: "outboundDetail", + props: {}, + components: { }, + mixins: [pageMixin], + computed: {}, + data() { + return { + monthBoundObject:{ + keyWord:'', + date:getPreviousMonth(), + }, + tableList: {}, + showcol: [], + pickerOptions: { + disabledDate(time) { + return time.getTime() > formatTime(getPreviousMonth()); + }, + }, + isTableOneLoading: false, + } + }, + created() { + this.setTable() + this.getData() + }, + methods: { + getUnitValue(list,val){ + let string='--' + if(list){ + if(list.length>0){ + for(let i in list){ + if(list[i].unit==val){ + string=list[i].amount + break; + } + } + } + } + return string + }, + setTable() { + this.tableList = { + tableInfomation: [], + selectBox: false, + selectIndex:true, + showcol: this.showcol, + 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) + } + } + this.tableList.allcol = allcol + }, + setTableColumn() { + let tableColumn = [ + { + label: "浜у搧缂栫爜", + prop: "productId", + min:110, + isShowColumn: true, + default: true + }, + { + label: "浜у搧鍚嶇О", + prop: "productName", + min:110, + isShowColumn: true, + default: true + }, + ] + return tableColumn + }, + selTableCol(val) { + this.showcol = val + this.tableList.tableColumn = this.setTableColumn(val) + }, + // 搴撳瓨鎶ヨ〃璺宠浆璇锋眰鏁版嵁 + async getData() { + this.isTableOneLoading = true; + await getmonthStats({ + data:this.monthBoundObject.date, + keyWord: this.monthBoundObject.keyWord, + page: this.pagerOptions.currPage, + pageSize: this.pagerOptions.pageSize + }).then((res) => { + if (res.code == 200&&res.data) { + this.tableList.tableInfomation = res.data||[] + }else{ + this.tableList.tableInfomation = res.data||[] + } + this.pagerOptions.totalCount = res.total + this.isTableOneLoading = false; + }) + + }, + // 鎼滅储 + getList(val) { + this.monthBoundObject.keyWord = val; + this.getData() + }, + } +} +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style lang="scss" scoped></style> -- Gitblit v1.8.0