<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> 
 | 
      <el-button type="primary" @click="handleEx" v-permissions="['business:ywpatrolline:create']">导出</el-button> 
 | 
    </div> 
 | 
    <el-table v-loading="loading" :data="list" stripe> 
 | 
      <el-table-column prop="realName" label="运维人" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="deviceCode" label="设备编号" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="deviceName" 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 prop="content" label="运维备注" min-width="100" show-overflow-tooltip /> 
 | 
      <el-table-column prop="createDate" label="创建时间" min-width="140" show-overflow-tooltip /> 
 | 
      <el-table-column label="操作" min-width="120" fixed="right"> 
 | 
        <template slot-scope="{row}"> 
 | 
          <el-button type="text" @click="handleDetail(row)" v-permissions="['business:category:update']">查看</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" /> 
 | 
    <Detail ref="DetailRef" /> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import QueryForm from '@/components/common/QueryForm' 
 | 
import Edit from './components/maintain.vue' 
 | 
import Detail from './components/maintainDetail.vue' 
 | 
import { fetchList, deleteById } from '@/api/Inspection/deviceRecord' 
 | 
export default { 
 | 
  components: { 
 | 
    Pagination, 
 | 
    QueryForm, 
 | 
    Edit, 
 | 
    Detail 
 | 
  }, 
 | 
  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: 'selTime', 
 | 
            type: 'datetimerange', 
 | 
            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 
 | 
      }) 
 | 
    }, 
 | 
    handleEx() { 
 | 
  
 | 
    }, 
 | 
    handleEdit(row) { 
 | 
      this.showEdit = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.EditRef.isShowModal = true 
 | 
        if (row && row.id) { 
 | 
          this.$refs.EditRef.getDetail(row.id) 
 | 
        } 
 | 
      }) 
 | 
  
 | 
    }, 
 | 
    handleDetail(row) { 
 | 
      this.$refs.DetailRef.visible = true 
 | 
      this.$refs.DetailRef.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 
 | 
      this.getList() 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style></style> 
 |