通过配置一个业务来快速了解如何使用南瓜数定制属于自己的系统

一、注册用户

第一步需要先申请一个用户账号，这里可用官方提供的公共账号进行尝鲜。私信获取

二、表单设计

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 其他操作

可在业务列表上进行数据的新增、修改、查看、启用、禁用、删除操作。详细可登录系统操作尝试