| <template> | 
|   <TableLayout :permissions="['business:member:query']"> | 
|     <!-- 搜索表单 --> | 
|     <div ref="QueryFormRef" slot="search-form"> | 
|       <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> | 
|         <el-form-item label="" prop="code" title="车牌号"> | 
|           <el-input v-model="searchForm.code" clearable placeholder="车牌号" @keypress.enter.native="search"></el-input> | 
|         </el-form-item> | 
|         <el-form-item label="" prop="memberName" title="车主信息"> | 
|           <el-input v-model="searchForm.memberName" clearable placeholder="车主信息" | 
|             @keypress.enter.native="search"></el-input> | 
|         </el-form-item> | 
|         <el-form-item label="" prop="catePName" title="分类名称"> | 
|           <el-cascader v-model="searchForm.cateIds" @change="changeSel" placeholder="请选择分类" clearable | 
|             :options="cateList" :props="{ | 
|               label: 'name', | 
|               value: 'id', | 
|               children: 'childCategoryList', | 
|               checkStrictly: true | 
|             }"></el-cascader> | 
|         </el-form-item> | 
|         <el-form-item label="" prop="companyName" title="车主组织名称"> | 
|           <el-input v-model="searchForm.companyName" clearable placeholder="车主组织名称" | 
|             @keypress.enter.native="search"></el-input> | 
|         </el-form-item> | 
|         <el-form-item label="" prop="authStatus" title="是否授权"> | 
|           <el-select v-model="searchForm.authStatus" @change="search" clearable placeholder="是否授权"> | 
|             <el-option label="已授权" value="1"></el-option> | 
|             <el-option label="未授权" value="0"></el-option> | 
|           </el-select> | 
|         </el-form-item> | 
| <!--        <el-form-item label="" prop="type" title="业务类型"> | 
|           <el-select v-model="searchForm.type" @change="search" clearable placeholder="备注"> | 
|             <el-option label="安泰公务车" value="0"></el-option> | 
|             <el-option label="安泰自有物流车" value="1"></el-option> | 
|             <el-option label="其他" value="2"></el-option> | 
|           </el-select> | 
|         </el-form-item>--> | 
|         <section> | 
|           <el-button type="primary" @click="search">搜索</el-button> | 
|           <el-button @click="reset">重置</el-button> | 
|         </section> | 
|       </el-form> | 
|     </div> | 
|   | 
|     <!-- 表格和分页 --> | 
|     <template v-slot:table-wrap> | 
|       <ul class="toolbar" | 
|         v-permissions="['business:cars:create', 'business:cars:exportExcel', 'business:parkBook:create']"> | 
|         <li><el-button type="primary" @click="handleEdit" icon="el-icon-plus" | 
|             v-permissions="['business:cars:create']">新建</el-button></li> | 
|         <li><el-button type="primary" @click="$refs.OperaCarsImportWindowRef.open('车辆导入', searchForm.companyType)" | 
|             v-permissions="['business:cars:create']">车辆导入</el-button> | 
|         </li> | 
|         <li><el-button type="primary" @click="exportExcel" v-permissions="['business:cars:exportExcel']">导出</el-button> | 
|         </li> | 
|         <li><el-button type="primary" @click="startEmpowerBatch" icon="el-icon-plus" | 
|             v-permissions="['business:parkbook:create']">下发授权</el-button></li> | 
|       </ul> | 
|       <el-table :height="tableHeightNew" v-loading="isWorking.search" :data="tableData.list" stripe | 
|         @selection-change="handleSelectionChange"> | 
|         <el-table-column type="selection" width="55"></el-table-column> | 
|         <el-table-column prop="code" label="车牌号" fixed="left" min-width="100px"></el-table-column> | 
|         <el-table-column prop="memberName" label="车主姓名" min-width="100px"></el-table-column> | 
|         <el-table-column prop="memberPhone" label="车主手机号" min-width="100px"></el-table-column> | 
|         <el-table-column prop="catePName" label="一级分类" min-width="120px"></el-table-column> | 
|         <el-table-column prop="cateName" label="二级分类" min-width="120px"></el-table-column> | 
|         <el-table-column prop="companyName" label="车主组织" min-width="200px"></el-table-column> | 
|         <el-table-column label="是否授权" align="center" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             <span v-if="row.authStatus == 1" style="color: green">是</span> | 
|             <span v-else style="color: red">否</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="parksName" align="center" label="已授权停车场" min-width="200px"> | 
|           <template slot-scope="{row}"> | 
|             <div v-if="row.parkBookList && row.parkBookList.length"> | 
|               <span v-for="item in row.parkBookList" :key="item.id" style="display: block"> | 
|                 <span | 
|                   :style="(item.hkStatus == 0 ? 'color:#2080f7' : (item.hkStatus == 1 ? 'color:green' : (item.hkStatus == 2 ? 'color:red' : '')))">【{{ | 
|                     item.hkStatus == | 
|                       0 ? '等待下发' : (item.hkStatus == 1 ? '下发成功' : (item.hkStatus == 2 ? '下发失败' : '')) }}】 </span>{{ | 
|                     item.parksName }} | 
|               </span> | 
|             </div> | 
|             <span v-if="row.parkBookList == null || row.parkBookList.length == 0">-</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="下发有效期" align="center" min-width="170px"> | 
|           <template slot-scope="{row}"> | 
|             <div | 
|               v-if="row.authStatus != null && row.authStatus == 1 && row.parkBookList != null && row.parkBookList.length > 0"> | 
|               <div v-if="!row.startTime || !row.endTime">长期有效</div> | 
|               <div v-else> | 
|                 <span style="color: green">起:{{ row.startTime }}</span><br /> | 
|                 <span style="color: red">止:{{ row.endTime }}</span> | 
|               </div> | 
|             </div> | 
|             <div v-else>-</div> | 
|           </template> | 
|         </el-table-column> | 
| <!--        <el-table-column label="备注" min-width="120px"> | 
|           <template slot-scope="{row}"> | 
|             <span v-if="row.type == 0">安泰公务车</span> | 
|             <span v-if="row.type == 1">安泰自有物流车</span> | 
|             <span v-if="row.type == 2">其他</span> | 
|           </template> | 
|         </el-table-column>--> | 
|         <el-table-column prop="editorName" label="操作人" min-width="100px"></el-table-column> | 
|         <el-table-column prop="editDate" label="操作时间" min-width="140px"></el-table-column> | 
|         <el-table-column | 
|           v-if="containPermissions(['business:member:update', 'business:member:delete', 'business:empower:create'])" | 
|           label="操作" min-width="200" align="center"> | 
|           <template slot-scope="{row}"> | 
|             <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)" | 
|               v-permissions="['business:cars:update']">编辑</el-button> | 
|             <el-button type="text" icon="el-icon-edit" | 
|               @click="$refs.operaCarAuthWindow.open('下发授权', [row.id], [row.code])" | 
|               v-permissions="['business:parkbook:create']">下发授权</el-button> | 
|             <el-button type="text" icon="el-icon-delete" @click="deleteById(row)" style="color: red" | 
|               v-permissions="['business:empower:delete']">删除</el-button> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|       <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> | 
|       </pagination> | 
|     </template> | 
|     <!-- 新建/修改 --> | 
|     <OperaCarAuthWindow ref="operaCarAuthWindow" @success="handlePageChange" /> | 
|     <OperaCarsImportWindow ref="OperaCarsImportWindowRef" @success="handlePageChange" /> | 
|     <OperaCarsWindow v-if="isShowEdit" ref="operaCarsWindow" @close="isShowEdit = false" @success="handlePageChange" /> | 
|   </TableLayout> | 
| </template> | 
|   | 
| <script> | 
| import BaseTable from '@/components/base/BaseTable' | 
| import TableLayout from '@/layouts/TableLayout' | 
| import Pagination from '@/components/common/Pagination' | 
| import OperaCarsWindow from '@/components/business/OperaCarsWindow' | 
| import OperaCarAuthWindow from '@/components/business/OperaCarAuthWindow' | 
| import OperaCarsImportWindow from './components/OperaCarsImportWindow' | 
| import { fetchList } from '@/api/business/category.js' | 
| export default { | 
|   name: 'Cars', | 
|   extends: BaseTable, | 
|   components: { TableLayout, Pagination, OperaCarsWindow, OperaCarAuthWindow, OperaCarsImportWindow }, | 
|   data() { | 
|     return { | 
|       // 搜索 | 
|       searchForm: { | 
|         code: '', | 
|         memberName: '', | 
|         companyName: '', | 
|         cateIds: [], | 
|         catePId: '', | 
|         cateId: '', | 
|         type: null, | 
|         authStatus: null, | 
|         ids: '' | 
|       }, | 
|       isShowEdit: false, | 
|       cateList: [], | 
|       selIdsList: [] | 
|     } | 
|   }, | 
|   created() { | 
|     this.config({ | 
|       module: '车辆信息表', | 
|       api: '/business/cars', | 
|       'field.id': 'id', | 
|       'field.main': 'id' | 
|     }) | 
|     this.search() | 
|     this.getCate() | 
|   }, | 
|   mounted() { | 
|     this.$nextTick(() => { | 
|       this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 300 | 
|     }) | 
|   }, | 
|   methods: { | 
|     // handleSelectionChange(e) { | 
|     //   this.searchForm.ids = e.map(i => i.id).join(',') | 
|     // }, | 
|     changeSel(e) { | 
|       console.log(e) | 
|       if (e && e.length == 1) { | 
|         this.$set(this.searchForm, 'catePId', e[0]) | 
|         this.$set(this.searchForm, 'cateId', '') | 
|       } else if (e && e.length == 2) { | 
|         this.$set(this.searchForm, 'catePId', e[0]) | 
|         this.$set(this.searchForm, 'cateId', e[1]) | 
|       } else { | 
|         this.$set(this.searchForm, 'catePId', '') | 
|         this.$set(this.searchForm, 'cateId', '') | 
|       } | 
|       this.search() | 
|     }, | 
|     getCate() { | 
|       fetchList({ | 
|         model: { type: 1 }, | 
|         capacity: 1000, | 
|         page: 1, | 
|       }).then(res => { | 
|         this.cateList = res.records || [] | 
|   | 
|       }) | 
|     }, | 
|     handleEdit(row) { | 
|       this.isShowEdit = true | 
|       let str = row && row.id ? '编辑车辆' : '新建车辆' | 
|       this.$nextTick(() => { | 
|         this.$refs.operaCarsWindow.open(str, row) | 
|         if (row && row.id) { | 
|           // let form = { ...row, cateId: [] } | 
|           let form = { ...row } | 
|           // if (row.catePId) { form.cateId.push(row.catePId) } | 
|           // if (row.cateId) { form.cateId.push(row.cateId) } | 
|           this.$refs.operaCarsWindow.form = form | 
|           this.$refs.operaCarsWindow.loadMember() | 
|         } | 
|       }) | 
|     }, | 
|     // 同步信息 | 
|     startEmpowerBatch() { | 
|       if (this.tableData.selectedRows.length === 0) { | 
|         this.$tip.warning('请至少选择一条数据') | 
|         return | 
|       } | 
|       var ids = [] | 
|       var codes = [] | 
|       this.tableData.selectedRows.forEach(item => { | 
|         ids.push(item.id) | 
|         codes.push(item.code) | 
|       }) | 
|       this.$refs.operaCarAuthWindow.open('车辆下发授权', ids, codes) | 
|     }, | 
|   } | 
| } | 
| </script> |