<template> 
 | 
  <div class="main_app"> 
 | 
    <QueryForm 
 | 
      v-model="filters" 
 | 
      :query-form-config="queryFormConfig" 
 | 
      @handleQuery="getList(1)" 
 | 
      @clear="clear" 
 | 
    /> 
 | 
    <div class="table_btns"> 
 | 
      <el-button icon="el-icon-plus" @click="handleEdit()" type="primary" 
 | 
        >新建</el-button 
 | 
      > 
 | 
      <el-button @click="handleAppr" type="primary">下发授权</el-button> 
 | 
    </div> 
 | 
    <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="80" 
 | 
        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 label="操作" width="230" fixed="right"> 
 | 
        <!-- v-permissions="['business:company:update']" --> 
 | 
        <template slot-scope="{ row }"> 
 | 
          <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)" 
 | 
            >编辑</el-button 
 | 
          > 
 | 
          <el-button 
 | 
            type="text" 
 | 
            icon="el-icon-delete" 
 | 
            @click="handleDel(row)" 
 | 
            class="red" 
 | 
            >删除</el-button 
 | 
          > 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <pagination 
 | 
      @size-change="handleSizeChange" 
 | 
      @current-change="getList" 
 | 
      :pagination="pagination" 
 | 
    /> 
 | 
    <!--  --> 
 | 
    <el-dialog 
 | 
      :title="param.id ? '编辑车辆' : '新增车辆'" 
 | 
      :visible.sync="isShowEdit" 
 | 
      width="600px" 
 | 
    > 
 | 
      <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px"> 
 | 
        <el-form-item label="车牌照"> 
 | 
          <el-input type="text" placeholder="请输入" v-model="param.explain" /> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="车辆类型"> 
 | 
          <el-radio v-model="param.aa" label="1">员工车辆</el-radio> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="车主姓名"> 
 | 
          <el-select 
 | 
            v-model="param.b" 
 | 
            filterable 
 | 
            placeholder="请选择,单选,支持搜索" 
 | 
          > 
 | 
            <el-option></el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
      <span slot="footer" class="dialog-footer"> 
 | 
        <el-button @click="isShowEdit = false">取消</el-button> 
 | 
        <el-button type="primary" @click="handleSub">确定</el-button> 
 | 
      </span> 
 | 
    </el-dialog> 
 | 
    <!--  --> 
 | 
    <el-dialog title="停车场授权" :visible.sync="isShowAuthor" width="600px"> 
 | 
      <el-form 
 | 
        :model="authorization" 
 | 
        :rules="rules" 
 | 
        ref="authorForm" 
 | 
        label-width="100px" 
 | 
      > 
 | 
        <el-form-item label="授权停车场"> 
 | 
          <el-select 
 | 
            v-model="authorization.b" 
 | 
            filterable 
 | 
            placeholder="请选择,多选" 
 | 
          > 
 | 
            <el-option></el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="申请有效期"> 
 | 
          <el-radio v-model="authorization.aa" label="1">长期有效</el-radio> 
 | 
          <div class="mt10"> 
 | 
            <el-date-picker 
 | 
              v-model="authorization.ac" 
 | 
              type="daterange" 
 | 
              range-separator="至" 
 | 
              start-placeholder="开始日期" 
 | 
              format="yyyy-MM-dd HH:mm:ss" 
 | 
              value-format="yyyy-MM-dd HH:mm:ss" 
 | 
              end-placeholder="结束日期" 
 | 
            > 
 | 
            </el-date-picker> 
 | 
          </div> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
      <span slot="footer" class="dialog-footer"> 
 | 
        <el-button @click="isShowAuthor = false">取消</el-button> 
 | 
        <el-button type="primary" @click="authorSub">提交</el-button> 
 | 
      </span> 
 | 
    </el-dialog> 
 | 
  </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: [] 
 | 
          } 
 | 
        ], 
 | 
        online: true 
 | 
      }, 
 | 
      pagination: { 
 | 
        capacity: 10, 
 | 
        page: 1 
 | 
      }, 
 | 
      list: [{}], 
 | 
      total: 0, 
 | 
  
 | 
      isShowEdit: false, 
 | 
      param: {}, 
 | 
      isShowAuthor: false, 
 | 
      authorization: {}, 
 | 
      rules: {} 
 | 
    } 
 | 
  }, 
 | 
  methods: { 
 | 
    handleSub () { 
 | 
      this.$refs.ruleForm.validate((valid) => { 
 | 
        if (valid) { 
 | 
          alert('submit!') 
 | 
        } 
 | 
      }) 
 | 
    }, 
 | 
    authorSub () {}, 
 | 
    handleEdit (row) { 
 | 
      this.isShowEdit = true 
 | 
    }, 
 | 
    handleAppr () { 
 | 
      this.isShowAuthor = true 
 | 
    }, 
 | 
    handleDel (row) { 
 | 
      this.$confirm('确认删除该车辆', '提示', { 
 | 
        confirmButtonText: '确定', 
 | 
        cancelButtonText: '取消', 
 | 
        type: 'warning' 
 | 
      }).then(() => { 
 | 
  
 | 
      }) 
 | 
    }, 
 | 
    getList (page) { }, 
 | 
    clear () { }, 
 | 
    handleSizeChange (capacity) { 
 | 
      this.pagination.capacity = capacity 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style> 
 | 
</style> 
 |