From f67a9d65733fe0ea17a569a409438ff6de488bc7 Mon Sep 17 00:00:00 2001
From: jinna <jn517618@163.com>
Date: Tue, 26 May 2026 16:12:26 +0800
Subject: [PATCH] =?UTF-8?q?=E8=83=BD=E8=80=97=E7=AE=A1=E7=9B=AE=E6=A0=87?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/energyManagement/energyManagement.js  |  28 ++
 .../components/batchAddWater.vue              | 310 ++++++++++++++++++
 .../components/electricityTarget.vue          | 155 ++++++---
 .../components/waterTarget.vue                | 101 +++++-
 4 files changed, 541 insertions(+), 53 deletions(-)
 create mode 100644 src/views/energyManagement/components/batchAddWater.vue

diff --git a/src/api/energyManagement/energyManagement.js b/src/api/energyManagement/energyManagement.js
index 9af9e9ce..c97a0191 100644
--- a/src/api/energyManagement/energyManagement.js
+++ b/src/api/energyManagement/energyManagement.js
@@ -46,3 +46,31 @@ export const detailItem = (params)=>{
   });
 }
 
+// 列表（新）
+export const getList = (params) => {
+  return request({
+    url: '/blade-desk/bsEnergyTarget/page',
+    method: 'get',
+    params,
+  });
+};
+
+
+// 详情（新）
+export const getDetail = (params) => {
+  return request({
+    url: '/blade-desk/bsEnergyTarget/detail',
+    method: 'get',
+    params,
+  });
+};
+
+// 提交
+export const submit = (params) => {
+  return request({
+    url: '/blade-desk/bsEnergyTarget/submit',
+    method: 'post',
+    data: params,
+  });
+};
+
diff --git a/src/views/energyManagement/components/batchAddWater.vue b/src/views/energyManagement/components/batchAddWater.vue
new file mode 100644
index 00000000..e62d1017
--- /dev/null
+++ b/src/views/energyManagement/components/batchAddWater.vue
@@ -0,0 +1,310 @@
+<template>
+    <el-dialog :title="checkYear == '' ? '新增' : '修改'" append-to-body :modelValue="openShow" width="70%" fullscreen @close="closeDialog()">
+        <div style="margin-bottom: 12px" v-if="moldAddMore">
+            <el-button type="primary" @click="addTable">插入一行</el-button>
+            <el-button type="danger" @click="delTable">删除选中行</el-button>
+        </div>
+        <!-- 单个 Form 包裹整个表格 -->
+        <el-form 
+            ref="tableForm" 
+            :model="form"  
+            :rules="formRules"
+            label-width="0px"
+        >
+            <!-- 全局错误提示 -->
+            <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;">
+                {{ formError }}
+            </div>
+            
+            <el-table :data="form.tableData" @select="selectChange" border>
+                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <!-- 年份（绑定数组字段） -->
+                <el-table-column align="center" label="年份">
+                    <template #header>
+                        <span><i style="color: red">*</i>年份</span>
+                    </template>
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].year`" :rules="formRules.year">
+                            <el-date-picker v-model="scope.row.year" type="year" placeholder="请选择"
+                            format="YYYY" value-format="YYYY"></el-date-picker>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="一月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m01Target`" :rules="formRules.m01Target">
+                            <el-input-number v-model="scope.row.m01Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="二月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m02Target`" :rules="formRules.m02Target">
+                            <el-input-number v-model="scope.row.m02Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="三月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m03Target`" :rules="formRules.m03Target">
+                            <el-input-number v-model="scope.row.m03Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="四月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m04Target`" :rules="formRules.m04Target">
+                            <el-input-number v-model="scope.row.m04Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="五月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m05Target`" :rules="formRules.m05Target">
+                            <el-input-number v-model="scope.row.m05Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="六月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m06Target`" :rules="formRules.m06Target">
+                            <el-input-number v-model="scope.row.m06Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="七月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m07Target`" :rules="formRules.m07Target">
+                            <el-input-number v-model="scope.row.m07Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="八月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m08Target`" :rules="formRules.m08Target">
+                            <el-input-number v-model="scope.row.m08Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="九月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m09Target`" :rules="formRules.m09Target">
+                            <el-input-number v-model="scope.row.m09Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="十月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m10Target`" :rules="formRules.m10Target">
+                            <el-input-number v-model="scope.row.m10Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="十一月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m11Target`" :rules="formRules.m11Target">
+                            <el-input-number v-model="scope.row.m11Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="十二月">
+                    <template #default="scope">
+                        <!-- prop 格式：数组名[索引].字段名 -->
+                        <el-form-item :prop="`tableData[${scope.$index}].m12Target`" :rules="formRules.m12Target">
+                            <el-input-number v-model="scope.row.m12Target" controls-position="right" :min="0"></el-input-number>
+                        </el-form-item>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="closeDialog()">取 消</el-button>
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script>
+import {getDetail,submit} from '@/api/energyManagement/energyManagement'
+export default {
+    props:{
+        showAdd:{
+            type:Boolean,
+            default:false
+        },
+        moldAddMore:{
+            type:Boolean,
+            default:false
+        },
+        type:{
+            type:String,
+            default:""
+        },
+        checkYear:{
+            type:String,
+            default:""
+        }
+    },
+    data(){
+        return{
+            openShow:false,
+            formRules:{
+                // 表格数据数组的整体校验（可选：如最少1行数据）
+                tableData: [
+                    { 
+                        required: true, 
+                        message: '请至少添加一行数据', 
+                        trigger: 'submit',
+                        type: 'array' // 明确类型为数组
+                    },
+                    {
+                        validator: (rule, value, callback) => {
+                        if (value.length === 0) {
+                            callback(new Error('请至少添加一行数据'));
+                        } else {
+                            callback();
+                        }
+                        },
+                        trigger: 'submit'
+                    }
+                ],
+                // 数组中每一项的 year 字段校验
+                year: [
+                    { required: true, message: '请选择年份', trigger: ['change', 'submit'] }
+                ],
+            },
+            form:{
+                tableData:[],
+            },
+            formError:"",
+            
+        }
+    },
+    mounted(){
+        this.openShow = this.showAdd
+        if (this.moldAddMore && this.form.tableData.length === 0) {
+            this.addTable();
+        }else{
+            getDetail({
+                type:this.type == 'water' ? 1 : 2,
+                year:this.checkYear
+            }).then(res =>{
+                this.form.tableData = [res.data.data]
+            })
+        }
+    },
+    methods:{
+        closeDialog(val){
+            this.$emit('closeDialog',val)
+        },
+        addTable(){
+            this.form.tableData.push({
+                year: '',
+                m01Target:'',
+                m02Target:'',
+                m03Target:'',
+                m04Target:'',
+                m05Target:'',
+                m06Target:'',
+                m07Target:'',
+                m08Target:'',
+                m09Target:'',
+                m10Target:'',
+                m11Target:'',
+                m12Target:''
+            })
+        },
+        // 提交表单（单次校验所有行）
+        submitForm() {
+            this.formError = '';
+            // 调用单个 Form 的校验方法
+            this.$refs.tableForm.validate((isValid, invalidFields) => {
+                if (!isValid) {
+                    // 校验失败：显示提示并滚动到第一个错误字段
+                    this.formError = '存在未完善的字段，请检查表格中的红色提示';
+                    
+                    this.$nextTick(() => {
+                        // 找到第一个错误字段并滚动到视图
+                        const firstError = document.querySelector('.el-form-item.is-error');
+                        if (firstError) {
+                        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                        }
+                    });
+                    return;
+                }
+
+                // 校验通过：准备提交数据（过滤无用字段）
+                const submitData = this.form.tableData.map(row => {
+                    const { _select, ...validData } = row; // 剔除选择状态字段
+                    return validData;
+                });
+                if(this.checkYear == ''){
+                    submitData.map(item =>{
+                        item.type = this.type == 'water' ? 1 : 2
+                    })
+                }
+
+                submit(submitData).then(res =>{
+                    if(res.data.code == 200){
+                        this.$message.success(this.checkYear == '' ? '新增成功' : '修改成功')
+                        this.closeDialog(true)
+                    }
+                })
+
+
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+// 优化表单字段样式
+:deep(.el-table .el-form-item) {
+  margin-bottom: 0; // 去掉默认边距
+}
+
+// 错误提示样式优化
+:deep(.el-form-item__error) {
+  font-size: 12px;
+  white-space: nowrap;
+  z-index: 10;
+  background: #fff;
+  padding: 2px 4px;
+  border: 1px solid #f56c6c;
+  border-radius: 4px;
+}
+
+// 表格行高适配 textarea
+.el-table__row {
+  height: 80px !important;
+}
+
+.el-table__cell {
+  vertical-align: middle !important;
+}
+
+.error-message {
+  font-size: 14px;
+  line-height: 1.5;
+}
+:deep(.el-table .el-table__cell) {
+  height: 50px !important;
+  padding: 0 !important;
+  line-height: 50px !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/energyManagement/components/electricityTarget.vue b/src/views/energyManagement/components/electricityTarget.vue
index 758cbc29..3f73b933 100644
--- a/src/views/energyManagement/components/electricityTarget.vue
+++ b/src/views/energyManagement/components/electricityTarget.vue
@@ -20,15 +20,18 @@
     @sort-change="sortChange"
   >
     <template #menu-left>
-      <el-button type="danger"  @click="handleDelete" v-if="permission.electricityTarget_delete"
+      <el-button type="primary" @click="handleAdd" v-if="permission.electricityTarget_add">新增</el-button>
+      <!-- <el-button type="danger"  @click="handleDelete" v-if="permission.electricityTarget_delete"
         >删除
-      </el-button>
+      </el-button> -->
     </template>
     <template #menu-right>
       <el-button type="primary"  @click="handleExport" v-if="permission.electricityTarget_export">导出</el-button>
       <el-button type="primary"  @click="handleImport" v-if="permission.electricityTarget_import">导入</el-button>
     </template>
-    <template #menu="scope"> </template>
+    <template #menu="scope">
+      <el-button type="primary" text v-if="permission.electricityTarget_edit" @click="editRow(scope.row)">修改</el-button>
+    </template>
   </avue-crud>
   <!-- 导入 -->
     <basic-import v-if="isShowImport" title="导入" :isShow="isShowImport"
@@ -37,14 +40,24 @@
       importUrl="/blade-desk/bsEnergyTarget/electric-import-excel"
      @closeDialog="closeDialog"></basic-import>
   </div>
+  <batchAddWater
+    v-if="showAdd" 
+    type="electricity" 
+    :showAdd="showAdd"
+    :moldAddMore="moldAddMore"
+    :checkYear="checkYear" 
+    @closeDialog="closeDialog"
+  ></batchAddWater>
 </template>
 <script>
 import basicImport from '@/components/basic-import/main.vue'
+import batchAddWater from "../components/batchAddWater.vue"
 import { mapGetters } from 'vuex';
 import { pageList, removeItem, saveItem, exportData } from '@/api/energyManagement/energyManagement';
 export default {
   components: {
     basicImport,
+    batchAddWater
   },
   data() {
     return {
@@ -52,13 +65,16 @@ export default {
       isShowImport:false,
       selectionList: [],
       query:{},
+      showAdd:false,
+      moldAddMore:false,
+      checkYear:'',
       option: {
         height: "auto",
         calcHeight: 32,
         tip: false,
         simplePage: true,
         searchShow: true,
-        searchMenuSpan: 12,
+        searchMenuSpan: 18,
         searchIcon: true,
         searchIndex: 3,
         tree: false,
@@ -119,42 +135,90 @@ export default {
               },
             ],
           },
+          // {
+          //   label:"季度",
+          //   prop: "quarter",
+          //   search: true,
+          //   span: 24,
+          //   sortable: 'custom',
+          //   type:"select",
+          //   dicData:[
+          //     {label:"第一季度",value:'1'},
+          //     {label:"第二季度",value:'2'},
+          //     {label:"第三季度",value:'3'},
+          //     {label:"第四季度",value:'4'},
+          //   ],
+          //   rules: [
+          //     {
+          //       required: true,
+          //       message: "请选择季度",
+          //       trigger: "blur",
+          //     },
+          //   ],
+          // },
+          // {
+          //   label: "用电目标(kWh/dm²)",
+          //   prop: "target",
+          //   type:'number',
+          //   search: false,
+          //   sortable: 'custom',
+          //   filter: true,
+          //   span: 24,
+          //   rules: [
+          //     {
+          //       required: true,
+          //       message: "请输入用电目标(kWh/dm²)",
+          //       trigger: "blur",
+          //     },
+          //   ],
+          // },
           {
-            label:"季度",
-            prop: "quarter",
-            search: true,
-            span: 24,
-            sortable: 'custom',
-            type:"select",
-            dicData:[
-              {label:"第一季度",value:'1'},
-              {label:"第二季度",value:'2'},
-              {label:"第三季度",value:'3'},
-              {label:"第四季度",value:'4'},
-            ],
-            rules: [
-              {
-                required: true,
-                message: "请选择季度",
-                trigger: "blur",
-              },
-            ],
+            label:"一月",
+            prop: "m01Target",
           },
           {
-            label: "用电目标(kWh/dm²)",
-            prop: "target",
-            type:'number',
-            search: false,
-            sortable: 'custom',
-            filter: true,
-            span: 24,
-            rules: [
-              {
-                required: true,
-                message: "请输入用电目标(kWh/dm²)",
-                trigger: "blur",
-              },
-            ],
+            label:"二月",
+            prop: "m02Target",
+          },
+          {
+            label:"三月",
+            prop: "m03Target",
+          },
+          {
+            label:"四月",
+            prop:"m04Target"
+          },
+          {
+            label:"五月",
+            prop:"m05Target"
+          },
+          {
+            label:"六月",
+            prop:"m06Target"
+          },
+          {
+            label:"七月",
+            prop:"m07Target"
+          },
+          {
+            label:"八月",
+            prop:"m08Target"
+          },
+          {
+            label:"九月",
+            prop:"m09Target"
+          },
+          {
+            label:"十月",
+            prop:"m10Target"
+          },
+          {
+            label:"十一月",
+            prop:"m11Target"
+          },
+          {
+            label:"十二月",
+            prop:"m12Target"
           },
         ],
       },
@@ -170,11 +234,20 @@ export default {
     ...mapGetters(['permission']),
   },
   created(){
-    console.log('permission-------',this.permission)
-    this.option.addBtn = this.permission.electricityTarget_add ? true : false;
-    this.option.editBtn = this.permission.electricityTarget_edit ? true : false;
+    // console.log('permission-------',this.permission)
+    // this.option.addBtn = this.permission.electricityTarget_add ? true : false;
+    // this.option.editBtn = this.permission.electricityTarget_edit ? true : false;
   },
   methods: {
+    handleAdd(){
+      this.showAdd = true
+      this.moldAddMore = true
+    },
+    editRow(row){
+      this.checkYear = row.year
+      this.moldAddMore = false
+      this.showAdd = true
+    },
     // 表格排序
     sortChange({ prop, order }) {
       console.log('prop-------------',prop)
@@ -201,6 +274,8 @@ export default {
 
     closeDialog(val){
       this.isShowImport = false
+      this.showAdd = false
+      this.moldAddMore = false
       if(val){
         this.onLoad()
       }
diff --git a/src/views/energyManagement/components/waterTarget.vue b/src/views/energyManagement/components/waterTarget.vue
index 08b7b576..bacc4247 100644
--- a/src/views/energyManagement/components/waterTarget.vue
+++ b/src/views/energyManagement/components/waterTarget.vue
@@ -21,13 +21,16 @@
       @sort-change="sortChange"
     >
       <template #menu-left>
-        <el-button type="danger" @click="handleDelete" v-if="permission.waterTarget_delete">删除 </el-button>
+        <el-button type="primary" @click="handleAdd" v-if="permission.waterTarget_add">新增 </el-button>
+        <!-- <el-button type="danger" @click="handleDelete" v-if="permission.waterTarget_delete">删除 </el-button> -->
       </template>
       <template #menu-right>
          <el-button type="primary" @click="handleExport" v-if="permission.waterTarget_export">导出 </el-button>
         <el-button type="primary"  @click="handleImport" v-if="permission.waterTarget_import">导入 </el-button>
       </template>
-      <template #menu> </template>
+      <template #menu="scope">
+        <el-button type="primary" text v-if="permission.waterTarget_edit" @click="editRow(scope.row)">修改</el-button>
+      </template>
     </avue-crud>
     <!-- 导入 -->
     <basic-import
@@ -39,15 +42,25 @@
       importUrl="/blade-desk/bsEnergyTarget/water-import-excel"
       @closeDialog="closeDialog"
     ></basic-import>
+    <batchAddWater 
+      v-if="showAdd" 
+      type="water" 
+      :showAdd="showAdd"
+      :moldAddMore="moldAddMore"
+      :checkYear="checkYear" 
+      @closeDialog="closeDialog">
+    </batchAddWater>
   </div>
 </template>
 <script>
 import basicImport from '@/components/basic-import/main.vue'
+import batchAddWater from "../components/batchAddWater.vue"
 import { mapGetters } from 'vuex';
-import { pageList, removeItem, saveItem, exportData } from '@/api/energyManagement/energyManagement';
+import { pageList,getList, removeItem, saveItem, exportData } from '@/api/energyManagement/energyManagement';
 export default {
   components: {
     basicImport,
+    batchAddWater
   },
   data() {
     return {
@@ -57,6 +70,8 @@ export default {
       search: {},
       loading: false,
       data: [],
+      showAdd:false,
+      moldAddMore:false,
       option: {
         height: "auto",
         calcHeight: 32,
@@ -125,17 +140,66 @@ export default {
               },
             ],
           },
+          // {
+          //   label: "用水目标(L/d㎡)",
+          //   prop: "target",
+          //   type:"number",
+          //   search: false,
+          //   sortable: 'custom',
+          //   filter: true,
+          //   span: 24,
+          // },
           {
-            label: "用水目标(L/d㎡)",
-            prop: "target",
-            type:"number",
-            search: false,
-            sortable: 'custom',
-            filter: true,
-            span: 24,
+            label:"一月",
+            prop: "m01Target",
+          },
+          {
+            label:"二月",
+            prop: "m02Target",
+          },
+          {
+            label:"三月",
+            prop: "m03Target",
+          },
+          {
+            label:"四月",
+            prop:"m04Target"
+          },
+          {
+            label:"五月",
+            prop:"m05Target"
+          },
+          {
+            label:"六月",
+            prop:"m06Target"
+          },
+          {
+            label:"七月",
+            prop:"m07Target"
+          },
+          {
+            label:"八月",
+            prop:"m08Target"
+          },
+          {
+            label:"九月",
+            prop:"m09Target"
+          },
+          {
+            label:"十月",
+            prop:"m10Target"
+          },
+          {
+            label:"十一月",
+            prop:"m11Target"
+          },
+          {
+            label:"十二月",
+            prop:"m12Target"
           },
         ],
       },
+      checkYear:'',
       form: {},
       page: {
         pageSize: 10,
@@ -146,8 +210,8 @@ export default {
   },
   created(){
     console.log('permission-------',this.permission)
-    this.option.addBtn = this.permission.waterTarget_add ? true : false;
-    this.option.editBtn = this.permission.waterTarget_edit ? true : false;
+    // this.option.addBtn = this.permission.waterTarget_add ? true : false;
+    // this.option.editBtn = this.permission.waterTarget_edit ? true : false;
   },
   computed: {
     ...mapGetters(['permission']),
@@ -239,6 +303,8 @@ export default {
     
     closeDialog(val){
       this.isShowImport = false
+      this.showAdd = false
+      this.moldAddMore = false
       if(val){
         this.onLoad()
       }
@@ -270,6 +336,15 @@ export default {
         });
       });
     },
+    handleAdd(){
+      this.showAdd = true
+      this.moldAddMore = true
+    },
+    editRow(row){
+      this.checkYear = row.year
+      this.moldAddMore = false
+      this.showAdd = true
+    },
     handleDelete() {
       if (this.selectionList.length === 0) {
         this.$message.error("请选择至少一条数据");
@@ -302,7 +377,7 @@ export default {
       });
 
       this.loading = true;
-      pageList({
+      getList({
         current:this.page.currentPage,
         size: this.page.pageSize,
         type: 1,