# 步骤七：开发调查问卷数据查询页面 1. 创建调查问卷数据查询页面。 1. 在应用设计器的左侧导航栏中，选择"界面"，单击页面后的"+"，进入添加标准页面。 2. 设置页面的标签和名称，单击"添加"，即可创建一个标准页面。 图1添加标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385291085.png "点击放大") 表1新建标准页面参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。 | 数据查询 | | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 | questionnaire_queryPage | 2. 为页面添加一个表格组件。 1. 从"基本组件 \> 布局"中，拖拽"表格"组件至页面工作区域。 图2添加表格组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385297061.png "点击放大") 2. 选中"表格容器"，在"属性 \> 数据绑定"中单击"值绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351657748.png)，进入选择模型页面。 3. 单击"新增模型"，设置模型名称为"questionaireRecord"，来源选择"对象"，单击"下一步"。 4. 选择[步骤三：添加调查表记录对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0079.html)中创建的对象（命名空间__questionaireRecord__CST），勾选字段"命名空间__Label__CST"、"createdBy"、"createdDate"、"lastModifiedBy"以及"lastModifiedDate"，单击"下一步"。 **图示中只勾选了部分选项，实际请以描述为准。** 图3勾选对象中字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351661820.png "点击放大") 5. 直接单击"确定"，选中创建的"questionaireRecord"模型，单击"确定"，返回设计页面。 3. 设置表格属性。 1. 选中"表格"组件，在"属性 \> 表格列"中单击"标签名"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385571337.png)，修改"列标题"为"标题名称"，单击"确定"。 图4单击标签名后的设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351992316.png "点击放大") 2. 在"属性 \> 表格列"中，单击"添加操作列"，新增一个操作列。 图5新增一个操作列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385633905.png) 3. 单击新增列后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002351878166.png)，设置列标题为"操作"，单击"添加操作按钮"，设置按钮标签为"查看"，类型选择"文字按钮"。 图6新增查看按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385854221.png "点击放大") 4. 再次单击"添加操作按钮"，设置标签为"删除"，类型选择"文字按钮"。 图7添加删除按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002352255026.png "点击放大") 5. 单击"查看"按钮右侧的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385858865.png)，再单击"动作列表"后的"+"，进入添加动作页面。 图8新增动作 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385858393.png "点击放大") 6. 在自定义动作中，输入自定义代码，单击"创建"。 ``` var recordId= $current.$attrs.row.id; context.$page.openStdPage('命名空间__questionnaire',"recordId="+recordId) ``` 其中，"命名空间__questionnaire"为[步骤四：开发调查问卷页面](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0080.html)中标准页面的**名称**。 7. 同样，单击"删除"按钮右侧的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353442248.png)，再单击动作列表后的"+"，为删除按钮添加如下事件。 ``` 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"为[步骤三：添加调查表记录对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0079.html)中创建对象的**唯一标识**。 8. 设置完成后，单击"保存"，返回设计页面。 4. 添加搜索条件。 1. 从"基本组件 \> 布局"中，拖拽"表单"组件到表格容器中，位置在"表格"的上方。 图9添加表单到表格上方 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002385829697.png "点击放大") 2. 在"元数据表单配置向导"页面，选择"命名空间__questionaireRecord__CST"数据对象，然后选择 "命名空间__Label__CST"、"createdBy"，单击"下一步"。 **图示中只勾选了部分选项，实际请以描述为准。** 图10选择数据源 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002352170228.png "点击放大") 3. 在配置功能页面，勾选"保存"和"重置"按钮，单击"完成"。 图11勾选保存和重置按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386761653.png "点击放大") 4. 选中"容器"组件，在"属性 \> 基本属性"中，设置"水平对齐方式"为"中"。 图12设置容器水平对齐方式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386644165.png "点击放大") 5. 选中"保存"按钮，修改显示名称为"搜索"，大小选择"默认"。 图13设置保存按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353004482.png "点击放大") 6. 选择"事件"页签，删除"提交表单"事件动作，再单击加载后的"+"，修改动作名称为"搜索"并输入如下示例代码，单击"创建"。 图14删除提交表单事件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002352845906.png "点击放大") 图15设置自定义动作 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353010210.png "点击放大") ``` // 当前表格 var _table = context.$component.table; // 获取查询条件 var condition = _table.getCondition(); // 设置查询条件 if(condition) { _table.setCondition(condition); } // 执行查询 _table.doQuery(); ``` 7. 选中"重置"按钮，按钮大小选择"默认"。 图16修改重置按钮大小 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002352852954.png "点击放大") 5. 设置搜索条件。 1. 选中"标签名"关联的输入框，删除当前的数据绑定。 图17删除现有的数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353044744.png "点击放大") 2. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386810965.png)，进入选择模型页面，单击"table_0_condition"后的"+"，设置字段名称为"queryInfo"，单击"确定"。 图18新增queryInfo字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002352892744.png "点击放大") 3. 单击"queryInfo"后的"+"，设置字段名称为"*命名空间* __Label__CST"，单击"确定"。 图19新建"命名空间__Label__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386696729.png "点击放大") 4. 再次单击"queryInfo"后的"+"，设置字段名称为"createdBy"，单击"确定"。 图20新建createdBy字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386900709.png "点击放大") 5. 在选择模型页面，勾选"命名空间__Label__CST"，单击"确定"，返回设计页面。 图21选择"命名空间__Label__CST"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386908513.png "点击放大") 6. 按照上述操作，删除"创建人"组件关联的数据，为其绑定"createdBy"字段。 图22绑定createdBy字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353122988.png "点击放大") 7. 在"属性 \> 基本属性"中，修改关联对象为"User"。 图23关联对象选择User ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386887501.png "点击放大") 8. 在"属性 \> 表单校验"中，将"必填"开关关闭。 图24关闭必填开关 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386929509.png) 6. 修改表单的数据绑定。 1. 选中"表单"，删除原有的数据绑定。 图25删除原有的数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353130836.png "点击放大") 2. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353291276.png)，进入模型选择页面，选择"table_0_condition"下的"queryInfo"，单击"确定"。 图26选择queryInfo ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002386932657.png "点击放大") 3. 在弹出的提示页面中，单击"只绑定模型"，返回设计页面。 图27选择只绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002375298413.png) 7. 验证功能是否可以正常使用。 1. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002387202289.png)，保存标准页面。 2. 保存成功后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353602060.png)，预览标准页面。 3. 在预览页面的问卷列表中，可以查看到当前问卷对象的数据列表。 图28查看问卷数据 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002387297665.png "点击放大") 4. 输入"标签名"，选择"创建人"，单击"搜索"，可以搜索到目标数据。 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353585980.png "点击放大") 5. 单击问卷数据后的"查看"，可以正常跳转到"调查问卷"页面，且页面**只可查看不可编辑** 。 图29查看问卷 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002387310381.png "点击放大") 6. 单击问卷数据后的"删除"，在弹出页面中单击"确定"，可成功删除该条记录。 图30删除记录 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002353594564.png "点击放大")