步骤七：开发调查问卷数据查询页面

创建调查问卷数据查询页面。

在应用设计器的左侧导航栏中，选择“界面”，单击页面后的“+”，进入添加标准页面。

设置页面的标签和名称，单击“添加”，即可创建一个标准页面。

图1 添加标准页面

表1 新建标准页面参数说明
参数	说明	示例
标签	输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。	数据查询
名称	输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。	questionnaire_queryPage

为页面添加一个表格组件。
1. 从“基本组件 > 布局”中，拖拽“表格”组件至页面工作区域。
  图2 添加表格组件
2. 选中“表格容器”，在“属性 > 数据绑定”中单击“值绑定”后的，进入选择模型页面。
3. 单击“新增模型”，设置模型名称为“queationaireRecord”，来源选择“对象”，单击“下一步”。
  图3 新建queationaireRecord模型
4. 选择步骤三：添加调查表记录对象中创建的对象（命名空间__questionaireRecord__CST），勾选字段“命名空间__Label__CST”、“createdBy”、“createdDate”、“lastModifiedBy”以及“lastModifiedDate”，单击“下一步”。
  图示中只勾选了部分选项，实际请以描述为准。
  
  图4 勾选对象中字段
5. 直接单击“确定”，选中创建的“queationaireRecord”模型，单击“确定”，返回设计页面。
  图5 选中queationaireRecord模型
设置表格属性。
1. 选中“表格”组件，在“属性 > 表格列”中单击“标签名”后的，修改“列标题”为“标题名称”，单击“确定”。
  图6 单击标签名后的设置图标
2. 在“属性 > 表格列”中，单击“添加操作列”，新增一个操作列。
  图7 新增一个操作列
3. 单击新增列后的，设置列标题为“操作”，单击“添加操作按钮”，设置按钮标签为“查看”，类型选择“文字按钮”。
  图8 新增查看按钮
4. 再次单击“添加操作按钮”，设置标签为“删除”，类型选择“文字按钮”。
  图9 添加删除按钮
5. 单击“查看”按钮右侧的，再单击“动作列表”后的“+”，进入添加动作页面。
  图10 新增动作
6. 在自定义动作中，输入自定义代码，单击“创建”。
```
var recordId= $current.$attrs.row.id;
context.$page.openStdPage('命名空间__questionnaire',"recordId="+recordId)
```
  其中，“命名空间__questionnaire”为步骤四：开发调查问卷页面中标准页面的名称。
7. 同样，单击“删除”按钮右侧的，再单击动作列表后的“+”，为删除按钮添加如下事件。
```
var recordId = $current.getCurrentRow().id;
var _object = context.object(命名空间__questionaireRecord__CST');
var _retValue = {};
// 确认弹出消息
context.$dialog.confirm({
    title: "提示",
    content: "确定删除这条记录？",
    okText: "确定",
    cancelText: "取消",
    onOk: function () {
        // 根据记录ID删除数据
        _object.deleteByID(recordId).then(function (res) {
            if (res.resCode == 0) {
                // 关闭弹出页面，仅能在弹出页面上使用
                context.$dialog.popin(_retValue);
                // 成功消息
                context.$message.success("删除成功");
                // 刷新当前页面
                context.$page.reload();
            }
        });
    },
    onCancel: function () {
        // 关闭弹出页面，仅能在弹出页面上使用
        context.$dialog.popin(_retValue);
    }
});
```
  其中，“命名空间__questionaireRecord__CST”为步骤三：添加调查表记录对象中创建对象的唯一标识。
8. 设置完成后，单击“保存”，返回设计页面。
添加搜索条件。
1. 从“基本组件 > 布局”中，拖拽“表单”组件到表格容器中，位置在“表格”的上方。
  图11 添加表单到表格上方
2. 在“元数据表单配置向导”页面，选择“命名空间__questionaireRecord__CST”数据对象，然后选择 “命名空间__Label__CST”、“createdBy”，单击“下一步”。
  图示中只勾选了部分选项，实际请以描述为准。
  图12 选择数据源
3. 在配置功能页面，勾选“保存”和“重置”按钮，单击“完成”。
  图13 勾选保存和重置按钮
4. 选中“容器”组件，在“属性 > 基本属性”中，设置“水平对齐方式”为“中”。
  图14 设置容器水平对齐方式
5. 选中“保存”按钮，修改显示名称为“搜索”，大小选择“默认”。
  图15 设置保存按钮
6. 选择“事件”页签，删除“提交表单”事件动作，再单击加载后的“+”，修改动作名称为“搜索”并输入如下示例代码，单击“创建”。
  图16 删除提交表单事件
  
  图17 设置自定义动作
```
// 当前表格
var _table = context.$component.table;
// 获取查询条件
var condition = _table.getCondition();
// 设置查询条件
if(condition) {
  _table.setCondition(condition);
}
// 执行查询
_table.doQuery();
```
7. 选中“重置”按钮，按钮大小选择“默认”。
  图18 修改重置按钮大小
设置搜索条件。
1. 选中“标签名”关联的输入框，删除当前的数据绑定。
  图19 删除现有的数据绑定
2. 单击，进入选择模型页面，单击“table_0_condition”后的“+”，设置字段名称为“queryInfo”，单击“确定”。
  图20 新增queryInfo字段
3. 单击“queryInfo”后的“+”，设置字段名称为“命名空间__Label__CST”，单击“确定”。
  图21 新建“命名空间__Label__CST”字段
4. 再次单击“queryInfo”后的“+”，设置字段名称为“createdBy”，单击“确定”。
  图22 新建createdBy字段
5. 在选择模型页面，勾选“命名空间__Label__CST”，单击“确定”，返回设计页面。
  图23 选择“命名空间__Label__CST”字段
6. 按照上述操作，删除“创建人”组件关联的数据，为其绑定“createdBy”字段。
  图24 绑定createdBy字段
7. 在“属性 > 基本属性”中，修改关联对象为“User”。
  图25 关联对象选择User
8. 在“属性 > 表单校验”中，将“必填”开关关闭。
  图26 关闭必填开关
修改表单的数据绑定。
1. 选中“表单”，删除原有的数据绑定。
  图27 删除原有的数据绑定
2. 单击，进入模型选择页面，选择“table_0_condition”下的“queryInfo”，单击“确定”。
  图28 选择queryInfo
3. 在弹出的提示页面中，单击“只绑定模型”，返回设计页面。
  图29 选择只绑定模型
验证功能是否可以正常使用。
1. 单击页面上方的，保存标准页面。
2. 保存成功后，单击，预览标准页面。
3. 在预览页面的问卷列表中，可以查看到当前问卷对象的数据列表。
  图30 查看问卷数据
4. 输入“标签名”，选择“创建人”，单击“搜索”，可以搜索到目标数据。
5. 单击问卷数据后的“查看”，可以正常跳转到“调查问卷”页面，且页面只可查看不可编辑。
  图31 查看问卷
6. 单击问卷数据后的“删除”，在弹出页面中单击“确定”，可成功删除该条记录。
  图32 删除记录