2 Commits
4c2d1cf033
...
2ae4a44db7
| Author | SHA1 | Message | Date |
|---|---|---|---|
 常熟吴彦祖
|
2ae4a44db7 |
Merge remote-tracking branch 'origin/master'
|
2 days ago |
|
常熟吴彦祖
|
2a5c834cb8 |
订单状态
|
2 days ago |
8 changed files with 285 additions and 22 deletions
-
21src/views/modules/order/com_poOrderAdvancedQuery.vue
-
5src/views/modules/order/com_poOrderDetail.vue
-
16src/views/modules/order/poOrder.vue
-
16src/views/modules/order/poOrderAdvancedQueryHelper.js
-
71src/views/modules/order/poOrderStatusMappingMixin.js
-
12src/views/modules/order/poOrder_search.vue
-
12src/views/modules/order/poOrder_search_en.vue
-
154src/views/modules/quickQuery/快捷查询模块说明.md
@ -0,0 +1,71 @@ |
|||
import { createAPI } from '@/utils/httpRequest.js' |
|||
|
|||
/** rqrq - 订单页面共用全局映射；查询值为去重英文，业务值仍为原始状态。 */ |
|||
export default { |
|||
data () { |
|||
return { |
|||
poStatusMappings: [], |
|||
poStatusMappingsLoading: false |
|||
} |
|||
}, |
|||
computed: { |
|||
poOrderStatusOptions () { |
|||
const seen = new Set() |
|||
return this.poStatusMappings.reduce((options, row) => { |
|||
const label = row.displayStatus |
|||
const key = label.toLowerCase() |
|||
if (!seen.has(key)) { |
|||
seen.add(key) |
|||
options.push({ label, value: label }) |
|||
} |
|||
return options |
|||
}, []) |
|||
}, |
|||
// rqrq - 编辑/新增中的状态下拉显示英文，但必须提交原始业务值。
|
|||
poOrderStatusValueOptions () { |
|||
return this.poStatusMappings.map(row => ({ label: row.displayStatus, value: row.sourceStatus })) |
|||
} |
|||
}, |
|||
created () { |
|||
this.loadPoStatusMappings() |
|||
}, |
|||
activated () { |
|||
this.loadPoStatusMappings() |
|||
}, |
|||
methods: { |
|||
loadPoStatusMappings () { |
|||
// rqrq - 首次 created/activated 可能同时触发，避免重复请求；重新打开下拉会刷新配置。
|
|||
if (this.poStatusMappingsLoading) return |
|||
this.poStatusMappingsLoading = true |
|||
return createAPI('/poStatusMapping/options', 'post', {}).then(({ data }) => { |
|||
if (!data || data.code !== 0) { |
|||
throw new Error((data && data.msg) || '加载订单状态映射失败') |
|||
} |
|||
this.poStatusMappings = (data.rows || []).filter(row => row.sourceStatus && row.displayStatus) |
|||
if (this.columnSelectOptions) { |
|||
this.$set(this.columnSelectOptions, 'poStatusOptions', this.poOrderStatusValueOptions) |
|||
} |
|||
}).catch(error => { |
|||
this.$message.error(error.message || '加载订单状态映射失败') |
|||
}).finally(() => { |
|||
this.poStatusMappingsLoading = false |
|||
}) |
|||
}, |
|||
onPoStatusDropdownVisible (visible) { |
|||
if (visible) this.loadPoStatusMappings() |
|||
}, |
|||
formatPoStatus (row) { |
|||
if (!row) return '' |
|||
// rqrq - 查询结果使用后端同一次查询的映射；新增草稿等本地行使用已加载的字典。
|
|||
if (row.statusDisplay != null) return row.statusDisplay |
|||
const mapping = this.poStatusMappings.find(item => item.sourceStatus === row.status) |
|||
return mapping ? mapping.displayStatus : (row.status || '') |
|||
}, |
|||
poStatusExportColumns (columns) { |
|||
// rqrq - 导出工具直接读取分页行，单独替换导出列，保持屏幕列字段和业务 status 不变。
|
|||
return columns.map(column => column.columnProp === 'status' |
|||
? { ...column, columnProp: 'statusDisplay' } |
|||
: column) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,154 @@ |
|||
# 快捷查询模块说明（前端组件 + 后端接口 + 数据库）- rqrq |
|||
|
|||
## 1. 功能概述 |
|||
|
|||
- 在库中维护「某业务表格（`table_id`）」下**允许参与快捷查询**的字段：字段名、中文/英文描述、数据类型。 |
|||
- 前端公共组件 **`QuickQueryFilter`**：传入 **`tableId`**，打开弹窗后从后端拉取字段定义；用户「新增」多行条件，按类型展示**运算符 + 输入框/日期选择器**。 |
|||
- 用户点击「应用」后，组件将条件拼成 **JSON 字符串**，调用业务页传入的 **`applyHandler(jsonStr, parsedArray)`**（并 `$emit('apply', ...)`），由业务方决定：前端过滤、或把字符串交给后端解析执行 SQL。 |
|||
|
|||
## 2. 数据库表 SQL（SQL Server） |
|||
|
|||
完整脚本见：`krd-srm-java/scripts/srm_quick_query_field.sql`。 |
|||
|
|||
### 2.1 表结构摘要 |
|||
|
|||
| 列名 | 说明 | |
|||
|------|------| |
|||
| `id` | 主键，自增 | |
|||
| `table_id` | 业务表格编码，与前端列表 `tableId`、如 `812003Table1` 一致 | |
|||
| `field_name` | 行数据上的属性名（与接口/实体字段一致，如 `status`、`unitPrice`） | |
|||
| `field_label` | 界面展示描述（弹窗第一列下拉显示） | |
|||
| `data_type` | `NUMBER` / `TEXT` / `DATETIME`（大写） | |
|||
| `sort_order` | 排序 | |
|||
| `site` | 工厂；空串 `''` 表示全局配置；与具体工厂并存时可加行 | |
|||
| `status` | `ACTIVE` / `INACTIVE` | |
|||
| `remark` | 备注 | |
|||
|
|||
唯一约束：`(table_id, field_name, site)`。 |
|||
|
|||
### 2.2 数据类型与前端行为 |
|||
|
|||
| data_type | 条件运算符 | 第三列控件 | |
|||
|-----------|------------|------------| |
|||
| `NUMBER` | 大于(GT)、小于(LT)、等于(EQ) | `el-input type="number"` | |
|||
| `TEXT` | 等于(EQ)、包含(CONTAINS) | 文本 `el-input` | |
|||
| `DATETIME` | 大于(GT)、小于(LT) | `el-date-picker`，`value-format="yyyy-MM-dd"` | |
|||
|
|||
### 2.3 应用时生成的 JSON 格式 |
|||
|
|||
为**对象数组**的 JSON 字符串，每项： |
|||
|
|||
```json |
|||
{ |
|||
"fieldName": "status", |
|||
"fieldLabel": "Status", |
|||
"dataType": "TEXT", |
|||
"operator": "CONTAINS", |
|||
"value": "Open" |
|||
} |
|||
``` |
|||
|
|||
`operator` 取值：`GT` | `LT` | `EQ` | `CONTAINS`。 |
|||
|
|||
业务后端若要根据该 JSON 拼 SQL，请使用**白名单**仅允许 `fieldName` 落在配置表中出现过的字段，避免注入。 |
|||
|
|||
## 3. 后端模块（Java） |
|||
|
|||
目录：`krd-srm-java/src/main/java/com/xujie/modules/quickQuery/` |
|||
|
|||
| 类型 | 路径 | |
|||
|------|------| |
|||
| Controller | `controller/QuickQueryFieldController.java` | |
|||
| Service | `service/QuickQueryFieldService.java`、`service/impl/QuickQueryFieldServiceImpl.java` | |
|||
| Entity | `entity/QuickQueryField.java` | |
|||
| Data | `data/QuickQueryFieldData.java` | |
|||
| Mapper | `mapper/QuickQueryFieldMapper.java` | |
|||
| XML | `resources/mapper/quickQuery/QuickQueryFieldMapper.xml` | |
|||
|
|||
### 3.1 接口列表 |
|||
|
|||
| 方法 | 路径 | 说明 | |
|||
|------|------|------| |
|||
| POST | `/quickQuery/field/listByTableId` | 入参 JSON：`{ "tableId": "812003Table1", "site": "" }`，返回 `rows` | |
|||
| POST | `/quickQuery/field/save` | 维护字段配置（新增 `id` 空，修改带 `id`） | |
|||
| POST | `/quickQuery/field/delete` | `{ "id": 1 }` | |
|||
|
|||
均需登录（OAuth2），与其它业务接口一致。 |
|||
|
|||
### 3.2 listByTableId 站点规则 |
|||
|
|||
返回满足：`status = ACTIVE` 且 `(site = '' OR site = 请求.site)`，即**全局配置**与**当前工厂配置**同时生效。 |
|||
|
|||
## 4. 前端 API |
|||
|
|||
文件：`krd-srm-vue/src/api/quickQuery/quickQueryField.js` |
|||
|
|||
- `listQuickQueryFieldsByTableId(data)` |
|||
- `saveQuickQueryField(data)` |
|||
- `deleteQuickQueryField(data)` |
|||
|
|||
## 5. 职责拆分（解构） |
|||
|
|||
| 部分 | 作用 | |
|||
|------|------| |
|||
| **`QuickQueryFilter.vue`** | UI：按钮 + 弹窗 + 调 `/quickQuery/field/listByTableId` + 拼 JSON + 调用 `applyHandler` / `emit('apply')`。不关心业务数据怎么查。 | |
|||
| **`utils/quickQueryMatch.js`** | 可选：前端本地过滤时，用 **`parseQuickQueryJson`** 解析字符串、**`matchQuickQueryRow(row, conditions)`** 判断一行是否满足全部条件（AND）。与页面解耦，其它列表页可直接引用。 | |
|||
| **业务页** | 维护 `quickQueryConditions`（可选）；在 `applyHandler` 里写入解析结果并 `getDataList`；在 `filter` 里调用 `matchQuickQueryRow`。若改走后端查询，可只把 JSON 塞进接口参数。`poOrder.vue` 当前未内置快捷查询，需时按 6.4 自行挂载。 | |
|||
|
|||
## 6. 公共组件用法 |
|||
|
|||
文件：`krd-srm-vue/src/views/modules/quickQuery/components/QuickQueryFilter.vue` |
|||
|
|||
### 6.1 Props |
|||
|
|||
| 属性 | 类型 | 必填 | 说明 | |
|||
|------|------|------|------| |
|||
| `tableId` | String | 是 | 与库表 `table_id` 一致 | |
|||
| `site` | String | 否 | 当前工厂，默认 `''` | |
|||
| `applyHandler` | Function | 是 | `(conditionJsonString, parsedArray) => void` | |
|||
| `buttonText` | String | 否 | 默认 `快捷查询` | |
|||
| `dialogTitle` | String | 否 | 默认 `快捷查询` | |
|||
|
|||
### 6.2 事件 |
|||
|
|||
- `apply`：`(conditionJsonString, parsedArray)`，与 `applyHandler` 同时触发。 |
|||
|
|||
### 6.3 引用示例 |
|||
|
|||
```vue |
|||
<template> |
|||
<quick-query-filter |
|||
table-id="812003Table1" |
|||
:site="$store.state.user.site || ''" |
|||
:apply-handler="handleQuickQuery" |
|||
/> |
|||
</template> |
|||
|
|||
<script> |
|||
import QuickQueryFilter from '@/views/modules/quickQuery/components/QuickQueryFilter.vue' |
|||
|
|||
export default { |
|||
components: { QuickQueryFilter }, |
|||
methods: { |
|||
handleQuickQuery (jsonStr, conditions) { |
|||
// 示例1：前端过滤 |
|||
this.advancedFilter = JSON.parse(jsonStr) |
|||
this.loadList() |
|||
// 示例2：交给后端 |
|||
// this.searchForm.quickQueryJson = jsonStr |
|||
// this.loadListFromApi() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
``` |
|||
|
|||
### 6.4 在列表页集成示例（如 `poOrder.vue`） |
|||
|
|||
在表单工具栏引入 `QuickQueryFilter`，`tableId` 与库表 `srm_quick_query_field.table_id` 一致；`applyHandler` 内用 `parseQuickQueryJson` 得到 `conditions` 写入 `quickQueryConditions`，`getDataList` 的 `filter` 中对每行调用 `matchQuickQueryRow(row, this.quickQueryConditions)`。接真实接口时，可把 `jsonStr` 放入查询 DTO 由后端解析，无需本地 `matchQuickQueryRow`。 |
|||
|
|||
## 7. 部署检查清单 |
|||
|
|||
1. 执行 `scripts/srm_quick_query_field.sql`。 |
|||
2. 确认 `812003Table1`（或你的业务表）在 `srm_quick_query_field` 中有对应 `field_name` 与行数据字段一致。 |
|||
3. 前端菜单/路由如需单独「维护页」，可后续增加仅调用 `save` / `delete` 的页面；当前可通过 Postman 维护。 |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue