月度统计报表模块 前端开发+列表的接口联调

haoxuan

2024-04-17 67517b477cbb05cd9dbe467b16192d95b9e2695f

月度统计报表模块 前端开发+列表的接口联调

 src/views/reportForm/monthboundDetail/index.vue

New file
@@ -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>