学校预约访客系统模板主要分为 PC 管理端和移动应用端两部分,PC 管理端是根据数据模型搭建的应用,移动应用端是自定义应用。
预约访客系统管理端操作步骤
步骤1:新建通用选项集
模板使用到了枚举类选项,因此需要先在微搭平台的通用选项集中创建选项集数据。
选项标识 | 选项值 |
1 | 男 |
2 | 女 |
选项标识 | 选项值 |
1 | 身份证 |
2 | 军官证 |
3 | 驾驶证 |
选项标识 | 选项值 |
1 | 临时访客(入校申请时间7天以内,含7天) |
2 | 长期访客(入校申请时间7天以上) |
选项标识 | 选项值 |
1 | 未发送 |
2 | 已发送 |
3 | 已使用 |
选项标识 | 选项值 |
1 | 是 |
2 | 否 |
选项标识 | 选项值 |
1 | 审批中 |
2 | 已通过 |
3 | 已拒绝 |
步骤2:新建数据模型
模板用到了预约访客数据模型,所以在创建应用前先创建数据模型。
字段名称 | 字段标识 | 类型 | 规则 |
访客姓名 | fkxm | 短文本 | - |
性别 | xb | 枚举 | - |
联系电话 | lxdh | 手机号码 | - |
证据类型 | zjlx | 枚举 | - |
证件号码 | zjhm | 短文本 | - |
访客类型 | fklx | 枚举 | - |
到访学院/部门 | dfxybm | 关联关系 | - |
校内联系人电话 | xnlxrdh | 手机号码 | - |
进学校开始时间 | jxxkssjh | 日期时间 | - |
进学校终止时间 | jxxzzsj | 日期时间 | - |
访客单位 | fkdw | 短文本 | - |
入校事由 | rxsy | 长文本 | - |
是否驾车 | sfjc | 枚举 | - |
车牌信息 | cpxx | 短文本 | - |
健康码截图 | jkmjt | 图片 | - |
通信大数据行程码截图 | txdsjhcmjt | 图片 | - |
入校前连续三天核酸检测记录 | rxqlxsthsjcjl | 数组 | - |
登录用户id | userid | 短文本 | - |
微信openid | wxopenid | 短文本 | - |
审批状态 | spzt | 枚举 | - |
码状态 | mzt | 枚举 | - |
接收邀请码手机 | sjhm | 手机号码 | - |
邀请码 | fkyqm | 自动编号 | - |
标题 | bt | 短文本 | - |
访客码 | fkm | 自动编号 | - |
校内联系人姓名 | xnlxrxm | 关联关系 | - |
步骤3:创建应用页面
1. 进入 创建新应用 页面,单击新建数据模型应用。输入应用名称单击新建。
2. 在创建页面中选择 步骤2 创建的访客数据模型。单击创建页面,应用页面基本由数据模型自动生成。
3. 其中预约访客列表、创建预约访客、更新预约访客、预约访客详情四个页面由系统自动生成,邀请码列表克隆预约访客列表页面,创建邀请码克隆创建预约访客页面。
步骤4:内容调整
1. 设置数据:选中大纲树中的数据表格组件,在组件属性中找到数据模型,选择预约访客数据模型。
2. 修改标题:选中大纲树中的布局组件组件,在组件属性中找到页面标题,修改成自定义内容。
3. 设置字段:选中大纲树中的数据表格组件,在组件属性中找到列管理,修改成所需字段内容。
4. 配置按钮:选中大纲树中的数据表格组件,在组件属性中找到操作列和全局按钮并打开。
5. 自定义按钮:在大纲树中展开全局按钮,将按钮组件的内容修改成创建邀请码。
设置触发事件为页面跳转。
在大纲树中展开操作列,将按钮组件的内容修改成删除。在组件属性中找到“是否禁用”,配置禁用表达式。
表达式代码:If($scope.id6.cell__custom__option.record.mzt == 1, false, true)
删除按钮设置触发事件为数据表格的组件内置方法。
在大纲树中展开操作列,将按钮组件的内容修改成发送。在组件属性中找到条件展示,配置条件表达式。
表达式代码:If($scope.id6.cell__custom__option.record.mzt == 1, true, false)
发送按钮设置触发事件为自定义方法。
传递的入参为:$scope.id6.cell__custom__option.record._id
其中自定义低码如下:
export default async function({event, data}) {//console.log(data);const result = await app.cloud.callDataSource({dataSourceName: 'yyfk_8p0gx25',methodName: 'wedaUpdate',params: {_id:data.target,mzt:"2",}, // 方法入参});location.reload();}
预约访客系统移动端搭建
步骤1:创建应用及页面
1. 进入 创建新应用 页面,单击新建自定义应用。输入应用名称,支持平台选择支持小程序和 Web 端并单击新建。
2. 这里主要创建三个自定义页面,分别是首页、邀请码查询、访客邀请码申请、我的预约申请、我的预约详情、我的访客码。
步骤2:搭建首页
1. 首页上部分在普通容器中添加两个文本组件,内容分别为 Hi 你好!”、“欢迎使用学校预约访客系统。
2. 首页下部分在普通容器中添加三个图文展示项组件,分别为我的邀请码、访客进校申请、我的预约申请。
每个图文展示项都增加一个页面跳转事件,打开目标页面。
步骤3:搭建邀请查询
1. 页面顶部使用顶部导航组件显示页面标题。
2. 页面内容放在一个普通容器组件里面,使用了单行输入组件、文本组件和按钮组件。在邀请码查询页面下创建变量 telephone。
单行输入组件绑定值改变变量赋值和清空内容变量赋值两个事件。
值改变事件,变量值为 event.detail.value。
清空内容事件,变量值为 ""。
在邀请码查询页面下创建变量 fkyqm。
文本组件的文本内容数据绑定变量 fkyqm。
按钮组件增加调用数据源方法和调用成功变量赋值事件。
调用数据传入参数绑定查询条件表达式,如下:({ where: [{ key: "sjhm", rel: "eq", val:$page.dataset.state.telephone},{ key: "mzt", rel: "eq", val: "2"}]})
变量赋值给 fkyqm 变量设置条件表达式
变量赋值其中变量值如下:typeof(event.detail.fkyqm) == "undefined"?"邀请码不存在":event.detail.fkyqm
步骤4:搭建访客进校申请
1. 页面顶部使用顶部导航组件显示页面标题。
2. 页面内容统一放在表单容器组件里面。
3. 表单容器组件提交事件绑定显示加载和自定义方法 apply。
其中 apply 方法的低码如下: export default async function({event, data}) {const conditions = [{ key:"fkyqm",rel:"eq",val:event.detail.fkyqm },{ key:"mzt",rel:"eq",val:"2" }];const result = await app.cloud.callDataSource({ dataSourceName: 'yyfk_8p0gx25', // API 标识methodName: 'wedaGetItem', // API 方法标识params:{where:conditions},});$page.dataset.state.fkyy_id = result._id;$page.dataset.state.xnlxrxm = event.detail.xnlxrxm$page.dataset.state.fklx = event.detail.fklxif(Object.keys(result).length !== 0){// 更新const respond = await app.cloud.callDataSource({dataSourceName: 'yyfk_8p0gx25',methodName: 'wedaUpdate',params: {_id:result._id,fkxm:event.detail.fkxm,//姓名xb:event.detail.xb,//性别lxdh:event.detail.lxdh,//联系电话zjlx:event.detail.zjlx,//证件类型zjhm:event.detail.zjhm,//证件号码fklx:event.detail.fklx,//访客类型dfxybm:event.detail.dfxybm,//到访学院/部门xnlxrdh:event.detail.lxdh,//校内联系人电话xnlxrxm:event.detail.xnlxrxm,//校内联系人姓名jxxkssj:event.detail.jxxkssj,//进学校开始时间jxxzzsj:event.detail.jxxzzsj,//进学校终止时间fkdw:event.detail.fkdw,//访客单位rxsy:event.detail.rxsy,//入校事由sfjc:event.detail.sfjc,//是否驾车cpxx:event.detail.cpxx,//车牌信息jkmjt:event.detail.jkmjt,//健康码截图txdsjhcmjt:event.detail.txdsjhcmjt,//通信大数据行程码截图rxqlxsthsjcjl:event.detail.rxqlxsthsjcjl,//入校前连续三天核酸检测记录spzt:"1",//审批状态mzt:"3",//码状态bt:event.detail.bt,//标题userid:app.dataset.state.userid,//登录用户idwxopenid:app.dataset.state.wxopenid,//微信openid}, // 方法入参});}else{//"无效邀请码,申请失败"throw("无效邀请码,申请失败")}}
4. apply 自定义方法成功后绑定隐藏加载、显示消息提示、调用流程方法事件。显示消息提示事件的标题内容为提交成功。
5. 在工作流模块新建工作流访客进校申请,工作流的创建可以根据实际业务需求进行设置,这里不再做详细介绍,若对工作流操作不了解,可以在帮助文档的工作流版块查询。
6. 在访客进校申请页面下创建 fklx、fkyy_id、xnlxrxm 三个变量。
7. 绑定调用流程方法,同时绑定传递的三个变量。
8. apply 自定义方法失败绑定隐藏加载、显示消息提示事件。显示消息提示成功后绑定返回事件。在表单容器的内容插槽中分别设置了三个分组列表容器和一个普通容器。
9. 各个分组列表容器的内容插槽中分别使用了标题、日前选择、单行输入、下拉选择等组件。
10. 各个表单组件的配置就不逐一详细介绍,这里挑几个特殊设置进行说明。
是否驾车控制车牌信息显示和隐藏,这里先设置全局变量 statue。
给是否驾车的下拉选择组件添加变量赋值事件,变量赋值使用 event.detail.value 表达式。
在车牌信息的单行输入组件中设置条件展示,表达式为 app.dataset.state.statue == 1。
步骤5:搭建我的预约申请
1. 页面顶部使用顶部导航组件显示页面标题。页面内容放在普通容器组件里面,使用选项卡组件分成三个内容插槽,分别是已通过、审批中、已拒绝。
2. 已通过内容插槽中使用数据列表组件,绑定数据模型是预约访客。
3. 数据筛选设置两个条件审批状态和微信openid。
4. 数据列表组件下设置循环展示,循环展示数据内容。
5. 循环展示下使用分组容器组件,嵌套两个普通容器组件,普通容器组件里面设置文本组件和图标组件。
6. 其中文本组件绑定要显示的数据。
7. 图标组件绑定页面跳转事件,跳转至我的预约详情页面,创建页面参数 ID,传递参数为数据标识。
8. 第二个普通容器组件里面设置文本组件和图标组件。
文本组件的文本内容设置访客码。
图标组件在内置样式里面选择 qrcode。
9. 在我的访客码页面设置传递变量 fkm、endtime,给图标绑定页面跳转事件,跳转至我的访客码页面,传递参数。
传递参数分别是:$w.item_listView1.fkmDateText($w.item_listView1.jxxzzsj, 'YYYY-MM-DD HH:mm:ss')
10. 审批中和已拒绝两个内容插槽中都使用数据列表组件,绑定数据模型都是预约访客,只是筛选条件审批状态对应的过滤值不一样,分别是审批中、已驳回。其它设置可以参考已通过内容插槽的数据绑定。
步骤6:搭建我的预约详情
1. 页面顶部使用顶部导航组件显示页面标题。
2. 页面内容统一放在普通容器组件里面,普通容器中使用数据详情组件,绑定数据模型预约访客。数据筛选条件设置数据标识等于从我的预约申请页面传递过来的变量参数 ID。
3. 其它内容使用文本组件文本内容绑定数据的方式。
步骤7:搭建我的访客码
1. 页面顶部使用顶部导航组件显示页面标题。
2. 页面内容使用两个普通容器组件。
第一个普通容器中使用二维码组件。
二维码内容使用传递参数:$page.dataset.params.fkm
第二个普通容器中使用文本组件。
文本内容绑定表达式:"访客码有效期截止时间【"+$page.dataset.params.endtime+"】"
步骤8:开启登录设置
1. 开启登录设置,设置认证源。
2. 访问授权设置角色为校外人员。