双击手动修改年假总额

src/api/nianjiaguanli/yueguanli.js

@@ -28,10 +28,10 @@ export function add(data) {
   })
 }
 
-// 修改考勤组
+// 修改年假数据
 export function update(data) {
   return request({
-    url: '/system/attendanceGroup/update',
+    url: '/nj/balance/manage/update',
     method: 'put',
     data: data
   })

src/views/nianjiaguanli/yueguanli/index.vue

@@ -43,14 +43,72 @@
     </el-row>
   
 
-    <el-table v-loading="loading" :data="njBalanceManageData" @selection-change="handleSelectionChange" >
+    <el-table v-loading="loading" :data="njBalanceManageData" @selection-change="handleSelectionChange" 
+    @cell-dblclick="handleCellDblClick"
+    highlight-current-row>
       <!-- <el-table-column type="selection" width="55" align="center" /> -->
       <el-table-column label="员工编号" align="center" prop="userName" />
       <el-table-column label="员工姓名" align="center" prop="nickName" /> 
       <el-table-column  label="所属部门" align="center" prop="deptName" /> 
-      <el-table-column  label="年假总额" align="center" prop="annualLeave" /> 
-      <el-table-column  label="已使用天数" align="center" prop="usedDay" /> 
-      <el-table-column  label="剩余天数" align="center" prop="unusedDay" /> 
+      <el-table-column  label="年假总额" align="center" prop="annualLeave" >
+       <template #default="{ row }">
+          <!-- 编辑状态 -->
+          <el-input
+            v-if="row.editingField === 'annualLeave'"
+            v-model="row.annualLeave"
+            size="small"
+            type="number"
+            min="0"
+            step="0.5"
+            @blur="saveField(row, 'annualLeave')"
+            @keyup.enter.native="saveField(row, 'annualLeave')"
+            class="edit-input"
+            ref="annualLeaveInput"
+          />
+          
+          <!-- 查看状态 -->
+          <span v-else class="value-display">{{ row.annualLeave }}</span>
+        </template> 
+      </el-table-column> 
+      
+      <el-table-column  label="已使用天数" align="center" prop="usedDay" >
+        <template #default="{ row }">
+          <!-- 编辑状态 -->
+          <el-input
+            v-if="row.editingField === 'usedDay'"
+            v-model="row.usedDay"
+            size="small"
+            type="number"
+            min="0"
+            step="0.5"
+            @blur="saveField(row, 'usedDay')"
+            @keyup.enter.native="saveField(row, 'usedDay')"
+            class="edit-input"
+          />
+          
+          <!-- 查看状态 -->
+          <span v-else class="value-display">{{ row.usedDay }}</span>
+        </template>
+      </el-table-column> 
+      <el-table-column  label="剩余天数" align="center" prop="unusedDay">
+        <template #default="{ row }">
+          <!-- 编辑状态 -->
+          <el-input
+            v-if="row.editingField === 'unusedDay'"
+            v-model="row.unusedDay"
+            size="small"
+            type="number"
+            min="0"
+            step="0.5"
+            @blur="saveField(row, 'unusedDay')"
+            @keyup.enter.native="saveField(row, 'unusedDay')"
+            class="edit-input"
+          />
+          
+          <!-- 查看状态 -->
+          <span v-else class="value-display">{{ row.unusedDay }}</span>
+        </template>
+      </el-table-column> 
       <el-table-column  label="上年结转" align="center" prop="lastYearUnusedDay" /> 
       <el-table-column  label="状态" align="center" prop="isEnable">
         <template slot-scope="scope">
@@ -78,6 +136,33 @@
           </span>
         </template>  
       </el-table-column>
+
+      <!-- 操作列 -->
+      <!-- <el-table-column label="操作" width="180">
+        <template #default="{ row }">
+          <el-button
+            v-if="!row.editingField"
+            type="primary"
+            size="small"
+            @click="startEditing(row)">
+            编辑
+          </el-button>
+          <el-button
+            v-if="row.editingField"
+            type="success"
+            size="small"
+            @click="saveRow(row)">
+            保存
+          </el-button>
+          <el-button
+            v-if="row.editingField"
+            type="danger"
+            size="small"
+            @click="cancelEditing(row)">
+            取消
+          </el-button>
+        </template>
+      </el-table-column> -->
     </el-table>
 
     <pagination
@@ -97,7 +182,8 @@ import {
   queryArea,
   del,
   delUser,
-  test
+  test,
+  update
 } from '@/api/nianjiaguanli/yueguanli'
 
 import index from '@/views/components/daka/index';
@@ -284,7 +370,9 @@ export default {
         { value: 0, label: '默认规则（年假天数 = 入职当年剩余日历天数 / 365 × 5）' }
       ],
       njBalanceManageData: [],
-      applicableRangeFlag: false
+      applicableRangeFlag: false,
+      // 当前编辑的行ID
+      editingRowId: null
     };
   },
   computed: {
@@ -325,12 +413,113 @@ export default {
     this.getList();
   },
   methods: {
+    /** 双击单元格处理 */
+    handleCellDblClick(row, column) {
+      // 只处理年假总额字段
+      // 只处理可编辑字段
+      const editableFields = ['annualLeave', 'usedDay', 'unusedDay']
+      if (!editableFields.includes(column.property)) return;
+
+      // 如果已有编辑行，先保存
+      if (this.editingRowId && this.editingRowId !== row.id) {
+        this.saveRow(this.njBalanceManageData.find(r => r.id === this.editingRowId));
+      }
+
+      // 开始编辑当前行的指定字段
+      this.startEditing(row, column.property);
+    },
+
+    /** 开始编辑行 */
+    startEditing(row, field = null) {
+      // 取消其他行的编辑状态
+      this.njBalanceManageData.forEach(r => {
+        r.editingField = null;
+      });
+      
+      // 设置当前行为编辑状态
+      row.editingField = field;
+      this.editingRowId = row.id;
+      
+      // 自动聚焦到输入框
+      this.$nextTick(() => {
+        const input = this.$el.querySelector(`.edit-input`);
+        if (input) input.focus();
+      });
+    },
+
+    /** 取消编辑 */
+    cancelEditing(row) {
+      // 恢复原始值
+      row.annualLeave = row.originalAnnualLeave;
+      row.usedDay = row.originalUsedDay;
+      row.unusedDay = row.originalUnusedDay;
+      
+      row.editingField = null;
+      this.editingRowId = null;
+      this.$message.info('已取消编辑');
+    },
+
+    /** 保存字段 */
+    saveField(row, field) {
+      // 验证数据有效性
+      if (isNaN(row[field]) || row[field] < 0) {
+        this.$message.error('请输入有效的天数（非负数）');
+        row[field] = row[`original${field.charAt(0).toUpperCase() + field.slice(1)}`];
+        return;
+      }
+
+      // 准备更新数据
+      const updateData = {
+        id: row.id,
+        annualLeave: row.annualLeave,
+        usedDay: row.usedDay,
+        unusedDay: row.unusedDay
+      };
+
+      // 调用API更新
+      this.loading = true;
+      update(updateData)
+        .then(response => {
+          row.editing = false;
+          row.originalAnnualLeave = row.annualLeave; // 更新备份值
+          row.originalUsedDay = row.usedDay; // 更新备份值
+          row.originalUnusedDay = row.unusedDay; // 更新备份值
+          this.editingRowId = null;
+          this.$message.success('年假总额已更新');
+          this.loading = false;
+        })
+        .catch(error => {
+          // 出错时恢复原始值
+          row.annualLeave = row.originalAnnualLeave;
+          row.usedDay = row.originalUsedDay;
+          row.unusedDay = row.originalUnusedDay;
+          this.$message.error('更新失败：' + (error.message || '网络错误'));
+          this.loading = false;
+        });
+      this.loading = false;
+    },
+
+    /** 保存行数据 */
+    saveRow(row) {
+      if (row.editingField) {
+        this.saveField(row, row.editingField);
+      }
+    },
+
 
     // 加载数据
     getList() {
       queryList(this.queryParams).then((response) => {
         console.log(response)
-        this.njBalanceManageData = response.rows
+        // 为每条数据添加编辑状态和原始值备份
+        const results = response.rows.map(item => ({
+          ...item,
+          editingField: null, // 记录当前编辑的字段
+          originalAnnualLeave: item.annualLeave,
+          originalUsedDay: item.usedDay,
+          originalUnusedDay: item.unusedDay
+        }));
+        this.njBalanceManageData = results
         this.total = response.total
         this.loading = false
       })
@@ -1062,4 +1251,33 @@ export default {
     margin-right: 2px;
   }
 }
+
+/* 编辑输入框样式 */
+.edit-input {
+  width: 100px;
+  text-align: center;
+  border-color: #409eff;
+  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+}
+
+/* 数值显示样式 */
+.value-display {
+  padding: 2px 5px;
+  border-radius: 3px;
+  transition: all 0.2s;
+}
+
+/* 表格样式优化 */
+.el-table {
+  margin-top: 15px;
+}
+
+.el-table .el-table__row:hover .value-display {
+  background-color: #f5f7fa;
+}
+
+/* 操作按钮样式 */
+.el-button--small {
+  margin: 0 2px;
+}
 </style>