策略配置

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

@@ -0,0 +1,243 @@
+<template>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑${editTempName}` ">
+      <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="模板名称" prop="tempName">
+          <el-input v-model="formData.tempName" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="soc限制" prop="socStatus" required>
+          <el-switch v-model="formData.socStatus"></el-switch>
+        </el-form-item>
+        <el-form-item label="soc下限" prop="min">
+          <el-input v-model="formData.min" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+        </el-form-item>
+        <el-form-item label="soc上限" prop="max">
+          <el-input v-model="formData.max" placeholder="请输入" clearable :style="{width: '100%'}"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-button type="primary" size="mini" @click="addTime">新增</el-button>
+<!--      新增时间段表单-->
+      <el-collapse-transition>
+          <el-card v-show="showAddTime" shadow="always" class="common-card-container" style="margin-top:25px;">
+            <el-form class="add-time-form transition-box" ref="addTimeForm" :model="formInline" :rules="formInlineRule" label-width="100px" style="margin-top:25px">
+            <el-form-item label="开始时间" prop="startTime">
+              <el-time-select
+                placeholder="开始时间"
+                v-model="formInline.startTime"
+                :picker-options="{
+                start: '00:00',
+                step: '01:00',
+                end: '23:00',
+              }">
+              </el-time-select>
+            </el-form-item>
+            <el-form-item label="结束时间" prop="endTime">
+              <el-time-select
+                placeholder="结束时间"
+                v-model="formInline.endTime"
+                :picker-options="{
+                start: '00:00',
+                step: '01:00',
+                end: '24:00',
+                minTime: formInline.startTime
+              }">
+              </el-time-select>
+            </el-form-item>
+            <el-form-item label="冲放功率" prop="cfgl">
+              <el-input v-model="formInline.cfgl" placeholder="请输入"></el-input>
+            </el-form-item>
+            <el-form-item label="充电状态" prop="powerStatus">
+              <el-select v-model="formInline.powerStatus" placeholder="请选择">
+                <el-option v-for="(item,index) in powerStatusOptions" :key="index+'powerStatusOptions'" :label="item.label" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="saveTime">保存</el-button>
+              <el-button size="mini" @click="cancelAddTime">取消</el-button>
+            </el-form-item>
+          </el-form>
+          </el-card>
+      </el-collapse-transition>
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;margin-top:25px">
+        <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
+        <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="充电状态">
+          <template slot-scope="scope">
+            {{scope.row.powerStatus === 1 ? '充电' :'放电'}}
+          </template>
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="120">
+          <template slot-scope="scope">
+            <el-button
+              @click.native.prevent="deleteRow(scope.$index, tableData)"
+              type="warning"
+              size="mini">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div slot="footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveDialog">确定</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+  props:{
+    mode:{
+      type:String,
+      default:"add"
+    },
+    editTempId:{
+      type:Number,
+      default:''
+    },
+    editTempName:{
+      type:String,
+      default:''
+    }
+  },
+  data() {
+    return {
+      dialogTableVisible:false,
+      formData: {
+        tempName: '',
+        socStatus: false,
+        min: '',
+        max: '',
+      },
+      rules: {
+        tempName: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+        min: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+        max: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+      },
+      showAddTime: false,
+      formInline:{
+        startTime:'',endTime:'',cfgl:'',powerStatus:1
+      },
+      formInlineRule:{
+        startTime: [{
+          required: true,
+          message: '请选择开始时间',
+          trigger: 'change'
+        }],
+        endTime: [{
+          required: true,
+          message: '请选择结束时间',
+          trigger: 'change'
+        }],
+        cfgl: [{
+          required: true,
+          message: '请输入冲放功率',
+          trigger: 'blur'
+        }],
+      },
+      tableData:[],
+      powerStatusOptions:[{label:'充电',value:1},{label:'放电',value:2}],
+    }
+  },
+  computed: {},
+  watch: {
+    "formInline.startTime":{
+      handler(newVal,oldVal){
+        if(newVal && this.formInline.endTime){
+          const endTime = parseInt((this.formInline.endTime).split(':')[0] || 0)
+          const startTime =parseInt(newVal.split(':')[0])
+          if(endTime<=startTime){
+            this.formInline.endTime = `${startTime+1 <=9 ? '0'+(startTime+1) : startTime+1}:00`
+          }
+        }
+      },
+      deep:true
+    }
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    addTime(){
+      this.showAddTime=true
+    },
+    cancelAddTime(){
+      this.$refs.addTimeForm.resetFields()
+      this.showAddTime=false
+      this.formInline = {startTime:'',endTime:'',cfgl:'',powerStatus:1}
+    },
+    saveTime(){
+      //表单校验，校验成功，添加到tableData里
+      this.$refs.addTimeForm.validate(valid => {
+        if (!valid) return
+        this.tableData.push(JSON.parse(JSON.stringify(this.formInline)));
+        this.$nextTick(() => {this.cancelAddTime()})
+      })
+    },
+    deleteRow(index, table){
+      this.tableData.splice(index,1)
+    },
+    saveDialog() {
+      this.$refs.addTempForm.validate(valid => {
+        if (!valid) return
+        this.closeDialog()
+      })
+    },
+    closeDialog(){
+      // 清空所有数据
+      this.$refs.addTempForm.resetFields()
+      this.formData={
+        tempName: '',
+          socStatus: false,
+          min: '',
+          max: '',
+      }
+      this.tableData=[]
+      this.cancelAddTime()
+      this.dialogTableVisible=false
+    }
+  }
+}
+
+</script>
+<style scoped>
+.ems-dialog{
+  .el-dialog{
+    max-width: 700px;
+  }
+  .add-time-form{
+    .el-input{
+      width: 220px;
+    }
+  }
+}
+</style>

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

@@ -4,9 +4,9 @@
     <div slot="header">
       <span class="card-title">新增模板</span>
       <div style="float: right; padding: 3px 0">
-        <el-button type="primary" size="mini">新增</el-button>
-        <el-button type="warning" size="mini">编辑</el-button>
-        <el-button type="primary" class="alarm-btn" size="mini">删除</el-button>
+        <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>
@@ -17,7 +17,7 @@
         :data="tableData"
         :span-method="tableSpanFilter"
         border
-        style="width: 100%;">
+        style="width: 100%;margin-top:25px;">
         <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
         <el-table-column
           prop="name"
@@ -67,17 +67,17 @@
 
       </el-table>
     </div>
-
+    <add-template ref="addTemplate" :mode="handlerType" :edit-temp-id="activeTempData.id" :edit-temp-name="activeTempData.name"/>
   </el-card>
 </template>
 
-<style scoped lang="scss">
-
-</style>
 <script>
+import AddTemplate from "./AddTemplate.vue";
 export default {
+  components: {AddTemplate},
   data() {
     return {
+      handlerType:'',
       activeBtn:1,
       tempList:[
         {name:'模板1',id:1},
@@ -94,7 +94,43 @@ export default {
       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){