CKQ/src/views/goaf/info/components/GoafInfo.vue

<template>
  <div class="content-container goaf">
    <el-row class="tool-bar">
      <el-col :span="12" class="left">
        <div class="content-title">
          采空区
        </div>
      </el-col>
      <el-col :span="12" class="right">
        <el-input v-model="conditions.data.goafName" class="search-input m-right-15" placeholder="请输入采空区名称">
          <el-button slot="append" icon="el-icon-search" @click="getData()" />
        </el-input>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-row class="m-top-15">
      <el-table v-loading="listLoading" class="page-table" border fit :data="dataList">
        <el-table-column prop="goafOrebelt" label="矿带">
          <template v-slot="{row}">
            <span>{{ convertNum(row.goafOrebelt) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goafOrebody" label="矿体" />
        <el-table-column prop="goafOreheight" label="中段" />
        <el-table-column prop="goafName" label="采空区名称" show-overflow-tooltip />
        <el-table-column prop="goafRoofpillarThickness" label="顶板矿柱厚度" width="" />
        <el-table-column prop="goafIncoavThickness" label="	保安间柱平均厚度" width="150" />
        <el-table-column prop="goafRockLithology" label="围岩岩性" />
        <el-table-column prop="goafRockStability" label="围岩稳定性" />
        <el-table-column prop="goafCanfillVolume" label="可充填体积（m³）" width="150" />
        <el-table-column prop="goafRemainVolume" label="剩余可充填体积（m³）" width="180" />
        <el-table-column prop="goafIsFill" label="是否充填" width="80">
          <template v-slot="{row}">
            <span v-if="row.goafIsFill==0" style="color:'#49E86C'">是</span>
            <span v-else style="color:'#E44E2D'">否</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="180">
          <template v-slot="{row}">
            <el-button size="mini" type="text" style="color:#1B81FF" @click="showDetail(row)">详情</el-button>
            <el-button size="mini" type="text" style="color:#1B81FF" @click="handleUpdate(row)">修改</el-button>
            <el-button size="mini" type="text" style="color:#E44E2D" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container" style="float:right;margin-right:40px;">
        <pagination v-show="total>0" :total="total" :page.sync="conditions.page" :limit.sync="conditions.limit" @pagination="getData" />
      </div>
    </el-row>
    <goaf ref="goaf" @formSuccess="getData" />
    <detail ref="detail" />
  </div>
</template>

<script>
import { getGoafBaseInfoByPage, delGoaf } from '@/api/goaf/info'
import { Pagination } from '@/components'
import Goaf from './Goaf'
import Detail from './detail'
import { NumConvertLM } from '@/utils'
export default {
  components: { Pagination, Goaf, Detail },
  data() {
    return {
      dataList: [],
      total: 0,
      listLoading: false,
      conditions: {
        page: 1,
        limit: 10,
        data: {
          goafName: ''
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    convertNum(num) {
      return num ? NumConvertLM(num) : '--'
    },
    // fetch data
    getData() {
      this.listLoading = true
      getGoafBaseInfoByPage(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data, total } = resp
        if (code === 0) {
          this.dataList = data
          this.total = total
        } else {
          this.$message.error(msg)
        }
      })
    },
    showDetail(data) {
      this.$refs['detail'].showDetailModel(JSON.parse(JSON.stringify(data)))
    },
    // "Add Risk" Model
    handleAdd() {
      this.$refs['goaf'].showAddModel()
    },

    // "Edit Risk" Model
    handleUpdate(data) {
      this.$refs['goaf'].showEditModel(JSON.parse(JSON.stringify(data)))
    },

    // Delete Action
    handleDelete(data) {
      const { goafId, goafName } = data
      this.$confirm(`此操作将删除该数据${goafName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delGoaf(goafId).then((resp) => {
          const { code, msg } = resp
          if (code === 0) {
            this.getData()
            this.$message.success(msg)
          } else {
            this.$message.error(msg)
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    @import "icon/iconfont.css";
    .content-container {
        background: #193142FF;
        margin: 10px 10px 10px 0;
        padding: 15px;
        height: calc(100vh - 90px);
        box-sizing: border-box;
        .content-title {
            font-size: 18px;
            font-weight: bold;
            color: #FFFFFF;

            font-weight: bold;
            background: linear-gradient(0deg, #FFFFFF 0%, #98A8B7 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tool-bar {

            .left {
                float: left;
            }

            .right {
                float: right;
                text-align: right;
            }

            .title {
                line-height: 36px;
                font-size: 26px;
            }

            .search-input {
                width: 300px;
            }
        }

        .el-dropdown {
            margin: 0 10px;
        }
    }
</style>
<style lang="scss">
.goaf .el-table__body tr.hover-row>td {
  background-color: #306379;
}
.goaf{
      .page-table{
        height: calc(100vh - 260px);
        overflow-y: auto;
      }
    }
</style>