目录引言本节目标搭建方法步骤一数据怎么管理1.1 先看现实世界1.2 在系统里怎么存步骤二用户怎么操作先看原型再搭页面2.1 先观察再动手2.2 在微搭里创建应用和页面2.3 搭建页面布局本节成果下一篇预告引言上一篇我们讲解了外包数字化平台的原型对整体搭建有了初步印象本篇我们就进入第一篇部门管理的搭建。首先我们规划一下业务场景。公司人不多的时候谁归谁管老板心里一本账。人一多问题就来了新员工入职他到底属于哪个部门这个人的上级是谁审批该找谁组织调整了Excel 改一版、群里通知一版项目系统和审批还是旧的这些信息如果还散落在表格、聊天记录和个人记忆里后面做项目管理、工时、权限、审批只会越来越乱——因为系统根本不知道「公司长什么样」。所以我们先不做商机、不做项目先把公司的组织结构搬进系统。今天做完你会得到一个真正能用的部门管理功能在系统里搭出公司组织架构能加一级部门也能加下级部门能改部门信息删部门时如果下面还有下属部门系统会拦住你看起来只是一个小模块但它是后面人员、权限、审批的地基。没有部门人无处挂靠没有部门「本部门及以下」的数据权限也无从谈起。本节目标今天完成 2 件事搭建部门的数据模型搭建页面的布局完成后系统第一次拥有「组织结构」。搭建方法使用低代码搭建功能我们有一个方法论只需要3步。第一步数据怎么管理要记住部门叫什么、编码、上级是谁、负责人是谁、排序、是否启用。第二步用户怎么操作需要左边看组织树右边看部门详情以及新建、加下级、编辑、删除。第三步让它跑起来配置树、表格、表单并写好「保存 / 删除」时系统该执行的动作。后面人员、客户、商机、合同、项目都按这三步走。步骤一数据怎么管理1.1 先看现实世界很多公司的组织大概是这样总部 ├── 总经办 ├── 销售部 ├── 交付中心 │ ├── 项目管理组 │ ├── 研发部 │ └── 测试部 ├── 法务部 └── 财务部系统必须回答一个问题「研发部的上级是谁」所以每个部门除了自己的名称等信息还要能记录我的上级部门是谁。1.2 在系统里怎么存我们为「部门」建一张表数据模型名字叫ct_dept。每个部门存这些内容字段名称字段标识说明部门名称name必填树上看见的名字部门编码code方便识别建议不重复上级部门parent_id空 最顶层有值 挂在谁下面排序sort同级里谁排前是否启用status启用 / 停用为什么用「上级部门」这种记法这是企业软件里很常见的一种树形存法每一行只记自己的上级。界面上的「大树」是系统根据「谁的上级是谁」临时拼出来的。这样改上级、加下级都比较简单也适合咱们这种部门层级不深的公司。登录到云开发在左侧的菜单栏点击SQL型数据库点击新建模型输入模型的名称和标识按照我们规划的字段依次创建好字段步骤二用户怎么操作先看原型再搭页面2.1 先观察再动手打开原型系统管理 → 部门管理。先不要急着拖组件。这个页面其实就四块┌─────────────────────────────────────┐ │ 部门管理 新建顶级部门 │ ├──────────────┬──────────────────────┤ │ │ 部门名称 操作按钮 │ │ 组织树 │ 基本信息 │ │ │ 下级部门列表 │ └──────────────┴──────────────────────┘ 新建/编辑时的弹窗表单页面不是为了「好看」而是为了让人完成刚才说的几件事看结构、建部门、改信息、安全地删。2.2 在微搭里创建应用和页面点击菜单栏的微搭低代码点击应用列表切换到管理应用点击从空白新建输入应用的名称点击页面设计切换到设计视图点击创建页面的图标修改标题改为部门管理切换到布局设计选择左侧导航布局点击右侧魔术棒图标自动根据页面生成菜单修改标题改为外包工作台将图标改为预置图标的logout将图标自带的默认动作删除修改文本内容改为退出给文本设置点击事件设置为退出回到页面设计选中页面组件配置布局选择我们刚刚设置好的左侧导航布局2.3 搭建页面布局首先在网格布局的第一行里搭建我们的面包屑和按钮在列里添加一个普通容器里边添加两个普通容器设置外层的普通容器的样式横向排列两端对齐内层的第一个普通容器里边添加文本组件添加我们的导航内容让用户知道我当前在什么模块第二个普通容器里边添加按钮内容修改为新建顶级部门选中第二行设置列为2选中第一列修改为手动调节占3里边添加普通容器访问文本组件和树组件先设置第二列的PC列宽调整为9第二列中添加普通容器里边添加三个普通容器按照同样的方式在第一个普通容器里添加布局组件我们设置一下文本和按钮的显示接着要显示部门的详情在第二个普通容器里添加表单容器最后在第三个普通容器里添加一个数据表格来显示子部门信息本节成果今天我们做完了什么维度成果数据系统里有了部门信息含上下级页面部门管理页左树右详情下一篇预告目前我们只是搭建了页面的视图还不能正常的添加数据下一篇我们介绍如何调度AI帮我们自动生成业务逻辑让页面动起来。