自定 义视图
1. 简介
视图扩展又叫“自定义视图”,当列表、看板、画册、日历等系统视图不能满足用户视图展示需求的时候,开发者可以通过自己编写代码实现一个完全自定义的视图页面,用于展示表单的数据。 自定义视图通过智管工提供的JavaScript SDK实现调用系统组件,比如新增数据、查看数据弹窗等。 当自定义视图发布后,用户可以像使用系统视图一样使用自定义视图。
2. 开发步骤
2.1 准备工作
- 安装 Node.js(>=16.20) 和 npm
- 准备集成开发环境(IDE),推荐 VS Code
- 如果是团队开发,请准备好代码版本管理工具,推荐 Git
2.2 创建视图扩展
2.2.1 创建扩展
在扩展中心点击创建扩展→选择开发调试的工作群。创建完成后,在用户端的对应工作群即可以看到已创建好的“自定义视图”,进入后即可以进行下一步开发。

2.2.2 自定义视图设置
根据需求在参数定义中配置好视图所需的参数:
设置项参数有如下几种类型:
| 设置项类型 | 子类型 | 值类型 | 备注 |
|---|---|---|---|
| 字段选择器 | 字段单选字段多选 | array[string] | 字段多选时,可以限制选择字段的数量 |
| 字符串 | string | ||
| 数值 | double | ||
| 枚举值 | 单选框下拉菜单 | array[string] | 选项格式为 key=value ,其中 value 为呈现给使用者的文字,key 为代码中获取到的值;样式为单选框时,可以选择横向或竖向排列; |
| 布尔值 | 开关勾选框 | boolean | |
| 分组标题 | null |
变量id需要在开发自定义视图时使用,在使用已有代码进行再次开发时,需要与代码中的变量名一至,否则会导致错误。
2.2.3 创建本地项目
在“视图设置”弹窗中切换到「开发调试」,根据向导创建本地项目,并将本地项目运行在当前视图中进行调试。
1)选择脚手架的模板,目前只提供了Vue基础示例模板
2)安装zgg-cli命令行工具
本地项目的初始化创建是通过智管工的命令行工具zgg-cli来实现的,所以要事先全局安装这个工具。
请在计算机终端命令行用以下命令安装:
npm install -g zgg-cli
如果报没有权限的错误,请用 sudo 来安装:
sudo npm install -g zgg-cli
安装完成后,可以用下面的命令来验证是否安装成功:
zgg-cli --version
2.0.7
如果能正常输出版本号,则表示安装成功。这个工具的安装通常来说是一次性的,即后续开发新插件时无需再次安装该工具。如果该工具将来有新版本,则可以重新安装该工具进行升级。
zgg-cli完整的命令如下:
Usage: zgg-cli [options] [command]
Options:
-v, --version 输出当前版本号
-h, --help 获取帮助
Commands:
auth|a zgg-cli auth 智管工授权登录
build zgg-cli build
deploy|d [options] 部署项目
init [options] zgg-cli init <template-code> --id <id> --template
<template-type> 初始化项目,请从web端复制命令
logout|l zgg-cli logout 注销当前环境账户
publish [options] zgg-cli publish -m <message> 提交扩展
start|s zgg-cli start 开始开发
sync-params [options] zgg-cli sync-params -f <file-path> 同步插件参数配置,-f 非必填 默认文件路径为
./.config/params-config.json
2.2.4 编写扩展代码
与普通前端项目开发和调试方式相同,如果需要调用设置的环境参数及智管工平台接口等,只需要引入zgg-plugin中对应的方法即可,如:
import { config, utils, api, env } from "zgg_plugin";
2.2.5 提交本地代码
提交本地代码使用如下命令:
zgg-cli publish -m "首次提交demo"
此时,如果开发者还没有登录授权到本地项目,则系统会弹出授权页面进行自动授权。然后,会自动编译和打包代码,并以当前登录的用户身份进行代码提交。
2.2.6 发布扩展
视图插件在发布之前,只能在调试应用中被使用。如果想要全组织都可以使用开发好的插件,则需要将插件发布到组织。插件的发布是基于开发者提交的代码的,开发者可以选择将某次提交的代码发布为一个正式的版本。发布时,需要定义版本号,且每次发布的版本号只能大于当前的版本号。
1)在提交记录中找到需要发布的版本,点击发布
2)填写版本号,发布说明等信息进行发布
3)在视图扩展列表中将视图状态开关打开之后该单位所有人员在创建自定义视图时即可以选择刚刚发布的视图
2.2.7 更新扩展
重复2.2.4-2.2.6即可,如果是为不同单位更新,需要将代码文件zgg.json中的id修改为对应调试的视图id