基于AppCube轻应用构建的简易每日健康情况收集单【玩转应用魔方】

举报
运气男孩 发表于 2021/11/19 22:51:22 2021/11/19
【摘要】 AppCube概述AppCube是一个高效易用的低代码开发平台,它可以进行轻应用,行业应用,业务大屏开发,它提供的界面、逻辑、对象等可视化编排工具,以“拖、拉、拽”的方式来快速构建应用,从而实现所见即所得的快速应用开发和构建。这次主要体验一下轻应用的开发,轻应用开发不涉及复杂化的代码,用户零代码(如拖曳组件,简单配置)或者低代码就能轻松完成应用的搭建,它提供了丰富的模板(办公管理,人事管理,...

AppCube概述

AppCube是一个高效易用的低代码开发平台,它可以进行轻应用,行业应用,业务大屏开发,它提供的界面、逻辑、对象等可视化编排工具,以拖、拉、拽的方式来快速构建应用,从而实现所见即所得的快速应用开发和构建

这次主要体验一下轻应用的开发,轻应用开发不涉及复杂化的代码,用户零代码(如拖曳组件,简单配置)或者低代码就能轻松完成应用的搭建它提供了丰富的模板(办公管理,人事管理,项目管理等),可以直接使用模板进行扩展开发,也可以自定义页面编排开发业务场景,且应用支持多端使用。

AppCube轻应用开发

使用AppCube开发一个简易每日健康情况收集单小应用,主要是创建布局页面,页面样式,点击事件等基础功能,全程基本无代码,很方便。let‘s go!

打开AppCube平台

地址:https://www.huaweicloud.com/product/appcube.html

点击立即使用

如果未开通,请先免费开通试用,如果已经开通,点击“进入开发环境”。

然后点击轻应用去构建

创建空白的轻应用

随意起个名字或标签:health,不能以中文命名,例如下面的就不会创建成功,提示得用英文命名

创建两个页面,一个是打卡的页面,一个是管理打卡的页面

从左边的布局拖入一个容器,相当于html的div盒子,然后给里面再拖入一个标题,取名为每日健康打卡;并设置属性,字体居中,下边框

效果如下:

点击标题的这个框就会弹出属性设置面板,在下方进行勾选,调整,会自动生成对应的css代码,如下所示,可以看出Appcube的方便之处。

接下来点击为了和表单管理的数据绑定,这里要创建一个模型对象,绑定相应的字段。

点击Model旁边的+号,选择对象创建,按照提示的一步步创建如下几个选项列表,并打上相应的标签

创建好如上字段对象后,会到我们的每日健康打卡的页面,拖入一个表单,选择数据绑定,然后点击新建一个模型从刚刚创建的对象导入

点击下一步,完成数据绑定,再将表单的属性修改一下,让它显得更美观一点

:root{
border-radius:0px;
padding-top:23px;
padding-bottom:0;
}

然后在表单里拖拽入以下的下拉框和多行文本输入框,然后把选择框设置为必填。

经过一系列的操作后,最后是这个样子,是不是感觉少了些啥?是的,少了一个提交按钮,和绑定事件,提交到我们的管理页面

同理,从左边拖入一个按钮到我们这个容器里,显示名称为提交,然后

然后点击事件,添加一个“点击”事件,自定义一个提交动作代码,可以将信息直接提交到guanli页面

context.$component.form.formValidate()
    .then(function (valid) {
        if (valid) {
            var data = context.$model.ref("huaweiaa__health__CST").getData();
            data.huaweiaa__Date__CST = dateFormat();

            var _object = context.object('huaweiaa__health__CST');
            var _condition = {
                conjunction: 'AND',
                conditions: [
                    {
                        field: 'createdBy',
                        operator: 'eq',
                        value: context.$user.userId
                    },
                    {
                        field: 'huaweiaa__Date__CST',
                        operator: 'eq',
                        value: data.huaweiaa__Date__CST
                    }
                ]
            };
            var recId = "";
            _object.query(_condition)
                .then(function (response) {
                    if (response.resCode != 0) {
                        throw response;
                    }
                    if (!response.result || response.result.length === 0) {
                        return _object.insert([data]);
                    } else {
                        recId = response.result[0].id;
                        return _object.updateByID(recId, data);
                    }
                })
                .then(function (response) {
                    if (response.resCode != 0) {
                        throw response;
                    }
                    if (response.result && response.result.length > 0) {
                        recId = response.result[0].id;
                    }
                    context.$page.loadStdPage("huaweiaa__submit", "page=huaweiaa__daka&recordId=" + recId);
                }).catch(function (err) {
                    context.$message.error(err.msg || err.message || err);
                });
        }
    });

function dateFormat() {
    var date = new Date();
    var seperator = "-";

    var m = date.getMonth() + 1;
    var d = date.getDate();

    if (m >= 1 && m <= 9) {
        m = "0" + m;
    }
    if (d >= 0 && d <= 9) {
        d = "0" + d;
    }

    var time = date.getFullYear() + seperator + m + seperator + d;
    return time;
}

因为在代码里设置了一个提交成功的页面submit,所以这里我们也来新建一个submit页面,用来提示用户成功提交,同上面一样,拖拽几个控件就行,然后再给两个按钮添加自定义的js代码,以便于它能跳转。

//继续提交
var pageName = context.$page.params.page;
var recordId = context.$page.params.recordId;
context.$page.loadStdPage(pageName);

//查看详情
var pageName = context.$page.params.page;
var recordId = context.$page.params.recordId;
context.$page.openStdPage(pageName, "recordId=" + recordId);

再继续完善管理页面,按照下方的格式一一拖拽,然后再调整一下页面的美观度,给个背景色

标题

容器-标题

分栏-标签-关联选择框-下拉框 日期选择框 按钮

表格

最后再给两个按钮添加事件代码即可完成管理查询和重置功能

//搜索

// 当前表格
var _table = context.$component.table;

// 获取查询条件
var condition = _table.getCondition();

if (!condition.queryInfo.huaweiaa__Date__CST) {
    condition.queryInfo.huaweiaa__Date__CST = dateFormat();
}

// 设置查询条件
if (condition) {
    _table.setCondition(condition);
}

var _object = context.object('huaweiaa__daka__CST');

// 查询当前日期下身体健康人数
var healthCond = {
    conjunction: 'AND',
    conditions: [
        {
            field: 'huaweiaa__HaveSymptoms__CST',
            operator: 'eq',
            value: "No"
        },
        {
            field: 'huaweiaa__Date__CST',
            operator: 'eq',
            value: condition.queryInfo.huaweiaa__Date__CST
        }
    ]
};

Promise.all([
    _table.doQuery(),
    _object.count(healthCond)
]).then(function (result) {
    if (result[1] && result[1].resCode === '0') {
        context.$model.ref("prop").setValue("healthCnt", result[1].result);
    } else {
        var err = result[1].result;
        context.$message.error(err.msg || err.message || err);
    }
});


function dateFormat() {
    var date = new Date();
    var seperator = "-";

    var m = date.getMonth() + 1;
    var d = date.getDate();

    if (m >= 1 && m <= 9) {
        m = "0" + m;
    }
    if (d >= 0 && d <= 9) {
        d = "0" + d;
    }

    var time = date.getFullYear() + seperator + m + seperator + d;
    return time;
}


//重置
// 当前表格
var _table = context.$component.table;

// 重置查询条件
_table.resetCondition();

最后,让我们来看一下预览效果!!!

关于基于AppCube轻应用构建的简易每日健康情况收集单的小实操就到此结束啦,感恩能与大家在华为云遇见!希望能与大家一起在华为云社区共同成长。

【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200