feat(system): 优化电价策略功能

- 添加删除策略功能
- 修复编辑策略时表单数据绑定问题
- 优化策略列表展示逻辑
- 调整策略表单验证方式
- 修改策略列表分页配置

web/src/components/ComTable.vue

@@ -152,7 +152,7 @@ const data = reactive({
 
   newPageOption: {},
   newTableOpt: {},
-  pageSizeOptions: ['15', '20', '30', '40', '50', '100'],
+  pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
   mountedScroll
 })
 const loading = ref(false)

web/src/components/system/policyForm.vue

@@ -6,7 +6,7 @@
       <img src="@/assets/images/titleLine.png" alt="" />
     </div>
     <a-form
-      :model="formState"
+      :model="formData"
       layout="inline"
       label-align="left"
       :label-col="{ style: { width: '85px' } }"
@@ -22,7 +22,7 @@
           v-model:value="formData.type"
           placeholder=""
           :disabled="formStatus == 'read'"
-          @change="changePolicy"
+          
         >
           <a-select-option v-for="item in policyTypes" :value="item.value">{{
             item.label
@@ -69,39 +69,44 @@
       <a-form-item label="时段表" class="col1" v-if="formData.type == '1'">
         <a-table
           :columns="columns"
-          :data-source="formData.period"
+          :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>
-                <!-- <a-button type="primary" @click="handleAdd" :disabled="formStatus == 'read'">Add</a-button> -->
                 <i
                   class="iconfont icon-add"
                   @click="handleAdd"
-                  :disabled="formStatus == 'read'"
-                  style="cursor: pointer"
+                  :style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
                 ></i>
               </span>
             </template>
           </template>
-          <template #bodyCell="{ column, record }">
+          <template #bodyCell="{ column, index }">
             <template v-if="column.dataIndex === 'action'">
               <span>
-                <a @click="edit(record.key)">操作</a>
+                <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">
+        <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>
@@ -109,58 +114,62 @@
         </a-form-item>
         <a-form-item label="" class="col1">
           <div class="charge">
-            <div class="box" v-for="(item, index) in formData.chargePolicy" :key="index">
+            <div class="box" v-for="(item, index) in formData.period5" :key="index">
               <span>第{{ index == 0 ? '一' : '二' }}次充放过程</span>
               <a-form
-                :ref="'period' + index"
-                :model="formData.period"
+                :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" required>
+                <a-form-item label="充电时间" class="col2" name="charge_time">
                   <a-time-range-picker
-                    v-model:value="formData.period[index]['charge_time']"
+                    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" required>
-                  <a-time-range-picker
-                    v-model:value="formData.period[index]['discharge_time']"
-                    format="HH:mm"
-                    value-format="HH:mm"
-                    :disabled="formStatus == 'read'"
-                  />
-                </a-form-item>
-
-                <a-form-item label="充电功率" class="col2" required>
+                <a-form-item label="充电功率" class="col2" name="chargeType">
                   <a-radio-group
-                    v-model:value="formData.period[index].chargeType"
-                    :disabled="formStatus == 'read'"
+                    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.period[index]['charge_power']"
+                      v-model:value="formData.period5[index]['charge_power']"
                     ></a-input>
                   </a-radio-group>
                 </a-form-item>
 
-                <a-form-item label="放电功率" class="col2" required>
+                <a-form-item label="放电功率" class="col2" name="dischargeType">
                   <a-radio-group
-                    v-model:value="formData.period[index].dischargeType"
-                    :disabled="formStatus == 'read'"
+                    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.period[index]['discharge_power']"
+                      v-model:value="formData.period5[index]['discharge_power']"
                     ></a-input>
                   </a-radio-group>
                 </a-form-item>
@@ -179,20 +188,25 @@
       <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">确认</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="formRef" :model="periodForm" :label-col="{ style: { width: '85px' } }">
-      <a-form-item ref="name" label="月份" name="month">
+    <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">
+      <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">
+      <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>
@@ -230,7 +244,10 @@ export default {
     return {
       data: [],
       policyTypes,
-      formData: {},
+      formData: {
+        period1: [],
+        period5: []
+      },
       columns: [
         {
           title: '月份',
@@ -273,14 +290,17 @@ export default {
             message: '请选择时段',
             trigger: 'change'
           }
-        ]
+        ],
+        month: [{ required: true, message: '请输入名称', trigger: 'change' }],
+        time: [{ required: true, message: '请输入名称', trigger: 'change' }]
       },
       periodRules: {
-        chargeTime: [{ required: true, trigger: 'change' }],
-        dischargeTime: [{ required: true, trigger: 'change' }],
+        charge_time: [{ required: true, trigger: 'change' }],
+        discharge_time: [{ required: true, trigger: 'change' }],
         chargeType: [{ required: true, trigger: 'change' }],
         dischargeType: [{ required: true, trigger: 'change' }]
-      }
+      },
+      periodFormRefs: []
     }
   },
   watch: {
@@ -288,38 +308,32 @@ export default {
       handler(newVal) {
         if (this.formStatus == 'add') {
           this.formData = {
-            type: '1',
+            type: '5',
             name: '测试',
             price: [0, 0, 0, 0],
-            period: [],
+            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
           }
-          // this.formData = {
-          //   type: '5',
-          //   name: '测试',
-          //   price: [0, 0, 0, 0],
-          //   chargePolicy:1,//1从
-          //   period: [{
-          //     charge_time: [],
-          //     discharge_time: [],
-          //     charge_power: '',
-          //     discharge_power: '',
-          //     chargeType: 1,
-          //     dischargeType:1
-          //   },
-          //   {
-          //     charge_time: [],
-          //     discharge_time: [],
-          //     charge_power: '',
-          //     discharge_power: '',
-          //     chargeType: 1,
-          //     dischargeType:1
-          //   }
-          //   ],
-          //   is_open: false,
-          //   chargePolicy:1
-          // }
+          
         } else {
           this.getFormData(newVal)
         }
@@ -330,46 +344,81 @@ export default {
   },
   mounted() {},
   methods: {
-    changePolicy(val) {
-      console.log(val)
+    changePolicy(e) {
+      const val = e.target.value
       if (val == 1) {
-        this.formData.period = []
+        this.formData.period5.splice(1,1)
       } else {
-        this.formData.period = [
+        this.formData.period5[1] = 
           {
             charge_time: [],
             discharge_time: [],
             charge_power: '',
             discharge_power: '',
-            powerType: 1
-          },
-          {
-            charge_time: [''],
-            discharge_time: [''],
-            charge_power: '',
-            discharge_power: '',
-            powerType: 1
+            chargeType: null,
+            dischargeType:null
           }
-        ]
+          
       }
     },
     //提交表单
-    handleOk() {
-      const { name, type, price, is_open, period, chargePolicy } = this.formData
-      const newForm = { name, type, is_open }
+    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) {
-        newForm.value = JSON.stringify({
+        const data = {
           period: this.getPeriodJson(type, period),
-          price: price.map((item) => Number(item))
-        })
+          price: price.map((item) => Number(item).toFixed(2))
+        }
+
+        newForm.value = JSON.stringify(data)
+        delete newForm.period1
       } else {
-        newForm.value = JSON.stringify({
+        const data = {
           period: this.getPeriodJson(type, period.slice(0, chargePolicy)),
-          price: price.map((item) => Number(item))
-        })
+          price: price.map((item) => Number(item).toFixed(2))
+        }
+        newForm.value = JSON.stringify(data)
+        delete newForm.period5
       }
-      console.log(newForm, 'this.formData')
-      this.addPolicy(newForm)
+      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')
@@ -377,54 +426,94 @@ export default {
     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 { price, period } = JSON.parse(value)
+
+      const jsonValue = JSON.parse(value)
+      const { price, period } = jsonValue
 
       this.formData = {
         ...newVal,
         is_open: Boolean(newVal['is_open']),
-        price,
-        period: this.getPeriod(type, period)
+        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.formData.period.push(this.periodForm)
-      this.periodModal = false
+      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
+          }
+
+          // this.formData.period1.push(this.periodForm)
+          this.periodModal = false
+        })
+        .catch((err) => {
+          console.log(err)
+        })
     },
-    getPeriod(type, list=[]) {
+    getPeriod(type, list = []) {
       let newValue = []
-      debugger
+
       if (type == 1) {
         list.forEach((arr, index) => {
-          const item = arr[0]
+          if (arr.length == 0) return
+          const item = arr[0] || []
           newValue.push({
             month: index + 1,
-            time: item[0]||'',
-            type: item[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]||''
+              time: element[0] || '',
+              type: element[1] || ''
             })
           }
         })
       } else {
+        this.formData.chargePolicy = list.length
         list.forEach((item, index) => {
           const ele = {
             ...item,
@@ -434,6 +523,8 @@ export default {
           newValue.push(ele)
         })
       }
+      console.log(newValue, '==========')
+
       return newValue
     },
     getPeriodJson(type, period) {
@@ -444,6 +535,11 @@ export default {
         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) => {
@@ -455,7 +551,7 @@ export default {
           newPeriod.push(ele)
         })
       }
-      return JSON.stringify(newPeriod)
+      return newPeriod
     }
   }
 }
@@ -533,7 +629,39 @@ export default {
     }
   }
 }
-:deep(.ant-form-item-row) {
-  // border: 1px solid red;
+:deep(.ant-table-wrapper .ant-table-row-expand-icon) {
+  color: $green !important;
 }
+//表格行悬浮样式
+:deep(.no-hover-row:hover > td) {
+  background-color: transparent !important;
+}
+// /* 禁用行的 hover 过渡动画 */
+// .ant-table-tbody > tr.ant-table-row {
+//   transition: none !important;
+// }
+
+// /* 确保 hover 背景色完全透明 */
+// .ant-table-tbody > tr.ant-table-row:hover > td {
+//   background-color: transparent !important;
+// }
+// .ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
+//   background-color: transparent !important;
+// }
+// :deep(.ant-table-tbody > tr.ant-table-row:hover > td) {
+//   background-color: transparent !important;
+// }
+// :deep(.ant-table-tbody) {
+//   color: var(--theme-text-default) !important;
+
+//   > tr {
+//     &:hover {
+//       > .ant-table-cell {
+
+//         background: none !important;
+//       }
+//     }
+
+//   }
+// }
 </style>