|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="main_app"> | 
|---|
|  |  |  | <QueryForm | 
|---|
|  |  |  | <QueryForm | 
|---|
|  |  |  | v-model="filters" | 
|---|
|  |  |  | :query-form-config="queryFormConfig" | 
|---|
|  |  |  | @handleQuery="getList(1)" | 
|---|
|  |  |  | @clear="clear" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | @changeForm='changeForm' | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #fastdate> | 
|---|
|  |  |  | <el-radio-group | 
|---|
|  |  |  | v-model="filters.fastdate" | 
|---|
|  |  |  | size="small" | 
|---|
|  |  |  | @input="changeRadio" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-radio-button label="0">当天</el-radio-button> | 
|---|
|  |  |  | <el-radio-button label="6">近7天</el-radio-button> | 
|---|
|  |  |  | <el-radio-button label="29">近30天</el-radio-button> | 
|---|
|  |  |  | </el-radio-group> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </QueryForm> | 
|---|
|  |  |  | <el-table v-loading="loading" :data="list" stripe> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="name" | 
|---|
|  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import Pagination from '@/components/common/Pagination' | 
|---|
|  |  |  | import QueryForm from '@/components/common/QueryForm' | 
|---|
|  |  |  | import dayjs from 'dayjs' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | components: { | 
|---|
|  |  |  | Pagination, | 
|---|
|  |  |  | QueryForm | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | loading: false, | 
|---|
|  |  |  | pagination: { | 
|---|
|  |  |  | capacity: 10, | 
|---|
|  |  |  | page: 1 | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | filters: {}, | 
|---|
|  |  |  | filters: { | 
|---|
|  |  |  | fastdate: '0' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | list: [], | 
|---|
|  |  |  | total: 0, | 
|---|
|  |  |  | queryFormConfig: { | 
|---|
|  |  |  | 
|---|
|  |  |  | options: [] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | filed: 'selDate', | 
|---|
|  |  |  | type: 'daterange', | 
|---|
|  |  |  | label: '日期' | 
|---|
|  |  |  | filed: 'selTime', | 
|---|
|  |  |  | type: 'datetimerange', | 
|---|
|  |  |  | label: '起止时间' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | type: 'slot', | 
|---|
|  |  |  | filed: 'fastdate', | 
|---|
|  |  |  | label: '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | online: true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | this.changeRadio('0') | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | handleSub() { | 
|---|
|  |  |  | changeRadio (day) { | 
|---|
|  |  |  | const arr = [dayjs().subtract(day, 'day').format('YYYY-MM-DD') + ' 00:00:00', dayjs().format('YYYY-MM-DD') + ' 23:59:59'] | 
|---|
|  |  |  | this.$set(this.filters, 'selTime', arr) | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | changeForm (str) { | 
|---|
|  |  |  | if (str === 'selTime') { | 
|---|
|  |  |  | this.$set(this.filters, 'fastdate', null) | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleSub () { | 
|---|
|  |  |  | this.$refs.ruleForm.validate((valid) => { | 
|---|
|  |  |  | if (valid) { | 
|---|
|  |  |  | alert('submit!') | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getList(page) { }, | 
|---|
|  |  |  | clear() { }, | 
|---|
|  |  |  | handleSizeChange(capacity) { | 
|---|
|  |  |  | getList (page) { }, | 
|---|
|  |  |  | clear () { | 
|---|
|  |  |  | this.filters = { fastdate: '0' } | 
|---|
|  |  |  | this.getList(1) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleSizeChange (capacity) { | 
|---|
|  |  |  | this.pagination.capacity = capacity | 
|---|
|  |  |  | this.getList(1) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|