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