通过配置一个业务来快速了解如何使用南瓜数定制属于自己的系统
一、注册用户
第一步需要先申请一个用户账号，这里可用官方提供的公共账号进行尝鲜。私信获取
二、表单设计
1.表单创建
1.1菜单路径
系统设计》表单设计器
在表单设计器中，您可以在左侧选择不同的元素来设计自己的业务
1.2 属性重命名
在标签属性上输入业务属性标签名称：
1.3 得到表单代码
表单设计完成后，点击右上角的按钮“导出JSON”，复制出来所有代码
{
"widgetList": [
{
"type": "input",
"icon": "text-field",
"formItemFlag": true,
"options": {
"name": "input99197",
"label": "姓名",
"labelAlign": "",
"type": "text",
"defaultValue": "",
"placeholder": "",
"columnWidth": "200px",
"size": "",
"labelWidth": null,
"labelHidden": false,
"readonly": false,
"disabled": false,
"hidden": false,
"clearable": true,
"showPassword": false,
"required": false,
"requiredHint": "",
"validation": "",
"validationHint": "",
"customClass": [],
"labelIconClass": null,
"labelIconPosition": "rear",
"labelTooltip": null,
"minLength": null,
"maxLength": null,
"showWordLimit": false,
"prefixIcon": "",
"suffixIcon": "",
"appendButton": false,
"appendButtonDisabled": false,
"buttonIcon": "el-icon-search",
"onCreated": "",
"onMounted": "",
"onInput": "",
"onChange": "",
"onFocus": "",
"onBlur": "",
"onValidate": ""
},
"id": "input99197"
},
{
"type": "textarea",
"icon": "textarea-field",
"formItemFlag": true,
"options": {
"name": "textarea100585",
"label": "简介",
"labelAlign": "",
"rows": 3,
"defaultValue": "",
"placeholder": "",
"columnWidth": "200px",
"size": "",
"labelWidth": null,
"labelHidden": false,
"readonly": false,
"disabled": false,
"hidden": false,
"required": false,
"requiredHint": "",
"validation": "",
"validationHint": "",
"customClass": "",
"labelIconClass": null,
"labelIconPosition": "rear",
"labelTooltip": null,
"minLength": null,
"maxLength": null,
"showWordLimit": false,
"onCreated": "",
"onMounted": "",
"onInput": "",
"onChange": "",
"onFocus": "",
"onBlur": "",
"onValidate": ""
},
"id": "textarea100585"
}
],
"formConfig": {
"modelName": "formData",
"refName": "vForm",
"rulesName": "rules",
"labelWidth": 80,
"labelPosition": "left",
"size": "",
"labelAlign": "label-left-align",
"cssCode": "",
"customClass": "",
"functions": "",
"layoutType": "PC",
"onFormCreated": "",
"onFormMounted": "",
"onFormDataChange": "",
"onFormValidate": "",
"jsonVersion": 3
}
}2.表单配置
2.1菜单路径
系统设计》表单配置
2.2 新增表单
点击新增按钮，弹出页面，填写如下信息：
表单名称：填写中文业务名称
实体名称：填写英文业务名称
表单(复制表单设计器中的json)： 将步骤1.3中得到的代码复制进去
如下图:
点击确定，即可完成表单的设计：
复制链接即可在新的页面查看表单，并进行数据的填写和保存
2.3 得到表单主键
新增完成表单后，可以在列表看到创建该表单的主键，复制该组件，在后续创建业务列表需要用到：
f5888e79c3f547578b921e313a40e4e1三、业务设计
3.1 菜单路径
系统设计》业务设计
3.2 新增业务列表
点击新增按钮，弹出页面，填写如下信息：
列表名称：该业务列表的中文名称
表单配置主键：步骤2.3中得到的表单主键
列表头展示字段：配置列表需要显示的属性【详细配置介绍看3.4章节】
配置按钮权限，点击确定即可完成业务列表的设计
3.3 得到表单主键和列表主键
步骤3.2完成后，可在列表看到新增成功的字段的列表ID属性和表单属性，将该2个属性按照以下格式组装，后续在菜单配置中会用到：
listid:列表ID
formId：表单
{"listid":"3f52acc4afba46f08073fa235bc05302","formId":"f5888e79c3f547578b921e313a40e4e1"}3.4 列表头展示字段配置解释
列表头字段的展示是为了展示业务属性，帮助用户更好的查看和分析数据，建议将表单1.3得到的代码字段进行全量展示。
在配置列表头字段前需要先得到1.3得到的代码中的属性： "name": "input99197", "label": "姓名",与列表头的label和prop进行对应
3.4.1 得到的列表头
[
{
key: '1',
label: '姓名',
prop: 'input99197',
width: '150',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
{
key: '3',
label: '简介',
prop: 'textarea100585',
width: '150',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
{key: '6',
label: '创建时间',
prop: 'CREATED_TIME',
width: '150',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: true
}
{
key: '7',
label: '状态',
prop: 'status48624',
width: '150',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
]3.4.2 列表头各属性解释
key：key值索引，唯一
lable：标题头中文名
prop：对应表单设计器该属性的唯一名称
width：宽度
headerAlign：标题头对齐
align：内容对齐
scope：是否设置为全局
sortable：是否可排序3.4.3 系统默认列表头属性
CREATED_BY #创建人
CREATED_TIME #创建时间
UPDATED_BY #修改人
UPDATED_TIME #修改时间
status48624 #数据状态四、菜单配置
4.1 菜单路径
系统管理》菜单管理
4.2 新增菜单
点击新增按钮,，弹出添加菜单页面，根据业务分类挂在不上级菜单下，例如：
上级菜单：OA系统
菜单类型：菜单
菜单名称：个人信息收集
显示排序：1
路由地址：xinxishouji 【二级菜单可随意字母组合；三级菜单格式为： |listId,formid】
组件路由：autoListInfo/autoListInfo 【二级地址默认为：autoListInfo/autoListInfo；三级地址默认为：autoListInfo/child/autoListInfo】点击确定即可完成菜单的创建
4.3路由参数设置
在步骤4.2中新增完菜单后，选择刚创建的菜单，点击修改按钮，将3.3步骤中的代码复制到：路由参数属性中
点击确定，完成菜单和业务的绑定。
五、角色权限分配
5.1 菜单路径
系统管理》角色管理
5.2 菜单权限授权
在5.1步骤中可以看到系统上现有角色，可将刚创建的菜单分配给到不通的角色下，拥有该角色的人员即可看到该菜单。
勾选个人信息收集，点击确定完成菜单和角色的授权
六、效果展示
6.1 菜单路径
OA系统》个人信息收集
完成步骤5.2后，刷新页面，即可看到业务列表
6.2 补充其他默认属性
由于列表头字段过少，这里将其他默认属性也添加进来，最后完整的列表头代码如下：
[
{
key: '1',
label: '姓名',
prop: 'input99197',
width: '150',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
{
key: '2',
label: '简介',
prop: 'textarea100585',
width: '150',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
{key: '3',
label: '修改时间',
prop: 'UPDATED_TIME',
width: '150',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: true
},
{key: '4',
label: '修改人',
prop: 'UPDATED_BY',
width: '150',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: true
},
{key: '5',
label: '创建人',
prop: 'CREATED_BY',
width: '150',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: true
},
{key: '6',
label: '创建时间',
prop: 'CREATED_TIME',
width: '150',
headerAlign: 'center',
align: 'center',
scope: false,
sortable: true
},
{
key: '7',
label: '状态',
prop: 'status48624',
width: '150',
headerAlign: 'center',
align: 'right',
scope: false,
sortable: true
},
]6.3 其他操作
可在业务列表上进行数据的新增、修改、查看、启用、禁用、删除操作。详细可登录系统操作尝试