|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="main_app"> | 
 |  |  |     <QueryForm | 
 |  |  |       v-model="filters" | 
 |  |  |       :query-form-config="queryFormConfig" | 
 |  |  |       @handleQuery="getList(1)" | 
 |  |  |       @clear="clear" | 
 |  |  |     > | 
 |  |  |       <template #date> | 
 |  |  |         <el-radio-group v-model="filters.aa"> | 
 |  |  |           <el-radio-button label="">当天</el-radio-button> | 
 |  |  |           <el-radio-button label="北京">近7天</el-radio-button> | 
 |  |  |           <el-radio-button label="广州">近30天</el-radio-button> | 
 |  |  |         </el-radio-group> | 
 |  |  |       </template> | 
 |  |  |     </QueryForm> | 
 |  |  |     <el-table v-loading="loading" :data="list" stripe> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="车牌照" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="车辆类型" | 
 |  |  |         min-width="80" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="授权停车场" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="授权有效期" | 
 |  |  |         min-width="110" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="操作人" | 
 |  |  |         min-width="100" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="授权状态" | 
 |  |  |         min-width="80" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="最后操作时间" | 
 |  |  |         min-width="110" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |       <el-table-column | 
 |  |  |         prop="name" | 
 |  |  |         label="授权失败原因" | 
 |  |  |         min-width="110" | 
 |  |  |         show-overflow-tooltip | 
 |  |  |       /> | 
 |  |  |     </el-table> | 
 |  |  |     <pagination | 
 |  |  |       @size-change="handleSizeChange" | 
 |  |  |       @current-change="getList" | 
 |  |  |       :pagination="pagination" | 
 |  |  |     /> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import QueryForm from '@/components/common/QueryForm' | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     Pagination, | 
 |  |  |     QueryForm | 
 |  |  |   }, | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       filters: {}, | 
 |  |  |       loading: false, | 
 |  |  |       queryFormConfig: { | 
 |  |  |         formItems: [ | 
 |  |  |           { | 
 |  |  |             filed: 'idCard', | 
 |  |  |             type: 'input', | 
 |  |  |             label: '车牌照' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'name', | 
 |  |  |             type: 'select', | 
 |  |  |             label: '授权状态', | 
 |  |  |             options: [] | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'name', | 
 |  |  |             type: 'select', | 
 |  |  |             label: '车辆类型', | 
 |  |  |             options: [] | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'name', | 
 |  |  |             type: 'datetimerange', | 
 |  |  |             label: '下发时间', | 
 |  |  |             options: [] | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'date', | 
 |  |  |             type: 'slot', | 
 |  |  |             label: '' | 
 |  |  |           } | 
 |  |  |         ], | 
 |  |  |         online: true | 
 |  |  |       }, | 
 |  |  |       pagination: { | 
 |  |  |         capacity: 10, | 
 |  |  |         page: 1 | 
 |  |  |       }, | 
 |  |  |       list: [], | 
 |  |  |       total: 0 | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     getList (page) { }, | 
 |  |  |     clear () { }, | 
 |  |  |     handleSizeChange (capacity) { | 
 |  |  |       this.pagination.capacity = capacity | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style> | 
 |  |  | </style> |