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

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

## 1. 修复重复请求 - [Table.vue](d:\work\myst-web\src\components\Table.vue)

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

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

```javascript
// 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](d:\work\myst-web\src\components\Table.vue)

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

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

关键模板改动：

```html
<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](d:\work\myst-web\src\components\Edit.vue)

**方案**：

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

关键改动点：

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

```html
<!-- 原密码输入改为修改密码按钮 -->
<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** 新增：

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

**methods** 新增 `submitPassword` 和修改 `onSubmit`：

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