energy_storage/web/src/components/system/policyForm.vue

<!-- eslint-disable camelcase -->
<template>
  <div class="policyForm">
    <div class="title">
      <div>基础信息</div>
      <img src="@/assets/images/titleLine.png" alt="" />
    </div>
    <a-form
      :model="formData"
      layout="inline"
      label-align="left"
      :label-col="{ style: { width: '85px' } }"
      :rules="rules"
      ref="formRef"
    >
      <a-form-item label="名称" class="col2" name="name">
        <a-input v-model:value="formData.name" :disabled="formStatus == 'read'" />
      </a-form-item>

      <a-form-item label="类型" class="col2" name="type">
        <a-select
          v-model:value="formData.type"
          placeholder=""
          :disabled="formStatus == 'read'"
          
        >
          <a-select-option v-for="item in policyTypes" :value="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="低谷电价" class="col4" required>
        <a-input-number
          :precision="2"
          v-model:value="formData.price[0]"
          suffix="元/kWh"
          :disabled="formStatus == 'read'"
        />
      </a-form-item>

      <a-form-item label="平段电价" class="col4" required>
        <a-input-number
          :precision="2"
          v-model:value="formData.price[1]"
          suffix="元/kWh"
          :disabled="formStatus == 'read'"
        />
      </a-form-item>

      <a-form-item label="高峰电价" class="col4" required>
        <a-input-number
          :precision="2"
          v-model:value="formData.price[2]"
          suffix="元/kWh"
          :disabled="formStatus == 'read'"
        />
      </a-form-item>

      <a-form-item label="尖峰电价" class="col4" required>
        <a-input-number
          :precision="2"
          v-model:value="formData.price[3]"
          suffix="元/kWh"
          :disabled="formStatus == 'read'"
        />
      </a-form-item>

      <a-form-item label="时段表" class="col1" v-if="formData.type == '1'">
        <a-table
          :columns="columns"
          :data-source="formData.period1"
          size="small"
          :scroll="{ y: 500 }"
          :pagination="false"
          row-class-name="no-hover-row"
          row-key="month"
        >
          <template #headerCell="{ column }">
            <template v-if="column.key === 'action'">
              <span>
                <i
                  class="iconfont icon-add"
                  @click="handleAdd"
                  :style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
                ></i>
              </span>
            </template>
          </template>
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex === 'action'">
              <span>
                <a
                  @click="delPeriod(index)"
                  :style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
                  >删除</a
                >
              </span>
            </template>
          </template>
        </a-table>
      </a-form-item>
      <div v-if="formData.type == 5">
        <a-form-item label="充放策略" class="col1" name="chargePolicy">
          <a-radio-group
            v-model:value="formData.chargePolicy"
            :disabled="formStatus == 'read'"
            name="chargePolicy"
            @change="changePolicy"
          >
            <a-radio :value="1">一充一放</a-radio>
            <a-radio :value="2">两充两放</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="" class="col1">
          <div class="charge">
            <div class="box" v-for="(item, index) in formData.period5" :key="index">
              <span>第{{ index == 0 ? '一' : '二' }}次充放过程</span>
              <a-form
                :ref="
                  (el) => {
                    periodFormRefs[index] = el
                  }
                "
                :model="item"
                layout="inline"
                label-align="left"
                :label-col="{ style: { width: '85px' } }"
                :rules="periodRules"
              >
                <a-form-item label="充电时间" class="col2" name="charge_time">
                  <a-time-range-picker
                    format="HH:mm"
                    value-format="HH:mm"
                    :disabled="formStatus == 'read'"
                    v-model:value="formData.period5[index]['charge_time']"
                  />
                </a-form-item>

                <a-form-item label="放电时间" class="col2" name="discharge_time">
                  <a-time-range-picker
                    v-model:value="formData.period5[index]['discharge_time']"
                    format="HH:mm"
                    value-format="HH:mm"
                    :disabled="formStatus == 'read'"
                  />
                </a-form-item>

                <a-form-item label="充电功率" class="col2" name="chargeType">
                  <a-radio-group
                    v-model:value="formData.period5[index].chargeType"
                   
                  >
                    <a-radio :value="0">自动</a-radio>
                    <a-radio :value="1">自定义</a-radio>
                    <a-input
                      style="width: 60px"
                      v-model:value="formData.period5[index]['charge_power']"
                    ></a-input>
                  </a-radio-group>
                </a-form-item>

                <a-form-item label="放电功率" class="col2" name="dischargeType">
                  <a-radio-group
                    v-model:value="formData.period5[index].dischargeType"
                    
                  >
                    <a-radio :value="0">自动</a-radio>
                    <a-radio :value="1">自定义</a-radio>
                    <a-input
                      style="width: 60px"
                      v-model:value="formData.period5[index]['discharge_power']"
                    ></a-input>
                  </a-radio-group>
                </a-form-item>
              </a-form>
            </div>
          </div>
        </a-form-item>
      </div>

      <a-form-item label="策略描述" class="col2">
        <a-textarea v-model:value="formData.describe" :disabled="formStatus == 'read'" />
      </a-form-item>
      <a-form-item label="是否启用" class="col2">
        <a-switch v-model:checked="formData['is_open']" :disabled="formStatus == 'read'" />
      </a-form-item>
      <a-form-item class="col1">
        <div style="display: flex; justify-content: center; gap: 20px">
          <a-button @click="handleCancel">取消</a-button>
          <a-button @click="handleOk" type="primary"  :disabled="formStatus == 'read'">确认</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
  <a-modal v-model:open="periodModal" @ok="handlePeriodModalOk">
    <a-form
      ref="periodRef"
      :model="periodForm"
      :label-col="{ style: { width: '85px' } }"
      :rules="rules"
    >
      <a-form-item ref="name" label="月份" name="month" required>
        <a-input v-model:value="periodForm.month" />
      </a-form-item>
      <a-form-item label="开始时间" name="time" required>
        <a-time-picker v-model:value="periodForm.time" value-format="HH:mm" format="HH:mm" />
      </a-form-item>
      <a-form-item label="时段类型" name="type" required>
        <a-select ref="select" v-model:value="periodForm.type">
          <a-select-option value="尖">尖</a-select-option>
          <a-select-option value="峰">峰</a-select-option>
          <a-select-option value="平">平</a-select-option>
          <a-select-option value="谷">谷</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { policyTypes } from '@/utils/config'
import { postReq, getReq } from '@/request/api'
export default {
  name: '',
  components: {},
  props: {
    formState: {
      type: Object,
      default: () => {
        return {
          name: '',
          type: '',
          desc: ''
        }
      }
    },
    formStatus: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      data: [],
      policyTypes,
      formData: {
        period1: [],
        period5: []
      },
      columns: [
        {
          title: '月份',
          dataIndex: 'month',
          key: 'month'
        },
        {
          title: '开始时间',
          dataIndex: 'time',
          key: 'time'
        },
        {
          title: '时段类型',
          dataIndex: 'type',
          key: 'type'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action'
        }
      ],
      periodModal: false,
      periodForm: {},
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        price: [
          {
            type: 'array',
            required: true,
            message: '请输入电价',
            trigger: 'change'
          }
        ],
        period: [
          {
            type: 'array',
            required: true,
            message: '请选择时段',
            trigger: 'change'
          }
        ],
        month: [{ required: true, message: '请输入名称', trigger: 'change' }],
        time: [{ required: true, message: '请输入名称', trigger: 'change' }]
      },
      periodRules: {
        charge_time: [{ required: true, trigger: 'change' }],
        discharge_time: [{ required: true, trigger: 'change' }],
        chargeType: [{ required: true, trigger: 'change' }],
        dischargeType: [{ required: true, trigger: 'change' }]
      },
      periodFormRefs: []
    }
  },
  watch: {
    formState: {
      handler(newVal) {
        if (this.formStatus == 'add') {
          this.formData = {
            type: '5',
            name: '测试',
            price: [0, 0, 0, 0],
            period1: [],
            period5: [
              {
                charge_time: [],
                discharge_time: [],
                charge_power: '',
                discharge_power: '',
                chargeType: null,
                dischargeType: null
              }
              // {
              //   charge_time: [],
              //   discharge_time: [],
              //   charge_power: '',
              //   discharge_power: '',
              //   chargeType: 1,
              //   dischargeType:1
              // }
            ],
            is_open: false,
            chargePolicy: 1
          }
          
        } else {
          this.getFormData(newVal)
        }
      },
      deep: true, // 深度监听
      immediate: true
    }
  },
  mounted() {},
  methods: {
    changePolicy(e) {
      const val = e.target.value
      if (val == 1) {
        // const {length} = this.formData.period5

        // this.formData.period5.splice(1,1)
        this.formData.period1=[]

      } else {
        this.formData.period5[1] = 
          {
            charge_time: [],
            discharge_time: [],
            charge_power: '',
            discharge_power: '',
            chargeType: null,
            dischargeType:null
          }
          
      }
    },
    //提交表单
    async handleOk() {
      const { type, price, is_open, chargePolicy } = this.formData
      const periodKey = `period${type}`
      const period = this.formData[periodKey] // 正确使用 period
      const newForm = { ...this.formData, is_open: Number(is_open) }

      if (type == 1) {
        const data = {
          period: this.getPeriodJson(type, period),
          price: price.map((item) => Number(item).toFixed(2))
        }

        newForm.value = JSON.stringify(data)
        delete newForm.period1
      } else {
        const data = {
          period: this.getPeriodJson(type, period.slice(0, chargePolicy)),
          price: price.map((item) => Number(item).toFixed(2))
        }
        newForm.value = JSON.stringify(data)
        delete newForm.period5
      }
      delete newForm.price
      // console.log(this.$refs.formRef,'=================');

      //校验表单
      // const formRefres = await this.validateform('formRef',newForm)
      // const formRefres = this.validateform(periodKey,newForm)
      // console.log(formRefres);

      this.validateform(newForm)
    },
    async validateform(newForm) {
      try {
        await this.$refs.formRef.validateFields()
        if(newForm.type==5){
          const validFormRefs = this.periodFormRefs.filter((item) => 
            item && typeof item.validateFields === 'function'
          )
          await Promise.all(
            validFormRefs.map((item) => item.validateFields())
          )
        }
       
    
        if (this.formStatus == 'add') {
          this.addPolicy(newForm)
        } else if (this.formStatus == 'edit') {
          this.updatePolicy(newForm)
        }
        


      } catch (error) {
        console.log(error)
      }
      
    },
    handleCancel() {
      this.$emit('closeModal')
    },
    async addPolicy(newForm) {
      try {
        const res = await postReq('/insertPolicy', newForm)
        if (res.errcode == 0) {
          this.$message.success('添加成功')
          this.$emit('closeModal', true)
        }
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    async updatePolicy(newForm) {
      try {
        const res = await postReq('/updatePolicy', newForm)
        if (res.errcode == 0) {
          this.$message.success('更新成功')
          this.$emit('closeModal', true)
        }
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    //时段表删除
    delPeriod(index) {
      // console.log(record);
      this.formData.period1.splice(index, 1)
    },

    //获取编辑的表单
    getFormData(newVal) {
      const { value, type } = newVal

      const jsonValue = JSON.parse(value)
      const { price, period } = jsonValue

      this.formData = {
        ...newVal,
        is_open: Boolean(newVal['is_open']),
        price
      }
      // const periodKey=period[type]
      this.formData[`period${type}`] = this.getPeriod(type, period)
      console.log(this.formData)
    },
    handleAdd() {
      this.periodModal = true
      this.periodForm = {}
    },
    handlePeriodModalOk() {
      this.$refs.periodRef
        .validateFields()
        .then((res) => {
          console.log(this.formData.period1,'=============')
          const target = this.formData.period1.find((item) => item.month == this.periodForm.month)

          if (target) {
            target.children.push(this.periodForm) // 如果找到，放入 children
          }else{
            this.formData.period1.push(this.periodForm)
          }

          // this.formData.period1.push(this.periodForm)
          this.periodModal = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getPeriod(type, list = []) {
      let newValue = []

      if (type == 1) {
        list.forEach((arr, index) => {
          if (arr.length == 0) return
          const item = arr[0] || []
          newValue.push({
            month: index + 1,
            time: item[0] || '',
            type: item[1] || '',
            children: []
          })
          for (let i = 1; i < arr.length; i++) {
            const element = arr[i]
            newValue[index].children.push({
              time: element[0] || '',
              type: element[1] || ''
            })
          }
        })
      } else {
        this.formData.chargePolicy = list.length
        list.forEach((item, index) => {
          const ele = {
            ...item,
            chargeType: item['charge_power'].length == 0 ? 0 : 1,
            dischargeType: item['discharge_power'].length == 0 ? 0 : 1
          }
          newValue.push(ele)
        })
      }
      console.log(newValue, '==========')

      return newValue
    },
    getPeriodJson(type, period) {
      let newPeriod = []

      if (type == 1) {
        newPeriod = Array.from({ length: 12 }, () => [])
        period.forEach((item, index) => {
          const { month, time, type } = item
          newPeriod[month - 1].push([time, type])
          if (item.children.length > 0) {
            item.children.forEach((ele) => {
              newPeriod[month - 1].push([ele.time, ele.type])
            })
          }
        })
      } else {
        period.forEach((item, index) => {
          const ele = {
            ...item
          }
          delete ele.chargeType
          delete ele.dischargeType
          newPeriod.push(ele)
        })
      }
      return newPeriod
    }
  }
}
</script>

<style lang="scss" scoped>
.policyForm {
  color: #fff;
  .title {
    display: flex;
    font-weight: 700;
    flex-direction: column;

    img {
      width: 232px;
      height: 6px;
      margin-top: 10px;
    }
  }
}
.ant-form {
  .charge {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    .box {
      border: 1px solid $table-border;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 10px;
      color: #fff;
    }
  }
}
.ant-form-item {
  margin-inline-end: 0 !important;
  margin-top: 15px;
  :deep(.ant-form-item-label) {
    margin-left: 10px;
  }
}
.ant-form {
  .ant-form-item-label {
    > label {
      color: #fff;
    }
  }

  :deep(.ant-row) {
    width: 100%;
  }
  input,
  .ant-picker,
  .ant-select,
  .ant-input-affix-wrapper,
  .ant-input-number {
    width: 150px;
  }
  textarea {
    .ant-input {
      width: 100%;
    }
  }
  .col2 {
    width: 50%;
  }
  .col4 {
    width: 25%;
  }
  .col1 {
    width: 100%;
    :deep(textarea.ant-input) {
      width: 100% !important;
    }
  }
}
:deep(.ant-table-wrapper .ant-table-row-expand-icon) {
  color: $green !important;
}
//表格行悬浮样式
:deep(.no-hover-row:hover > td) {
  background-color: transparent !important;
}
:deep(.ant-table-wrapper .ant-table-cell){
    background:none!important;
  }

</style>