emsfront/src/views/ems/dzjk/clpz/xftg/TempTable.vue

<template>
  <el-card shadow="always" class="common-card-container">
    <div slot="header">
      <span class="card-title">新增模板</span>
      <div style="float: right; padding: 3px 0">
        <el-button type="text"  size="mini" @click="back">返回策略运行</el-button>
        <el-button type="primary" size="mini" @click="addTemp">新增</el-button>
        <template v-if="tempList.length>0">
          <el-button type="warning" size="mini" @click="editTemp">编辑</el-button>
          <el-button type="primary" class="alarm-btn" size="mini" @click="deleteTemp">删除</el-button>
        </template>
      </div>
    </div>
    <div>
      <template v-if="tempList.length>0">
        <el-button-group class="ems-btns-group">
          <el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.templateId}" size="small" @click="changeTemp(item.templateId)">{{item.templateName}}</el-button>
        </el-button-group>
        <el-table
          :data="tableData"
          :span-method="tableSpanFilter"
          border
          style="width: 100%;margin-top:25px;">
          <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
          <el-table-column
            prop="templateName"
            label="模板名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sdcLimit"
            label="SOC限制">
            <template slot-scope="scope">
              <el-switch disabled :active-value="1" :inactive-value="0" v-model="scope.row.sdcLimit"></el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="sdcDown"
            label="SOC下限">
            <template slot-scope="scope">
              {{scope.row.sdcDown ? scope.row. sdcDown + '%' : '-'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="sdcUp"
            label="SOC上限">
            <template slot-scope="scope">
              {{scope.row.sdcUp ? scope.row.sdcUp + '%' : '-'}}
            </template>
          </el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间">
          </el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间">
          </el-table-column>
          <el-table-column
            prop="chargeDischargePower"
            label="充放功率（kW）">
          </el-table-column>
          <el-table-column
            prop="chargeStatus"
            label="充电状态">
            <template slot-scope="scope">
              {{chargeStatusOptions[scope.row.chargeStatus]}}
            </template>
          </el-table-column>

        </el-table>
      </template>
      <template v-else>
        <el-empty :image-size="150"></el-empty>
      </template>
    </div>
    <add-template ref="addTemplate" :mode="handlerType" :editTempId="activeBtn" @update="init" @updateTimeSetting="$emit('updateTimeSetting')"/>
  </el-card>
</template>

<script>
import {mapState} from 'vuex'
import AddTemplate from "./AddTemplate.vue";
import {getTempNameList, getStrategyTempDetail, deleteStrategyTemp} from '@/api/ems/dzjk'
export default {
  components: {AddTemplate},
  inject:['$home'],
  data() {
    return {
      handlerType:'',
      activeBtn:'',
      tempList:[],
      tableData:[],
      mixinPrototype:['templateName','sdcLimit','sdcDown','sdcUp']
    }
  },
  computed:{
    ...mapState({
      chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
    }),
    activeTempData(){
      return this.tempList.find(item=>item.templateId === this.activeBtn) || {}
    }
  },
  methods:{
    back(){
      this.$home.init()
    },
    changeSiteId(){
      this.tempList=[]
      this.tableData=[]
      this.handlerType=''
      this.activeBtn=''
      this.$refs.addTemplate && this.$refs.addTemplate.changeSiteId()
    },
    addTemp(){
      this.$refs.addTemplate.show({mode:'add',editTempId:''})
    },
    editTemp(){
      this.$refs.addTemplate.show({mode:'edit',editTempId:this.activeBtn})
    },
    init(){
      getTempNameList({strategyId:this.$home.updateStrategyId,siteId:this.$home.siteId}).then(response => {
        const data = response?.data || [];
        this.tempList =data
        if(data.length ===0 && this.activeBtn){
          this.activeBtn=''
        }else if(!this.activeBtn && data.length>0){
            this.activeBtn =data[0].templateId
        }else if(this.activeBtn && data.length>0 && !data.find(item=>item.templateId === this.activeBtn)){
          this.activeBtn =data[0].templateId
        }
        this.activeBtn && getStrategyTempDetail(this.activeBtn).then(response => {
          this.tableData=response?.data || [];
        })
      })
    },
    deleteTemp(){
      this.$confirm(`确认要删除${this.activeTempData.templateName}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            deleteStrategyTemp(this.activeBtn).then(response => {
              if(response?.code === 200){
                //删除成功
                done();
              }
            }).finally(() => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      }).then(() => {
        //只有删除成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.init()
        this.$emit('updateTimeSetting')
      }).catch(() => {
        //取消
      });
    },
    changeTemp(id=''){
      //切换模板 更新数据
      if(id !== this.activeBtn){
        this.activeBtn=id;
        this.init()
      }
    },
    tableSpanFilter({ row, column, rowIndex, columnIndex }){
      if(!this.mixinPrototype.includes(column.property)) return { rowspan: 1,colspan: 1 }
      if(rowIndex===0){
        return {
          rowspan: this.tableData.length,
          colspan: 1
        };
      }else{
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  },
}
</script>