基于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