步骤七：开发查询绩效提交页面

1. 在应用设计器的左侧导航栏中，选择“界面”，单击页面后的“+”，进入添加标准页面。
2. 设置页面的标签和名称，单击“添加”，即可创建一个标准页面。
   图1 添加标准页面
   

   表1 新建标准页面参数说明

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

1. 从“基本组件 > 布局”中，拖拽“表格”组件至页面设计区。
   图2 添加表格组件
   
2. 选中表格组件，单击“属性 > 数据绑定 > 值绑定”中的，进入选择模型页面。
3. 单击“新增模型”，“模型名称”设置为“performance”，“来源”选择“对象”，单击“下一步”。
   图3 新增performance模型
   
4. 选择步骤三：添加绩效对象中创建的对象，字段选择“命名空间__employee__CST” 、“命名空间__manager__CST” 、“命名空间__employeeJob__CST” 、“命名空间__timeOfPresentJob__CST”、“命名空间__employeeSelfAssessment__CST” 、“命名空间__managerReview__CST” 、“命名空间__state__CST”和“lastModifiedDate”，单击“下一步”。
   图4 添加字段
   
5. 直接单击“确定”，返回模型选择页面，选中创建的“performance”模型，单击“确定”，返回设计页面。
   图5 选择performance模型
   
6. 选中“表格”组件，在“属性 > 表格列”中，单击“最后修改时间”后的，在弹出的页面修改列标题为“发起时间”，单击“确定”。
   图6 修改列名称
   
   图7 修改标题为发起时间
   
7. 鼠标选中“发起时间”，将该字段拖拽到最上方。
   图8 移动发起时间位置
   

1. 从“基本组件 > 布局”中，拖拽“分栏”组件到表单组件中。
   图10 添加表单组件
   
2. 选中分栏组件，在“行布局”中，将分栏组件分成三栏，“布局模式”选择“弹性布局”。
   图11 将分栏分成三个
   
3. 从“基本组件 > 表单”中，拖拽“下拉框”组件到第一个分栏中。
   图12 添加下拉框组件到第一个栏中
   
4. 选中下拉框组件，在“属性 > 基本属性”中将标签设置为“主管”，占位符设置为“请选择主管”，单击选项后的“-”，取消默认的下拉值。
   图13 设置下拉框组件基本属性
   
5. 在“数据绑定 > 属性值绑定”中，单击“+”，“属性”选择“选项”，单击模型字段后的，进入选择模型页面。
   图14 属性值绑定设置
   
6. 单击“新增模型”，“模型名称”设置为“queryPMManagers”，“来源”选择“服务”，单击“下一步”。
   图15 新增queryPMManagers模型
   
7. “选择服务类型”设置为“脚本”，“服务来源”选择“项目”，“选择项目”设置为步骤二：学院绩效考核系统应用项目初始化及配置中创建的应用，“服务”选择“queryPMManagers”，单击“确定”。
   图16 模型基本信息设置
   
8. 直接单击“下一步”，再单击“确定”，勾选“queryPMManagers > outputParam”下的“userList”，单击“确定”，返回设计页面。
   图17 选择字段userList
   
9. 单击“数据绑定 > 值绑定”后的，进入模型选择页面，单击“table_0_condition”后的。
   图18 单击table_0_condition后的编辑图标
   
10. 单击“新增节点”，修改字段名为“queryInfo”，字段类型设置为“Any”。再次单击“新增节点”，修改字段名为“manager”，字段类型设置为“Any”，单击“下一步”。
    图19 新增queryInfo和manager字段
    
11. 直接单击“确定”，选中“queryInfo”下的“manager”字段，单击“确定”，返回设计页面。
    图20 选择manager字段
    

1. 从“基本组件 > 表单”中，拖拽“日期选择框”到第二个分栏中。
   图21 添加日期选择框到第二个分栏中
   
2. 选中日期选择框，在“属性 > 基本属性”中修改“标签”为“年度”，“类型”选择“年”，“占位符”设置为“请选择考评年度”。
   图22 修改标签和类型
   
3. 单击“数据绑定 > 值绑定”后的，进入模型选择页面，单击“table_0_condition”后的。
4. 单击“queryInfo”后的“新增节点”，修改字段名为“year”，字段类型设置为“Any”，单击“下一步”。
   图23 新建year字段
   
5. 直接单击“确定”，选择新建的“year”字段，单击“确定”，返回设计页面。
   图24 选择year字段
   

1. 从“基本组件 > 基本”中，拖拽“按钮”到第三个分栏中。
   图25 添加按钮组件
   
2. 选中按钮组件，在“属性 > 基本属性”中，修改“显示名称”为“搜索”。
   图26 修改显示名称
   

1. 选中“表单”组件，单击“数据绑定 > 值绑定”后的，进入选择模型页面。
   图27 单击设置图标
   
2. 在选择模型页面，勾选“table_0_condition”下的“queryInfo”，单击“确定”，返回设计页面。
   图28 选择queryInfo模型
   
3. 在弹出提示页面中，选择“只绑定模型”。
   图29 选择只绑定模型
   

1. 在应用设计器的左侧导航栏中，选择“逻辑”，单击脚本后的“+”，进入新增脚本页面。
2. 设置脚本的名称为“queryPMByManager”，单击“添加”。
   图30 新增queryPMByManager脚本
   
3. 在脚本编辑器中，输入如下示例代码，单击页面上方的，保存脚本。

   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<object>; 
       @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为步骤三：添加绩效对象中添加的对象字段。

4. 脚本保存成功后，单击页面上方的，启用该脚本。

1. 返回绩效管理页面，选中搜索按钮，单击“数据绑定 > 值绑定”后的，进入选择模型页面。
2. 单击“新增模型”，“模型名称”设置为“queryPMByManager”，“来源”设置“服务”，单击“下一步”。
3. “选择服务类型”设置为“脚本”，“服务来源”选择“项目”，“选择项目”设置为步骤二：学院绩效考核系统应用项目初始化及配置中创建的应用，“服务”选择8中创建的脚本，单击“确定”。
   图31 选择queryPMByManager脚本
   
4. 直接单击“下一步”，再单击“确定”，选择创建的queryPMByManager模型，单击“确定”，返回设计页面。
   图32 选择创建的模型queryPMByManager
   
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); 
   });

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(); 
       } 
   });

保存成功后，单击，预览标准页面。

在预览页面，可查看到步骤三：添加绩效对象中添加的两条数据。

图33 可正常查看到数据