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

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

web/.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   plugins: ['react', '@typescript-eslint', 'prettier'], // 添加 prettier 插件
   rules: {
+    camelcase: 'off',
     'vue/require-explicit-emits': 'off', // 关闭 emits 声明检查
     'vue/v-on-event-hyphenation': 'off',
     'prettier/prettier': 'off',

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: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
-                  style="cursor: 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"
+                :ref="
-                :model="formData.period"
+                  (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-form-item label="充电功率" class="col2" name="chargeType">
-                  <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-radio-group
-                    v-model:value="formData.period[index].chargeType"
+                    v-model:value="formData.period5[index].chargeType"
-                    :disabled="formStatus == 'read'"
+                   
                   >
                     <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"
+                    v-model:value="formData.period5[index].dischargeType"
-                    :disabled="formStatus == 'read'"
+                    
                   >
                     <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
-      <a-form-item ref="name" label="月份" name="month">
+      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' }],
+        charge_time: [{ required: true, trigger: 'change' }],
-        dischargeTime: [{ required: true, trigger: 'change' }],
+        discharge_time: [{ required: true, trigger: 'change' }],
         chargeType: [{ required: true, trigger: 'change' }],
         dischargeType: [{ required: true, trigger: 'change' }]
-      }
+      },
+      periodFormRefs: []
     }
   },
   watch: {
@@ -288,26 +308,19 @@ export default {
       handler(newVal) {
         if (this.formStatus == 'add') {
           this.formData = {
-            type: '1',
+            type: '5',
             name: '测试',
             price: [0, 0, 0, 0],
-            period: [],
+            period1: [],
-            is_open: false,
+            period5: [
-            chargePolicy: 1
+              {
+                charge_time: [],
+                discharge_time: [],
+                charge_power: '',
+                discharge_power: '',
+                chargeType: null,
+                dischargeType: null
               }
-          // 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: [],
@@ -316,10 +329,11 @@ export default {
               //   chargeType: 1,
               //   dischargeType:1
               // }
-          //   ],
+            ],
-          //   is_open: false,
+            is_open: false,
-          //   chargePolicy:1
+            chargePolicy: 1
-          // }
+          }
+          
         } else {
           this.getFormData(newVal)
         }
@@ -330,46 +344,81 @@ export default {
   },
   mounted() {},
   methods: {
-    changePolicy(val) {
+    changePolicy(e) {
-      console.log(val)
+      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
+            chargeType: null,
-          },
+            dischargeType:null
-          {
-            charge_time: [''],
-            discharge_time: [''],
-            charge_power: '',
-            discharge_power: '',
-            powerType: 1
           }
-        ]
+          
       }
     },
     //提交表单
-    handleOk() {
+    async handleOk() {
-      const { name, type, price, is_open, period, chargePolicy } = this.formData
+      const { type, price, is_open, chargePolicy } = this.formData
-      const newForm = { name, type, is_open }
+      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))
-        })
-      } else {
-        newForm.value = JSON.stringify({
-          period: this.getPeriodJson(type, period.slice(0, chargePolicy)),
-          price: price.map((item) => Number(item))
-        })
         }
-      console.log(newForm, 'this.formData')
+
+        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')
@@ -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,
+        price
-        period: this.getPeriod(type, period)
       }
+      // 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.$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]||'',
+            time: item[0] || '',
-            type: item[1]||'',
+            type: item[1] || '',
             children: []
           })
           for (let i = 1; i < arr.length; i++) {
             const element = arr[i]
             newValue[index].children.push({
-              time: element[0]||'',
+              time: element[0] || '',
-              type: element[1]||''
+              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) {
+:deep(.ant-table-wrapper .ant-table-row-expand-icon) {
-  // border: 1px solid red;
+  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>

web/src/views/system/policy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="policy">
+  <div class="policy" ref="policy">
     <searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm" />
     <div class="content-table">
       <ComTable
@@ -35,21 +35,30 @@
             style="margin-left: 10px"
             >修改</a-button
           >
-          <a-button
+          <a-popconfirm
-            type="primary"
+            title="确认要删除数据吗?"
-            size="small"
+            ok-text="确认"
-            @click="operateForm('del', record)"
+            cancel-text="取消"
-            class="btn-del"
+            @confirm="operateForm('del', record)"
-            style="margin-left: 10px"
+            @cancel="() => {}"
+          >
+            <a-button type="primary" size="small" class="btn-del" style="margin-left: 10px"
               >删除</a-button
             >
+          </a-popconfirm>
         </template>
       </ComTable>
     </div>
   </div>
   <div>
-    <a-modal v-model:open="formModal"  width="70%" style="top: 20px" :footer="null">
+    <a-modal
-      <policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal"/>
+      v-model:open="formModal"
+      width="70%"
+      style="top: 20px"
+      :footer="null"
+      :get-container="() => $refs.policy"
+    >
+      <policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
     </a-modal>
   </div>
 </template>
@@ -66,8 +75,8 @@ export default {
     return {
       formModal: false,
       btnOptionList: [
-        { label: '新增', icon: 'icon-tianjia', type: 'add' },
+        { label: '新增', icon: 'icon-tianjia', type: 'add' }
-        { label: '删除', icon: 'icon-tianjia', type: 'del' }
+        // { label: '删除', icon: 'icon-tianjia', type: 'del' }
       ],
       columns: [
         {
@@ -125,15 +134,17 @@ export default {
         }
       ],
       tableData: [],
-      tableOption: {},
+      tableOption: {
+        select:false
+      },
       pageOption: {
-        page: 0,
+        page: 1,
         pageSize: 10,
-        total: 0
+        count: 0
       },
       tableH: '',
       formState: {},
-      formStatus:'add',//表单状态辑状态 add:新增 edit:编辑
+      formStatus: 'add' //表单状态辑状态 add:新增 edit:编辑
     }
   },
   mounted() {
@@ -148,13 +159,12 @@ export default {
         })
         console.log(res)
         this.tableData = res.data
-        this.total = res.count
+        this.pageOption.count = res.count
       } catch (error) {
         console.log(error)
       }
     },
     getPolicyType(type) {
-      
       return policyTypes.find((item) => item.value == type)?.label || ''
     },
 
@@ -162,6 +172,7 @@ export default {
       console.log(data)
     },
     operateForm(type, record = {}) {
+      console.log(type, record)
 
       this.formStatus = type
       switch (type) {
@@ -173,16 +184,45 @@ export default {
         this.formModal = true
         this.formState = record
         break
-
+      case 'del':
+        this.handleDelete(record)
+        break
+      case 'edit':
+        this.formModal = true
+        this.formState = record
+        break
       default:
         break
       }
     },
-    closeModal(){
+    async handleDelete(record) {
+      try {
+        const res = await getReq('/deletePolicy', {
+          policy_id: record['policy_id']
+        })
+        if (res.errcode == 0) {
+          this.$message.success('删除成功')
+          this.getTableList()
+        }
+      } catch (error) {
+        this.$message.success(error)
+      }
+    },
+    closeModal(flag = false) {
       this.formModal = false
+      if (flag) {
+        this.pageOption.page = 1
+        this.getTableList()
+      }
     },
     handlePagesizeChange(data) {
-      console.log(data)
+      if (data.pageSize !== this.pageOption.pageSize) {
+        this.pageOption.page = 1
+      } else {
+        this.pageOption.page = data.page
+      }
+      this.pageOption.pageSize = data.pageSize
+      this.getTableList()
     }
   }
 }