Browse Source

新增报表菜单

zhangdan 4 years ago
parent
commit
5402ee9deb

+ 70 - 2
src/views/market/winingRecord.vue

@@ -3,7 +3,7 @@
     <div class="winRecord-searchForm">
       <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
         <a-row :gutter="20">
-          <a-col :span="6">
+          <a-col :span="5">
             <a-form-item label="中奖时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-range-picker
                 id="winRecord-time"
@@ -37,7 +37,26 @@
           </a-col>
           <a-col :span="4">
             <a-button class="handle-btn serach-btn" id="winRecord-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-            <a-button class="handle-btn" type="" id="winRecord-btn-reset" @click="handleReset">重置</a-button>
+            <a-button class="handle-btn serach-btn" type="" id="winRecord-btn-reset" @click="handleReset">重置</a-button>
+            <a-button class="export-btn" id="releaseRecordList-export" :loading="loading" @click="handleExport">导出</a-button>
+          </a-col>
+        </a-row>
+        <a-row :gutter="20">
+          <a-col :span="5">
+            <a-form-item label="活动名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-input id="winRecord-prizeDesc" allowClear v-model="queryParam.prizeDesc" placeholder="请输入活动名称" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="5">
+            <a-form-item label="奖品类型" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <v-select
+                v-model="queryParam.state"
+                ref="orderState"
+                id="winRecord-state"
+                code="PRIZE_WIN_STATE"
+                placeholder="请选择奖品类型"
+                allowClear></v-select>
+            </a-form-item>
           </a-col>
         </a-row>
       </a-form>
@@ -113,6 +132,7 @@ export default {
         { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
         { title: '中奖时间', dataIndex: 'winTime', width: 200, align: 'center' },
         { title: '活动名称', dataIndex: 'activeName', width: 200, align: 'center' },
+        { title: '奖品类型', dataIndex: '', width: 200, align: 'center' },
         { title: '奖品', dataIndex: 'prizeDesc', scopedSlots: { customRender: 'prizeDesc' }, width: 200, align: 'center' },
         { title: '中奖用户', dataIndex: 'customerMobile', width: 200, align: 'center' },
         { title: '状态', dataIndex: 'stateDictValue', width: 200, align: 'center' },
@@ -174,6 +194,44 @@ export default {
       this.queryParam.state = ''
       this.$refs.table.refresh(true)
     },
+    // 导出
+    handleExport () {
+	  const params = this.queryParam
+	  if (this.time && this.time.length) {
+	    params.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
+	    params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+	  } else {
+	    params.beginDate = ''
+	    params.endDate = ''
+	  }
+	  if (!params.beginDate && !params.endDate) {
+	    this.$message.error('请先选择需要导出的投放时间区间再进行导出!')
+	    return
+	  }
+	  // 判断两个时间段是否相差m个月  第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
+	  if (moment(params.endDate).diff(moment(params.beginDate), 'months', true) > 3) {
+	    this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
+	  }
+	  this.loading = true
+	  // exportDeliveryLog(params).then(res => {
+	  //   this.loading = false
+	  //   this.download(res)
+	  // })
+    },
+    download (data) {
+	  if (!data) {
+	    return
+	  }
+	  const url = window.URL.createObjectURL(new Blob([data]))
+	  const link = document.createElement('a')
+	  link.style.display = 'none'
+	  link.href = url
+	  const a = moment().format('YYYY-MM-DD')
+	  const fname = a + '垃圾分类投递量统计表' + '(陕西省西安市)'
+	  link.setAttribute('download', fname + '.xlsx')
+	  document.body.appendChild(link)
+	  link.click()
+    },
     //  查看物流详情
     handleView (row) {
       this.itemId = row.id
@@ -219,5 +277,15 @@ export default {
         margin-right: 10px;
       }
     }
+	.export-btn {
+		background-color: #ff9900;
+		border-color: #ff9900;
+		color: #fff;
+	}
+	.export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
+	.export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
+		color: #fff;
+		border-color: #ff9900;
+	}
   }
 </style>

+ 5 - 3
src/views/releaseRecord/releaseRecordList.vue

@@ -34,7 +34,8 @@
           </a-col>
           <a-col :span="4">
             <a-button class="handle-btn serach-btn" id="releaseRecordList-serach" type="primary" @click="refresh">查询</a-button>
-            <a-button class="handle-btn" type="" id="releaseRecordList-reset" @click="handleReset">重置</a-button>
+            <a-button class="handle-btn serach-btn" type="" id="releaseRecordList-reset" @click="handleReset">重置</a-button>
+            <a-button class="export-btn" id="releaseRecordList-export" v-hasPermission="'B_exportDeliveryLog'" :loading="loading" @click="handleExport">导出</a-button>
           </a-col>
         </a-row>
         <a-row :gutter="20">
@@ -71,9 +72,9 @@
               </div>
             </a-form-item>
           </a-col>
-          <a-col :span="4">
+          <!-- <a-col :span="4">
             <a-button class="export-btn" id="releaseRecordList-export" v-hasPermission="'B_exportDeliveryLog'" :loading="loading" @click="handleExport">导出</a-button>
-          </a-col>
+          </a-col> -->
         </a-row>
       </a-form>
     </div>
@@ -368,6 +369,7 @@ export default {
       }
       .handle-btn{
         margin-bottom: 15px;
+		margin-top: 4px;
       }
       .serach-btn{
         margin-right: 10px;

+ 312 - 0
src/views/reportForm/rubbishDeliverySearchTime.vue

@@ -0,0 +1,312 @@
+<template>
+  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
+    <div class="shopOrder-searchForm">
+      <a-form layout="inline" @keyup.enter.native="refresh">
+        <a-row :gutter="20">
+          <a-col :span="8">
+            <a-form-item label="投递时间:" :label-col="{ span: 7 }" :wrapper-col="{ span: 17}">
+              <a-range-picker
+                id="network-time"
+                v-model="time"
+                :format="dateFormat"
+                :showTime="{ format: 'HH'}"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="网点名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-select
+                id="releaseRecordList-stationNo"
+                placeholder="请选择网点名称"
+                allowClear
+                v-model="queryParam.stationNo"
+                :showSearch="true"
+                option-filter-prop="children"
+                :filter-option="filterOption"
+              >
+                <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button
+              class="serach-btn"
+              type="primary"
+              id="releaseRecordList-refresh"
+              v-hasPermission="'B_exportDeliveryLog'"
+              :loading="loading"
+              @click="refresh">查询</a-button>
+            <a-button class="serach-btn" id="releaseRecordList-handleReset" v-hasPermission="'B_exportDeliveryLog'" :loading="loading" @click="handleReset">重置</a-button>
+            <a-button class="export-btn" id="releaseRecordList-export" v-hasPermission="'B_exportDeliveryLog'" :loading="loading" @click="handleExport">导出</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 合计 -->
+    <a-alert type="info" showIcon style="margin-bottom:15px">
+      <div class="ftext" slot="message">总计<span> {{ orderTotal }} </span>条,可回收垃圾总计<span> {{ amountTotal }} </span>千克,有害垃圾总计<span> {{ amountTotal }} </span>千克</div>
+    </a-alert>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 订单状态 -->
+      <template slot="one" slot-scope="text, record">
+        <span v-if="record.rubbishType=='CLOTHES'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="two" slot-scope="text, record">
+        <span v-if="record.rubbishType=='PAPER'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+        </span></template>
+      <template slot="three" slot-scope="text, record">
+        <span v-if="record.rubbishType=='PLASTIC'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="four" slot-scope="text, record">
+        <span v-if="record.rubbishType=='METAL'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="five" slot-scope="text, record">
+        <span v-if="record.rubbishType=='HARM'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="six" slot-scope="text, record">
+        <span v-if="record.rubbishType=='MET_PLA'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="seven" slot-scope="text, record">
+        <span v-if="record.rubbishType=='GLASS'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="eight" slot-scope="text, record">
+        <span v-if="record.rubbishType=='RECYCLING'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+    </s-table>
+  </a-card>
+
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { getDeliveryLogList, getDeliveryLogTotal, stationList, exportDeliveryLog } from '@/api/releaseRecord.js'
+import moment from 'moment'
+export default {
+  components: { STable, VSelect },
+  data () {
+    return {
+      loading: false,
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 16 }
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [],
+      dateFormat: 'YYYY-MM-DD HH',
+      // 查询参数
+      queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
+        stationNo: undefined // 网点名称
+      },
+      optionData: [],
+      orderTotal: 0,	// 总单数
+      amountTotal: 0,	// 总金额
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
+        { title: '投放时间', dataIndex: 'deliveryTime', width: 100, align: 'center' },
+        { title: '可回收垃圾投递量(kg)',
+          children: [
+            { title: '废旧衣物', width: 100, align: 'center', scopedSlots: { customRender: 'one' } },
+            { title: '废旧纸张', width: 100, align: 'center', scopedSlots: { customRender: 'two' } },
+            { title: '废旧塑料', width: 100, align: 'center', scopedSlots: { customRender: 'three' } },
+            { title: '废旧金属', width: 100, align: 'center', scopedSlots: { customRender: 'four' } },
+            // { title: '有害垃圾', width: 100, align: 'center', scopedSlots: { customRender: 'five' } },
+            { title: '废旧金属/塑料', width: 100, align: 'center', scopedSlots: { customRender: 'six' } },
+            { title: '废旧玻璃', width: 100, align: 'center', scopedSlots: { customRender: 'seven' } },
+            { title: '可回收物', width: 100, align: 'center', scopedSlots: { customRender: 'eight' } }
+          ]
+        },
+        { title: '有害垃圾(kg)', dataIndex: '', width: 100, align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        const searchData = Object.assign(parameter, this.queryParam)
+        if (this.time && this.time.length) {
+          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD HH')
+          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD HH')
+        } else {
+          searchData.beginDate = ''
+          searchData.endDate = ''
+        }
+        return getDeliveryLogList(searchData).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+            }
+            this.getListTotal()
+            return res.data
+          }
+        })
+      }
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.handleReset()
+      vm.getStationList()
+    })
+  },
+  methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 导出
+    handleExport () {
+      const params = this.queryParam
+      if (this.time && this.time.length) {
+        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD HH')
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD HH')
+      } else {
+        params.beginDate = ''
+        params.endDate = ''
+      }
+      if (!params.beginDate && !params.endDate) {
+        this.$message.error('请先选择需要导出的投放时间区间再进行导出!')
+        return
+      }
+      // 判断两个时间段是否相差m个月  第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
+      if (moment(params.endDate).diff(moment(params.beginDate), 'months', true) > 3) {
+        this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
+      }
+      this.loading = true
+      exportDeliveryLog(params).then(res => {
+        this.loading = false
+        this.download(res)
+      })
+    },
+    download (data) {
+      if (!data) { return }
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      const a = moment().format('YYYY-MM-DD-HH')
+      const fname = a + '分时投递统计'
+      link.setAttribute('download', fname + '.xlsx')
+      document.body.appendChild(link)
+      link.click()
+    },
+    // 查询
+    refresh () {
+      this.$refs.table.refresh(true)
+    },
+    // 获取合作商数据
+    getStationList () {
+      stationList().then(res => {
+        if (res.status == 200) {
+          this.optionData = res.data || []
+        }
+      })
+    },
+    // 合计
+    getListTotal () {
+      const params = {
+        beginDate: this.queryParam.beginDate,
+        endDate: this.queryParam.endDate,
+        stationNo: this.queryParam.stationNo // 网点名称
+      }
+      if (this.time && this.time.length) {
+        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+      } else {
+        params.beginDate = ''
+        params.endDate = ''
+      }
+      getDeliveryLogTotal(params).then(res => {
+        if (res.status == 200) {
+          if (res.data) {
+            this.orderTotal = res.data.totalNum || 0
+            this.amountTotal = res.data.goldNum || 0
+          } else {
+            this.orderTotal = 0
+            this.amountTotal = 0
+          }
+        }
+      })
+    },
+    // 重置
+    handleReset () {
+      this.time = [],
+      this.queryParam.stationNo = undefined
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .shopOrder-table-page-search-wrapper{
+    .shopOrder-searchForm{
+      .ant-form-inline .ant-form-item{
+        width: 100%;
+      }
+      // 搜索框的下间距
+      .ant-form-item {
+      	margin-bottom: 10px;
+      }
+      // .handle-btn{
+      //   margin-bottom: 15px;
+      // }
+      .serach-btn{
+        margin-right: 10px;
+		margin-top: 4px;
+      }
+    }
+    .export-btn{
+      background-color: #ff9900;
+      border-color: #ff9900;
+      color: #fff;
+    }
+    .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
+      color: #fff;
+      border-color: #ff9900;
+    }
+    .actionBtn {
+    	font-size: 20px;
+    	padding: 0 10px;
+    }
+    .blue {
+    	color: #1890FF;
+    }
+    .green {
+    	color: #16b50e;
+    }
+    .red {
+    	color: red;
+    }
+  }
+</style>

+ 492 - 0
src/views/reportForm/rubbishDeliveryTotal.vue

@@ -0,0 +1,492 @@
+<template>
+  <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
+    <div class="network-searchForm">
+      <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="$refs.table.refresh(true)">
+        <a-row :gutter="24">
+          <a-col :span="6">
+            <a-form-item label="投递时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="network-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="4">
+            <a-form-item prop="provinceCode" label="所属区域:">
+              <a-select v-model="queryParam.provinceCode" @change="getCityList" placeholder="请选择省">
+                <a-select-option v-for="item in addrProvinceList" :value="item.id" :key="item.id + 'a'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="4">
+            <a-form-item prop="cityCode">
+              <a-select v-model="queryParam.cityCode" @change="getAreaList" placeholder="请选择市">
+                <a-select-option v-for="item in addrCityList" :value="item.id" :key="item.id + 'b'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="4">
+            <a-form-item prop="districtCode">
+              <a-select v-model="queryParam.districtCode" placeholder="请选择区/县">
+                <a-select-option v-for="item in addrDistrictList" :value="item.id" :key="item.id + 'c'">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="24">
+          <a-col :span="6">
+            <a-form-item label="网点名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+              <a-select
+                id="releaseRecordList-stationNo"
+                placeholder="请选择网点名称"
+                allowClear
+                v-model="queryParam.stationNo"
+                :showSearch="true"
+                option-filter-prop="children"
+                :filter-option="filterOption">
+                <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+            <a-button class="handle-btn serach-btn" type="" id="network-btn-reset" @click="handleReset">重置</a-button>
+            <a-button class="export-btn" id="releaseRecordList-export" :loading="loading" @click="handleExport">导出</a-button>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 合计 -->
+    <a-alert type="info" showIcon style="margin-bottom:15px">
+      <div class="ftext" slot="message">总计<span> {{ orderTotal }} </span>条,可回收垃圾总计<span> {{ amountTotal }} </span>千克,有害垃圾总计<span>
+        {{ amountTotal }} </span>千克</div>
+    </a-alert>
+    <s-table
+      ref="table"
+      size="default"
+      :rowKey="(record) => record.id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 订单状态 -->
+      <template slot="one" slot-scope="text, record">
+        <span v-if="record.rubbishType=='CLOTHES'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="two" slot-scope="text, record">
+        <span v-if="record.rubbishType=='PAPER'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+        </span></template>
+      <template slot="three" slot-scope="text, record">
+        <span v-if="record.rubbishType=='PLASTIC'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="four" slot-scope="text, record">
+        <span v-if="record.rubbishType=='METAL'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="five" slot-scope="text, record">
+        <span v-if="record.rubbishType=='HARM'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="six" slot-scope="text, record">
+        <span v-if="record.rubbishType=='MET_PLA'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="seven" slot-scope="text, record">
+        <span v-if="record.rubbishType=='GLASS'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+      <template slot="eight" slot-scope="text, record">
+        <span v-if="record.rubbishType=='RECYCLING'">{{ record.rubbishWeight }}</span>
+        <span v-else>0</span>
+      </template>
+    </s-table>
+  </a-card>
+
+</template>
+
+<script>
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  getDeliveryLogList,
+  getDeliveryLogTotal,
+  stationList,
+  exportDeliveryLog
+} from '@/api/releaseRecord.js'
+import {
+  getProvince,
+  getCityByPro,
+  getDistrictByCity
+} from '@/api/station'
+import moment from 'moment'
+export default {
+  components: {
+    STable,
+    VSelect
+  },
+  data () {
+    return {
+      loading: false,
+      form: this.$form.createForm(this),
+      formItemLayout: {
+        labelCol: {
+          span: 7
+        },
+        wrapperCol: {
+          span: 17
+        }
+      },
+      // 将默认当天时间日期回显在时间选择框中
+      time: [],
+      dateFormat: 'YYYY-MM-DD',
+      // 查询参数
+      queryParam: {
+        beginDate: null, // 开始时间
+        endDate: null, // 结束时间
+        stationNo: undefined, // 网点名称
+        provinceCode: undefined, //  省
+        cityCode: undefined, // 市
+        districtCode: undefined // 区
+      },
+      addrProvinceList: [], //  省下拉
+      addrCityList: [], //  市下拉
+      addrDistrictList: [], //  区下拉
+      optionData: [],
+      orderTotal: 0, // 总单数
+      amountTotal: 0, // 总金额
+      // 表头
+      columns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '投放时间',
+        dataIndex: 'deliveryTime',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '可回收垃圾投递量(kg)',
+        children: [{
+          title: '废旧衣物',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'one'
+          }
+        },
+        {
+          title: '废旧纸张',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'two'
+          }
+        },
+        {
+          title: '废旧塑料',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'three'
+          }
+        },
+        {
+          title: '废旧金属',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'four'
+          }
+        },
+        // { title: '有害垃圾', width: 100, align: 'center', scopedSlots: { customRender: 'five' } },
+        {
+          title: '废旧金属/塑料',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'six'
+          }
+        },
+        {
+          title: '废旧玻璃',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'seven'
+          }
+        },
+        {
+          title: '可回收物',
+          width: 100,
+          align: 'center',
+          scopedSlots: {
+            customRender: 'eight'
+          }
+        }
+        ]
+      },
+      {
+        title: '有害垃圾(kg)',
+        dataIndex: '',
+        width: 100,
+        align: 'center'
+      }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        const searchData = Object.assign(parameter, this.queryParam)
+        if (this.time && this.time.length) {
+          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
+          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+        } else {
+          searchData.beginDate = ''
+          searchData.endDate = ''
+        }
+        return getDeliveryLogList(searchData).then(res => {
+          if (res.status == 200) {
+            const no = (res.data.pageNo - 1) * res.data.pageSize
+            for (let i = 0; i < res.data.list.length; i++) {
+              const _item = res.data.list[i]
+              _item.no = no + i + 1
+            }
+            this.getListTotal()
+            return res.data
+          }
+        })
+      }
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.handleReset()
+      vm.getStationList()
+      vm.getProvinceList()
+    })
+  },
+  methods: {
+    moment,
+    // 不可选日期
+    disabledDate (date, dateStrings) {
+      return date && date.valueOf() > Date.now()
+    },
+    // 创建时间change
+    onChange (dates, dateStrings) {
+      if ((dates, dateStrings)) {
+        this.queryParam.beginDate = dateStrings[0]
+        this.queryParam.endDate = dateStrings[1]
+      }
+    },
+    filterOption (input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      )
+    },
+    // 获取省列表'
+    getProvinceList () {
+      getProvince().then(res => {
+        if (res.status == 200) {
+          this.addrProvinceList = res.data || []
+        } else {
+          this.addrProvinceList = []
+        }
+      })
+    },
+    // 获取城市列表
+    getCityList (val) {
+      this.addrCityList = []
+      this.addrDistrictList = []
+      this.queryParam.cityCode = undefined
+      this.queryParam.districtCode = undefined
+      this.getCityListRequest(val)
+    },
+    getCityListRequest (val) {
+      getCityByPro({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrCityList = res.data || []
+        } else {
+          this.addrCityList = []
+        }
+      })
+    },
+    // 获取区县列表
+    getAreaList (val) {
+      this.addrDistrictList = []
+      this.queryParam.districtCode = undefined
+      this.getAreaListRequest(val)
+    },
+    getAreaListRequest (val) {
+      getDistrictByCity({
+        id: val
+      }).then(res => {
+        if (res.status == 200) {
+          this.addrDistrictList = res.data || []
+        } else {
+          this.addrDistrictList = []
+        }
+      })
+    },
+    // 导出
+    handleExport () {
+      const params = this.queryParam
+      if (this.time && this.time.length) {
+        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+      } else {
+        params.beginDate = ''
+        params.endDate = ''
+      }
+      if (!params.beginDate && !params.endDate) {
+        this.$message.error('请先选择需要导出的投放时间区间再进行导出!')
+        return
+      }
+      // 判断两个时间段是否相差m个月  第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
+      if (moment(params.endDate).diff(moment(params.beginDate), 'months', true) > 3) {
+        this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
+      }
+      this.loading = true
+      exportDeliveryLog(params).then(res => {
+        this.loading = false
+        this.download(res)
+      })
+    },
+    download (data) {
+      if (!data) {
+        return
+      }
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      const a = moment().format('YYYY-MM-DD')
+      const fname = a + '垃圾分类投递量统计表' + '(陕西省西安市)'
+      link.setAttribute('download', fname + '.xlsx')
+      document.body.appendChild(link)
+      link.click()
+    },
+    // 查询
+    refresh () {
+      this.$refs.table.refresh(true)
+    },
+    // 获取合作商数据
+    getStationList () {
+      stationList().then(res => {
+        if (res.status == 200) {
+          this.optionData = res.data || []
+        }
+      })
+    },
+    // 合计
+    getListTotal () {
+      const params = {
+        beginDate: this.queryParam.beginDate,
+        endDate: this.queryParam.endDate,
+        stationNo: this.queryParam.stationNo // 网点名称
+      }
+      if (this.time && this.time.length) {
+        params.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
+        params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
+      } else {
+        params.beginDate = ''
+        params.endDate = ''
+      }
+      getDeliveryLogTotal(params).then(res => {
+        if (res.status == 200) {
+          if (res.data) {
+            this.orderTotal = res.data.totalNum || 0
+            this.amountTotal = res.data.goldNum || 0
+          } else {
+            this.orderTotal = 0
+            this.amountTotal = 0
+          }
+        }
+      })
+    },
+    // 重置
+    handleReset () {
+      this.time = []
+      this.queryParam.stationNo = undefined
+      this.$refs.table.refresh(true)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+	.shopOrder-table-page-search-wrapper {
+
+		// .shopOrder-searchForm{
+		//   .ant-form-inline .ant-form-item{
+		//     width: 100%;
+		//   }
+		//   // 搜索框的下间距
+		//   .ant-form-item {
+		// width: 100%;
+		//   	margin-bottom: 10px;
+		//   }
+		//   .handle-btn{
+		//     margin-bottom: 15px;
+		//   }
+		//   .serach-btn{
+		//     margin-right: 10px;
+		//   }
+		// }
+		.network-searchForm {
+			.ant-form-inline .ant-form-item {
+				width: 100%;
+			}
+
+			// 搜索框的下间距
+			.ant-form-item {
+				margin-bottom: 10px;
+			}
+
+			.handle-btn {
+				margin-top: 4px;
+			}
+
+			.serach-btn {
+				margin-right: 10px;
+			}
+		}
+
+		.export-btn {
+			background-color: #ff9900;
+			border-color: #ff9900;
+			color: #fff;
+		}
+
+		.export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
+		.export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
+			color: #fff;
+			border-color: #ff9900;
+		}
+
+		.actionBtn {
+			font-size: 20px;
+			padding: 0 10px;
+		}
+
+		.blue {
+			color: #1890FF;
+		}
+
+		.green {
+			color: #16b50e;
+		}
+
+		.red {
+			color: red;
+		}
+	}
+</style>

+ 49 - 14
src/views/userInfo/userManageList.vue

@@ -3,6 +3,28 @@
     <div class="userManageList-searchForm">
       <a-form layout="inline" v-bind="formItemLayout" @keyup.enter.native="refresh">
         <a-row :gutter="20">
+          <a-col :span="5">
+            <a-form-item label="投递时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="network-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="5">
+            <a-form-item label="最后投递时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
+              <a-range-picker
+                id="network-time"
+                v-model="time"
+                :format="dateFormat"
+                :placeholder="['开始时间','结束时间']"
+                :disabledDate="disabledDate"
+                @change="onChange" />
+            </a-form-item>
+          </a-col>
           <a-col :span="5">
             <a-form-item label="用户手机" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <a-input id="releaseRecordList-mobile" allowClear :maxLength="11" v-model="queryParam.mobile" placeholder="请输入用户手机" />
@@ -16,6 +38,18 @@
               </div>
             </a-form-item>
           </a-col>
+          <a-col :span="4">
+            <a-button class="handle-btn serach-btn" id="releaseRecordList-btn-serach" type="primary" @click="refresh">查询</a-button>
+            <a-button class="handle-btn" type="" id="releaseRecordList-btn-reset" @click="handleReset">重置</a-button>
+            <a-button
+              class="export-btn"
+              id="releaseRecordList-btn-export"
+              :loading="loading"
+              @click="handleExport"
+              v-hasPermission="'B_user_userManage_export'">导出</a-button>
+          </a-col>
+        </a-row>
+        <a-row :gutter="20">
           <a-col :span="5">
             <a-form-item label="账户状态" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
               <v-select
@@ -36,17 +70,8 @@
                 allowClear></v-select>
             </a-form-item>
           </a-col>
-          <a-col :span="4">
-            <a-button class="handle-btn serach-btn" id="releaseRecordList-btn-serach" type="primary" @click="refresh">查询</a-button>
-            <a-button class="handle-btn" type="" id="releaseRecordList-btn-reset" @click="handleReset">重置</a-button>
-            <a-button
-              class="export-btn"
-              id="releaseRecordList-btn-export"
-              :loading="loading"
-              @click="handleExport"
-              v-hasPermission="'B_user_userManage_export'">导出</a-button>
-          </a-col>
         </a-row>
+
       </a-form>
     </div>
     <s-table
@@ -98,12 +123,14 @@ export default {
     return {
       formItemLayout: {
         labelCol: {
-          span: 7
+          span: 8
         },
         wrapperCol: {
-          span: 17
+          span: 16
         }
       },
+      time: [],
+      dateFormat: 'YYYY-MM-DD',
       // 查询参数
       queryParam: {
         mobile: '', //  用户手机
@@ -217,8 +244,16 @@ export default {
     })
   },
   methods: {
-	  onChange () {
-
+	  // 不可选日期
+	  disabledDate (date, dateStrings) {
+	    return date && date.valueOf() > Date.now()
+	  },
+	  // 创建时间change
+	  onChange (dates, dateStrings) {
+	    if ((dates, dateStrings)) {
+	      this.queryParam.beginDate = dateStrings[0]
+	      this.queryParam.endDate = dateStrings[1]
+	    }
 	  },
     refresh () {
       const isONull = this.queryParam.currentGoldMin === null