epmet-oper-gov/src/views/modules/plugins/power/servicestationTable.vue

<template>
  <div>
    <div class="div_search">
      <div class="resi-cell">
        <div class="resi-cell-label">服务站名</div>
        <div class="resi-cell-value">
          <el-input v-model="name"
                    class="resi-cell-input"
                    size="small"
                    clearable
                    placeholder="请输入服务站名">
          </el-input>
        </div>
      </div>
      <el-button style="margin-left:10px"
                 class="diy-button--search"
                 size="small"
                 @click="handleSearch">查询</el-button>
    </div>
    <div class="div_btn">
      <el-button style=""
                 class="diy-button--add"
                 size="small"
                 @click="handleAdd">添加</el-button>
    </div>
    <div class="div_table">
      <el-table ref="ref_table"
                :data="tableData"
                border
                :height="tableHeight"
                v-loading="tableLoading"
                :header-cell-style="{background:'#2195FE',color:'#FFFFFF'}"
                style="width: 100%">
        <el-table-column prop="name"
                         label="服务站名称"
                         width="150">
        </el-table-column>
        <el-table-column prop="address"
                         label="服务站地址">
        </el-table-column>
        <el-table-column prop="createdTime"
                         label="创建时间">
        </el-table-column>
        <el-table-column label="操作"
                         fixed="right"
                         width="120"
                         header-align="center"
                         align="center"
                         class="operate">
          <template slot-scope="scope">
            <el-button type="text"
                       class="div-table-button--delete"
                       size="small"
                       @click="handleDelete(scope.row.id)">删除</el-button>
            <el-button type="text"
                       class="div-table-button--edit"
                       size="small"
                       @click="handleEdit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page.sync="pageNo"
                       :page-sizes="[20, 50, 100, 200]"
                       :page-size="pageSize"
                       layout="sizes, prev, pager, next, total"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 修改弹出框 -->
    <el-dialog :visible.sync="formShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :title="formTitle"
               width="850px"
               top="5vh"
               class="dialog-h"
               @closed="diaClose">
      <servicestation-form ref="ref_form"
                      @dialogCancle="addFormCancle"
                      @dialogOk="addFormOk"
                      :axisStructId="axisStructId"></servicestation-form>
    </el-dialog>

  </div>
</template>

<script>

import ServicestationForm from './servicestationForm'
import { requestPost, requestGet } from "@/js/dai/request";
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      total: 0,
      pageSize: 20,
      pageNo: 0,
      tableLoading: false,
      name: '',
      tableData: [],
      //form相关
      formShow: false,
      formTitle: '添加'
    }
  },
  components: {
    ServicestationForm
  },
  computed: {
    tableHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 410 + this.iframeHeight : this.clientHeight - 410
    },
    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
  methods: {
    async loadTable () {
      this.tableLoading = true
      const url = "/pli/power/serviceStation/page"
      let params = {
        limit: this.pageSize,
        page: this.pageNo,
        axisStructId: this.axisStructId,
        name: this.name
      }
      const { data, code, msg, total } = await requestGet(url, params)
      if (code === 0) {        
        this.total = data.total || 0;
        this.tableData = data.list ? data.list.map((item) => { return item }) : []
      } else {
        this.$message.error(msg)
      }
      this.tableLoading = false
    },
    // 删除
    async handleDelete (id) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          this.deleteKernelhousehold(id)
        }).catch(err => {
          console.log('取消删除')
        })
    },

    async deleteKernelhousehold (id) {
      const url = "/pli/power/serviceStation/delete"
      const { data, code, msg } = await requestPost(url, [id])
      if (code === 0) {
        this.$message({
          type: "success",
          message: "删除成功"
        });
        this.loadTable()
      } else {
        this.$message.error(msg)
      }
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.pageNo = 1
      this.loadTable()
    },
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTable()
    },
    handleSearch () {
      if (!this.axisStructId) {
        return this.$message.error('请选择动力主轴节点')
      }
      this.loadTable()
    },
    diaClose () {
      // this.$refs.ref_form.resetData()
      this.formShow = false
    },
    handleAdd () {
      if (this.axisStructId) {
          this.formShow = true
          this.$nextTick(() => {
            this.$refs.ref_form.initForm('add', null, {})
          })
      } else {
        return this.$message.error('请选择动力主轴节点')
      }
    },
    // 修改
    handleEdit (row) {
      this.formTitle = '修改'
      this.formShow = true
      this.$nextTick(() => {
        this.$refs.ref_form.initForm('edit', row, {})
      })
    },
    addFormCancle () {
      this.formShow = false
    },
    addFormOk () {
      this.formShow = false
      this.loadTable()
    },
  },
  props: {
    axisStructId: {
      type: String,
      default: '',
    }
  },
  watch: {
    axisStructId (newName) {
      if (newName) {
        this.pageSize = 20
        this.pageNo = 1
        this.loadTable()
      } else {
        this.pageSize = 20
        this.pageNo = 0
        this.total = 0;
        this.tableData = []
      }
    }
  },
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/visual/communityManage.scss";
</style>

<style >
.el-message.is-closable .el-message__content {
  line-height: 20px;
}
</style>