Browse Source

报表对接

chenrui 3 years ago
parent
commit
7b32fdd89f

+ 154 - 136
src/views/reportData/stockExpenditureReport/list.vue

@@ -1,70 +1,92 @@
 <template>
-  <a-card size="small" :bordered="false" class="noticeList-wrap">
-    <!-- 搜索条件 -->
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" @keyup.enter.native="handelSearch(1)">
-        <a-row :gutter="15">
-          <a-col :md="6" :sm="24">
-            <a-form-item label="出库完成时间">
-              <rangeDate ref="rangeDate" @change="dateChange" />
-            </a-form-item>
-          </a-col>
-          <a-col :md="6" :sm="24">
-            <a-button type="primary" @click="handelSearch(1)" id="noticeList-refresh">查询</a-button>
-            <a-button style="margin-left: 8px" @click="resetSearchForm" id="noticeList-reset">重置</a-button>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-    <!-- 列表 -->
-    <a-row :gutter="15">
-      <a-col :md="12" :sm="24">
-        <div class="chart-box">
-          <div class="chart-hj">库存总出数量:372,总成本:¥4315.50</div>
-          <div id="con1" class="chart"></div>
-        </div>
-      </a-col>
-      <a-col :md="12" :sm="24">
-        <a-table
-          class="sTable"
-          ref="table"
-          size="default"
-          :rowKey="(record) => record.id"
-          :columns="columns"
-          :dataSource="loadData"
-          :loading="listLoading"
-          :pagination="false"
-          bordered>
-        </a-table>
-      </a-col>
-    </a-row>
+  <a-card size="small" :bordered="false" class="stockExpenditureReportList-wrap">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <!-- 搜索条件 -->
+      <div class="table-page-search-wrapper">
+        <a-form-model
+          id="chainStockReportList-form"
+          ref="ruleForm"
+          :model="queryParam"
+          :rules="rules"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+          @keyup.enter.native="handelSearch" >
+          <a-row :gutter="15">
+            <a-col :md="8" :sm="24">
+              <a-form-model-item label="出库完成时间" prop="time">
+                <rangeDate ref="rangeDate" @change="dateChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :md="6" :sm="24">
+              <a-button type="primary" @click="handelSearch" id="stockExpenditureReportList-refresh">查询</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm" id="stockExpenditureReportList-reset">重置</a-button>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+      <!-- 列表 -->
+      <a-row :gutter="15" style="margin-top: 50px;">
+        <a-col :md="12" :sm="24">
+          <div class="chart-box">
+            <div class="chart-hj">
+              库存总出数量:{{ (totalData&&totalData.totalQty) ? totalData.totalQty : '--' }},
+              总成本:¥{{ (totalData&&totalData.totalCost) ? totalData.totalCost : '--' }}
+            </div>
+            <div id="con1" class="chart"></div>
+          </div>
+        </a-col>
+        <a-col :md="12" :sm="24" style="margin-top: 30px;">
+          <a-table
+            class="sTable"
+            ref="table"
+            size="default"
+            :rowKey="(record) => record.dataBizTypeDictValue"
+            :columns="columns"
+            :dataSource="tableData"
+            :loading="listLoading"
+            :pagination="false"
+            bordered>
+          </a-table>
+        </a-col>
+      </a-row>
+    </a-spin>
   </a-card>
 </template>
 
 <script>
 import rangeDate from '@/views/common/rangeDate.vue'
 import echarts from 'echarts'
+import { reportStockOutList } from '@/api/reportStock'
 export default {
   components: { rangeDate },
   data () {
     return {
+      spinning: false,
       queryParam: { //  查询条件
+        time: [],
         beginDate: '',
         endDate: ''
       },
+      labelCol: { span: 8 },
+      wrapperCol: { span: 16 },
+      rules: {
+        'time': [{ required: true, message: '请选择出库完成时间', trigger: 'change' }]
+      },
       disabled: false, //  查询、重置按钮是否可操作
       columns: [
-        { title: '明细项', dataIndex: 'itemName', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '数量(件)', dataIndex: 'qty', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '成本(元)', dataIndex: 'cost', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '售价(元)', dataIndex: 'price', align: 'center', customRender: function (text) { return text || '--' } }
+        { title: '明细项', dataIndex: 'dataBizTypeDictValue', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '数量(件)', dataIndex: 'productQty', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '成本(元)', dataIndex: 'productCost', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
+        { title: '售价(元)', dataIndex: 'productPrice', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }
       ],
       // 统计图
       pieData: [],
       pieColor: ['#00aaff', '#ffaa00', '#00aa00', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
-      loadData: [],
+      tableData: [], //  含总计数据
+      loadData: [], //  不含总计数据
       listLoading: false,
-      chart1: null
+      chart1: null,
+      totalData: null
     }
   },
 
@@ -94,25 +116,25 @@ export default {
           formatter: `{b} : {d}%`
         },
         legend: {
-    		  orient: 'horizontal',
-    		  left: 'center',
-    		  bottom: '5',
-    		  padding: 5,
-    		  textStyle: {
-    		    color: '#abd7ff',
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '5',
+          padding: 5,
+          textStyle: {
+            color: '#abd7ff',
             fontSize: 10
-    		  },
-    		  show: !!bit,
-    		  formatter: function (name) {
-    			  if (bit) {
+          },
+          show: !!bit,
+          formatter: function (name) {
+            if (bit) {
               const p = data.find(item => item.name == name)
               return name + (p ? (':' + p.value + bit) : '')
-    			  }
-    		  }
+            }
+          }
         },
         series: [{
           type: 'pie',
-          radius: ['30%', '50%'],
+          radius: ['50%', '70%'],
           startAngle: 75,
           top: 50,
           avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
@@ -120,8 +142,7 @@ export default {
             normal: {
               formatter: params => {
                 return (
-                  '{name|' + params.name + '}{value|' +
-    										params.percent + '%' + '}'
+                  '{name|' + params.name + '}{value|' + params.percent + '%' + '}'
                 )
               },
               padding: [0, -70, 25, -70],
@@ -157,82 +178,70 @@ export default {
     },
     //  时间  change
     dateChange (date) {
-      this.queryParam.beginDate = date[0] ? date[0] + ' 00:00:00' : ''
-      this.queryParam.endDate = date[1] ? date[1] + ' 23:59:59' : ''
+      this.queryParam.time = date
+      this.queryParam.beginDate = date[0]
+      this.queryParam.endDate = date[1]
     },
-    // 查询列表
     handelSearch () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.getList()
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    // 查询列表
+    getList () {
       const params = {
         beginDate: this.queryParam.beginDate,
         endDate: this.queryParam.endDate
       }
       // 开始查询
       this.listLoading = true
-      setTimeout(() => {
+      this.spinning = true
+      reportStockOutList(params).then(res => {
         this.listLoading = false
-        this.loadData = [
-          {
-            itemName: '采购退货',
-            qty: '14',
-            cost: '84.50',
-            price: ''
-          },
-          {
-            itemName: '散件退货',
-            qty: '3',
-            cost: '28.00',
-            price: ''
-          },
-          {
-            itemName: '销售(含急件)',
-            qty: '77',
-            cost: '837.50',
-            price: '2672.55'
-          },
-          {
-            itemName: '急件冲减',
-            qty: '9',
-            cost: '109.50',
-            price: ''
-          },
-          {
-            itemName: '店内调出',
-            qty: '6',
-            cost: '55.00',
-            price: ''
-          },
-          {
-            itemName: '盘亏出库',
-            qty: '190',
-            cost: '2725.00',
-            price: ''
-          },
-          {
-            itemName: '连锁调出',
-            qty: '73',
-            cost: '476.00',
-            price: ''
-          },
-          {
-            itemName: '总出',
-            qty: '372',
-            cost: '4315.50',
-            price: '2672.55'
+        if (res.status == 200) {
+          const reportStockOutVOList = (res.data && res.data.reportStockOutVOList) ? res.data.reportStockOutVOList : []
+          const totalQty = (res.data && (res.data.totalQty || res.data.totalQty == 0)) ? res.data.totalQty : '--'
+          const totalPrice = (res.data && (res.data.totalPrice || res.data.totalPrice == 0)) ? res.data.totalPrice : '--'
+          const totalCost = (res.data && (res.data.totalCost || res.data.totalCost == 0)) ? res.data.totalCost : '--'
+          this.totalData = {
+            totalQty: totalQty,
+            totalPrice: totalPrice,
+            totalCost: totalCost
           }
-        ]
-        this.chartInit()
-      }, 600)
-    },
-    chartInit () {
-      this.loadData.map((item, index) => {
-        if (index != this.loadData.length - 1) {
-          this.pieData.push({
-            name: item.itemName + '总成本',
-            value: item.cost
-          })
+          if (reportStockOutVOList) {
+            this.loadData = res.data.reportStockOutVOList
+            this.tableData = res.data.reportStockOutVOList
+            const total = [{ dataBizTypeDictValue: '总出', productQty: totalQty, productCost: totalCost, productPrice: totalPrice }]
+            this.tableData = [...this.tableData, ...total]
+          } else {
+            this.loadData = []
+            this.tableData = []
+          }
+          this.chartInit()
         }
+        this.spinning = false
       })
-      const con5 = document.getElementById('con1')
+    },
+    chartInit () {
+      this.pieData = []
+      if (this.loadData.length < 1) {
+        this.pieData = [{ name: '总成本', value: 0 }]
+      } else {
+        this.loadData.map((item, index) => {
+          if (index != this.loadData.length) {
+            this.pieData.push({
+              name: item.dataBizTypeDictValue + '总成本',
+              value: item.productCost
+            })
+          }
+        })
+      }
+      const con1 = document.getElementById('con1')
       const chart1 = echarts.init(con1)
       const option = this.initPie(chart1, '', this.pieData)
       chart1.setOption(option)
@@ -242,7 +251,13 @@ export default {
     //  重置
     resetSearchForm () {
       this.$refs.rangeDate.resetDate()
-      this.handelSearch()
+      this.queryParam.time = []
+      this.queryParam.beginDate = ''
+      this.queryParam.endDate = ''
+      this.loadData = []
+      this.tableData = []
+      this.totalData = null
+      this.chartInit()
     }
   },
   mounted () {
@@ -254,22 +269,25 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-      vm.handelSearch()
+      vm.chartInit()
     })
   }
 }
 </script>
 <style lang="less">
-  .chart-box{
-    height: 400px;
-    .chart-hj{
-      font-size: 22px;
-      text-align: center;
-    }
-    .chart{
-      width: 100%;
-      height: 450px;
-      overflow: auto;
+  .stockExpenditureReportList-wrap{
+    min-height: 700px;
+    .chart-box{
+      height: 400px;
+      .chart-hj{
+        font-size: 22px;
+        text-align: center;
+      }
+      .chart{
+        width: 100%;
+        height: 450px;
+        overflow: auto;
+      }
     }
   }
 </style>

+ 51 - 30
src/views/reportData/stockIncomeReport/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card size="small" :bordered="false" class="noticeList-wrap">
+  <a-card size="small" :bordered="false" class="stockIncomeReportList-wrap">
     <a-spin :spinning="spinning" tip="Loading...">
       <!-- 搜索条件 -->
       <div class="table-page-search-wrapper">
@@ -18,21 +18,24 @@
               </a-form-model-item>
             </a-col>
             <a-col :md="6" :sm="24">
-              <a-button type="primary" @click="handelSearch" id="noticeList-refresh">查询</a-button>
-              <a-button style="margin-left: 8px" @click="resetSearchForm" id="noticeList-reset">重置</a-button>
+              <a-button type="primary" @click="handelSearch" id="stockIncomeReportList-refresh">查询</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm" id="stockIncomeReportList-reset">重置</a-button>
             </a-col>
           </a-row>
         </a-form-model>
       </div>
       <!-- 列表 -->
-      <a-row :gutter="15">
+      <a-row :gutter="15" style="margin-top: 50px;">
         <a-col :md="12" :sm="24">
           <div class="chart-box">
-            <div class="chart-hj">库存总入数量:28,总成本:¥189.50</div>
+            <div class="chart-hj">
+              库存总入数量:{{ (totalData&&totalData.totalQty) ? totalData.totalQty : '--' }},
+              总成本:¥{{ (totalData&&totalData.totalCost) ? totalData.totalCost : '--' }}
+            </div>
             <div id="con1" class="chart"></div>
           </div>
         </a-col>
-        <a-col :md="12" :sm="24">
+        <a-col :md="12" :sm="24" style="margin-top: 30px;">
           <a-table
             class="sTable"
             ref="table"
@@ -82,7 +85,8 @@ export default {
       tableData: [], //  含总计数据
       loadData: [], //  不含总计数据
       listLoading: false,
-      chart1: null
+      chart1: null,
+      totalData: null
     }
   },
 
@@ -130,7 +134,7 @@ export default {
         },
         series: [{
           type: 'pie',
-          radius: ['30%', '50%'],
+          radius: ['50%', '70%'],
           startAngle: 75,
           top: 50,
           avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
@@ -201,9 +205,14 @@ export default {
         this.listLoading = false
         if (res.status == 200) {
           const reportStockPutVOList = (res.data && res.data.reportStockPutVOList) ? res.data.reportStockPutVOList : []
-          const totalQty = (res.data && res.data.totalQty) ? res.data.totalQty : 0
-          const totalPrice = (res.data && res.data.totalPrice) ? res.data.totalPrice : 0
-          const totalCost = (res.data && res.data.totalCost) ? res.data.totalCost : 0
+          const totalQty = (res.data && (res.data.totalQty || res.data.totalQty == 0)) ? res.data.totalQty : '--'
+          const totalPrice = (res.data && (res.data.totalPrice || res.data.totalPrice == 0)) ? res.data.totalPrice : '--'
+          const totalCost = (res.data && (res.data.totalCost || res.data.totalCost == 0)) ? res.data.totalCost : '--'
+          this.totalData = {
+            totalQty: totalQty,
+            totalPrice: totalPrice,
+            totalCost: totalCost
+          }
           if (reportStockPutVOList) {
             this.loadData = res.data.reportStockPutVOList
             this.tableData = res.data.reportStockPutVOList
@@ -219,14 +228,19 @@ export default {
       })
     },
     chartInit () {
-      this.loadData.map((item, index) => {
-        if (index != this.loadData.length) {
-          this.pieData.push({
-            name: item.dataBizTypeDictValue + '总成本',
-            value: item.productCost
-          })
-        }
-      })
+      this.pieData = []
+      if (this.loadData.length < 1) {
+        this.pieData = [{ name: '总成本', value: 0 }]
+      } else {
+        this.loadData.map((item, index) => {
+          if (index != this.loadData.length) {
+            this.pieData.push({
+              name: item.dataBizTypeDictValue + '总成本',
+              value: item.productCost
+            })
+          }
+        })
+      }
       const con1 = document.getElementById('con1')
       const chart1 = echarts.init(con1)
       const option = this.initPie(chart1, '', this.pieData)
@@ -242,6 +256,8 @@ export default {
       this.queryParam.endDate = ''
       this.loadData = []
       this.tableData = []
+      this.totalData = null
+      this.chartInit()
     }
   },
   mounted () {
@@ -252,21 +268,26 @@ export default {
     }
   },
   beforeRouteEnter (to, from, next) {
-    next(vm => {})
+    next(vm => {
+      vm.chartInit()
+    })
   }
 }
 </script>
 <style lang="less">
-  .chart-box{
-    height: 400px;
-    .chart-hj{
-      font-size: 22px;
-      text-align: center;
-    }
-    .chart{
-      width: 100%;
-      height: 450px;
-      overflow: auto;
+  .stockIncomeReportList-wrap{
+    min-height: 700px;
+    .chart-box{
+      height: 400px;
+      .chart-hj{
+        font-size: 22px;
+        text-align: center;
+      }
+      .chart{
+        width: 100%;
+        height: 450px;
+        overflow: auto;
+      }
     }
   }
 </style>