jn_manager/src/views/index/index.vue

<template>
  <div class="table-container">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-form ref="form" :model="queryForm" :inline="true" @submit.native.prevent >
          <el-form-item label="风场编号">
            <!-- <el-cascader class="cascaders" v-model="cascaderSel" :options="options" style="width: 200px"
              :props="{ checkStrictly: true, label: 'name', value: 'id' , children:'children', expandTrigger: 'hover' }" clearable>
            </el-cascader> -->
            <!-- <el-input v-model="fuzzyQuery" placeholder="请输入" clearable /> -->
            <el-cascader 
              v-model="fuzzyQuery" 
              :options="options" 
              style="width: 240px" 
              :props="{ checkStrictly: true, label: 'name', value: 'id', children:'children'}" 
              clearable />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" native-type="submit" @click="handleQuery">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加
        </el-button>
        <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
          删除
        </el-button>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table ref="tableSort" v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
      :height="height" @selection-change="setSelectRows" @sort-change="tableSortChange" show-summary
      :summary-method="getSummaries">
      <el-table-column show-overflow-tooltip type="selection" width="65"></el-table-column>
      <el-table-column show-overflow-tooltip label="风场编号" prop="windpower" align="center" sortable>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="工程编号" prop="projectid" align="center" sortable></el-table-column>
      <el-table-column show-overflow-tooltip label="计划发电量" prop="generatingcapacity" align="center" sortable>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="计划停运小时" prop="outagehours" align="center" sortable>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="年份" prop="year" align="center" sortable></el-table-column>
      <el-table-column show-overflow-tooltip label="月份" prop="month" align="center" sortable></el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="180px" fixed="right">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :background="background" :current-page="queryForm.pageNo" :layout="layout"
      :page-size="queryForm.pageSize" :total="total" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>
    <table-edit ref="edit" :options="options" @handleSuccess="fetchData"></table-edit>
  </div>
</template>

<script>
import api from '@/api/table'
import TableEdit from './components/TableEdit'
export default {
  name: 'ComprehensiveTable',
  components: {
    TableEdit
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      fuzzyQuery: [],
      imgShow: true,
      list: [],
      cascaderSel: "",
      imageList: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 20,
        title: '',
      },
      options: []
    }
  },
  computed: {
    height() {
      return this.$baseTableHeight() + 50
    },
  },
  created() {
    this.getStation()
    this.fetchData()
  },
  beforeDestroy() { },
  mounted() { },
  methods: {
    getStation() {
      api.newtreeTreels({tag: 2}).then(res => {
        if (res.data) {
          this.options = res.data
        }
      })
    },
    tableSortChange() {
      const imageList = []
      this.$refs.tableSort.tableData.forEach((item, index) => {
        imageList.push(item.img)
      })
      this.imageList = imageList
    },
    setSelectRows(val) {
      this.selectRows = val
    },
    handleAdd() {
      this.$refs['edit'].showEdit()
    },
    handleEdit(row) {
      this.$refs['edit'].showEdit(row)
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          api.removeProjectplan({
            id: row.id
          }).then(res => {
            if (res.code == 200) {
              this.$baseMessage('删除成功', 'success')
              this.fetchData()
            }
          })
        })
      } else {
        if (this.selectRows.length > 0) {
          const ids = this.selectRows.map((item) => item.id).join()
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            api.removeProjectplan({
              id: ids
            }).then(res => {
              if (res.code == 200) {
                this.$baseMessage('删除成功', 'success')
                this.fetchData()
              }
            })
          })
        } else {
          this.$baseMessage('未选中任何行', 'error')
          return false
        }
      }
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    handleQuery() {
      this.queryForm.pageNo = 1
      this.fetchData()
    },
    async fetchData() {
      this.listLoading = true
      api.projectplan({
        windpower: this.fuzzyQuery[2] || "",
        pagenum: this.queryForm.pageNo,
        pagesize: this.queryForm.pageSize,
      }).then(res => {
        if (res.data) {
          this.total = res.data.total
          this.list = res.data.records
          setTimeout(() => {
            this.listLoading = false
          }, 500)
        }
      })

    },
    testMessage() {
      this.$baseMessage('test1', 'success')
    },
    testALert() {
      this.$baseAlert('11')
      this.$baseAlert('11', '自定义标题', () => {
        /* 可以写回调; */
      })
      this.$baseAlert('11', null, () => {
        /* 可以写回调; */
      })
    },
    testConfirm() {
      this.$baseConfirm(
        '你确定要执行该操作?',
        null,
        () => {
          /* 可以写回调; */
        },
        () => {
          /* 可以写回调; */
        }
      )
    },
    testNotify() {
      this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        else if (index === 3) {
          let totle = 0
          data.forEach(item => {
            totle += Number(item.generatingcapacity)
          })
          sums[index] = totle.toFixed(2);
        }
        else if (index === 4) {
          let totle = 0
          data.forEach(item => {
            totle += Number(item.outagehours)
          })
          sums[index] = totle.toFixed(2);
        } else {
          sums[index] = '--';
        }
      });
      return sums;
    }
  },
}
</script>
<style lang="less" scoped>
.cascaders {
  width: 300px;
}
</style>