<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 
 | 
      this.getList(1) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style></style> 
 |