EOS Low-Code Platform 8 EOS Low-Code Platform 8
产品简介
安装部署
应用开发
专题场景实战案例
低代码(Low-Code)开发参考手册
高开开发参考手册
流程开发参考手册
AFCenter 使用指南
Governor 使用指南
FAQ
  • 视图中显示上传的附件图片
  • 1.场景介绍
  • 2.效果展示
  • 3.实现思路
  • 4.操作步骤
  • 4.1创建数据实体
  • 4.2创建表单及视图
  • 4.3在视图中添加显示列

# 视图中显示上传的附件图片

# 1.场景介绍

在物料表单的视图中添加物料数据时,上传图片附件,保存后在物料的视图中,可以显示上传的附件图片。

本文以上述场景为例,讲解如何在视图中,创建显示列以显示图片。

# 2.效果展示

# 3.实现思路

添加自定义显示列,格式为自定义的html/Vue代码,代码中使用el-image标签请求图片路径并显示图片(请求路径参数需要携带当前登录用户的token)。

# 4.操作步骤

# 4.1创建数据实体

初始化数据库,以Mysql为例,脚本如下:

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
DROP TABLE IF EXISTS `test_materials`;
CREATE TABLE `test_materials`  (
  `ID` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键',
  `name` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料名称',
  `material_type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料类型',
  `material_img` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料图片',
  `prices` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料价格',
  `spce` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '物料规格',
  PRIMARY KEY (`ID`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;

创建物料数据实体,拖动数据源内的物料表至低开页面中,并保存。

# 4.2创建表单及视图

右键物料实体模型,生成页面,调整物料表单,并保存。

选择物料图片组件,修改物料图片的组件为附件上传。

更改文件类型为图片,展示模式为图片,并保存。

点击默认视图,点击视图设置-显示字段,隐藏已有的物料图片显示列。

# 4.3在视图中添加显示列

在视图页面中,添加一个v_token变量。

示例代码如下:

//获取当前登录用户的Authorization
localStorage.getItem("uniqueId").replace(/\"/g, "")

点击视图,在显示字段中添加显示列:自定义字段,修改列名为图片,格式为自定义并填写代码。

<!--给显示列添加一张图片,大小50px*50px,路径为图片的请求地址-->
<el-image style="width:50px;height:50px;"
          :src="`../api/lowcode/models/attachments/${formData.materialImg}/actions/download?Authorization=${v_token}`" >

最终效果:

上次更新: 2024/1/30下午5:37:19

← 视图里默认初始化多条记录 表单中添加文字说明 →