hoteas
3681564ca4
- 在 ColumnDataType 中新增对 PostgreSQL 和 Oracle 数据类型的支持 - 更新 Db2JSON 方法，优化对达梦数据库表和列信息的查询逻辑 - 增强字段备注解析，支持从备注中提取提示信息并清理标签 - 更新文档，详细说明字段备注格式及前端提示的展示效果
100 lines
3.3 KiB
Markdown
100 lines
3.3 KiB
Markdown
---
|
||
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 类型字段的数据
|
||
|