<template> 
 | 
  <div class="main_app"> 
 | 
    <div class="mb20"> 
 | 
      <el-button type="primary" @click="handleEdit()">新增</el-button> 
 | 
    </div> 
 | 
    <el-table v-loading="loading" :data="list" stripe> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="隐患区域" 
 | 
        min-width="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="排序码" 
 | 
        min-width="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="安全员" 
 | 
        min-width="100" 
 | 
        show-overflow-tooltip 
 | 
      /> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="操作" 
 | 
        min-width="80" 
 | 
        align="center" 
 | 
        show-overflow-tooltip 
 | 
      > 
 | 
        <template v-slot="scope"> 
 | 
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> 
 | 
          <el-button type="text" class="red" @click="handleDel(scope.row)" 
 | 
            >删除</el-button 
 | 
          > 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <pagination 
 | 
      @size-change="handleSizeChange" 
 | 
      @current-change="getList" 
 | 
      :pagination="pagination" 
 | 
    /> 
 | 
    <el-dialog 
 | 
      :title="param.id ? '编辑隐患区域' : '新增隐患区域'" 
 | 
      :visible.sync="isShowEdit" 
 | 
      width="480px" 
 | 
    > 
 | 
      <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px"> 
 | 
        <el-form-item label="隐患区域" prop="name"> 
 | 
          <el-input v-model="param.aaa"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="排序码(升序)" prop="name"> 
 | 
          <el-input 
 | 
            v-model="param.ccc" 
 | 
            oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 7)" 
 | 
          /> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="安全员" prop="name"> 
 | 
          <el-select placeholder="请选择,多选" multiple filterable> 
 | 
            <el-option></el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
      <span slot="footer" class="dialog-footer"> 
 | 
        <el-button @click="isShowEdit = false">取消</el-button> 
 | 
        <el-button type="primary" @click="handleSub">确定</el-button> 
 | 
      </span> 
 | 
    </el-dialog> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
export default { 
 | 
  components: { 
 | 
    Pagination 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      loading: false, 
 | 
      pagination: { 
 | 
        capacity: 10, 
 | 
        page: 1 
 | 
      }, 
 | 
      list: [], 
 | 
      total: 0, 
 | 
      isShowEdit: false, 
 | 
      param: {}, 
 | 
      rules: {} 
 | 
    } 
 | 
  }, 
 | 
  methods: { 
 | 
    handleSub () { 
 | 
      this.$refs.ruleForm.validate((valid) => { 
 | 
        if (valid) { 
 | 
          alert('submit!') 
 | 
        } 
 | 
      }) 
 | 
    }, 
 | 
    getList (page) { }, 
 | 
    clear () { }, 
 | 
    handleEdit (row) { 
 | 
      this.isShowEdit = true 
 | 
    }, 
 | 
    handleDel () { }, 
 | 
    handleSizeChange (capacity) { 
 | 
      this.pagination.capacity = capacity 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style> 
 | 
</style> 
 |