| <template> | 
|   <TableLayout :permissions="['business:visits:query']"> | 
|     <!-- 搜索表单 --> | 
|     <div slot="search-form" ref="QueryFormRef"> | 
|       <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> | 
|         <el-form-item label="姓名/手机号" prop="name"> | 
|           <el-input v-model="searchForm.name" placeholder="请输入姓名/手机号" @keypress.enter.native="search"></el-input> | 
|         </el-form-item> | 
|         <el-form-item label="身份证号" prop="idcardNo"> | 
|           <el-input v-model="searchForm.idcardNo" placeholder="请输入身份证号" @keypress.enter.native="search"></el-input> | 
|         </el-form-item> | 
|         <el-form-item label="访客单位" prop="companyName"> | 
|           <el-input v-model="searchForm.companyName" placeholder="请输入访客单位" @keypress.enter.native="search"></el-input> | 
|         </el-form-item> | 
|         <el-form-item label="拜访时间" prop="date"> | 
|           <el-date-picker | 
|             v-model="searchForm.queryStarttime" | 
|             type="datetime" | 
|             clearable | 
|             value-format="yyyy-MM-dd HH:mm:ss" | 
|             class="w200" | 
|             placeholder="开始时间" /> | 
|           <el-date-picker | 
|             v-model="searchForm.queryEndtime" | 
|             type="datetime" | 
|             value-format="yyyy-MM-dd HH:mm:ss" | 
|             class="w200" | 
|             clearable | 
|             placeholder="结束时间" /> | 
|         </el-form-item> | 
|         <el-form-item label="审批状态" prop="status"> | 
|           <el-select v-model="searchForm.status" 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="5"></el-option> | 
|             <el-option label="下发失败" value="6"></el-option> | 
|             <el-option label="已登记" value="7"></el-option> | 
|             <el-option label="已签离" value="8"></el-option> | 
|             <el-option label="已失效" value="9"></el-option> | 
|           </el-select> | 
|         </el-form-item> | 
|         <section> | 
|           <el-button type="primary" @click="search">搜索</el-button> | 
|           <!--                <el-button type="primary" :loading="isWorking.export" v-permissions="['business:visits:exportExcel']" @click="exportExcel">导出</el-button>--> | 
|           <el-button @click="reset">重置</el-button> | 
|         </section> | 
|       </el-form> | 
|     </div> | 
|   | 
|     <!-- 表格和分页 --> | 
|     <template v-slot:table-wrap> | 
|       <ul class="toolbar" v-permissions="['business:visits:create', 'business:visits:exportExcel']"> | 
|         <li><el-button type="primary" @click="handleEdit()" icon="el-icon-plus" | 
|             v-permissions="['business:visits:create']">新建</el-button></li> | 
|         <li><el-button type="primary" :loading="isWorking.export" @click="exportExcel" | 
|             v-permissions="['business:visits:exportExcel']">导出</el-button></li> | 
|       </ul> | 
|       <el-table :max-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="name" label="访客姓名" min-width="100px"></el-table-column> | 
|         <el-table-column prop="phone" label="手机号" min-width="100px"></el-table-column> | 
|         <el-table-column prop="companyName" label="访客单位" min-width="100px"></el-table-column> | 
|         <el-table-column prop="receptMemberName" label="被访人" min-width="100px"></el-table-column> | 
|         <el-table-column prop="reason" label="拜访事由" min-width="100px"></el-table-column> | 
|         <el-table-column label="拜访时间" min-width="170px"> | 
|           <template slot-scope="{row}"> | 
|             <span>起:{{ row.starttime }}</span><br /> | 
|             <span>止:{{ row.endtime }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="施工人员" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             <span v-if="row.type == 0">否</span> | 
|             <span v-if="row.type == 1">是</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="随访车辆" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             <span>{{ row.carNos }}</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="status" fixed="right" label="状态" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             <span style="color: rgba(245, 154, 35, 0.996);" v-if="row.status === 0">待提交审批</span> | 
|             <span v-if="row.status === 1" style="color: rgba(245, 154, 35, 0.996);">审批中</span> | 
|             <span v-if="row.status === 2" style="color: rgba(245, 154, 35, 0.996);">审核通过</span> | 
|             <span style="color: gray;" v-if="row.status === 3">审批驳回</span> | 
|             <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 === 8" style="color: red">已签离</span> | 
|             <span v-if="row.status === 9" style="color: gray">已失效</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="在园状态" min-width="100px"> | 
|           <template slot-scope="{row}"> | 
|             <div v-if="row.status == 7"> | 
|               <span v-if="row.retentionNum && row.retentionNum >0 ">是</span> | 
|               <span v-if="!row.retentionNum ||  row.retentionNum ==0 " >否</span> | 
|             </div> | 
|             <div v-else >-</div> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column prop="remark" label="下发备注" min-width="100px"></el-table-column> | 
|         <el-table-column prop="createDate" label="创建时间" min-width="170px"></el-table-column> | 
|         <el-table-column   label="操作" | 
|           min-width="200" fixed="right"> | 
|           <template slot-scope="{row}"> | 
|             <el-button type="text" @click="handleDetail(row)" icon="el-icon-view">详情</el-button> | 
|             <el-button type="text" @click="resend(row.id)" v-permissions="['business:visits:update']" icon="el-icon-edit" v-if="row.status == 6">重新下发</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> | 
|             <el-button type="text" @click="departure(row.id)" icon="el-icon-delete" style="color: red" v-if="row.status == 7">离场</el-button> | 
|             <el-button  type="text"  icon="el-icon-delete" @click="deleteById(row)" style="color: red" v-permissions="['business:visits:delete']">删除</el-button> | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|       <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> | 
|       </pagination> | 
|       <!--      详情      --> | 
|       <!-- <OperaVisitsDesWindow ref="OperaVisitsDesWindow" /> --> | 
|       <TaskDetail v-if="isShowDetail" ref="DetailRef" /> | 
|       <!-- 新建 --> | 
|       <OperaVisitsWindow @close="isShowEdit = false" @success="search" v-if="isShowEdit" ref="operaVisitsWindowRef" /> | 
|     </template> | 
|   </TableLayout> | 
| </template> | 
|   | 
| <script> | 
| import BaseTable from '@/components/base/BaseTable' | 
| import TableLayout from '@/layouts/TableLayout' | 
| import Pagination from '@/components/common/Pagination' | 
| import OperaVisitsDesWindow from '@/components/business/OperaVisitsDesWindow' | 
| import OperaVisitsWindow from '@/components/business/operaVisitsWindow' | 
| import TaskDetail from '@/views/task/visSubDetail.vue' | 
| import {mapState} from "vuex"; | 
|   | 
| export default { | 
|   name: 'Visits', | 
|   extends: BaseTable, | 
|   components: { TableLayout, Pagination, TaskDetail, OperaVisitsWindow }, | 
|   data() { | 
|     return { | 
|       isShowEdit: false, | 
|       isShowDetail: false, | 
|       // 搜索 | 
|       searchForm: { | 
|         name: '', | 
|         companyName: '', | 
|         idcardNo: '', | 
|         status: '', | 
|         type: 0, | 
|         queryStarttime: '', | 
|         queryEndtime: '', | 
|         date: [] | 
|       } | 
|     } | 
|   }, | 
|   computed: { | 
|     ...mapState(['userInfo']) | 
|   }, | 
|   created () { | 
|     this.config({ | 
|       module: '访客申请信息表', | 
|       api: '/business/visits', | 
|       'field.id': 'id', | 
|       'field.main': 'id' | 
|     }) | 
|     this.search() | 
|   }, | 
|   mounted() { | 
|     this.$nextTick(() => { | 
|       this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 300 | 
|     }) | 
|   }, | 
|   methods: { | 
|     // 搜索框重置 | 
|     reset () { | 
|       this.$refs.searchForm.resetFields() | 
|       this.searchForm.queryStarttime = '' | 
|       this.searchForm.queryEndtime = '' | 
|       this.search() | 
|     }, | 
|     handleDetail(row) { | 
|       this.isShowDetail = true | 
|       console.log('row', row) | 
|       this.$nextTick(() => { | 
|         this.$refs.DetailRef.id = row.id | 
|         this.$refs.DetailRef.type = 0 | 
|         this.$refs.DetailRef.getDetail() | 
|         this.$refs.DetailRef.isShowModal = true | 
|       }) | 
|     }, | 
|     handleEdit() { | 
|       this.isShowEdit = true | 
|       this.$nextTick(() => { | 
|         this.$refs.operaVisitsWindowRef.isShowModal = true | 
|       }) | 
|     }, | 
|     departure(id) { | 
|       this.$confirm('确定进行离场操作吗,该操作不可逆请谨慎操作, 是否继续?', '提示', { | 
|         confirmButtonText: '确定', | 
|         cancelButtonText: '取消', | 
|         type: 'warning' | 
|       }).then(() => { | 
|         this.api.level(id) | 
|           .then(res => { | 
|             this.$message.success('操作成功') | 
|             this.page = 1 | 
|             this.search() | 
|           }) | 
|       }).catch(() => { | 
|   | 
|       }) | 
|     }, | 
|     cancel( id) { | 
|       this.$confirm('确定取消预约吗, 是否继续?', '提示', { | 
|         confirmButtonText: '确定', | 
|         cancelButtonText: '取消', | 
|         type: 'warning' | 
|       }).then(() => { | 
|         this.api.visitsCancel(id) | 
|           .then(res => { | 
|             this.page = 1 | 
|             this.search() | 
|           }) | 
|       }).catch(() => { | 
|   | 
|       }) | 
|     }, | 
|     resend(id) { | 
|       this.$confirm('确定尝试重新发起预约吗, 是否继续?', '提示', { | 
|         confirmButtonText: '确定', | 
|         cancelButtonText: '取消', | 
|         type: 'warning' | 
|       }).then(() => { | 
|         this.api.visitResend(id) | 
|           .then(res => { | 
|             this.page = 1 | 
|             this.search() | 
|           }) | 
|       }).catch(() => { | 
|   | 
|       }) | 
|     } | 
|   } | 
| } | 
| </script> |