|
|
@ -0,0 +1,116 @@ |
|
|
|
# 小程序配置页面修改说明 |
|
|
|
|
|
|
|
## 修改内容 |
|
|
|
|
|
|
|
### 1. 表单动态切换功能 |
|
|
|
在 `AppletConfig.data.ts` 中修改了表单配置,实现了根据 `type` 字段动态切换不同的内容组件: |
|
|
|
|
|
|
|
- **type = 0 (文本)**: 使用 `Input` 组件 |
|
|
|
- **type = 1 (富文本)**: 使用 `JEditor` 组件 |
|
|
|
- **type = 2 (图片)**: 使用 `JImageUpload` 组件 |
|
|
|
|
|
|
|
### 2. 表格展示优化 |
|
|
|
在 `AppletConfigList.vue` 中优化了表格的内容展示: |
|
|
|
|
|
|
|
- **富文本类型**: 显示"富文本内容"提示,不展示具体内容 |
|
|
|
- **图片类型**: 显示第一张图片的缩略图,支持悬停放大效果 |
|
|
|
- **文本类型**: 直接显示文本内容,超过20字符显示省略号 |
|
|
|
|
|
|
|
**注意**: 使用 `v-slot:bodyCell` 插槽来实现自定义渲染,而不是 `customRender` 属性,因为插槽的优先级更高。 |
|
|
|
|
|
|
|
### 3. 组件配置详情 |
|
|
|
|
|
|
|
#### 文本输入 (type = 0) |
|
|
|
```typescript |
|
|
|
{ |
|
|
|
label: '内容', |
|
|
|
field: 'content', |
|
|
|
component: 'Input', |
|
|
|
componentProps: { |
|
|
|
placeholder: '请输入内容', |
|
|
|
}, |
|
|
|
show: ({ values }) => { |
|
|
|
return values.type === '0' || values.type === 0; |
|
|
|
}, |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
#### 富文本编辑器 (type = 1) |
|
|
|
```typescript |
|
|
|
{ |
|
|
|
label: '富文本内容', |
|
|
|
field: 'content', |
|
|
|
component: 'JEditor', |
|
|
|
componentProps: { |
|
|
|
placeholder: '请输入富文本内容', |
|
|
|
height: 400, |
|
|
|
menubar: true, |
|
|
|
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help', |
|
|
|
}, |
|
|
|
show: ({ values }) => { |
|
|
|
return values.type === '1' || values.type === 1; |
|
|
|
}, |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
#### 图片上传 (type = 2) |
|
|
|
```typescript |
|
|
|
{ |
|
|
|
label: '图片', |
|
|
|
field: 'content', |
|
|
|
component: 'JImageUpload', |
|
|
|
componentProps: { |
|
|
|
fileMax: 1, |
|
|
|
accept: ['image/*'], |
|
|
|
helpText: '支持jpg、png、gif等图片格式', |
|
|
|
}, |
|
|
|
show: ({ values }) => { |
|
|
|
return values.type === '2' || values.type === 2; |
|
|
|
}, |
|
|
|
} |
|
|
|
``` |
|
|
|
|
|
|
|
### 4. 表单高度优化 |
|
|
|
在 `AppletConfigModal.vue` 中增加了表单的高度配置: |
|
|
|
|
|
|
|
- **模态框高度**: 设置为 600px |
|
|
|
- **表单容器**: 最大高度 500px,支持滚动 |
|
|
|
- **富文本编辑器**: 最小高度 300px |
|
|
|
- **上传组件**: 最大高度 200px,支持滚动 |
|
|
|
|
|
|
|
### 5. 组件注册 |
|
|
|
在 `src/components/Form/index.ts` 中添加了 `JUpload` 组件的导出: |
|
|
|
```typescript |
|
|
|
export { default as JUpload } from './src/jeecg/components/JUpload/JUpload.vue'; |
|
|
|
``` |
|
|
|
|
|
|
|
### 6. TypeScript 错误修复 |
|
|
|
在 `AppletConfigModal.vue` 中修复了 TypeScript 错误: |
|
|
|
- 修复了 catch 块中的 errorFields 类型问题 |
|
|
|
- 修复了 scrollToField 方法的参数问题 |
|
|
|
|
|
|
|
### 7. 图片处理优化 |
|
|
|
- 图片内容使用逗号分隔的字符串格式存储 |
|
|
|
- 支持多图片上传,表格中显示第一张图片 |
|
|
|
- 图片路径解析使用 `split(',')` 方法 |
|
|
|
|
|
|
|
## 使用说明 |
|
|
|
|
|
|
|
1. 在表单中选择不同的类型(0-文本、1-富文本、2-图片) |
|
|
|
2. 根据选择的类型,表单会自动显示对应的内容输入组件 |
|
|
|
3. 所有组件都使用同一个 `content` 字段,确保数据一致性 |
|
|
|
4. 表单具有更大的显示空间,支持滚动查看 |
|
|
|
5. 表格中会根据类型智能显示内容: |
|
|
|
- 文本:直接显示内容(超长显示省略号) |
|
|
|
- 富文本:显示"富文本内容"提示 |
|
|
|
- 图片:显示第一张图片的缩略图 |
|
|
|
|
|
|
|
## 技术要点 |
|
|
|
|
|
|
|
- 使用 `show` 属性实现条件显示 |
|
|
|
- 支持字符串和数字类型的 type 值 |
|
|
|
- 保持了原有的表单验证和提交逻辑 |
|
|
|
- 组件已在 componentMap 中正确注册 |
|
|
|
- 优化了表单的显示高度和滚动体验 |
|
|
|
- 表格内容展示支持HTML渲染和图片预览 |
|
|
|
- 使用 `v-slot:bodyCell` 插槽实现自定义渲染,确保优先级 |