rubbishDeliverySearchTime.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <template>
  2. <a-card :bordered="false" class="shopOrder-table-page-search-wrapper">
  3. <div class="shopOrder-searchForm">
  4. <a-form layout="inline" @keyup.enter.native="refresh">
  5. <a-row :gutter="20">
  6. <a-col :span="8">
  7. <a-form-item label="投递时间:" :label-col="{ span: 5 }" :wrapper-col="{ span: 19}">
  8. <a-range-picker
  9. id="network-time"
  10. v-model="time"
  11. style="width: 100%;"
  12. :format="dateFormat"
  13. :showTime="{ format: 'HH'}"
  14. :placeholder="['开始时间','结束时间']"
  15. :disabledDate="disabledDate"
  16. @change="onChange" />
  17. </a-form-item>
  18. </a-col>
  19. <a-col :span="6">
  20. <a-form-item label="网点名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  21. <a-select
  22. id="releaseRecordList-stationNo"
  23. placeholder="请选择网点名称"
  24. allowClear
  25. v-model="queryParam.stationNo"
  26. :showSearch="true"
  27. option-filter-prop="children"
  28. :filter-option="filterOption"
  29. >
  30. <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
  31. </a-select>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :span="6">
  35. <a-button
  36. class="serach-btn"
  37. type="primary"
  38. id="releaseRecordList-refresh"
  39. @click="refresh">查询</a-button>
  40. <a-button class="serach-btn" id="releaseRecordList-handleReset" @click="handleReset">重置</a-button>
  41. <a-button class="export-btn" id="releaseRecordList-export" v-hasPermission="'B_rubbishSearchTime_export'" :loading="loading" @click="handleExport">导出</a-button>
  42. </a-col>
  43. </a-row>
  44. </a-form>
  45. </div>
  46. <!-- 合计 -->
  47. <a-alert type="info" showIcon style="margin-bottom:15px">
  48. <div class="ftext" slot="message">总计<span> {{ totalNum }} </span>条,可回收垃圾总计<span> {{ recyclTotal }} </span>千克,有害垃圾总计<span> {{ harmTotal }} </span>千克</div>
  49. </a-alert>
  50. <s-table
  51. ref="table"
  52. size="default"
  53. :rowKey="(record) => record.id"
  54. :columns="columns"
  55. :data="loadData"
  56. bordered>
  57. </s-table>
  58. </a-card>
  59. </template>
  60. <script>
  61. import { STable, VSelect } from '@/components'
  62. import {
  63. stationList
  64. } from '@/api/releaseRecord.js'
  65. import { getPutInTimeList, exportTnTimeForm, getDetailTotal } from '@/api/reportForm.js'
  66. import moment from 'moment'
  67. import getDate from '@/libs/getDate.js'
  68. export default {
  69. components: { STable, VSelect },
  70. data () {
  71. return {
  72. loading: false,
  73. form: this.$form.createForm(this),
  74. formItemLayout: {
  75. labelCol: { span: 4 },
  76. wrapperCol: { span: 16 }
  77. },
  78. // 将默认近七天时间日期回显在时间选择框中
  79. time: [
  80. moment(getDate.getRecentday().starttime, 'YYYY-MM-DD HH'),
  81. moment(getDate.getRecentday().endtime, 'YYYY-MM-DD HH')
  82. ],
  83. dateFormat: 'YYYY-MM-DD HH',
  84. // 查询参数
  85. queryParam: {
  86. beginDate: null, // 开始时间
  87. endDate: null, // 结束时间
  88. stationNo: undefined // 网点名称
  89. },
  90. optionData: [],
  91. totalNum: 0, // 总条数
  92. recyclTotal: 0, // 可回收总计
  93. harmTotal: 0, // 有害垃圾总计
  94. // 表头
  95. columns: [
  96. { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
  97. { title: '投递时间', dataIndex: 'putInDate', width: 100, align: 'center' },
  98. { title: '可回收垃圾投递量(kg)',
  99. children: [
  100. { title: '废旧衣物', width: 100, align: 'center', dataIndex: 'clothesWeight', customRender: (text) => { return text || 0 } },
  101. { title: '废旧纸张', width: 100, align: 'center', dataIndex: 'paperWeight', customRender: (text) => { return text || 0 } },
  102. { title: '废旧塑料', width: 100, align: 'center', dataIndex: 'plasticWeight', customRender: (text) => { return text || 0 } },
  103. { title: '废旧金属', width: 100, align: 'center', dataIndex: 'metalWeight', customRender: (text) => { return text || 0 } },
  104. { title: '废旧金属/塑料', width: 100, align: 'center', dataIndex: 'plasticOrMetalWeight', customRender: (text) => { return text || 0 } },
  105. { title: '废旧玻璃', width: 100, align: 'center', dataIndex: 'glassWeight', customRender: (text) => { return text || 0 } },
  106. { title: '可回收物', width: 100, align: 'center', dataIndex: 'recyclingWeight', customRender: (text) => { return text || 0 } }
  107. ]
  108. },
  109. { title: '可回收垃圾小计(kg)', dataIndex: 'recyclTotalWeight', width: 100, align: 'center' },
  110. { title: '有害垃圾(kg)', dataIndex: 'harmWeight', width: 100, align: 'center' }
  111. ],
  112. // 加载数据方法 必须为 Promise 对象
  113. loadData: parameter => {
  114. const searchData = Object.assign(parameter, this.queryParam)
  115. if (this.time && this.time.length) {
  116. searchData.beginDate = moment(this.time[0])
  117. searchData.endDate = moment(this.time[1])
  118. } else {
  119. searchData.beginDate = ''
  120. searchData.endDate = ''
  121. }
  122. return getPutInTimeList(searchData).then(res => {
  123. if (res.status == 200) {
  124. const no = (res.data.pageNo - 1) * res.data.pageSize
  125. for (let i = 0; i < res.data.list.length; i++) {
  126. const _item = res.data.list[i]
  127. _item.no = no + i + 1
  128. }
  129. this.totalNum = res.data.count
  130. this.getListTotal()
  131. return res.data
  132. } else {
  133. this.totalNum = 0
  134. }
  135. })
  136. }
  137. }
  138. },
  139. beforeRouteEnter (to, from, next) {
  140. next(vm => {
  141. vm.time = [
  142. moment(getDate.getRecentday().starttime, 'YYYY-MM-DD HH'),
  143. moment(getDate.getRecentday().endtime, 'YYYY-MM-DD HH')
  144. ]
  145. vm.queryParam.stationNo = undefined
  146. vm.getStationList()
  147. })
  148. },
  149. methods: {
  150. // 不可选日期
  151. disabledDate (date, dateStrings) {
  152. return date && date.valueOf() > Date.now()
  153. },
  154. // 创建时间change
  155. onChange (dates, dateStrings) {
  156. if ((dates, dateStrings)) {
  157. this.queryParam.beginDate = dateStrings[0]
  158. this.queryParam.endDate = dateStrings[1]
  159. }
  160. },
  161. filterOption (input, option) {
  162. return (
  163. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  164. )
  165. },
  166. // 导出
  167. handleExport () {
  168. const params = this.queryParam
  169. if (this.time && this.time.length) {
  170. params.beginDate = moment(this.time[0])
  171. params.endDate = moment(this.time[1])
  172. } else {
  173. params.beginDate = ''
  174. params.endDate = ''
  175. }
  176. if (!params.beginDate && !params.endDate) {
  177. this.$message.error('请先选择需要导出的投放时间区间再进行导出!')
  178. return
  179. }
  180. // 判断两个时间段是否相差m个月 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
  181. if (moment(params.endDate).diff(moment(params.beginDate), 'months', true) > 3) {
  182. this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
  183. return
  184. }
  185. this.$confirm({
  186. title: '提示',
  187. content: '导出过程可能需要一些时间,且导出期间不能进行其它操作,确定要导出吗?',
  188. onOk: () => {
  189. this.loading = true
  190. exportTnTimeForm(params).then(res => {
  191. this.loading = false
  192. this.download(res)
  193. })
  194. },
  195. onCancel () {
  196. console.log('Cancel')
  197. }
  198. })
  199. },
  200. download (data) {
  201. if (!data) { return }
  202. const url = window.URL.createObjectURL(new Blob([data]))
  203. const link = document.createElement('a')
  204. link.style.display = 'none'
  205. link.href = url
  206. const a = moment(this.queryParam.beginDate).format('LL') + '-' + moment(this.queryParam.endDate).format('LL')
  207. console.log(a)
  208. const name = this.queryParam.stationNo ? this.optionData.find(item => item.stationNo == this.queryParam.stationNo).name : ''
  209. const fname = a + '分时投递统计表' + (name ? '(' + name + ')' : '')
  210. link.setAttribute('download', fname + '.xlsx')
  211. document.body.appendChild(link)
  212. link.click()
  213. },
  214. // 查询
  215. refresh () {
  216. this.$refs.table.refresh(true)
  217. },
  218. // 获取合作商数据
  219. getStationList () {
  220. stationList().then(res => {
  221. if (res.status == 200) {
  222. this.optionData = res.data || []
  223. }
  224. })
  225. },
  226. // 合计
  227. getListTotal () {
  228. const params = {
  229. beginDate: this.queryParam.beginDate,
  230. endDate: this.queryParam.endDate,
  231. stationNo: this.queryParam.stationNo // 网点名称
  232. }
  233. if (this.time && this.time.length) {
  234. params.beginDate = moment(this.time[0])
  235. params.endDate = moment(this.time[1])
  236. } else {
  237. params.beginDate = ''
  238. params.endDate = ''
  239. }
  240. getDetailTotal(params).then(res => {
  241. if (res.status == 200) {
  242. if (res.data) {
  243. this.recyclTotal = res.data.recyclAll || 0
  244. this.harmTotal = res.data.harmAll || 0
  245. } else {
  246. this.recyclTotal = 0
  247. this.harmTotal = 0
  248. }
  249. }
  250. })
  251. },
  252. // 重置
  253. handleReset () {
  254. this.time = [
  255. moment(getDate.getRecentday().starttime, 'YYYY-MM-DD HH'),
  256. moment(getDate.getRecentday().endtime, 'YYYY-MM-DD HH')
  257. ]
  258. this.queryParam.stationNo = undefined
  259. this.$refs.table.refresh(true)
  260. }
  261. }
  262. }
  263. </script>
  264. <style lang="less" scoped>
  265. .shopOrder-table-page-search-wrapper{
  266. .shopOrder-searchForm{
  267. .ant-form-inline .ant-form-item{
  268. width: 100%;
  269. }
  270. // 搜索框的下间距
  271. .ant-form-item {
  272. margin-bottom: 10px;
  273. }
  274. // .handle-btn{
  275. // margin-bottom: 15px;
  276. // }
  277. .serach-btn{
  278. margin-right: 10px;
  279. margin-top: 4px;
  280. }
  281. }
  282. .export-btn{
  283. background-color: #ff9900;
  284. border-color: #ff9900;
  285. color: #fff;
  286. }
  287. .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){
  288. color: #fff;
  289. border-color: #ff9900;
  290. }
  291. .actionBtn {
  292. font-size: 20px;
  293. padding: 0 10px;
  294. }
  295. .blue {
  296. color: #1890FF;
  297. }
  298. .green {
  299. color: #16b50e;
  300. }
  301. .red {
  302. color: red;
  303. }
  304. }
  305. </style>