微搭低代码开发设备巡检小程序

传统工厂在巡检设备时还是使用纸质记录,纸质记录不便于查找及统计信息,为了方便工作,本篇我们带着大家实现一下设备巡检小程序。

1 需求分析

  • 要可以在小程序里注册
  • 注册的用户需要经过管理员的审核并分配权限
  • 有权限的人员可以扫码,提交巡检记录
  • 管理员可以维护设备信息及巡检记录信息,可以下载设备的二维码

2 设计数据源

为了满足设备巡检的需要,我们一共需要三个数据源,首先是用户信息
在这里插入图片描述
我们这里的角色的数据类型设置为枚举,一共有两个枚举项,分别为普通用户和业务员
在这里插入图片描述
第二个数据源是设备信息
在这里插入图片描述
第三个是检查维保记录信息
在这里插入图片描述
这里需要注意的是,设备信息和检查维保记录是一个一对多的关系,因此我们设置一个设备标识数据类型设置为关联关系,这样可以表达一对多的关系

3 创建模型应用

按照需求,我们需要给管理员提供一个后台应用。在微搭里后台应用对应着模型应用,登录控制台,点击新建模型应用
在这里插入图片描述
勾选我们设置的数据源,有系统自动生成增删改查的页面
在这里插入图片描述
这里唯一需要注意的是我们要在设备管理开发一个下载二维码的功能,选择表格,在操作列增加一个按钮,名称改为下载
在这里插入图片描述
然后添加一个弹窗组件,里边放置一个图片组件
在这里插入图片描述
定义一个变量用来接收设备标识
在这里插入图片描述
给图片组件绑定如下内容

'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+$page.dataset.state.sbid

我们点击按钮的时候让弹窗组件显示,然后把当前记录的数据标识赋值给变量
在这里插入图片描述

4 小程序功能开发

创建一个自定义应用,在首页里添加一个网格布局,修改列数量为2
在这里插入图片描述
给第一列添加一个普通容器,里边放一个图片组件及文本组件
在这里插入图片描述
我们给用户注册绑定一个自定义方法,方法内容如下

export default function ({
     
      event, data }) {
    
    
  console.log("id",app.dataset.state.user?._id)
  if (app.dataset.state.user?._id == "") {
    
    
    app.navigateTo({
    
    
      pageId: 'u_yong_hu_zhu_ce',    // 页面 Id 
      params: {
    
    },
    });
  }else{
    
    
     app.navigateTo({
    
    
      pageId: 'u_yong_hu_xin_xi_geng',    // 页面 Id 
      params: {
    
    id:app.dataset.state.user._id},
    });
  }
}

逻辑是,如果注册过我们就跳转到更新页面,未注册就跳转到新增页面。需要新增两个页面,一个是新增,一个是更新
在这里插入图片描述
注册更新我们使用表单容器即可
在这里插入图片描述
给第二列按照第一列的结构增加同样的组件
在这里插入图片描述
不同的是我们需要绑定条件展示,如果没有权限我们就提示一个信息,如果有权限就打开上传页面
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
记录上传页面,我们按照需求搭建对应的结构就可以
在这里插入图片描述

总结

我们本篇带着大家搭建了一个设备巡检小程序,日常使用低代码的搭建能力可以快速的帮我们完成常用的工作,还是很方便的

猜你喜欢

转载自blog.csdn.net/u012877217/article/details/129922465