yudao-dev/src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue

<template>
  <div>
    <el-drawer title="参数绑定" :visible.sync="visible" size="70%" @close='closeD'>
      <div class="box">
        <el-form :inline="true">
          <el-form-item label="方案名称">
            <el-input v-model="name" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item label="能源类型">
            <el-input v-model="energyType" size='small' readonly></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size='small' v-if="showBtn" plain @click="addNew">新增</el-button>
            <el-button type="danger" size='small' v-if="showBtn" plain @click="deleteAll">批量删除</el-button>
          </el-form-item>
        </el-form>
        <base-table
          :page="queryParams.pageNo"
          :limit="queryParams.pageSize"
          :table-props="tableProps"
          :table-data="tableData"
          :max-height="tableH"
          :selectWidth="55"
          @selection-change="selectChange"
        >
          <method-btn
            v-if="tableBtn.length"
            slot="handleBtn"
            :width="80"
            label="操作"
            :method-list="tableBtn"
            @clickBtn="handleClick"
          />
        </base-table>
        <pagination
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-drawer>
    <!-- 新增 -->
    <energy-statistics-det-add ref="energyStatistics" @closeDet="closeDet" />
  </div>
</template>
<script>
import { getEnergyStatisticsDetPage, deleteEnergyStatisticsDet, deleteMany } from '@/api/monitoring/energyStatisticsDet'
import EnergyStatisticsDetAdd from './energyStatisticsDetAdd'
import { publicFormatter } from '@/utils/dict'
const tableProps = [
  {
    prop: 'objName',
    label: '所属对象'
  },
  {
    prop: 'objRemark',
    label: '对象备注'
  },
  {
    prop: 'paramName',
    label: '参数名称'
  },
  {
    prop: 'unit',
    label: '单位',
    filter: publicFormatter('energy_unit')
  },
  {
    prop: 'desc',
    label: '描述'
  }
]
export default {
  name: 'EnergyStatisticsDet',
  props: {
    energyTypeList: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      visible: false,
      tableProps,
      tableData: [],
      tableBtn: [],
      tableH: this.tableHeight(115),
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 30,
        statisticsId: null
      },
      name: '',
      energyType: '',
      energyTypeId: '',
      // 弹出层标题
      addOrEditTitle: "",
      // 是否显示弹出层
      centervisible: false,
      collectionList: [
        {value: 0,label: '否'},
        {value: 1,label: '是'}
      ],
      showBtn: true,
      selectedList: []
    }
  },
  components: { EnergyStatisticsDetAdd },
  created() {
    window.addEventListener('resize', () => {
      this.tableH = this.tableHeight(115)
    })
  },
  methods: {
    init(data,title) {
      this.visible = true
      this.queryParams.statisticsId = data.id
      this.name = data.name
      this.energyType = data.energyType
      this.energyTypeId = data.energyTypeId
      this.getList()
      if (title === 'detail') {
        this.showBtn = false
        this.tableBtn = []
      } else {
        this.showBtn = true
        this.tableBtn = [
          {
            type: 'delete',
            btnName: '删除'
          }
        ]
      }
    },
    getList() {
      console.log(this.queryParams)
      getEnergyStatisticsDetPage({...this.queryParams}).then((res) => {
        let arr = res.data.list || []
        arr&&arr.map(item => {
          this.collectionList.map(i => {
            if (item.collection === i.value) {
              item.collection = i.label
            }
          })
          this.energyTypeList.map(j => {
            if (item.typeId === j.id) {
              item.typeId = j.name
            }
          })
        })
        this.tableData = arr
        this.total = res.data.total;
      })
    },
    // 新增
    addNew() {
      this.$nextTick(() => {
        this.$refs.energyStatistics.init({'statisticsId': this.queryParams.statisticsId, energyTypeId:this.energyTypeId})
      })
    },
    selectChange(val) {
      console.log(val)
      this.selectedList = val
    },
    // 批量删除
    deleteAll() {
      let arr = []
      if (this.selectedList.length === 0) {
        this.$modal.msgWarning("请选勾选数据")
        return false
      } else {
        this.selectedList.map((item) => {
          arr.push(item.id)
        })
      }
      this.$modal.confirm('是否确认删除所有勾选的数据项?').then(function() {
          return deleteMany(arr);
        }).then(() => {
          this.queryParams.pageNo = 1
          this.getList()
          this.$modal.msgSuccess("删除成功")
        }).catch(() => {})
    },
    handleCancel() {
      this.$refs.energyStatistics.formClear()
      this.centervisible = false
      this.addOrEditTitle = ''
    },
    handleConfirm() {
      this.$refs.energyStatistics.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getList()
    },
    handleClick(val) {
      this.handleDelete(val.data)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认删除参数列名为"' + row.paramName + '"的数据项?').then(function() {
          return deleteEnergyStatisticsDet(row.id);
        }).then(() => {
          this.queryParams.pageNo = 1
          this.getList()
          this.$modal.msgSuccess("删除成功")
        }).catch(() => {})
    },
    closeD() {
      this.$emit('closeDrawer')
    },
    closeDet() {  // 关闭新增框
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 32px;
}
</style>