Browse Source

完成登录流程等功能

master
前端-胡立永 4 days ago
parent
commit
597cf1a5d6
2 changed files with 117 additions and 0 deletions
  1. +1
    -0
      jeecgboot-vue3/src/components/Form/index.ts
  2. +116
    -0
      jeecgboot-vue3/src/views/applet/config/README.md

+ 1
- 0
jeecgboot-vue3/src/components/Form/index.ts View File

@ -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';


+ 116
- 0
jeecgboot-vue3/src/views/applet/config/README.md View File

@ -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` 插槽实现自定义渲染,确保优先级

Loading…
Cancel
Save