hotime/.cursor/plans/修复table和edit组件_aafba288.plan.md

name, overview, todos, isProject

name	overview	todos	isProject
修复Table和Edit组件	修复 Table.vue 的重复请求和搜索防抖问题，以及 Edit.vue 密码改为弹窗独立修改。	id content status fix-double-request Table.vue: 添加 _skipFormWatch 标志，修复 mounted 和 watcher 导致的重复请求 completed id content status fix-keyword-search Table.vue: 关键字搜索改为点击按钮/Enter触发，不再实时触发 completed id content status fix-password-dialog Edit.vue: 密码字段改为弹窗独立修改，主表单提交排除密码数据 completed	false

修复 Table 重复请求、搜索防抖、Edit 密码弹窗

1. 修复重复请求 - Table.vue

根因：mounted() 中既修改了 form 属性（触发 deep watcher），又显式调用了 formDebounce，两者可能各触发一次请求。

方案：在 data 中增加 _skipFormWatch: true 标志，mounted 中所有 form 初始化完成后调用一次 formDebounce，然后在 $nextTick 中将标志设为 false。watcher 中检查该标志，初始化期间跳过。

// data 中
_skipFormWatch: true,

// watcher 中
form: {
  handler() {
    if (this._skipFormWatch) return;
    this.formDebounce(this);
  },
  deep: true
}

// mounted 末尾
this.formDebounce(this);
this.$nextTick(() => { this._skipFormWatch = false; });

2. 搜索改为点击触发 - Table.vue

方案：将关键字搜索从实时触发改为点击搜索按钮触发。

• 新增 searchKeyword: "" data 属性，输入框 v-model 改为绑定 searchKeyword
• 搜索按钮添加 @click="doSearch" 事件
• doSearch 方法将 searchKeyword 赋值给 form.keyword（触发 watcher 进行搜索）
• 输入框支持 Enter 键触发搜索（@keyup.enter）
• 重置按钮也同步清空 searchKeyword

关键模板改动：

<el-input v-model="searchKeyword" @keyup.enter="doSearch" ...>
  <template #append>
    <el-button class="search-btn" @click="doSearch">
      <el-icon><Search/></el-icon>
    </el-button>
  </template>
</el-input>

3. 密码改为弹窗独立修改 - Edit.vue

方案：

• 主表单中隐藏 password 类型字段，改为显示"修改密码"按钮
• 新增密码修改弹窗（el-dialog），包含新密码 + 确认密码两个输入
• 弹窗提交时校验两次输入一致，然后仅发送密码字段调用 edit API
• 主表单 onSubmit 提交数据时过滤掉 password 类型字段

关键改动点：

模板 - 密码字段区域（约第55行）：

<!-- 原密码输入改为修改密码按钮 -->
<el-button v-if="column.type=='password'" type="warning" @click="showPasswordDialog = true">
  修改密码
</el-button>
<!-- 其他非密码字段保持原样 -->
<el-input v-model="form[column.value]" show-password v-else-if="..." />

data 新增：

showPasswordDialog: false,
passwordForm: { password: '', confirmPassword: '' },
passwordColumn: null,

methods 新增 submitPassword 和修改 onSubmit：

• submitPassword：校验密码一致性，调用 edit API 仅提交密码字段
• onSubmit：提交时从 form 中排除 password 类型字段的数据