| <template> | 
|   <TableLayout :permissions="['business:member:query']"> | 
|     <!-- 搜索表单 --> | 
|     <el-form | 
|       ref="searchForm" | 
|       slot="search-form" | 
|       :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="companyName"> | 
|         <el-input | 
|           v-model="searchForm.companyName" | 
|           placeholder="请输入组织名称" | 
|           @keypress.enter.native="search" | 
|         ></el-input> | 
|       </el-form-item> | 
|       <el-form-item label="用户类型" prop="type"> | 
|         <el-select v-model="searchForm.type" placeholder="请选择"> | 
|           <el-option label="访客" value="1"></el-option> | 
|           <el-option label="劳务" value="0"></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> | 
|     <!-- 表格和分页 --> | 
|     <template v-slot:table-wrap> | 
|       <!--            <ul class="toolbar" v-permissions="['business:member:create', 'business:member:delete']">--> | 
|       <!--                <li><el-button type="primary" v-permissions="['business:member:create']" @click="thaws">离场</el-button></li>--> | 
|       <!--            </ul>--> | 
|       <el-table | 
|         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 label="用户类型" min-width="100px"> | 
|           <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="inDate" | 
|           label="在园时间" | 
|           min-width="100px" | 
|         ></el-table-column> | 
|         <el-table-column | 
|           prop="outDate" | 
|           label="授权到期时间" | 
|           min-width="100px" | 
|         ></el-table-column> | 
|         <el-table-column label="超时时长" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             <span v-if="row.outStatus === 1" | 
|               >{{ row.timeOut.toString().replace("-", "") }}分钟</span | 
|             > | 
|             <span v-else>-</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column label="状态" min-width="100px"> | 
|           <template slot-scope="{ row }"> | 
|             <span v-if="row.outStatus === 0">未超时</span> | 
|             <span style="color: red" v-else-if="row.outStatus === 1" | 
|               >已超时</span | 
|             > | 
|             <span v-else-if="row.outStatus === 2">即将超时</span> | 
|           </template> | 
|         </el-table-column> | 
|         <el-table-column | 
|           v-if=" | 
|             containPermissions([ | 
|               'business:member:update', | 
|               'business:member:delete', | 
|             ]) | 
|           " | 
|           label="操作" | 
|           min-width="120" | 
|           fixed="right" | 
|         > | 
|           <template slot-scope="{ row }"> | 
|             <el-button | 
|               type="text" | 
|               icon="el-icon-edit" | 
|               v-permissions="['business:member:update']" | 
|               @click="departure(row.id)" | 
|               >离厂</el-button | 
|             > | 
|           </template> | 
|         </el-table-column> | 
|       </el-table> | 
|       <pagination | 
|         @size-change="handleSizeChange" | 
|         @current-change="handlePageChange" | 
|         :pagination="tableData.pagination" | 
|       > | 
|       </pagination> | 
|     </template> | 
|   </TableLayout> | 
| </template> | 
|   | 
| <script> | 
| import BaseTable from '@/components/base/BaseTable' | 
| import TableLayout from '@/layouts/TableLayout' | 
| import Pagination from '@/components/common/Pagination' | 
| import { findAllList } from '@/api/system/common' | 
| import { level } from '@/api/business/staging' | 
| export default { | 
|   name: 'strandedPersonnel', | 
|   extends: BaseTable, | 
|   components: { TableLayout, Pagination }, | 
|   data() { | 
|     return { | 
|       // 搜索 | 
|       searchForm: { | 
|         companyName: '', | 
|         name: '', | 
|         status: 2, | 
|         type: '1' | 
|       }, | 
|       user: [] | 
|     } | 
|   }, | 
|   created() { | 
|     this.config({ | 
|       module: '人员信息表', | 
|       api: '/business/strandedPersonnel', | 
|       'field.id': 'id', | 
|       'field.main': 'id' | 
|     }) | 
|     this.search() | 
|     this.getUser() | 
|   }, | 
|   methods: { | 
|     departure(id) { | 
|       this.$confirm('确定离场吗, 是否继续?', '提示', { | 
|         confirmButtonText: '确定', | 
|         cancelButtonText: '取消', | 
|         type: 'warning' | 
|       }).then(() => { | 
|         level(id) | 
|           .then(res => { | 
|             this.search() | 
|           }) | 
|       }).catch(() => { | 
|   | 
|       }) | 
|     }, | 
|     // thaws () { | 
|     //   if (this.tableData.selectedRows.length === 0) return this.$message.warning('至少选择一项内容') | 
|     //   const ids = this.tableData.selectedRows.map(item => { | 
|     //     return { id: item.id } | 
|     //   }) | 
|     //   this.thaw(ids) | 
|     // }, | 
|     // thaw (ids) { | 
|     //   this.$confirm('确定移除此用户吗?', '提示', { | 
|     //     confirmButtonText: '确定', | 
|     //     cancelButtonText: '取消', | 
|     //     type: 'warning' | 
|     //   }).then(() => { | 
|     //     // updateRemoveStatusById(ids) | 
|     //     //   .then(res => { | 
|     //     //     this.$message.success('操作成功') | 
|     //     //     this.search() | 
|     //     //   }) | 
|     //   }).catch(() => { | 
|     // | 
|     //   }) | 
|     // }, | 
|     getUser() { | 
|       findAllList({}) | 
|         .then(res => { | 
|           this.user = res.map(item => { | 
|             return { | 
|               name: item.realname, | 
|               id: item.id | 
|             } | 
|           }) | 
|         }) | 
|     } | 
|   } | 
| } | 
| </script> |