Skip to main content

《OA办公平台》操作手册

在学习本文档之前，要求先熟悉 项目开始配置 的使用。

名称访问地址账号密码
项目地址http://v-devsuit-train.t.yindangu.comadmin8
配置中心http://v-devsuit-train.t.yindangu.com/system/settings/index.html#/loginsa8

下面主要结合开发规范，介绍项目中几个重要模块的配置过程。

1. 登录​

构件编码构件名称业务分类作用
oa_login登录业务构件① 实现页面登录功能
② 忘记密码设置、发送邮件功能等

1.1 开发系统配置​

1. 添加引用

添加引用作用
LoginComp（登录构件）用于实现登入和登录身份校验
vbase_organization（VBase_组织机构API）用于查询账号信息（包含账号人员岗位机构信息）
`vbase_email（vbase_邮件管理API）主要用于实现发送邮件的相关接口
img

2.【登录】窗体

窗体编码窗体名称窗体类型
form_login登录网页窗体-自定义窗体
<div style="background: #eff0f4;width: 100%;height: 100%;">
    <div class="box_bg">
        <div class="box">
            <div class="logo">
                <img src="./../../../share/login_img/left.jpg" alt="">
            </div>
            <div class="fgx"></div>
            <div class="input">
                <h2>用户登录</h2>
                <div class="border-top"></div>
                <div class="input_item ">
                    用户名（演示账号test）：
                    <br>
                    <input v-model="userInfo.current.username" type="text" placeholder="test">
                </div>

                <div class="input_item">
                    密 码（演示账号密码8）：<br>
                    <input v-model="userInfo.current.userPassword" type="password">
                </div>

                <div class="input_item yzm">
                    验证码：<br>
                    <div>
                        <input v-model="inputCodo.current.inputCode" type="text" @keyup.enter="$emit('login')">
                        <img v-id2url:src="verificationCode.current.imgId" v-on:click="$emit('createCode')" class="code" alt="">
                    </div>
                </div>

                <div class="input_item bh">
                    <div>
                        <input type="checkbox" class="cbox" v-model="userInfo.current.remPassword">
                        <div>记住密码</div>
                    </div>
                    <a href="#" v-on:click="$emit('findPwds')">找回密码</a>
                </div>
                <div class="input_item btn">
                    <button v-on:click="$emit('login')" class="submit">登录OA系统</button>
                </div>
            </div>
        </div>
        <div class="nav">
            <span style="float: left;">版权所有：珠海银弹谷网络有限公司</span>
            <span style="float: right;">| Copyright© 2015—2023 Firdot All Rights Reserved.</span>
        </div>
    </div>
</div>

3.【忘记密码】窗体

窗体编码窗体名称窗体类型
form_forgetPwd忘记密码网页窗体-自定义窗体
<div>
    <header class="header">
        <nav class="nav1">
            <div>同望科技股份有限公司</div>
            <a v-on:click="$emit('retureLogin')">返回登录页面</a>
        </nav>
        <nav class="nav2 nav1">
            <img src="./../../../share/home_img/HRMSLogo.png" alt="">
            <div>同望科技股份有限公司</div>
        </nav>
    </header>
    <section>
        <div class="conter">
            <div class="conter_header">
                <div class="title">找回密码</div>
                <div class="item">
                    <button @click="emailClick" :style="enterStyleA">通过邮件找回</button>
                    <button @click="wechatClick" :style="enterStyleB">通过微信找回</button>
                </div>
                <hr>
            </div>
            <div class="conter_main">
                <retrive-by-email :codeSrc="verificationCode.current.imgId" @emilSubmit="emilSubmit" @resetCode1="resetCode1" v-if="isShow"></retrive-by-email>
                <retrive-by-we-chat :codeSrc="verificationCode.current.imgId" @emilSubmit="emilSubmit" @resetCode1="resetCode1" @vchatSubmint="vchatSubmint" v-if="!isShow"></retrive-by-we-chat>
            </div>
        </div>
    </section>
    <footer class="footer">
        <div>
            Copyright © 2015-2023 版权所有：同望科技股份有限公司
        </div>
    </footer>
</div>

4.【重置密码】窗体

窗体编码窗体名称窗体类型
form_resetPwd重置密码网页窗体-自定义窗体
img

5. 发布云空间

配置完成后，发布至云空间，执行系统才可以查看配置效果。
img

1.2 执行系统配置​

1. 待选登录窗体管理

img

2. 登录窗体管理

img

3. 邮件服务器设置

img

4. 效果预览

访问地址：http://v-devsuit-train.t.yindangu.com
账号：admin，密码：8 ，登录验证效果即可。

2. 首页​

info

首页模块，主要介绍首页框架搭建，例如：首页+门户+导航布局的结合使用，以及门户管理的应用场景。

2.1 开发系统配置​

1. 添加引用

img

2.【主页-办公平台】窗体

窗体编码窗体名称窗体类型
form_index办公平台网页窗体-导航布局
创建一个导航布局类型的网页窗体，并且在属性中，设置布局方式。
img
img
img

3.【门户窗体】窗体

窗体编码窗体名称窗体类型
form_nav导航布局网页窗体-门户窗体
img

4.【导航布局】窗体

窗体编码窗体名称窗体类型
form_protal门户窗体网页窗体-导航布局
img
img

5. 门户子窗体

在本案例中，定义了多个网页窗体作为门户的子窗体，根据实际业务可以按需创建门户窗体进行使用，下面将不展开具体讲解。

6. 发布云空间

配置完成后，发布至云空间，执行系统才可以查看配置效果。

2.2 执行系统配置​

1. 菜单定义

info
学习本章节前，要求学员先掌握 菜单管理的使用。
img

2. 门户管理

info
学习本章节前，要求学员先掌握 门户管理的使用。
img

3. 所有人权限

在本项目中，将菜单权限和门户权限授权给所有人使用，如下：
img
img

4. 待选首页窗体管理

img

5. 登录窗体管理

img

6. 效果预览

访问地址：http://v-devsuit-train.t.yindangu.com
账号：admin，密码：8 ，登录验证效果即可。

3. 员工档案​

info
  • 该模块主要实现新增员工档案业务信息，包括：员工基本信息、登录账号信息等；
  • 新增或编辑时，将对应的账号和人员信息同步更新到Vbase内置的人员和账号信息表中，默认密码(8)；
  • 删除员工档案信息时，也同步删除Vbase内置的人员和账号信息表中对应的人员和账号信息；
  • 在本项目中，为了保持Vbase人员账号表和员工档案表信息一致，由sa超级管理员维护机构信息后，只需授权 “员工档案” 菜单给用户使用，即可。

3.1 开发系统配置​

1. 添加引用

img

2. 表定义

表字段下载：表employee字段设计.xls
img

3.【员工名册】窗体

img

4.【员工档案编辑】窗体

img

5. 构件菜单

1. 员工名册
img
2. 员工档案
“员工档案编辑” 窗体，一般通过员工名册新增或编辑时打开，当作为菜单被打开时，结合需求设置参数传递用于逻辑判断加载当前用户档案数据。
img

6. 发布云空间

配置完成后，发布至云空间，执行系统才可以查看配置效果。

3.2 执行系统配置​

1. 待选菜单项管理

1.个人信息
img
2. 员工名册
img

2. 菜单管理

img

3. 所有人权限

img

4. 效果预览

访问地址：http://v-devsuit-train.t.yindangu.com
账号：admin，密码：8 ，登录验证效果即可。
img

4. 报销管理​

4.1 开发系统配置​

1. 背景说明

在本案例中，结合开发规范，按照业务功能分离成三个构件。
img
构件编码构件名称业务分类作用
（1）common_action_lib流程公共_业务动作库业务动作库① 定义业务动作
② 生成业务动作模版
（2）ydg_reimburse_db报销申请_DB数据库构件① 定义数据表
② 初始化基础数据
③ 输出数据表保存、删除、修改方法
（3）ydg_reimburse_pc报销申请_PC业务构件① 日常业务表单

2. 业务动作库构件

构件编码构件名称业务分类作用
common_action_lib流程公共_业务动作库业务动作库① 定义业务动作
② 生成业务动作模版
info
在本项目中，所有需要使用业务框架的窗体，均共用一个业务动作库构件，因此在创建业务动作库构件时可以需求创建常用的业务动作。
2.1 创建业务动作
1. 在构件目录中，打开【业务动作】选项，根据需求自定义业务动作。
动作类型有两种，分别是：通用动作、流程动作。
流程动作，主要用于流程框架菜单。在本案例中，选择通用动作，主题是动作的显示颜色，根据需要进行选择。
img
2. 选择新建的业务动作，右击选择“新建业务动作扩展点”，创建业务动作扩展点 。
img
3. 在业务动作中，新增执行方法规则，在执行方法中执行对应的EP扩展点。
img
4. 若是无需回调业务窗体逻辑，无需建立EP扩展，比如“取消”动作，处理退出窗体逻辑即可。
img
info
  1. 业务动作编码、名称，及业务动作扩展实现编码、名称，参照开发规范。
  2. 业务动作定义，可以按实际业务添加，及配置相关逻辑。
2.2  生成业务动作模版
右击构件，选中 '生成业务动作模板' 选项，生成业务动作模版。
img
img
生成业务动作模版后，在模版样式 -> 业务动作模版库，可以查看自定义模版，以及已安装的模版。
img
img
将该模板构件部署到云空间，发布后项目的其他人员更新了云空间，会自动更新或者安装该构件模板。
img
2.3  部署构件
  • 云项目：发布到云空间

3. 创建数据库构件

构件编码构件名称业务分类作用
ydg_reimburse_db报销申请_DB数据库构件① 定义数据表
② 初始化基础数据
③ 输出数据表保存、删除、修改方法
3.1  添加引用
在报销申请_DB构件中，添加 '登录构件' 引用，用于获取当前登录用户信息，赋值给人员相关字段。
添加引用作用
LoginComp（登录构件）主要用于获取当前登录用户信息赋值给表相关系统和业务字段
userName：用户名称
userId：用户Id
orgName：机构名称
orgId：机构Id
在当前构件【引用】文件夹下，右键“增加引用”，依次选择LoginComp（登录构件）、vbase_workflow_facade（VBase_流程管理）构件添加至引用，确定即可。
引用方法的具体使用：参考流程常用方法-方法信息。
img
3.2 创建表
在当前构件【表】文件夹下新建目录【报销申请】，根据原型设计数据库表，1个报销单包含任意多个报销明细，所以在设计数据库为1对多关系（主从表结构）。
命名规范：
表编码表名称导入固定字段
reimburse_main报销申请_主表01主表固定字段.xls
reimburse_detail报销申请_从表02从表固定字段.xls
reimburse_file报销申请_附件表02从表固定字段.xls
img
业务字段与数据库设计：
根据原型图定义报销申请的业务字段(排除重复的固定字段)并进行数据库设计，如果不能满足需求，再做修改或新增字段。
报销申请_主表（reimburse_main）
img
报销申请_从表（reimburse_detail）
img
报销申请_附件表（reimburse_file）
img
3.3  创建服务端方法
在当前构件【构件方法】文件夹下新建目录【报销申请】，根据需求定义服务端方法。
img
3.4  创建服务端方法——从表
命名规范：
方法编码方法名称添加到构件输出
saveReimburseDetail保存报销申请从表✔
deleteReimburseDetail删除报销申请从表✔
配置视频：
详细配置：
1. 保存报销申请从表（saveReimburseDetail）
编码名称类型描述
reimburseDetail报销申请从表实体实体字段，引入对应的表字段。
2. 删除报销申请从表（deleteReimburseDetail）
编码名称类型初始值必须描述
ids数据Ids文本✔Id 与 MainId 必填一项，同时存在将分开删除，多个Id用英文逗号隔开
mainId主表Ids文本Id 与 MainId 必填一项，同时存在将分开删除，多个Id用英文逗号隔开
isDelete是否删除布尔True
3.5 创建服务端方法——附件表
命名规范：
方法编码方法名称添加到构件输出
saveReimburseFile保存报销申请附件表✔
deleteReimburseFile删除报销申请附件表✔
配置视频：
详细配置：
1. 保存报销申请附件表（saveReimburseDetail）
编码名称类型描述
reimburseFile报销申请附件表实体实体字段，引入对应的表字段。
2. 删除报销申请附件表（deleteReimburseDetail）
编码名称类型初始值必须描述
ids数据Ids文本✔Id 与 MainId 必填一项，同时存在将分开删除，多个Id用英文逗号隔开
mainId主表Ids文本Id 与 MainId 必填一项，同时存在将分开删除，多个Id用英文逗号隔开
isDelete是否删除布尔True
3.6  创建服务端方法——主表
命名规范：
方法编码方法名称添加到构件输出
saveReimburseMain保存报销申请主表✔
deleteReimburseMain删除报销申请主表✔
updateReimburseMainBizStatus修改报销申请主表业务状态✔
配置视频：
详细配置：
1. 保存报销申请主表（saveReimburseMain）
编码名称类型描述
reimburseMain报销申请主表实体实体字段，引入对应的表字段。
reimburseDetail报销申请从表实体实体字段，引入对应的表字段。
reimburseFile报销申请附件表实体实体字段，引入对应的表字段。
2. 删除报销申请主表（deleteReimburseMain）
编码名称类型初始值必须描述
ids数据Ids文本✔
isDelete是否删除布尔True
3. 修改报销申请主表业务状态（updateReimburseMainBizStatus）
编码名称类型初始值必须描述
ids数据Ids文本#bizId✔多个Id用英文逗号隔开
bizStatusCode状态编码文本"B"✔T-1\编制；B\1\审批中；E-9\审批不通过；F\9\审批通过；C\0\已作废；A\8\修订中；R\2\退回
bizStatus状态文本"审批中"✔T-1\编制；B\1\审批中；E-9\审批不通过；F\9\审批通过；C\0\已作废；A\8\修订中；R\2\退回
4. 修改报销申请主表报销金额（updateReimburseMainReimburseAmt）
编码名称类型必须描述
ids数据Ids文本✔多个Id用英文逗号隔开
reimburseAmt报销金额(元)小数
3.7  服务端方式输出
数据库表构件（DB构件）定义的服务端方法一般需要设置输出，用于在业务构件（PC构件）添加DB构件引用后，业务构件（PC构件）窗体可以执行该服务端方法。
方法一：
img
方法二：
img
3.8  部署构件
  • 云项目：发布到云空间

4. 创建业务构件

构件编码构件名称业务分类作用
ydg_reimburse_pc报销申请_PC业务构件① 日常业务表单
4.1  添加引用
在报销申请_pc构件中，根据需求，添加相关引用。
在报销申请_DB构件中，添加 '登录构件' 引用，用于获取当前登录用户信息，赋值给人员相关字段。
添加引用作用
common_action_lib（流程公共_业务动作库）主要用于【报销申请】编辑窗体导入业务动作，并且设置业务动作构件服务映射。
ydg_reimburse_db（报销申请_DB）主要用于业务构件窗体执行主表、从表、附件表的保存和删除方法。
LoginComp（登录构件）主要用于获取当前登录用户信息赋值给表相关系统和业务字段
（例如：申请人、新增人、修改人相关字段）
userName：用户名称
userId：用户Id
orgName：机构名称
orgId：机构Id
vbase_organization_facade（VBase_组织机构）主要用于获取人员信息赋值给表对应的领款人字段。
vbase_prd_workflow（vbase_产品化流程管理）必须添加，配置流程启动时需要使用。
例如：打开 "流程应用" 窗体启动流程，该窗体在vbase_prd_workflow（vbase_产品化流程管理）构件中。
vbase_prdbizframe（vbase_产品化）主要用于触发业务框架动作数据变化（例如：设置业务框架按钮使能、显示等）
引用方法的具体使用：参考流程常用方法-方法信息。
img
本地项目：从当前项目选中添加引用构件。
云项目：可以直接添加引用。
4.2  更新引用
如果被引用构件进行了修改并重新部署，那么当前的引用构件需要执行【更新引用】操作。
例如：修改了ydg_reimburse_db构件并重新部署，那么在ydg_reimburse_pc的引用中选中ydg_reimburse_db构件执行【更新引用】操作。
img
4.3  创建查询
在业务构件（报销申请_PC）创建查询前，需要将数据库构件（报销申请_DB）先部署到服务，否则创建查询后，预览会失败。
查询编码查询名称查询类型
getReimburseMain获取报销申请主表VSql
SELECT *
FROM toone_reimburse_db.reimburse_main
WHERE IsDelete <> 1
ORDER BY bizCode DESC
4.4  窗体定义
在当前构件【窗体】文件夹下新建目录【报销申请】，根据原型新增窗体。
命名规范：
窗体编码窗体名称
form_reimburse_list报销申请列表
form_reimburse_edit报销申请编辑
form_reimburse_report报销申请单
4.5 【报销申请列表】窗体
私有编码名称类型初始值描述
✔currentWindowInstanceCode当前窗体实例编码文本主要用于主页面编辑、查看数据时打开编辑窗体进行传参
isEditData编辑数据标识布尔false用于判断编辑窗体是否编辑了数据，主页面根据返回值为true刷新数据
4.6 【报销申请编辑】窗体
方法一：在新增窗体时，直接添加业务动作：
img
方法二：新建窗体后，右击选择导入业务动作操作：
img
img
导入后，在窗体方法中，会有对应的业务动作扩展实现：
img
4.7 【报销申请单】窗体
编码名称类型初始值描述
mainId主表Id文本主要用于主页面编辑、查看数据时打开编辑窗体进行传参
4.8  报表配置
img
配置视频：
4.9  业务单据实例配置
命名规范：
业务单据实例编码菜单名称
form_reimburse_edit报销申请编辑
在【报销申请编辑】窗体导入了业务动作后，当【报销申请列表】进行新增、编辑、查看操作时 ，配置”打开业务框架“规则，打开【报销申请编辑】业务单据实例，而不是【报销申请编辑】窗体。
img
4.10  构件服务映射
在窗体方法配置中，如果添加业务动作、流程方法等扩展实现，需要进行构件服务映射操作。
在本案例中，【报销申请编辑】窗体导入了业务动作，会生成对应业务动作的扩展实现，同时会自动匹配勾选构件服务映射。
若窗体通过拷贝，构件服务映射不会自动勾选，需要自行勾选。
img
4.11  构件菜单配置
命名规范：
菜单编码菜单名称
menu_reimburse_list报销申请
在当前构件打开【构件菜单】，根据需求新增菜单。
img
4.12 部署构件
  • 云项目：发布到云空间

4.2 执行系统配置​

1. 流程定义

1.1 流程定义-流程目录
首先，在流程定义中，按需求添加流程目录。
img
1.2 流程定义-流程定义
选择对应流程目录，按规范定义流程。
img
info
在本项目中，活动定义中需要配置流程变量。
因此，可以先配置流程变量，或者进行“业务关联配置”生成对应的流程变量后，再进行活动定义。
1.3 流程定义-流程变量
按需添加流程变量，或者通过业务关联配置由字段生成对应的变量。
img
1.4 流程定义-活动定义
在"流程定义"中，选择流程进行活动定义。
img
info
修改流程定义前，需要先停用流程才可保存修改结果（首次定义流程，未启用，流程状态为“编辑中”）。
根据需求，定义流程图，并且设置相关活动节点。
1. 流程图定义
img
2. 人工节点设置
根据需求，修改活动节点（财务主管、财务经理、部门经理）名称，选中执行人（在本案例中，执行人从机构选择即可）。
img
img
3. 判断节点条件设置
在判断节点中，选择分支线，定义名称，设置判断条件。
（1）报销金额（元）<=1000
img
（2）报销金额（元）>1000
img
4. 流程事件设置
在流程图定义中，设置流程的相关事件。
img
在本案例中，流程启动后和流程结束后，调用同一个构件方法，实现修改状态的功能。
img
（1）流程启动后事件，参数配置：
img
（2）流程结束后事件，参数配置：
img
1.6 流程定义-启动流程
在流程定义启用流程，才可以跑流程，否则执行api启动流程后，会提示失败。
img

2. 流程应用

在本项目中，主要调用API去启动流程应用的方式配置工作，因此需要设置流程应用，否则启动流程失败。
2.1 流程应用-流程表单管理
在“流程应用 -> 流程表单管理”中添加目录，然后新增流程表单窗体，作为流程应用设置的备选窗体数据。
img
2.2 流程应用-流程应用
在“流程应用 -> 流程应用”中添加目录，然后新增流程应用。
img
img

3. 菜单管理

使用超级管理员（sa）登录配置中心，进行菜单的管理操作。
3.1 待选菜单项管理
在设置菜单项前，需要先设置待选菜单项，否则在菜单项设置中无法选取菜单。
img
3.2 菜单目录/菜单项
在菜单管理中，选择用户菜单，新增子级目录，按需求定义菜单目录，添加对应的菜单项即可。
img
3.3 菜单授权
在本项目中，将“报销申请”授权给所有人，在实际应用中，根据需求授权即可。
img

4. 效果预览

访问地址：http://v-devsuit-train.t.yindangu.com
账号：admin，密码：8 ，登录验证效果即可。

5. 网页图标​

开发完项目之后，可以根据实际需求是否替换项目图标，如下：

img

（1）项目图标

操作方式：在 ..\V-AppServer\V3Runtime\pages 目录下，直接替换 favicon.ico 文件即可。

img

（2）配置中心图标

操作方式：在 ..\V-AppServer\V3Runtime\pages\system\settings 目录下，直接替换 favicon.ico 文件即可。

img

info

如果服务整体升级后，会重新生成系统自带的默认ico图标，那么替换的ico图标会失效，具体做法：

  • 项目自定义的ico图标拷贝到对应的目录下备份，例如：favicon_1.ico ；
  • 服务升级后，将系统默认的 favicon.ico 图标删除，将备份的 favicon_1.ico 文件替换 favicon.ico 文件即可。