|  |  | 
 |  |  | <template> | 
 |  |  |   <div class="main_app"> | 
 |  |  |     <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" /> | 
 |  |  |     <div class="mt20"> | 
 |  |  |       <el-button type="primary" @click="handleEdit()" icon="el-icon-plus" | 
 |  |  |         v-permissions="['business:ywpatrolline:create']">新建</el-button> | 
 |  |  |     </div> | 
 |  |  |     <el-table v-loading="loading" :data="list" stripe> | 
 |  |  |       <el-table-column prop="code" label="设备编号" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="name" label="设备名称" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="categoryName" label="设备分类" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="modelNo" label="设备型号" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="realName" label="管理员" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="supplier" label="设备供应商" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="status" label="设备状态" min-width="100" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <span v-if="row.status == 0">正常</span> | 
 |  |  |           <span v-if="row.status == 1">损坏</span> | 
 |  |  |           <span v-if="row.status == 2">报废</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column label="操作" min-width="120" fixed="right"> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <el-button type="text" @click="handleEdit(row)" icon="el-icon-edit" | 
 |  |  |             v-permissions="['business:category:update']">编辑</el-button> | 
 |  |  |           <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" | 
 |  |  |             v-permissions="['business:category:delete']">删除</el-button> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |     </el-table> | 
 |  |  |     <div class="mt20"> | 
 |  |  |       <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> | 
 |  |  |     </div> | 
 |  |  |     <Edit v-if="showEdit" ref="EditRef" @success="getList" @close="showEdit = false" /> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import QueryForm from '@/components/common/QueryForm' | 
 |  |  | import Edit from './components/deviceEdit' | 
 |  |  | import { fetchList, deleteById } from '@/api/Inspection/device' | 
 |  |  | export default { | 
 |  |  |   components: { | 
 |  |  |     Pagination, | 
 |  |  |     QueryForm, | 
 |  |  |     Edit | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       loading: false, | 
 |  |  |       showEdit: false, | 
 |  |  |       pagination: { | 
 |  |  |         pageSize: 10, | 
 |  |  |         page: 1, | 
 |  |  |         total: 0 | 
 |  |  |       }, | 
 |  |  |       filters: {}, | 
 |  |  |       list: [], | 
 |  |  |       total: 0, | 
 |  |  |       queryFormConfig: { | 
 |  |  |         formItems: [ | 
 |  |  |           { | 
 |  |  |             filed: 'name', | 
 |  |  |             type: 'input', | 
 |  |  |             label: '设备名称', | 
 |  |  |             placeholder: '请输入设备名称/编码' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'status', | 
 |  |  |             type: 'select', | 
 |  |  |             label: '设备状态', | 
 |  |  |             options: [ | 
 |  |  |               { value: 0, label: '正常' }, | 
 |  |  |               { value: 1, label: '损坏' }, | 
 |  |  |               { value: 2, label: '报废' }, | 
 |  |  |             ] | 
 |  |  |           }, | 
 |  |  |         ], | 
 |  |  |         online: true | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |     this.getList() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     getList(page) { | 
 |  |  |       const { pagination, filters } = this | 
 |  |  |       this.loading = true | 
 |  |  |       fetchList({ | 
 |  |  |         model: { | 
 |  |  |           ...filters, | 
 |  |  |         }, | 
 |  |  |         capacity: pagination.pageSize, | 
 |  |  |         page: page || pagination.page, | 
 |  |  |       }).then(res => { | 
 |  |  |         this.loading = false | 
 |  |  |         this.list = res.records || [] | 
 |  |  |         this.list.forEach(item => { | 
 |  |  |           item.stautsName = item.status == 0 ? '正常' : item.status == 1 ? '损坏' : '报废' | 
 |  |  |         }) | 
 |  |  |         this.pagination.total = res.total || 0 | 
 |  |  |       }, () => { | 
 |  |  |         this.loading = false | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     handleEdit(row) { | 
 |  |  |       this.showEdit = true | 
 |  |  |       this.$nextTick(() => { | 
 |  |  |         this.$refs.EditRef.isShowModal = true | 
 |  |  |         if (row && row.id) { | 
 |  |  |           console.log('---'); | 
 |  |  |            | 
 |  |  |           this.$refs.EditRef.getDetail(row.id) | 
 |  |  |         } | 
 |  |  |       }) | 
 |  |  |  | 
 |  |  |     }, | 
 |  |  |     handleDel(row) { | 
 |  |  |       let message = `确认删除该记录吗?` | 
 |  |  |       this.$dialog.deleteConfirm(message) | 
 |  |  |         .then(() => { | 
 |  |  |           this.isWorking.delete = true | 
 |  |  |           deleteById(row.id) | 
 |  |  |             .then(() => { | 
 |  |  |               this.$tip.apiSuccess('删除成功') | 
 |  |  |               this.getList() | 
 |  |  |             }) | 
 |  |  |         }) | 
 |  |  |         .catch(() => { }) | 
 |  |  |     }, | 
 |  |  |     clear() { | 
 |  |  |       this.filters = {} | 
 |  |  |       this.pagination.pageSize = 10 | 
 |  |  |       this.pagination.page = 1 | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     handleSizeChange(capacity) { | 
 |  |  |       this.pagination.pageSize = capacity | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style></style> |