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

<template>
  <el-card shadow="always" class="common-card-container" style="margin-top:25px;">
    <div slot="header">
      <span class="card-title">策略配置：{{$home.updateStrategyName}}</span>
      <div style="float: right; padding: 3px 0">
        <el-button type="warning" size="mini" @click="changeEditStatus">{{edit?'保存':'编辑'}}</el-button>
        <el-button type="default" size="mini" @click="cancelChange" v-show="edit === true">取消</el-button>
      </div>
    </div>
    <div style="padding:0 6px 12px 6px;">
      <div class="cl-items" v-for="(item,index) in tableData" :key="index+'lclf'">
        <div class="cl-header">{{item.month}}月</div>
        <div class="cl-content">
          <div class="cl-name" v-if="!edit">
            {{item.templateName || '-'}}
          </div>
          <template v-else>
            <el-select v-model="tableData[index].templateId" :disabled="!edit" class="temp-select" placeholder="请选择" clearable size="mini">
              <el-option
                v-for="(item,index) in tempList"
                :key="index+'sjpz'"
                :label="item.templateName"
                :value="item.templateId">
              </el-option>
            </el-select>
          </template>
        </div>
      </div>
    </div>

  </el-card>
</template>
<script>
import {timeConfigList, getTempNameList,setTimeConfigList} from '@/api/ems/dzjk'
export default {
  inject:['$home'],
  data() {
    return {
      edit:false,
      loading:false,
      tableData:[],
      tempList:[]
    }
  },
  methods:{
    changeSiteId(){
      this.tableData=[]
      this.tempList=[]
      this.edit = false
    },
    init(){
      this.getTimeConfigList()
    },
    getTempList(){
      const strategyId = this.$home.updateStrategyId
      const siteId=this.$home.siteId
      getTempNameList({strategyId,siteId}).then(response => {
        this.tempList =response?.data || [];
      })
    },
    getTimeConfigList(){
      const strategyId = this.$home.updateStrategyId
      const siteId=this.$home.siteId
      return timeConfigList({strategyId,siteId}).then(response => {
        const data = JSON.parse(JSON.stringify(response?.data || []))
        if(data.length === 0){
          for(var i=1;i<=12;i++){
            data.push({
              month:i,
              strategyId,
              siteId,
              templateId:'',
              templateName:''
            })
          }
        }
        this.tableData=data
      })
    },
    cancelChange(){
      this.edit =false
      this.getTimeConfigList()
    },
    changeEditStatus(){
      //当前状态是编辑状态
      if(this.edit){
        console.log('this.tableData',this.tableData)
        const strategyId = this.$home.updateStrategyId
        const siteId=this.$home.siteId
        this.tableData.forEach(item=>{
          item.siteId=siteId
          item.strategyId=strategyId
          item.templateName = (this.tempList.find(temp=>temp.templateId===item.templateId) || {}).templateName || ''
        })
        setTimeConfigList(this.tableData).then(response => {
          if(response?.code === 200){
            //更改成功 调用接口更新数据
            this.getTimeConfigList()
            this.edit=false;
          }
        })
      }else{
        this.edit=true;
        this.getTempList()
      }
    }
  }
}
</script>
<style scoped lang="scss">
.cl-items{
  width: 144px;
  height: 90px;
  line-height: 16px;
  display: inline-block;
  margin:12px 6px 0 6px;
  font-size:14px;
  color:#333333;
  border: 1px solid #eeeeee;
  .cl-header{
    background:  #FFE5AC;
    text-align: center;
    font-size:16px;
    line-height: 30px;
    height: 30px;
    width: 100%;
  }
  .cl-content{
    background-color: #ffffff;
    position: relative;
    height: 58px;
    width: 100%;
    .cl-name{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }
    .temp-select{
      width: 90%;
      position: absolute;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%);
    }
  }
}
</style>