策略

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

@@ -2,30 +2,112 @@
 <template>
   <el-card shadow="always" class="common-card-container" style="margin-top:25px;">
     <div slot="header">
-      <span class="card-title">策略配置：削峰填谷</span>
+      <span class="card-title">策略配置：{{$home.updateStrategyName}}</span>
       <div style="float: right; padding: 3px 0">
-        <el-button type="warning" size="mini">编辑</el-button>
+        <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>
-    <el-form :inline="true" class="select-container">
-      <el-form-item label="时间配置">
-        <el-select  v-model="timeType" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.name" :value="item.id" v-for="(item,index) in timeOptions" :key="index+'timeOptions'"></el-option>
-        </el-select>
-      </el-form-item>
-    </el-form>
     <div style="padding:0 6px 12px 6px;">
-      <div class="cl-items" v-for="item in 12" :key="item+'lclf'">
-        <div class="cl-header">{{item}}月</div>
+      <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">两放两冲</div>
+          <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;
@@ -40,14 +122,14 @@
     background:  #FFE5AC;
     text-align: center;
     font-size:16px;
-    line-height: 40px;
-    height: 40px;
+    line-height: 30px;
+    height: 30px;
     width: 100%;
   }
   .cl-content{
     background-color: #ffffff;
     position: relative;
-    height: 48px;
+    height: 58px;
     width: 100%;
     .cl-name{
       position: absolute;
@@ -55,26 +137,13 @@
       left:50%;
       transform: translate(-50%,-50%);
     }
+    .temp-select{
+      width: 90%;
+      position: absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
   }
 }
 </style>
-<script>
-export default {
-  data() {
-    return {
-      loading:false,
-      timeType:1,
-      timeOptions:[
-        {name:'按日',id:1},
-        {name:'按月',id:2},
-        {name:'按年',id:3},
-      ]
-    }
-  },
-  methods:{
-  },
-  mounted(){
-
-  }
-}
-</script>