|  |  | 
 |  |  | <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() | 
 |  |  |     }, | 
 |  |  |     handleSizeChange (capacity) { | 
 |  |  |       this.pagination.capacity = capacity | 
 |  |  |     } | 
 |  |  |   } |