| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <TableLayout :permissions="['business:wxbill:query']"> |
| | | <!-- æç´¢è¡¨å --> |
| | | <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> |
| | | <el-form-item label="å¯¹è´¦æ¥æ" prop="name"> |
| | | <el-date-picker |
| | | v-model="value1" |
| | | type="daterange" |
| | | range-separator="è³" |
| | | start-placeholder="å¼å§æ¥æ" |
| | | end-placeholder="ç»ææ¥æ" |
| | | :picker-options="pickerOptions" |
| | | format="yyyy-MM-dd" value-format="yyyy-MM-dd HH:mm:ss" |
| | | @change="selectDate" |
| | | ></el-date-picker> |
| | | </el-form-item> |
| | | <section> |
| | | <el-button type="primary" @click="search">æç´¢</el-button> |
| | | <el-button @click="reset">éç½®</el-button> |
| | | <el-button type="primary" @click="daochu">导åº</el-button> |
| | | </section> |
| | | </el-form> |
| | | <!-- è¡¨æ ¼åå页 --> |
| | | <template v-slot:table-wrap> |
| | | <el-table |
| | | v-loading="isWorking.search" |
| | | :data="list" |
| | | stripe |
| | | border |
| | | > |
| | | <el-table-column :prop="item" :label="item" align="center" v-for="(item, index) in column" :key="index"></el-table-column> |
| | | </el-table> |
| | | </template> |
| | | </TableLayout> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseTable from '@/components/base/BaseTable' |
| | | import TableLayout from '@/layouts/TableLayout' |
| | | import Pagination from '@/components/common/Pagination' |
| | | import { getBikeIncomeReportVOList, bikeIncomeExportExcel } from '@/api/business/goodsorder' |
| | | export default { |
| | | name: 'analysis', |
| | | extends: BaseTable, |
| | | components: { TableLayout, Pagination }, |
| | | data () { |
| | | return { |
| | | value1: [], |
| | | list: [], |
| | | column: [], |
| | | // æç´¢ |
| | | searchForm: { |
| | | endDate: '', |
| | | startDate: '' |
| | | }, |
| | | sumData: { |
| | | }, |
| | | pickerOptions: {} |
| | | } |
| | | }, |
| | | created () { |
| | | this.config({ |
| | | module: '', |
| | | api: '/business/wxBill', |
| | | 'field.id': 'id', |
| | | 'field.main': 'id' |
| | | }) |
| | | this.pickerOptions.disabledDate = (time) => { |
| | | // ä¸å¤© |
| | | const tempTime = 3600 * 1000 * 24 |
| | | return time.getTime() > new Date() - tempTime |
| | | } |
| | | const yesterday = new Date(); |
| | | yesterday.setDate(yesterday.getDate() - 1); |
| | | const startDate = new Date(yesterday); |
| | | startDate.setDate(startDate.getDate() - 30); |
| | | this.searchForm.startDate = startDate.toISOString().split('T')[0] + ' 00:00:00' |
| | | this.searchForm.endDate = yesterday.toISOString().split('T')[0] + ' 00:00:00' |
| | | this.value1 = [this.searchForm.startDate, this.searchForm.endDate] |
| | | this.search() |
| | | }, |
| | | methods: { |
| | | search() { |
| | | getBikeIncomeReportVOList({ |
| | | startDate: this.searchForm.startDate, |
| | | endDate: this.searchForm.endDate |
| | | }).then(res => { |
| | | this.column = res.map(item => item[0]) |
| | | |
| | | const keys = res.map(row => row[0]); // è·åé®å |
| | | const values = res.map(row => row.slice(1, row.length)); // è·åå¼ |
| | | |
| | | this.list = values[0].map((_, index) => { |
| | | return keys.reduce((obj, key, i) => { |
| | | obj[key] = values[i][index]; |
| | | return obj; |
| | | }, {}); |
| | | }); |
| | | }) |
| | | }, |
| | | daochu() { |
| | | bikeIncomeExportExcel({ |
| | | startDate: this.searchForm.startDate, |
| | | endDate: this.searchForm.endDate |
| | | }).then(res => { |
| | | this.download(res) |
| | | console.log(res.data) |
| | | }) |
| | | }, |
| | | reset () { |
| | | const yesterday = new Date(); |
| | | yesterday.setDate(yesterday.getDate() - 1); |
| | | const startDate = new Date(yesterday); |
| | | startDate.setDate(startDate.getDate() - 30); |
| | | this.searchForm.startDate = startDate.toISOString().split('T')[0] + ' 00:00:00' |
| | | this.searchForm.endDate = yesterday.toISOString().split('T')[0] + ' 00:00:00' |
| | | this.value1 = [this.searchForm.startDate, this.searchForm.endDate] |
| | | this.search() |
| | | }, |
| | | getDays(startDate, endDate) { |
| | | const date1 = new Date(startDate); // 第ä¸ä¸ªæ¥æ |
| | | const date2 = new Date(endDate); // 第äºä¸ªæ¥æ |
| | | |
| | | const timeDifference = date2 - date1; |
| | | |
| | | return timeDifference / (1000 * 3600 * 24); |
| | | }, |
| | | selectDate (v) { |
| | | // this.searchForm.startDate = '' |
| | | // this.searchForm.endDate = '' |
| | | if (v) { |
| | | if (this.getDays(v[0], v[1]) > 30) { |
| | | this.$message.warning('æå¤åªè½éæ©30天') |
| | | const yesterday = new Date(); |
| | | yesterday.setDate(yesterday.getDate() - 1); |
| | | const startDate = new Date(yesterday); |
| | | startDate.setDate(startDate.getDate() - 30); |
| | | this.searchForm.startDate = startDate.toISOString().split('T')[0] + ' 00:00:00' |
| | | this.searchForm.endDate = yesterday.toISOString().split('T')[0] + ' 00:00:00' |
| | | this.value1 = [this.searchForm.startDate, this.searchForm.endDate] |
| | | } else { |
| | | this.searchForm.startDate = v[0] |
| | | this.searchForm.endDate = v[1] |
| | | } |
| | | } |
| | | this.search() |
| | | }, |
| | | // 页ç åæ´å¤ç |
| | | handlePageChange (pageIndex) { |
| | | this.__checkApi() |
| | | this.tableData.pagination.pageIndex = pageIndex || this.tableData.pagination.pageIndex |
| | | this.isWorking.search = true |
| | | this.api.fetchList({ |
| | | page: this.tableData.pagination.pageIndex, |
| | | capacity: this.tableData.pagination.pageSize, |
| | | model: this.searchForm, |
| | | sorts: this.tableData.sorts |
| | | }) |
| | | .then(data => { |
| | | this.tableData.list = data.records |
| | | this.tableData.pagination.total = data.total |
| | | this.sumData = data.extData |
| | | }) |
| | | .catch(e => { |
| | | this.$tip.apiFailed(e) |
| | | }) |
| | | .finally(() => { |
| | | this.isWorking.search = false |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | ::v-deep .el-table tbody tr:last-child { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | background-color: #f3f3fb; |
| | | } |
| | | .sum { |
| | | display: flex; |
| | | font-size: 16px; |
| | | margin-bottom: 10px; |
| | | background-color: rgb(243, 243, 251); |
| | | .sum-title { |
| | | flex-shrink: 0; |
| | | background-color: rgb(111, 129, 198); |
| | | color: #fff; |
| | | font-weight: 500; |
| | | text-align: center; |
| | | padding: 15px; |
| | | } |
| | | .sum-value { |
| | | padding: 15px 30px; |
| | | :first-child { |
| | | font-size: 14px; |
| | | } |
| | | :last-child { |
| | | font-weight: 600; |
| | | } |
| | | } |
| | | } |
| | | </style> |