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="primary" size="mini" @click="handlerType = 'add';$refs.addTemplate.dialogTableVisible=true">新增</el-button>
        <el-button type="warning" size="mini" @click="handlerType = 'edit';$refs.addTemplate.dialogTableVisible=true">编辑</el-button>
        <el-button type="primary" class="alarm-btn" size="mini" @click="deleteTemp">删除</el-button>
      </div>
    </div>
    <div>
      <el-button-group class="ems-btns-group">
        <el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.id}" type="small" @click="changeTemp(item.id)">{{item.name}}</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="name"
          label="模板名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="SOC限制">
          <template slot-scope="scope">
            <el-switch
              :value="scope.row.status === 1"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="min"
          label="SOC下限">
          <template slot-scope="scope">
            {{scope.row.min}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="max"
          label="SOC上限">
          <template slot-scope="scope">
            {{scope.row.max}}%
          </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="cfgl"
          label="充放功率（kW）">
        </el-table-column>
        <el-table-column
          prop="powerStatus"
          label="充电状态">
        </el-table-column>

      </el-table>
    </div>
    <add-template ref="addTemplate" :mode="handlerType" :edit-temp-id="activeTempData.id" :edit-temp-name="activeTempData.name"/>
  </el-card>
</template>

<script>
import AddTemplate from "./AddTemplate.vue";
export default {
  components: {AddTemplate},
  data() {
    return {
      handlerType:'',
      activeBtn:1,
      tempList:[
        {name:'模板1',id:1},
        {name:'模板2',id:2},
        {name:'模板3',id:3},
      ],
      tableData:[
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/05/07',endTime:'2030/05/07',cfgl:100,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2024/06/07',endTime:'2030/05/07',cfgl:110,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/07/07',endTime:'2030/05/07',cfgl:120,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/08/07',endTime:'2030/05/07',cfgl:130,powerStatus:'充电'},
        {name:'模板一',status:1,min:10,max:90,startTime:'2023/09/07',endTime:'2030/05/07',cfgl:140,powerStatus:'充电'},
      ],
      mixinPrototype:['name','status','min','max']
    }
  },
  computed:{
    activeTempData(){
      return this.tempList.find(item=>item.id === this.activeBtn)
    }
  },
  methods:{
    deleteTemp(){
      this.$confirm(`确认要删除${this.activeTempData.name}吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            setTimeout(() => {
              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
              done();
              // setTimeout(() => {
              instance.confirmButtonLoading = false;
              // }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(() => {
        //只有在故障复位成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        //取消复位
      });
    },
    changeTemp(id){
      //切换模板 更新数据
      if(id !== this.activeBtn){
        this.activeBtn=id;
      }
    },
    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
        }
      }
    }
  },
  mounted(){

  }
}
</script>