|  |  | 
 |  |  | <template> | 
 |  |  |   <TableLayout :permissions="['business:empower:query']"> | 
 |  |  |     <!-- 搜索表单 --> | 
 |  |  |     <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> | 
 |  |  |     <el-form | 
 |  |  |       ref="searchForm" | 
 |  |  |       slot="search-form" | 
 |  |  |       :model="searchForm" | 
 |  |  |       label-width="100px" | 
 |  |  |       inline | 
 |  |  |     > | 
 |  |  |       <el-form-item label="申请人" prop="memberName"> | 
 |  |  |         <el-input v-model="searchForm.memberName" placeholder="请输入姓名/手机号" @keypress.enter.native="search"></el-input> | 
 |  |  |         <el-input | 
 |  |  |           v-model="searchForm.memberName" | 
 |  |  |           placeholder="请输入姓名/手机号" | 
 |  |  |           @keypress.enter.native="search" | 
 |  |  |         ></el-input> | 
 |  |  |       </el-form-item> | 
 |  |  |       <el-form-item label="申请人组织" prop="companyName"> | 
 |  |  |         <el-input v-model="searchForm.companyName" placeholder="请输入申请人组织" clearable @keypress.enter.native="search"></el-input> | 
 |  |  |         <el-input | 
 |  |  |           v-model="searchForm.companyName" | 
 |  |  |           placeholder="请输入申请人组织" | 
 |  |  |           clearable | 
 |  |  |           @keypress.enter.native="search" | 
 |  |  |         ></el-input> | 
 |  |  |       </el-form-item> | 
 |  |  |       <el-form-item label="车牌号" prop="carCode"> | 
 |  |  |         <el-input v-model="searchForm.carCode" placeholder="请输入车牌号" clearable @keypress.enter.native="search"></el-input> | 
 |  |  |         <el-input | 
 |  |  |           v-model="searchForm.carCode" | 
 |  |  |           placeholder="请输入车牌号" | 
 |  |  |           clearable | 
 |  |  |           @keypress.enter.native="search" | 
 |  |  |         ></el-input> | 
 |  |  |       </el-form-item> | 
 |  |  |       <el-form-item label="状态" prop="status"> | 
 |  |  |         <el-select v-model="searchForm.status"  @change="search" clearable placeholder="状态"> | 
 |  |  |         <el-select | 
 |  |  |           v-model="searchForm.status" | 
 |  |  |           @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> | 
 |  |  |       <el-form-item label="目的地类型" prop="type"> | 
 |  |  |         <el-select v-model="searchForm.type"  @change="search" clearable placeholder="目的地类型"> | 
 |  |  |         <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-select> | 
 |  |  |       </el-form-item> | 
 |  |  |       <el-form-item label="出发时间" prop="startTime"> | 
 |  |  |         <el-date-picker | 
 |  |  |             @change="seleTime" | 
 |  |  |             v-model="time" | 
 |  |  |             @keypress.enter.native="search" | 
 |  |  |             type="datetimerange" | 
 |  |  |             format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |             value-format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |             :default-time="['00:00:00', '23:59:59']" | 
 |  |  |             range-separator="至" | 
 |  |  |             start-placeholder="开始日期" | 
 |  |  |             end-placeholder="结束日期"> | 
 |  |  |           @change="seleTime" | 
 |  |  |           v-model="time" | 
 |  |  |           @keypress.enter.native="search" | 
 |  |  |           type="datetimerange" | 
 |  |  |           format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |           value-format="yyyy-MM-dd HH:mm:ss" | 
 |  |  |           :default-time="['00:00:00', '23:59:59']" | 
 |  |  |           range-separator="至" | 
 |  |  |           start-placeholder="开始日期" | 
 |  |  |           end-placeholder="结束日期" | 
 |  |  |         > | 
 |  |  |         </el-date-picker> | 
 |  |  |       </el-form-item> | 
 |  |  |       <el-radio-group v-model="searchForm.radio" size="small" @input="changeRadio"> | 
 |  |  |       <el-radio-group | 
 |  |  |         v-model="searchForm.radio" | 
 |  |  |         size="small" | 
 |  |  |         @input="changeRadio" | 
 |  |  |       > | 
 |  |  |         <el-radio-button label="0">当天</el-radio-button> | 
 |  |  |         <el-radio-button label="1">近7天</el-radio-button> | 
 |  |  |         <el-radio-button label="2">近30天</el-radio-button> | 
 |  |  | 
 |  |  |     </el-form> | 
 |  |  |     <!-- 表格和分页 --> | 
 |  |  |     <template v-slot:table-wrap> | 
 |  |  |       <ul class="toolbar" v-permissions="['business:carusebook:create','business:carusebook:exportExcel']"> | 
 |  |  |         <li><el-button type="primary" @click="handleEdit" icon="el-icon-plus" v-permissions="['business:carusebook:create']">新建</el-button></li> | 
 |  |  |         <li><el-button type="primary" @click="handleEx" v-permissions="['business:carusebook:exportExcel']">导出</el-button></li> | 
 |  |  |       <ul | 
 |  |  |         class="toolbar" | 
 |  |  |         v-permissions="[ | 
 |  |  |           'business:carusebook:create', | 
 |  |  |           'business:carusebook:exportExcel', | 
 |  |  |         ]" | 
 |  |  |       > | 
 |  |  |         <li> | 
 |  |  |           <el-button | 
 |  |  |             type="primary" | 
 |  |  |             @click="handleEdit" | 
 |  |  |             icon="el-icon-plus" | 
 |  |  |             v-permissions="['business:carusebook:create']" | 
 |  |  |             >新建</el-button | 
 |  |  |           > | 
 |  |  |         </li> | 
 |  |  |         <li> | 
 |  |  |           <el-button | 
 |  |  |             type="primary" | 
 |  |  |             @click="handleEx" | 
 |  |  |             v-permissions="['business:carusebook:exportExcel']" | 
 |  |  |             >导出</el-button | 
 |  |  |           > | 
 |  |  |         </li> | 
 |  |  |       </ul> | 
 |  |  |       <el-table | 
 |  |  |           v-loading="isWorking.search" | 
 |  |  |           :data="tableData.list" | 
 |  |  |           stripe | 
 |  |  |           @selection-change="handleSelectionChange" | 
 |  |  |         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="memberName" label="提报人" min-width="80px"></el-table-column> | 
 |  |  |         <el-table-column prop="companyName" label="所属组织" min-width="150px"></el-table-column> | 
 |  |  |         <el-table-column prop="carCode" label="车牌号" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |             prop="carCode" | 
 |  |  |             label="车牌号" | 
 |  |  |             min-width="100px" | 
 |  |  |         ></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           prop="memberName" | 
 |  |  |           label="提报人" | 
 |  |  |           min-width="80px" | 
 |  |  |         ></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |             prop="memberNames" | 
 |  |  |             label="乘车人" | 
 |  |  |             min-width="180px" | 
 |  |  |         ></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           prop="companyName" | 
 |  |  |           label="所属组织" | 
 |  |  |           min-width="150px" | 
 |  |  |         ></el-table-column> | 
 |  |  |         <el-table-column label="用车时间" min-width="170px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |                 <span>起:{{row.startTime || ''}}</span><br> | 
 |  |  |                 <span>止:{{row.endTime  || ''}}</span> | 
 |  |  |           <template slot-scope="{ row }"> | 
 |  |  |             <span v-if="row.startTime">起:{{ row.startTime.slice(0,16) }}</span | 
 |  |  |             ><br /> | 
 |  |  |             <span v-if="row.endTime">止:{{ row.endTime.slice(0,16) }}</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column prop="planUseDate" label="出发时间" min-width="150px"></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           prop="planUseDate" | 
 |  |  |           label="出发时间" | 
 |  |  |           min-width="150px" | 
 |  |  |         > | 
 |  |  |         <template slot-scope="{ row }"> | 
 |  |  |           <span v-if="row.planUseDate">{{ row.planUseDate.slice(0,16) }}</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |         <el-table-column label="目的地" min-width="200px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |           <template slot-scope="{ row }"> | 
 |  |  |             <span class="status-green" v-if="row.type === 0">【市内】</span> | 
 |  |  |             <span class="status-red"   v-if="row.type === 1">【市外】</span> | 
 |  |  |             <span >{{ row.addr }}</span> | 
 |  |  |             <span class="status-red" v-if="row.type === 1">【市外】</span> | 
 |  |  |             <span>{{ row.addr }}</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column label="状态" min-width="100px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <span class="status-blue"  v-if="row.status === 0">申请中</span> | 
 |  |  |             <span class="status-blue"  v-if="row.status === 1">审核中</span> | 
 |  |  |           <template slot-scope="{ row }"> | 
 |  |  |             <span class="status-blue" v-if="row.status === 0">申请中</span> | 
 |  |  |             <span class="status-blue" v-if="row.status === 1">审核中</span> | 
 |  |  |             <span class="status-green" v-if="row.status === 2">审批通过</span> | 
 |  |  |             <span class="status-red"   v-if="row.status === 3">审批不通过</span> | 
 |  |  |             <span class="status-red"   v-if="row.status === 4">已撤销</span> | 
 |  |  |             <span class="status-red" v-if="row.status === 3">审批不通过</span> | 
 |  |  |             <span class="status-red" v-if="row.status === 4">已撤销</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |  | 
 |  |  |         <el-table-column prop="createDate" label="申请时间" min-width="150px"></el-table-column> | 
 |  |  |         <el-table-column prop="editDate" label="操作时间" min-width="150px"></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |             label="操作" | 
 |  |  |             min-width="140" | 
 |  |  |             align="center" | 
 |  |  |             fixed="right" | 
 |  |  |           prop="createDate" | 
 |  |  |           label="申请时间" | 
 |  |  |           min-width="150px" | 
 |  |  |         ></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           prop="editDate" | 
 |  |  |           label="操作时间" | 
 |  |  |           min-width="150px" | 
 |  |  |         ></el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           label="操作" | 
 |  |  |           min-width="160" | 
 |  |  |           align="center" | 
 |  |  |           fixed="right" | 
 |  |  |         > | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <el-button type="text" icon="el-icon-edit" @click="$refs.OperaDetailsWindow.open('公务车申请详情',row)" >查看详情</el-button> | 
 |  |  |             <el-button v-if="(row.status === 1 || row.status === 2) && new Date().getTime() < new Date(row.startTime).getTime()" type="text" icon="el-icon-delete" @click="rowRevokeClick(row)" >撤销</el-button> | 
 |  |  |           <template slot-scope="{ row }"> | 
 |  |  |             <el-button | 
 |  |  |               type="text" | 
 |  |  |               icon="el-icon-edit" | 
 |  |  |               @click="$refs.OperaDetailsWindow.open('公务车申请详情', row)" | 
 |  |  |               >查看详情</el-button | 
 |  |  |             > | 
 |  |  |             <!-- <el-button v-if="(row.status === 1 || row.status === 2) && new Date().getTime() < new Date(row.startTime).getTime()" type="text" icon="el-icon-delete" @click="rowRevokeClick(row)" >撤销</el-button> --> | 
 |  |  |             <el-button | 
 |  |  |               v-if=" | 
 |  |  |                 (row.status === 0 || row.status === 1 || row.status === 2) && | 
 |  |  |                 new Date().getTime() < new Date(row.startTime).getTime() | 
 |  |  |               " | 
 |  |  |               type="text" | 
 |  |  |               icon="el-icon-delete" | 
 |  |  |               @click="rowRevokeClick(row)" | 
 |  |  |               >撤销</el-button | 
 |  |  |             > | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <pagination | 
 |  |  |           @size-change="handleSizeChange" | 
 |  |  |           @current-change="handlePageChange" | 
 |  |  |           :pagination="tableData.pagination" | 
 |  |  |         @size-change="handleSizeChange" | 
 |  |  |         @current-change="handlePageChange" | 
 |  |  |         :pagination="tableData.pagination" | 
 |  |  |       > | 
 |  |  |       </pagination> | 
 |  |  |     </template> | 
 |  |  |     <OperaCarUseBookWindow ref="OperaDetailsWindow" @success="handlePageChange"/> | 
 |  |  |     <OperaCarUseBookParamWindow ref="OperaParamWindow" @success="search"/> | 
 |  |  |     <!--  --> | 
 |  |  |     <el-dialog title="用车撤销" :visible.sync="isShowBack" width="520px"> | 
 |  |  |       <el-form | 
 |  |  |         :model="backParam" | 
 |  |  |         :rules="rules" | 
 |  |  |         ref="backForm" | 
 |  |  |         label-width="100px" | 
 |  |  |         class="demo-ruleForm" | 
 |  |  |       > | 
 |  |  |         <el-form-item label="说明" prop="info"> | 
 |  |  |           <el-input | 
 |  |  |             type="textarea" | 
 |  |  |             :rows="4" | 
 |  |  |             v-model="backParam.info" | 
 |  |  |             placeholder="请输入撤销说明" | 
 |  |  |           ></el-input> | 
 |  |  |         </el-form-item> | 
 |  |  |       </el-form> | 
 |  |  |       <span slot="footer" class="dialog-footer"> | 
 |  |  |         <el-button @click="isShowBack = false">取消</el-button> | 
 |  |  |         <el-button type="primary" @click="backSubmit">确定</el-button> | 
 |  |  |       </span> | 
 |  |  |     </el-dialog> | 
 |  |  |     <OperaCarUseBookWindow | 
 |  |  |       ref="OperaDetailsWindow" | 
 |  |  |       @success="handlePageChange" | 
 |  |  |     /> | 
 |  |  |     <OperaCarUseBookParamWindow ref="OperaParamWindow" @success="search" /> | 
 |  |  |   </TableLayout> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  |       }, | 
 |  |  |       cateList: [], | 
 |  |  |       areaList: [], | 
 |  |  |       time: [] | 
 |  |  |       time: [], | 
 |  |  |  | 
 |  |  |       isShowBack: false, | 
 |  |  |       backParam: {}, | 
 |  |  |       rules: { | 
 |  |  |         info: [{ required: true, message: '请输入', trigger: 'blur' }] | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     rowRevokeClick (row) { | 
 |  |  |       revokeById(row.id) | 
 |  |  |       this.isShowBack = true | 
 |  |  |       this.backParam = {} | 
 |  |  |       this.$set(this.backParam, 'id', row.id) | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         this.$refs.backForm.clearValidate() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     backSubmit () { | 
 |  |  |       revokeById({ ...this.backParam }).then(res => { | 
 |  |  |         this.$tip.success('撤销成功') | 
 |  |  |         this.isShowBack = false | 
 |  |  |         this.search() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleEx () { | 
 |  |  |       this.$dialog.exportConfirm('确认导出吗?') | 
 |  |  | 
 |  |  |               this.download(response) | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |               this.$tip.apiFailed(e) | 
 |  |  |             }) | 
 |  |  |             .finally(() => { | 
 |  |  |               this.exLoading = false |