diff --git a/jeecgboot-vue3/src/components/Form/index.ts b/jeecgboot-vue3/src/components/Form/index.ts index f9f47b4..66197a1 100644 --- a/jeecgboot-vue3/src/components/Form/index.ts +++ b/jeecgboot-vue3/src/components/Form/index.ts @@ -30,6 +30,7 @@ export { default as JSelectUserByDept } from './src/jeecg/components/JSelectUser export { default as JSelectUserByDepartment } from './src/jeecg/components/JSelectUserByDepartment.vue'; export { default as JEditor } from './src/jeecg/components/JEditor.vue'; export { default as JImageUpload } from './src/jeecg/components/JImageUpload.vue'; +export { default as JUpload } from './src/jeecg/components/JUpload/JUpload.vue'; // Jeecg自定义校验 export { JCronValidator } from '/@/components/Form/src/jeecg/components/JEasyCron'; diff --git a/jeecgboot-vue3/src/views/applet/config/README.md b/jeecgboot-vue3/src/views/applet/config/README.md new file mode 100644 index 0000000..e3ea40b --- /dev/null +++ b/jeecgboot-vue3/src/views/applet/config/README.md @@ -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` 插槽实现自定义渲染,确保优先级 \ No newline at end of file