文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >通达OA公用组件使用指南

通达OA公用组件使用指南

原创
作者头像
用户12602052
发布于 2026-07-10 20:38:51
发布于 2026-07-10 20:38:51
30
举报

一、引言

通达OA提供了一系列公用组件，包括人员选择、部门选择、角色选择等，这些组件可以在开发过程中直接调用，无需重复开发。本文将详细介绍OA的公用组件及其使用方法，帮助您快速构建功能完善的OA模块。

二、组件总览

2.1 组件分类

图表
图表

2.2 组件文件位置

OA的公用组件存放在 MYOA\webroot\module 目录下：

代码语言：javascript
复制
MYOA\webroot\module
├── dept_select          # 部门选择组件
│   ├── dept_select.php  # 部门多选
│   └── dept_single.php  # 部门单选
├── editor               # HTML编辑器组件
│   └── editor.php
├── OC                   # Office文档在线编辑
│   └── oc.php
├── OC_NETDISK           # 网络硬盘Office编辑
│   └── oc_netdisk.php
├── save_file            # 文件转存组件
│   └── save_file.php
├── user_select          # 用户多选组件
│   └── user_select.php
└── user_select_single   # 用户单选组件
    └── user_select_single.php

2.3 组件调用方式

图表
图表

调用步骤：

  1. 在页面中引入组件相关的JavaScript
  2. 创建隐藏字段用于存储选择结果
  3. 调用组件函数打开选择弹窗
  4. 用户选择后，组件自动更新隐藏字段的值
  5. 提交表单时，获取隐藏字段的值

三、人员选择组件

3.1 人员多选组件

组件文件：module/user_select/user_select.php

调用方式：

代码语言：javascript
复制
<input type="hidden" name="user_ids" id="user_ids" value="">
<script type="text/javascript">
    // 调用人员多选组件
    selectUser('user_ids', 'multi');
</script>

参数说明：

参数

类型

说明

field_id

string

隐藏字段ID

mode

string

选择模式（multi=多选，single=单选）

完整示例：

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");
include_once("inc/header.inc.php");
?>

<div class="form-group">
    <label><?php echo _("选择人员"); ?>:</label>
    <input type="hidden" name="user_ids" id="user_ids" value="">
    <div id="user_display"></div>
    <button type="button" onclick="selectUser('user_ids', 'multi')">
        <?php echo _("选择"); ?>
    </button>
</div>

<script type="text/javascript">
    // 监听选择变化
    document.getElementById('user_ids').addEventListener('change', function() {
        var ids = this.value;
        // 显示已选人员
        if (ids) {
            // 通过AJAX获取人员名称
        }
    });
</script>

<?php
include_once("inc/footer.inc.php");
?>

3.2 人员单选组件

组件文件：module/user_select_single/user_select_single.php

调用方式：

代码语言：javascript
复制
<input type="hidden" name="user_id" id="user_id" value="">
<script type="text/javascript">
    // 调用人员单选组件
    selectUser('user_id', 'single');
</script>

参数说明：

参数

类型

说明

field_id

string

隐藏字段ID

mode

string

选择模式（single=单选）

完整示例：

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");
include_once("inc/header.inc.php");
?>

<div class="form-group">
    <label><?php echo _("选择负责人"); ?>:</label>
    <input type="hidden" name="assignee_id" id="assignee_id" value="">
    <span id="assignee_name"></span>
    <button type="button" onclick="selectUser('assignee_id', 'single')">
        <?php echo _("选择"); ?>
    </button>
</div>

<?php
include_once("inc/footer.inc.php");
?>

3.3 人员选择组件API

3.3.1 获取已选人员信息

代码语言：javascript
复制
<?php
include_once("inc/utility_org.php");

$user_ids = explode(',', $_POST['user_ids']);
$users = array();

foreach ($user_ids as $uid) {
    if ($uid) {
        $users[] = array(
            'uid' => $uid,
            'name' => GetUserNameById($uid),
            'dept' => GetDeptNameById($_SESSION['dept_id'])
        );
    }
}
?>

3.3.2 预填已选人员

代码语言：javascript
复制
<input type="hidden" name="user_ids" id="user_ids" value="1,2,3">
<script type="text/javascript">
    // 设置初始值
    document.getElementById('user_ids').value = '1,2,3';
</script>

四、部门选择组件

4.1 部门多选组件

组件文件：module/dept_select/dept_select.php

调用方式：

代码语言：javascript
复制
<input type="hidden" name="dept_ids" id="dept_ids" value="">
<script type="text/javascript">
    // 调用部门多选组件
    selectDept('dept_ids', 'multi');
</script>

参数说明：

参数

类型

说明

field_id

string

隐藏字段ID

mode

string

选择模式（multi=多选）

完整示例：

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");
include_once("inc/header.inc.php");
?>

<div class="form-group">
    <label><?php echo _("选择部门"); ?>:</label>
    <input type="hidden" name="dept_ids" id="dept_ids" value="">
    <button type="button" onclick="selectDept('dept_ids', 'multi')">
        <?php echo _("选择"); ?>
    </button>
</div>

<?php
include_once("inc/footer.inc.php");
?>

4.2 部门单选组件

组件文件：module/dept_select/dept_single.php

调用方式：

代码语言：javascript
复制
<input type="hidden" name="dept_id" id="dept_id" value="">
<script type="text/javascript">
    // 调用部门单选组件
    selectDept('dept_id', 'single');
</script>

参数说明：

参数

类型

说明

field_id

string

隐藏字段ID

mode

string

选择模式（single=单选）

4.3 部门选择组件API

4.3.1 获取已选部门信息

代码语言：javascript
复制
<?php
include_once("inc/utility_org.php");

$dept_ids = explode(',', $_POST['dept_ids']);
$depts = array();

foreach ($dept_ids as $dept_id) {
    if ($dept_id) {
        $depts[] = array(
            'dept_id' => $dept_id,
            'dept_name' => GetDeptNameById($dept_id),
            'full_name' => dept_long_name($dept_id)
        );
    }
}
?>

4.3.2 获取子部门

代码语言：javascript
复制
<?php
include_once("inc/utility_org.php");

// 获取部门及其所有子部门
$all_dept_ids = GetUnionSetOfChildDeptId(1);
print_r($all_dept_ids);
?>

五、角色选择组件

5.1 角色多选组件

调用方式：

代码语言：javascript
复制
<input type="hidden" name="role_ids" id="role_ids" value="">
<script type="text/javascript">
    // 调用角色多选组件
    selectRole('role_ids', 'multi');
</script>

参数说明：

参数

类型

说明

field_id

string

隐藏字段ID

mode

string

选择模式（multi=多选）

5.2 角色单选组件

调用方式：

代码语言：javascript
复制
<input type="hidden" name="role_id" id="role_id" value="">
<script type="text/javascript">
    // 调用角色单选组件
    selectRole('role_id', 'single');
</script>

参数说明：

参数

类型

说明

field_id

string

隐藏字段ID

mode

string

选择模式（single=单选）

5.3 角色选择组件API

5.3.1 获取角色名称

代码语言：javascript
复制
<?php
include_once("inc/utility_org.php");

$role_id = $_POST['role_id'];
$role_name = GetPrivNameById($role_id);
echo "角色名称：$role_name";
?>

六、HTML编辑器组件

6.1 组件概述

组件文件：module/editor/editor.php

功能：提供富文本编辑功能，支持格式化文本、插入图片、插入链接等

特点：

  • 支持HTML格式化
  • 支持图片上传
  • 支持表格编辑
  • 支持撤销/重做

6.2 调用方式

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");
include_once("inc/header.inc.php");
?>

<div class="form-group">
    <label><?php echo _("内容"); ?>:</label>
    <textarea name="content" id="content" style="width: 100%; height: 300px;"></textarea>
</div>

<script type="text/javascript">
    // 初始化编辑器
    var editor = new TD_Editor('content', {
        height: 300,
        toolbar: 'full'
    });
</script>

<?php
include_once("inc/footer.inc.php");
?>

6.3 编辑器配置

配置参数：

参数

类型

默认值

说明

height

int

300

编辑器高度（像素）

width

string

100%

编辑器宽度

toolbar

string

full

工具栏配置

upload_url

string

-

图片上传URL

allowed_types

string

-

允许上传的文件类型

工具栏配置：

值

说明

full

完整工具栏

basic

基础工具栏

minimal

最小化工具栏

6.4 获取编辑器内容

代码语言：javascript
复制
<?php
// 获取编辑器内容
$content = $_POST['content'];

// 处理内容中的图片路径
include_once("inc/utility_file.php");
$content = ReplaceImageSrc($content, 'project', $project_id);

// 保存到数据库
$td->query("UPDATE project SET content = '$content' WHERE project_id = $project_id");
?>

七、Office文档在线编辑组件

7.1 组件概述

组件文件：module/OC/oc.php

功能：提供Office文档的在线编辑和阅读功能

支持格式：

  • Word文档（.doc, .docx）
  • Excel表格（.xls, .xlsx）
  • PowerPoint演示文稿（.ppt, .pptx）
  • PDF文档

7.2 调用方式

7.2.1 在线阅读

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");

$attach_id = $_GET['id'];
$file_path = attach_real_path($attach_id);
$file_name = basename($file_path);

// 调用OC组件阅读文档
?>

<iframe src="module/OC/oc.php?file=<?php echo urlencode($file_path); ?>&action=view" 
        width="100%" height="600px" frameborder="0">
</iframe>

7.2.2 在线编辑

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");

$attach_id = $_GET['id'];
$file_path = attach_real_path($attach_id);

// 调用OC组件编辑文档
?>

<iframe src="module/OC/oc.php?file=<?php echo urlencode($file_path); ?>&action=edit" 
        width="100%" height="600px" frameborder="0">
</iframe>

7.3 组件参数

URL参数说明：

参数

类型

说明

file

string

文件路径（URL编码）

action

string

操作类型（view=阅读，edit=编辑）

uid

int

用户ID

module

string

模块名称

7.4 注意事项

7.4.1 服务依赖

Office文档在线编辑依赖Office_OC服务，需要确保该服务已启动：

代码语言：javascript
复制
# 检查Office_OC服务状态
Get-Service Office_OC

# 启动服务
Start-Service Office_OC

7.4.2 文件权限

确保Web服务器对文件有读写权限：

代码语言：javascript
复制
# 设置权限
icacls "MYOA\attach" /grant Everyone:F

7.4.3 文件大小限制

大文件可能影响编辑性能，建议限制文件大小：

代码语言：javascript
复制
$max_size = 10 * 1024 * 1024; // 10MB
if (attach_size($attach_id) > $max_size) {
    Message(_("文件过大，无法在线编辑"), "", "error");
    exit;
}

八、文件转存组件

8.1 组件概述

组件文件：module/save_file/save_file.php

功能：将在线编辑的文件保存回服务器

使用场景：

  • Office文档在线编辑后保存
  • 图片编辑后保存

8.2 调用方式

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");
include_once("inc/utility_file.php");

// 处理文件转存
if ($_POST['action'] == 'save') {
    $temp_file = $_POST['temp_file'];
    $attach_id = $_POST['attach_id'];
  
    // 获取原始文件路径
    $original_path = attach_real_path($attach_id);
  
    // 将临时文件复制到原始位置
    td_copy($temp_file, $original_path);
  
    // 更新附件信息
    $td->query("UPDATE attach SET update_time = NOW() WHERE attach_id = '$attach_id'");
  
    echo json_encode(array('success' => true));
    exit;
}
?>

九、组件组合使用示例

9.1 完整的表单示例

代码语言：javascript
复制
<?php
include_once("inc/auth.inc.php");
include_once("inc/header.inc.php");

if ($_POST) {
    // 处理表单提交
    $project_name = $td->escape($_POST['project_name']);
    $description = $_POST['description'];
    $user_ids = $_POST['user_ids'];
    $dept_ids = $_POST['dept_ids'];
    $role_ids = $_POST['role_ids'];
  
    // 保存到数据库
    $td->query("INSERT INTO project (project_name, description, user_ids, dept_ids, role_ids) 
                VALUES ('$project_name', '$description', '$user_ids', '$dept_ids', '$role_ids')");
  
    Message(_("保存成功"), "index.php", "success");
    exit;
}
?>

<form method="post" action="add.php">
    <!-- 项目名称 -->
    <div class="form-group">
        <label><?php echo _("项目名称"); ?>:</label>
        <input type="text" name="project_name" class="form-control" required>
    </div>
  
    <!-- 项目描述（HTML编辑器） -->
    <div class="form-group">
        <label><?php echo _("项目描述"); ?>:</label>
        <textarea name="description" id="description" style="width: 100%; height: 200px;"></textarea>
    </div>
  
    <!-- 选择人员 -->
    <div class="form-group">
        <label><?php echo _("参与人员"); ?>:</label>
        <input type="hidden" name="user_ids" id="user_ids">
        <button type="button" onclick="selectUser('user_ids', 'multi')">
            <?php echo _("选择人员"); ?>
        </button>
    </div>
  
    <!-- 选择部门 -->
    <div class="form-group">
        <label><?php echo _("所属部门"); ?>:</label>
        <input type="hidden" name="dept_ids" id="dept_ids">
        <button type="button" onclick="selectDept('dept_ids', 'multi')">
            <?php echo _("选择部门"); ?>
        </button>
    </div>
  
    <!-- 选择角色 -->
    <div class="form-group">
        <label><?php echo _("关联角色"); ?>:</label>
        <input type="hidden" name="role_ids" id="role_ids">
        <button type="button" onclick="selectRole('role_ids', 'multi')">
            <?php echo _("选择角色"); ?>
        </button>
    </div>
  
    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-primary">
        <?php echo _("提交"); ?>
    </button>
</form>

<script type="text/javascript">
    // 初始化编辑器
    var editor = new TD_Editor('description', {
        height: 200,
        toolbar: 'basic'
    });
</script>

<?php
include_once("inc/footer.inc.php");
?>

9.2 人员选择弹窗自定义

代码语言：javascript
复制
<input type="hidden" name="user_ids" id="user_ids">

<script type="text/javascript">
    function selectUsers() {
        // 打开人员选择弹窗
        var url = "module/user_select/user_select.php?mode=multi";
        var width = 700;
        var height = 500;
        var left = (screen.width - width) / 2;
        var top = (screen.height - height) / 2;
  
        var win = window.open(url, "_blank", 
            "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top);
  
        // 监听弹窗关闭
        var timer = setInterval(function() {
            if (win.closed) {
                clearInterval(timer);
                // 获取选择结果
                var selected_ids = document.getElementById('user_ids').value;
                alert("已选择：" + selected_ids);
            }
        }, 100);
    }
</script>

十、组件开发技巧

10.1 组件初始化时机

图表
图表

建议：

  • 在DOM加载完成后初始化组件
  • 使用jQuery的 $(document).ready() 或原生的 DOMContentLoaded 事件

10.2 组件事件监听

代码语言：javascript
复制
// 监听人员选择变化
document.getElementById('user_ids').addEventListener('change', function() {
    var ids = this.value;
    if (ids) {
        // 刷新已选人员列表
        loadUserNames(ids);
    }
});

// 通过AJAX获取人员名称
function loadUserNames(ids) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax.php?action=getUserNames&ids=' + ids, true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            var users = JSON.parse(xhr.responseText);
            var html = '';
            users.forEach(function(user) {
                html += '<span>' + user.name + '</span>';
            });
            document.getElementById('user_display').innerHTML = html;
        }
    };
    xhr.send();
}

10.3 组件样式定制

代码语言：javascript
复制
/* 自定义人员选择按钮样式 */
button.select-user-btn {
    background-color: #4CAF50;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.select-user-btn:hover {
    background-color: #45a049;
}

/* 自定义编辑器样式 */
.td-editor {
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 自定义已选人员显示 */
.user-display span {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 4px;
}

10.4 组件性能优化

图表
图表

优化建议：

优化项

建议

缓存策略

缓存人员、部门列表，减少数据库查询

懒加载

只在用户点击选择按钮时才加载组件

批量操作

一次性获取多个人员/部门信息，减少AJAX请求

请求合并

将多个请求合并为一个，减少HTTP开销

十一、常见问题

11.1 组件弹窗不显示

现象：点击选择按钮后，弹窗不显示

解决方案：

问题类型

排查方法

JavaScript错误

检查浏览器控制台是否有错误

组件路径错误

检查组件文件路径是否正确

权限不足

检查用户是否有权限访问组件

弹窗被拦截

检查浏览器是否阻止了弹窗

11.2 选择结果不回显

现象：选择人员/部门后，隐藏字段没有更新

解决方案：

问题类型

排查方法

字段ID不匹配

检查隐藏字段ID与组件调用参数是否一致

JavaScript冲突

检查是否有其他脚本干扰

弹窗关闭方式

确保使用组件提供的关闭方法

11.3 编辑器无法上传图片

现象：在编辑器中无法上传图片

解决方案：

问题类型

排查方法

上传路径错误

检查upload_url配置是否正确

权限不足

检查上传目录权限

文件大小限制

检查php.ini配置

组件未正确初始化

检查编辑器初始化代码

11.4 Office文档无法编辑

现象：Office文档在线编辑功能无法使用

解决方案：

问题类型

排查方法

Office_OC服务未启动

检查服务状态

文件权限不足

检查文件读写权限

文件格式不支持

检查文件扩展名

内存不足

增加MemoryMax配置

11.5 组件样式错乱

现象：组件显示样式与预期不符

解决方案：

问题类型

排查方法

CSS冲突

检查页面CSS是否与组件CSS冲突

样式覆盖

使用更具体的CSS选择器

浏览器兼容性

检查浏览器版本是否支持

初始化顺序

确保组件在样式加载后初始化

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

编程
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 一、引言
  • 二、组件总览
    • 2.1 组件分类
    • 2.2 组件文件位置
    • 2.3 组件调用方式
  • 三、人员选择组件
    • 3.1 人员多选组件
    • 3.2 人员单选组件
    • 3.3 人员选择组件API
  • 四、部门选择组件
    • 4.1 部门多选组件
    • 4.2 部门单选组件
    • 4.3 部门选择组件API
  • 五、角色选择组件
    • 5.1 角色多选组件
    • 5.2 角色单选组件
    • 5.3 角色选择组件API
  • 六、HTML编辑器组件
    • 6.1 组件概述
    • 6.2 调用方式
    • 6.3 编辑器配置
    • 6.4 获取编辑器内容
  • 七、Office文档在线编辑组件
    • 7.1 组件概述
    • 7.2 调用方式
    • 7.3 组件参数
    • 7.4 注意事项
  • 八、文件转存组件
    • 8.1 组件概述
    • 8.2 调用方式
  • 九、组件组合使用示例
    • 9.1 完整的表单示例
    • 9.2 人员选择弹窗自定义
  • 十、组件开发技巧
    • 10.1 组件初始化时机
    • 10.2 组件事件监听
    • 10.3 组件样式定制
    • 10.4 组件性能优化
  • 十一、常见问题
    • 11.1 组件弹窗不显示
    • 11.2 选择结果不回显
    • 11.3 编辑器无法上传图片
    • 11.4 Office文档无法编辑
    • 11.5 组件样式错乱
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2026 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论