# 步骤七：开发查询绩效提交页面 1. 开发查询绩效管理页面。 1. 在应用设计器的左侧导航栏中，选择"界面"，单击页面后的"+"，进入添加标准页面。 2. 设置页面的标签和名称，单击"添加"，即可创建一个标准页面。 图1添加标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344105778.png "点击放大") 表1新建标准页面参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。 | 绩效管理 | | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 | myPMList | 2. 为标准页面添加一个表格并绑定属性。 1. 从"基本组件 \> 布局"中，拖拽"表格"组件至页面设计区。 图2添加表格组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378105509.png "点击放大") 2. 选中表格组件，单击"属性 \> 数据绑定 \> 值绑定"中的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344437474.png)，进入选择模型页面。 3. 单击"新增模型"，"模型名称"设置为"performance"，"来源"选择"对象"，单击"下一步"。 图3新增performance模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344110570.png "点击放大") 4. 选择[步骤三：添加绩效对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0066.html)中创建的对象，字段选择"*命名空间* __employee__CST" 、"*命名空间* __manager__CST" 、"*命名空间* __employeeJob__CST" 、"*命名空间* __timeOfPresentJob__CST"、"*命名空间* __employeeSelfAssessment__CST" 、"*命名空间* __managerReview__CST" 、"*命名空间* __state__CST"和"lastModifiedDate"，单击"下一步"。 图4添加字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378116337.png "点击放大") 5. 直接单击"确定"，返回模型选择页面，选中创建的"performance"模型，单击"确定"，返回设计页面。 图5选择performance模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002348279390.png "点击放大") 6. 选中"表格"组件，在"属性 \> 表格列"中，单击"最后修改时间"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344285574.png)，在弹出的页面修改列标题为"发起时间"，单击"确定"。 图6修改列名称 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344285094.png "点击放大") 图7修改标题为发起时间 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378005221.png "点击放大") 7. 鼠标选中"发起时间"，将该字段拖拽到**最上方** 。 图8移动发起时间位置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344128230.png "点击放大") 3. 在表格组件上方，添加一个表单组件。 从"基本组件 \> 布局"中，拖拽"表单"组件到表格容器中，位置在"表格"组件的上方。 图9添加表单组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344131110.png "点击放大") 4. 添加一个分栏组件到表单，并进行属性设置。 1. 从"基本组件 \> 布局"中，拖拽"分栏"组件到表单组件中。 图10添加表单组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378130237.png "点击放大") 2. 选中分栏组件，在"行布局"中，将分栏组件分成**三栏** ，"布局模式"选择"弹性布局"。 图11将分栏分成三个 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378255921.png "点击放大") 3. 从"基本组件 \> 表单"中，拖拽"下拉框"组件到**第一个分栏** 中。 图12添加下拉框组件到第一个栏中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344299368.png "点击放大") 4. 选中下拉框组件，在"属性 \> 基本属性"中将标签设置为"主管"，占位符设置为"请选择主管"，单击选项后的"-"，取消默认的下拉值。 图13设置下拉框组件基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344300916.png "点击放大") 5. 在"数据绑定 \> 属性值绑定"中，单击"+"，"属性"选择"选项"，单击模型字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378270889.png)，进入选择模型页面。 图14属性值绑定设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344308236.png) 6. 单击"新增模型"，"模型名称"设置为"queryPMManagers"，"来源"选择"服务"，单击"下一步"。 图15新增queryPMManagers模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378272473.png "点击放大") 7. "选择服务类型"设置为"脚本"，"服务来源"选择"项目"，"选择项目"设置为[步骤二：学院绩效考核系统应用项目初始化及配置](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0065.html)中创建的应用，"服务"选择"queryPMManagers"，单击"确定"。 图16模型基本信息设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378154905.png "点击放大") 8. 直接单击"下一步"，再单击"确定"，勾选"queryPMManagers \> outputParam"下的"userList"，单击"确定"，返回设计页面。 图17选择字段userList ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002348282962.png "点击放大") 9. 单击"数据绑定 \> 值绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378286905.png)，进入模型选择页面，单击"table_0_condition"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378167993.png)。 图18单击table_0_condition后的编辑图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002348490920.png "点击放大") 10. 单击"新增节点"，修改字段名为"queryInfo"，字段类型设置为"Any"。再次单击"新增节点"，修改字段名为"manager"，字段类型设置为"Any"，单击"下一步"。 图19新增queryInfo和manager字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344195238.png "点击放大") 11. 直接单击"确定"，选中"queryInfo"下的"manager"字段，单击"确定"，返回设计页面。 图20选择manager字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002348491572.png "点击放大") 5. 向第二个分栏中添加日期选择框组件，并设置组件属性。 1. 从"基本组件 \> 表单"中，拖拽"日期选择框"到**第二个分栏** 中。 图21添加日期选择框到第二个分栏中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344203978.png "点击放大") 2. 选中日期选择框，在"属性 \> 基本属性"中修改"标签"为"年度"，"类型"选择"年"，"占位符"设置为"请选择考评年度"。 图22修改标签和类型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378340945.png "点击放大") 3. 单击"数据绑定 \> 值绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378555265.png)，进入模型选择页面，单击"table_0_condition"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344597310.png)。 4. 单击"queryInfo"后的"新增节点"，修改字段名为"year"，字段类型设置为"Any"，单击"下一步"。 图23新建year字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378223705.png "点击放大") 5. 直接单击"确定"，选择新建的"year"字段，单击"确定"，返回设计页面。 图24选择year字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002382212841.png "点击放大") 6. 添加按钮组件到分栏组件的第三个栏中，并设置属性。 1. 从"基本组件 \> 基本"中，拖拽"按钮"到**第三个分栏** 中。 图25添加按钮组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344391308.png "点击放大") 2. 选中按钮组件，在"属性 \> 基本属性"中，修改"显示名称"为"搜索"。 图26修改显示名称 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378231117.png "点击放大") 7. 为表单绑定数据。 1. 选中"表单"组件，单击"数据绑定 \> 值绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344234416.png)，进入选择模型页面。 图27单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344234664.png "点击放大") 2. 在选择模型页面，勾选"table_0_condition"下的"queryInfo"，单击"确定"，返回设计页面。 图28选择queryInfo模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378355009.png "点击放大") 3. 在弹出提示页面中，选择"只绑定模型"。 图29选择只绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344236448.png) 8. 创建通过主管查询员工对象脚本。 1. 在应用设计器的左侧导航栏中，选择"逻辑"，单击脚本后的"+"，进入新增脚本页面。 2. 设置脚本的名称为"queryPMByManager"，单击"添加"。 图30新增queryPMByManager脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344238844.png "点击放大") 3. 在脚本编辑器中，输入如下示例代码，单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378395357.png)，保存脚本。 ``` import * as db from 'db'; import * as context from 'context'; @action.object({ type: "param" }) export class ActionInput { @action.param({ type: 'number', required: true, label: 'start' }) start: number; @action.param({ type: 'number', required: true, label: 'limit' }) limit: number; @action.param({ type: 'string', required: false, label: 'employee' }) employee: string; @action.param({ type: 'string', required: false, label: 'manager' }) manager: string; @action.param({ type: 'string', required: false, label: 'year' }) year: string; } @action.object({ type: "param" }) export class ActionOutput { @action.param({ type: 'object', isCollection: true, required: true, label: 'data' }) data: Array; @action.param({ type: 'number', required: true, label: 'total' }) total: number; } @useObject(['命名空间__performance__CST']) @action.object({ type: "method" }) export class QueryPerformance { @action.method({ input: 'ActionInput', output: 'ActionOutput' }) public run(input: ActionInput): ActionOutput { let out = new ActionOutput(); try { let s = db.object('命名空间__performance__CST'); const conditions = []; if (input.manager) { conditions.push({ "field": "命名空间__manager__CST", "operator": "eq", "value": input.manager }) } if (input.year) { const year = Number(input.year); if (!isNaN(year)) { conditions.push(...[{ "field": "createdDate", "operator": "ge", "value": `${year}-01-01 00:00:00` }, { "field": "createdDate", "operator": "lt", "value": `${year + 1}-01-01 00:00:00` }]) } } if (input.employee) { conditions.push({ "field": "命名空间__employee__CST", "operator": "eq", "value": input.employee }) } const options = { options: { skip: input.start, limit: input.limit, orderby: [ { field: "lastModifiedDate", order: "desc" } ] } } if (conditions.length) { out.data = s.queryByCondition({ "conjunction": "AND", conditions }, options) out.total = s.count({ "conjunction": "AND", conditions }) } else { out.data = s.queryByCondition(null, options) out.total = s.count() } } catch (err) { console.error(err.name, err.message); context.setError(err.name, err.message); } return out; } } ``` 其中，*命名空间__performance__CST* 、*命名空间__manager__CST* *和命名空间__employee__CST* 为[步骤三：添加绩效对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0066.html)中添加的对象字段。 4. 脚本保存成功后，单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344437482.png)，启用该脚本。 9. 设置搜索按钮的事件。 1. 返回绩效管理页面，选中搜索按钮，单击"数据绑定 \> 值绑定"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344249972.png)，进入选择模型页面。 2. 单击"新增模型"，"模型名称"设置为"queryPMByManager"，"来源"设置"服务"，单击"下一步"。 3. "选择服务类型"设置为"脚本"，"服务来源"选择"项目"，"选择项目"设置为[步骤二：学院绩效考核系统应用项目初始化及配置](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0065.html)中创建的应用，"服务"选择[8]中创建的脚本，单击"确定"。 图31选择queryPMByManager脚本 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344426502.png "点击放大") 4. 直接单击"下一步"，再单击"确定"，选择创建的queryPMByManager模型，单击"确定"，返回设计页面。 图32选择创建的模型queryPMByManager ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378387085.png "点击放大") 5. 在"事件"页签，单击"点击"后的"+"，进入添加动作页面。 6. 在自定义动作中，输入如下事件代码，单击"创建"。 ``` var pageInfo = $model.ref('table_0_condition').getData().pageInfo; var queryInfo = $model.ref('table_0_condition').getData().queryInfo; if (!queryInfo) { queryInfo = {}; } var queryData = { manager: queryInfo.manager, year: queryInfo.year, start: 0, limit: pageInfo.pageSize }; $model.ref('queryPMByManager').setData({ inputParam: queryData }); $model.ref('queryPMByManager').run().then(function (data) { $model.ref('performance').setData(data.data); pageInfo.total = data.total; $model.ref('table_0_condition').setValue('pageInfo', pageInfo); }).catch(function (err) { context.$message.error(err.resMsg || err.message || err); }); ``` 10. 添加页面加载事件。 1. 选中页面，在"事件"页签中单击"加载"后的"+"，进入添加动作页面。 2. 在自定义动作中，添加如下事件代码，单击"创建"。 ``` $model.ref('queryPMManagers').run().then(function () { doQuery(); }).catch(function (err) { context.$message.error(err.resMsg || err.message || err); }); function doQuery() { var btn = context.$component.get('searchBtn'); if (btn) { btn.$el.click(); } } document.addEventListener('visibilitychange', function () { if (document.visibilityState == 'visible') { doQuery(); } }); ``` 11. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002378555269.png)，保存标准页面。 12. 保存成功后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344597314.png)，预览标准页面。 在预览页面，可查看到[步骤三：添加绩效对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0066.html)中添加的两条数据。 图33可正常查看到数据 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002344436482.png "点击放大")