第一步: 创建业务表 | SEI低代码开发平台文档(v6.0.0)

# 第一步: 创建业务表

假如需要开发一个新模块，名称为yw_demo，则首先登录服务器数据库创建名称为yw_demo的表。
yw_demo表有2个字段，分别为编码字段id和名称字段name

提示

建议名称统一,即将模块名称、表名称、前后端文件名称都统一为一个名称，例如本例都是yw_demo

# 建表规则

强烈建议遵循如下规则创建业务表

建表规则

表名及字段名称全部采用大写
每个表必须设置一个字段作为主键
表名不能以_SYS_开头(因为该前缀已经被系统平台使用了)
强烈建议表名以你系统名称缩写开头，例如：财务系统的所有表名开头为CW_
建议字段不要使用下划线开头，如果使用建议注意与树形结构的特殊字段_PID字段和以_JOIN作为前缀的字段名重合
日期字段全部采用varchar类型
如表中无意义的主键，建议采用UUID作为字段名称，类型为32位的varchar

# 特殊字段含义

系统平台中部分字段名称有特殊含义，在建表的时候根据情况采用。如采用了以下特殊字段，则该字段的值由系统自动补全。

普通表特殊字段

_C_UID: 代表用户创建数据时的账号，在插入时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 32位
_C_UNAME：代表用户创建数据时的姓名，在插入时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 30位
_C_OID：代表当前用户创建数据时的部门编号，在插入时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 500位(考虑多个部门的情况，如果一个账号只有1个部门则可以使用 varchar 32位 )
_C_ONAME：代表用户创建数据时的部门名称，在插入时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 2000位(考虑多个部门的情况，如果一个账号只有1个部门则可以使用 varchar 200位 )
_C_TIME：代表用户创建数据时的时间，在插入时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 20位
_C_IP: 代表创建本记录的用户ip地址
_E_UID：代表用户修改数据时的账号，在修改时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 32位
_E_UNAME：代表用户修改数据时的姓名，在修改时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 30位
_E_OID：代表当前用户修改数据时的部门编号，在修改时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 500位
_E_ONAME：代表用户修改数据时的部门名称，在修改时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 2000位
_E_TIME：代表用户修改数据时的时间，在修改时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 20位
_E_IP: 代表用户修改数据时的用户ip地址
_D_DEL: 代表本表具有软删除功能，用户删除数据时，将该标志设为1，字段类型必须为无符号 tinyint
_X_LOG: 代表本表具有数据修改留痕功能，字段类型必须为 JSON
_X_AUDIT: 代表该表数据有审核功能，可在模块中配置审核按钮和审核历史按钮从而实现该模块的数据具有审核功能，字段类型必须为 JSON
_FILE: 以_FILE作为前缀的字段代表存放附件的路径，通常为 longText 类型，例如: _FILE1, _FILE2 存放格式为JOSN数组：[{"name": "证明文件", "url": "app/file/1.pdf"}]

树形表特殊字段含义

_PID：代表该表为树形结构表，存放父节点的主键字段值，通常为 varchar 32位
_JOINXXX：树形结构的XXX字段父节点到根的每级连接（前后包含/分割），例如需要连接NAME字段，则字段名为_JOINNAME

工作流表特殊字段含义

_FLOWID：代表该表采用了工作流，存放工作流的实例id，通常为 varchar 32位

特殊表含义

_DELETE_BAK：但是表名后缀为_DELETE_BAK代表该表是主表的删除数据备份
例如：主表名为 SYS_SYSTEM, 则删除的数据自动备份到表名为 SYS_SYSTEM_DELETE_BAK 的表中
当SYS_SYSTEM表数据有删除时，检查是否有SYS_SYSTEM_DELETE_BAK表，如果有则先将要删除的数据移到 SYS_SYSTEM_DELETE_BAK 表后再删除SYS_SYSTEM表数据。
表内特殊字段含义:

_D_UUID: 代表删除数据时备份的唯一值
_D_UID: 代表用户删除数据时的账号，在删除时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 32位
_D_UNAME：代表用户删除数据时的姓名，在删除时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 30位
_D_OID：代表当前用户删除数据时的部门编号，在删除时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 500位
_D_ONAME：代表用户删除数据时的部门名称(注意是两个下划线)，在删除时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 2000位
_D_TIME：代表用户删除数据时的时间，在删除时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 20位
_D_IP：代表用户删除数据时的用户ip地址，在删除时如果走系统平台通用接口时系统会自动赋值，通常为 varchar 20位

# 第二步: 创建模块

创建表后，启动前后端系统。

从web以超级用户登录系统，在菜单栏中找到"模块设置"菜单，点击"新增"创建一个新的模块。
在弹出界面中录入模块表示、名称、主表以及子表（如果该模块有子表）。例如模块名称取名为"演示demo"，模块标识为"yw_demo"，并且选取该模块对应的主表，本例选取yw_demo，如果本模块还有子表，则可以选择多个子表，界面如图所示。
提示：推荐将字段翻译配置在模块中，以便加快访问速度，如果在前端vue中配置字典翻译，则系统会检查该用户对该字典的访问权限，因此会加重服务器端系统负担。

# 第三步: 配置模块按钮

创建模块后，在列表中选中该模块，在右边"模块所属功能按钮列表"中增加操作按钮。
本例配置了"新增"、"修改"、"删除"、"查看"、"导出"共5个按钮，如下图所示。

提示

如果配置了 "审核"或"审核历史"功能按钮，则必须在主表中设置 _X_AUDIT字段，并且字段类型为 JSON
如果配置了 "修改历史"功能按钮，则必须在主表中设置 _X_LOG字段，并且字段类型为 JSON

# 第四步: 编写页面程序

目录规划

项目一般分为两类：
一类为管理系统manager，具体目录为views/manager/，(其中平台提供的程序在views/manager/base-sys目录下)。
另一类为互联网web系统，具体目录为views/web/。根据项目名称取名将后续开发的程序存放到该目录，例如本例取名为yw，则程序存放目录为views/manager/yw。

方式1：（推荐）采用弹框方式展示和编辑，代码及运行界面如下：

<template>
    <x-table-edit :form="()=>$refs.formYw" :data-source="{head:{module:'yw_demo'},option:{privilege:true,keyField:true}}">
        <x-query slot="query">
            <x-query-item prop="ID" opt="like" label="编号："/>
            <x-query-item prop="NAME" opt="like" label="姓名："/>
        </x-query>
        <x-table-column prop="ID" label="编号" width="150"/>
        <x-table-column prop="NAME" label="姓名" />
        <template v-slot:dialog="scope">
            <x-dialog-edit request title="业务设置" width="1100px" max-height="720px">
                <el-form ref="formYw" :model="scope.row" label-position="right" label-width="100px" inline>
                    <x-form-item prop="ID" :rules="Rules.required()" label="编号">
                        <el-input v-model="scope.row.ID" :disabled="scope.action" />
                    </x-form-item>
                    <x-form-item prop="NAME" :rules="Rules.required()" label="姓名">
                        <el-input v-model="scope.row.NAME" :disabled="scope.action" />
                    </x-form-item>
                </el-form>
            </x-dialog-edit>
        </template>
    </x-table-edit>
</template>

<script>
    import {Form} from 'element-ui';
    import {XTableEdit, XTableColumn, XQuery, XQueryItem, Rules, XDialogEdit, XFormItem} from 'sei-ui';
    export default {
        name: 'Demo1',
        components: {ElForm: Form, XTableEdit, XTableColumn, XQuery, XQueryItem, XDialogEdit, XFormItem},
        data() {
            return {
                Rules
            }
        }
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

提示

:form="()=>$refs.formYw" 代表前端数据验证的表单为formYw，详见 x-table-edit 控件的 form 选项
:data-source 选项是配置数据源，具体参数见 data-source 控件
request 代表是否重新从数据库中查询出该条记录，主要针对表格中未列出的字段，需从数据库中获取项目一般分为两类：
一类为管理系统manager，具体目录为views/manager/，(其中平台提供的程序在views/manager/base-sys目录下)。
另一类为互联网web系统，具体目录为views/web/。根据项目名称取名将后续开发的程序存放到该目录，例如本例取名为yw，则程序存放目录为views/manager/yw。

运行界面如下：菜单模板

方式2：针对字段少且简单的表，则可以采用表格内编辑功能，代码及运行界面如下：

<template>
    <x-table-edit :data-source="{head:{module:'yw_demo'},option:{privilege:true,keyField:true}}">
        <x-query slot="query">
            <x-query-item prop="ID" opt="like" label="编号："/>
            <x-query-item prop="NAME" opt="like" label="名称："/>
        </x-query>
        <x-table-column prop="ID" label="编号" v-rules="[{type:'required'}]" :maxlength=6 width="150"/>
        <x-table-column prop="NAME" label="名称" v-rules="[{type:'required'}]" :maxlength=30 />
    </x-table-edit>
</template>

<script>
    import {XTableEdit, XTableColumn, XQuery, XQueryItem} from 'sei-ui';
    export default {
        name: 'YwDemo',
        components: {XTableEdit, XTableColumn, XQuery, XQueryItem}
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

提示

:data-source 选项是配置数据源，具体参数见 data-source 控件
v-rules 代表做必须输入项的验证

运行界面如下：菜单模板

# 第五步: 创建路由和菜单

创建路由和菜单有2种方式：
(1) 通过web管理界面创建
(2) 通过程序创建(在main.js中)

# 通过web管理界面创建

登录后台管理系统界面，找到"菜单模板"，如图所示。

点击"新增"按钮在弹出对话框中填写菜单信息。增加菜单

# 通过程序创建

通过在main.js中写程序将该组件挂载到菜单中。
例如将路径：
{
name: '业务演示demo',
path: '/manager/demo/demo1',
component: () => import('@/views/manager/demo/demo1')
}
挂载到后台菜单中：
router.addCustomRoutes(true, {
name: '业务演示demo',
path: '/manager/demo/demo1',
component: () => import('@/views/manager/demo/demo1')
}, 'manager', true)

# 第六步: 权限设置

路由和菜单创建好后，由于超级用户具有全部权限，因此超级用户就可以重新登录看到该菜单了，如果是普通用户，则：

创建该用户的角色，并且将该用户拉、加入到创建的角色中，注意一个角色可加入多个用户
设置该角色的菜单，以便该用户登录后可看到该菜单
设置该角色对该模块的访问权限，其中包括该模块下配置的各个按钮权限以及操作条件等

提示

可根据该角色设置SQL权限来限制用户可操作的数据
SQL权限可只写条件语句或者完整的SQL语句以及多表连接查询等语句

# 第七步: 登录查看最终结果

完成以上步骤后，就可以看到最终界面。

← 后端环境搭建 1.前端提交格式(request) →