|  |  | 
 |  |  |           <span v-if="row.status === 4" style="color: gray">取消</span> | 
 |  |  |           <span v-if="row.status === 5" style="color: green">下发成功</span> | 
 |  |  |           <span v-if="row.status === 6" style="color: gray">下发失败</span> | 
 |  |  |           <span v-if="row.status === 7" style="color: green">拜访中</span> | 
 |  |  |           <span v-if="row.status === 7" style="color: green">已登记</span> | 
 |  |  |           <span v-if="row.status === 8" style="color: red">已签离</span> | 
 |  |  |           <span v-if="row.status === 9" style="color: gray">已失效</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column label="操作" align="center" width="180" fixed="right"> | 
 |  |  |       <el-table-column label="操作" align="center" width="240" fixed="right"> | 
 |  |  |         <template slot-scope="{ row }"> | 
 |  |  |           <el-button | 
 |  |  |             type="text" | 
 |  |  |             @click="handleDetail(row)" | 
 |  |  |             v-permissions="['business:company:update']">查看详情</el-button> | 
 |  |  |           <el-button  type="text"  icon="el-icon-delete" @click="deleteById(row)" style="color: red" v-permissions="['business:visits:delete']">删除</el-button> | 
 |  |  |           <el-button type="text" @click="cancel(row.id)"   v-permissions="['business:visits:cancel']"  v-if="(row.status == 0 || row.status == 1 || row.status == 2|| row.status == 5)"  icon="el-icon-delete" style="color: red"  >取消预约</el-button> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |     </el-table> | 
 |  |  | 
 |  |  | // import ReportDetail from './page-components/ReportDetail.vue' | 
 |  |  | import ReportDetail from '@/views/task/visReportDetail.vue' | 
 |  |  | import OperaVisitsReportWindow from '@/components/business/operaVisitsReportWindow.vue' | 
 |  |  | import { fetchList, exportExcel, deleteById } from '@/api/business/visits' | 
 |  |  | import BaseComputHeight from "@/components/base/BaseComputHeight"; | 
 |  |  | import { fetchList, exportExcel, deleteById ,visitsCancel} from '@/api/business/visits' | 
 |  |  | import BasePage from '@/components/base/BasePage' | 
 |  |  | import {mapState } from "vuex"; | 
 |  |  | export default { | 
 |  |  |   extends: BaseComputHeight, | 
 |  |  |   extends: BasePage, | 
 |  |  |   components: { | 
 |  |  |     ReportDetail, | 
 |  |  |     QueryForm, | 
 |  |  | 
 |  |  |             filed: 'companyName', | 
 |  |  |             type: 'input', | 
 |  |  |             label: '公司名称' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed1: 'queryStarttime', | 
 |  |  |             filed2: 'queryEndtime', | 
 |  |  |             type: 'datetime', | 
 |  |  |             label: '拜访时间' | 
 |  |  |           } | 
 |  |  |         ], | 
 |  |  |         online: true | 
 |  |  | 
 |  |  |       total: 0 | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   computed: { | 
 |  |  |     ...mapState(['userInfo']) | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |     this.getList() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     cancel (id) { | 
 |  |  |       this.$confirm('确定取消预约吗, 是否继续?', '提示', { | 
 |  |  |         confirmButtonText: '确定', | 
 |  |  |         cancelButtonText: '取消', | 
 |  |  |         type: 'warning' | 
 |  |  |       }).then(() => { | 
 |  |  |         visitsCancel(id) | 
 |  |  |           .then(res => { | 
 |  |  |             this.pagination.page = 1 | 
 |  |  |             this.getList() | 
 |  |  |           }) | 
 |  |  |       }).catch(() => { | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     exportExcel () { | 
 |  |  |       this.$dialog.exportConfirm('确认导出吗?') | 
 |  |  |         .then(() => { | 
 |  |  | 
 |  |  |     }, | 
 |  |  |     handleSizeChange (capacity) { | 
 |  |  |       this.pagination.capacity = capacity | 
 |  |  |       this.getList() | 
 |  |  |       this.getList(1) | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | 
 |  |  |  | 
 |  |  | <style lang="scss" scoped> | 
 |  |  | .table-pagination { | 
 |  |  |   margin-left: -18px; | 
 |  |  |   padding: 16px 0px 16px 25px; | 
 |  |  |  | 
 |  |  |   margin-left: 0px; | 
 |  |  |   padding: 16px 0px ; | 
 |  |  |   text-align: left; | 
 |  |  |   display: block; | 
 |  |  |   z-index: 100; | 
 |  |  |   width: -webkit-fill-available; | 
 |  |  |   /* width: 80%; */ | 
 |  |  |   position: fixed; | 
 |  |  |   bottom: 25px; | 
 |  |  |   bottom: 0px; | 
 |  |  |   background-color: white; | 
 |  |  |   margin-right: 50px; | 
 |  |  | } |