|  |  | 
 |  |  | <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-option label="审批不通过" value="3"></el-option> | 
 |  |  |           <el-option label="已取消" value="4"></el-option> | 
 |  |  |           <el-option label="已撤销" value="4"></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" | 
 |  |  |             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:empower:create', 'business:empower:delete']"> | 
 |  |  |         <!--<li><el-button type="primary" v-permissions="['business:empower:exportExcel']" @click="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="100" | 
 |  |  |             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> | 
 |  |  |           <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"/> | 
 |  |  |     <!--  --> | 
 |  |  |     <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> | 
 |  |  |  | 
 |  |  | 
 |  |  | import TableLayout from '@/layouts/TableLayout' | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import OperaCarUseBookWindow from '@/components/business/OperaCarUseBookWindow' | 
 |  |  | import OperaCarUseBookParamWindow from '@/components/operation/OperCarUseBookParamWindow.vue' | 
 |  |  | import { timeForMat } from '@/utils/util' | 
 |  |  | import { allList } from '@/api/business/hiddenDangerParam' | 
 |  |  | import { carUseBookRecordEx, revokeById } from '@/api/business/carUseBook' | 
 |  |  | export default { | 
 |  |  |   name: 'Empower', | 
 |  |  |   extends: BaseTable, | 
 |  |  |   components: { TableLayout, Pagination ,OperaCarUseBookWindow}, | 
 |  |  |   components: { TableLayout, Pagination, OperaCarUseBookWindow, OperaCarUseBookParamWindow }, | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       // 搜索 | 
 |  |  | 
 |  |  |         queryStartTime: '', | 
 |  |  |         queryEndTime: '', | 
 |  |  |         type: null, | 
 |  |  |         status:null | 
 |  |  |         status: null, | 
 |  |  |         radio: 0 | 
 |  |  |       }, | 
 |  |  |       cateList: [], | 
 |  |  |       areaList: [], | 
 |  |  |       time: [] | 
 |  |  |       time: [], | 
 |  |  |  | 
 |  |  |       isShowBack: false, | 
 |  |  |       backParam: {}, | 
 |  |  |       rules: { | 
 |  |  |         info: [{ required: true, message: '请输入', trigger: 'blur' }] | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  | 
 |  |  |     this.loadParams() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     rowRevokeClick (row) { | 
 |  |  |       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('确认导出吗?') | 
 |  |  |         .then(() => { | 
 |  |  |           this.exLoading = true | 
 |  |  |           carUseBookRecordEx({ | 
 |  |  |             model: this.searchForm | 
 |  |  |           }) | 
 |  |  |             .then(response => { | 
 |  |  |               this.download(response) | 
 |  |  |             }) | 
 |  |  |             .catch(e => { | 
 |  |  |             }) | 
 |  |  |             .finally(() => { | 
 |  |  |               this.exLoading = false | 
 |  |  |             }) | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     changeRadio (e) { | 
 |  |  |       this.searchForm.radio = e | 
 |  |  |       if (e === '0') { | 
 |  |  | 
 |  |  |       } | 
 |  |  |       this.search() | 
 |  |  |     }, | 
 |  |  |     handleEdit () { | 
 |  |  |       this.$refs.OperaParamWindow.open() | 
 |  |  |     }, | 
 |  |  |     loadParams () { | 
 |  |  |       allList({ | 
 |  |  |       }) | 
 |  |  |           .then(res => { | 
 |  |  |             if (res != null && res.length) { | 
 |  |  |               res.forEach(item => { | 
 |  |  |                 if (item && item.type != null && item.type === 0) { | 
 |  |  |                   this.areaList.push(item) | 
 |  |  |                 } | 
 |  |  |                 if (item && item.type != null && item.type === 1) { | 
 |  |  |                   this.cateList.push(item) | 
 |  |  |                 } | 
 |  |  |               }) | 
 |  |  |             } | 
 |  |  |           }) | 
 |  |  |           .catch(e => { | 
 |  |  |             // this.$tip.apiFailed(e) | 
 |  |  |           }) | 
 |  |  |           .finally(() => { | 
 |  |  |           }) | 
 |  |  |         .then(res => { | 
 |  |  |           if (res != null && res.length) { | 
 |  |  |             res.forEach(item => { | 
 |  |  |               if (item && item.type != null && item.type === 0) { | 
 |  |  |                 this.areaList.push(item) | 
 |  |  |               } | 
 |  |  |               if (item && item.type != null && item.type === 1) { | 
 |  |  |                 this.cateList.push(item) | 
 |  |  |               } | 
 |  |  |             }) | 
 |  |  |           } | 
 |  |  |         }) | 
 |  |  |         .catch(e => { | 
 |  |  |           // this.$tip.apiFailed(e) | 
 |  |  |         }) | 
 |  |  |         .finally(() => { | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     seleTime (e) { | 
 |  |  |       this.searchForm.queryStartTime = e[0] |