有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
学校预约访客系统模板主要分为 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.fklx

if(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,//登录用户id
wxopenid:app.dataset.state.wxopenid,//微信openid
}, // 方法入参
});
}else{
//"无效邀请码,申请失败"
throw("无效邀请码,申请失败")
}
}

4. apply 自定义方法成功后绑定隐藏加载、显示消息提示、调用流程方法事件。显示消息提示事件的标题内容为提交成功


5. 工作流模块新建工作流访客进校申请,工作流的创建可以根据实际业务需求进行设置,这里不再做详细介绍,若对工作流操作不了解,可以在帮助文档的工作流版块查询。


6. 访客进校申请页面下创建 fklxfkyy_idxnlxrxm 三个变量。


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. 我的访客码页面设置传递变量 fkmendtime,给图标绑定页面跳转事件,跳转至我的访客码页面,传递参数。

传递参数分别是:
$w.item_listView1.fkm
DateText($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. 访问授权设置角色为校外人员