文档首页/ 华为云Astro轻应用/ 最佳实践/ 应用专项/ 使用华为云Astro轻应用开发学院绩效考核系统/ 操作步骤/ 步骤四：开发员工自评表页面

更新时间：2025-08-18 GMT+08:00

查看PDF

步骤四：开发员工自评表页面

创建员工自评页面。

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

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

图1 添加标准页面

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

设置员工自评表页面的标题。
1. 在标准页面的设计页面，从“基本组件 > 布局”中，拖拽“容器”组件到中间设计区。
  图2 添加容器组件
2. 选中容器组件，在“属性 > 样式 > 高级设置”中，输入如下样例代码。
  图3 组件高级设置
```
:root{ 
width:100%;
 height:100%;  
 border-top: 12px solid #147aec; 
  }
```
  样式代码中的width:100%和height:100%用于将容器的宽度和高度设置成百分比，border-top: 12px solid #147aec用于设置容器的边框。
  
  图4 将容器组件的宽和高设置成百分比
  
  图5 设置容器组件的边框
3. 从“基本组件 > 布局”中，拖拽“分栏”组件到容器中。
  图6 添加分栏组件
4. 选择分栏组件，在“属性 > 行布局 > PC”中将分栏设置为1栏。
  图7 将分栏设置为1栏
5. 将“布局模式”设置为“弹性布局”、“垂直对齐方式”设置“中”、“水平排列方式”设置为“居中对齐”。
  图8 设置布局模式
6. 从“基本组件 > 基本”中，拖拽一个“标题”组件到分栏中。
  图9 添加标题组件
7. 选中标题组件，将“标题内容”设置为“员工自评表”。
  图10 设置标题内容
8. 在“样式 > 字体”中，将字体粗细设置为“600 Semi Bold”，字体大小设置为“28px”，字体颜色为“#147AEC”并居中显示。
  图11 设置标题字体
添加一个滚动容器组件到分栏组件下方。
1. 从“基本组件 > 高级”中，拖拽一个“滚动容器”组件到分栏组件下方。
  图12 添加滚动容器组件
2. 选中滚动容器组件，在“属性 > 样式 > 布局”中将组件的“高”设置为“700px”。
  图13 设置高为700px
3. 在“基本属性”中，将“高度”设置为“700”。
  图14 设置高度为700
在滚动容器中添加一个表单组件。
1. 从“基本组件 > 布局”中，拖拽一个“表单”组件到滚动容器中。
  图15 添加表单组件
2. 选中表单组件，单击“属性 > 数据绑定 > 值绑定”中的，进入选择模型页面。
  图16 选择值绑定
3. 单击“新增模型”，“模型名称”设置为“formData”，“来源”选择“对象”，单击“下一步”。
  图17 新建formData模型
4. 选择步骤三：添加绩效对象中创建的对象，勾选全部字段，单击“下一步”。
  图18 模型基本信息设置
5. 直接单击“确定”，返回选择模型页面，选择已创建的模型，单击“确定”。
  图19 选择已创建的模型
6. 在弹出的提示框中，单击“只绑定模型”，返回设计页面。
  图20 选择只绑定模型
添加一个容器组件到表单中。
1. 从“基本组件 > 布局”中，拖拽一个“容器”组件到表单中。
  图21 添加容器到表单
2. 选中容器组件，在“属性 > 基本属性”中，选择“弹性布局”，“排列方向”选择“行”，“水平对齐方式”选择“起点对齐”，“垂直对齐方式”选择“中间对齐”。
  图22 设置容器组件基本属性
3. 在“样式 > 布局”中，将“高”设置为“35px”。
  图23 设置容器组件的高
4. 在“样式 > 背景”中，将背景颜色设置为“rgb(233, 243, 255)”。
  图24 设置组件背景
5. 在“样式 > 边框”中，将边框的左边框线的“宽”为“5.33px”，“颜色”为“#147AEC”，“线型”选择“实线”。
  图25 设置组件边框
添加一个标题组件到容器中。
1. 从“基本组件 > 基本”中，拖拽一个“标题”组件到容器中。
  图26 添加标题组件
2. 选中标题组件，修改“标题内容”为“基础信息”，“标题类型”设置为“Heading 2”。
  图27 设置标题属性
从“基本组件 > 布局”，拖拽一个“分栏”组件到表单中容器组件下方，并将“布局模式”设置为“弹性布局”。

图28 添加分栏组件到表单中
在分栏组件的左侧栏中，添加一个输入框组件。
1. 从“基本组件 > 表单”中，拖拽一个“输入框”组件至左侧栏中。
  图29 添加输入框组件
2. 选中输入框组件，设置“标签”为“姓名”。
  图30 设置输入框标签为姓名
3. 在“表单校验”中开启“必填”，在“公共”中开启“只读”。
  图31 表单校验和公共设置
4. 单击“属性 > 数据绑定 > 值绑定”中的，进入选择模型页面。
5. 单击“新增模型”，模型名称设置为“currentUser”，来源选择“自定义”，单击“下一步”。
  图32 新建currentUser模型
6. 单击“新增节点”，修改字段名称修改为“name”，字段类型选择为“Any”，单击“下一步”。
  图33 新建name字段
7. 单击“确定”，返回选择模型页面，选择“currenUser”模型中的“name”字段。
  图34 选择name字段
8. 单击“确定”，返回标准页面设计页面，可查看到组件已绑定模型。
  图35 查看组件绑定的模型
添加一个下拉框组件到分栏组件的右侧栏中。
1. 从“基本组件 > 表单”中，拖拽一个“下拉框”组件至右边栏中。
  图36 添加下拉框组件
2. 选择下拉框组件，将标签设置为“现任职时间（本年度内任职月份数）”，占位符设置为“请选择本年度内现任职时间”。
  图37 修改标签和占位符
3. 在选项中，单击“增加选项”，新增12个选项，内容分别为1~12。
  图38 添加12个选项
4. 在“数据绑定 > 值绑定”中，单击，进入选择模型页面。
  图39 单击设置图标
5. 在formDatd模型中，选择“命名空间__timeOfPresentJob__CST”字段，单击“确定”，返回设计页面。
  图40 选择命名空间__timeOfPresentJob__CST字段
6. 单击属性值绑定后的“+”，属性选择“只读”，再单击模型字段后的，进入选择模型页面。
  图41 添加属性值绑定
7. 单击“新增模型”，模型名称设置为“component”，来源选择“自定义”，单击“下一步”。
  图42 新建component模型
8. 单击“新增节点”，设置字段名称为“disabled”，字段类型为“Any”，单击“下一步”。
  图43 新建disabled字段
9. 单击“确定”，返回模型选择页面，选中disabled字段，单击“确定”，返回设计页面。
  图44 选中模型中的disabled字段
添加一个输入框组件到表单中。
1. 从“基本组件 > 表单”中，拖拽一个“输入框”组件至表单中。
  图45 添加输入框组件
2. 选中输入框组件，设置标签为“岗位”，占位符为“请输入岗位”。
  图46 设置输入框标签和占位符
3. 在“数据绑定 > 值绑定”中，单击，进入选择模型页面。
  图47 单击属性
4. 选择formData模型中的“命名空间__employeeJob__CST”字段，单击“确定”，返回设计页面。
  图48 选择命名空间__employeeJob__CS字段
5. 单击属性值绑定后的“+”，属性选择“只读”，单击模型字段后的，进入选择模型页面。
  图49 单击设置图标
6. 选择“component”模型中的“disabled”字段，单击“确定”，返回设计页面。
  图50 选择disabled字段
设置主管信息。
1. 选中基础信息所在的容器组件，单击右键选择“复制”。
  图51 复制基础信息
2. 在表单中，单击右键选择“粘贴”（以下所有拖拽和粘贴的内容都是放在表单里面）。
  图52 粘贴后效果
3. 选中容器中的标题组件，将标题内容为“主管信息”、标题类型为“Heading2”。
  图53 修改标题内容
4. 从“基本组件 > 布局”中，拖拽一个分栏组件到表单中。
  图54 添加分栏组件到表单中
5. 选中分栏组件，在行布局将分栏组件设置为1栏。
  图55 设置为一栏
6. 从“基本组件 > 表单”中，拖拽“下拉框”组件至栏中。
  图56 添加下拉框组件到栏中
7. 选中下拉框组件，设置标签为“姓名”，占位符为“请选择主管姓名”。
  图57 设置下拉框标签和占位符
8. 在选项中，单击选项后的“-”，取消默认提供的选项。
  图58 取消默认选项
9. 在表单校验中，开启“必填”按钮，设置该下拉框是必填的。
  图59 开启必填按钮
10. 在“数据绑定 > 值绑定”中，单击，进入选择模型页面。
  图60 单击设置图标
11. 选择forData模型中的“命名空间__manager__CST”，单击“确定”。
  图61 选择命名空间__manager__CST字段
12. 单击属性值绑定后的“+”，属性选择“只读”，再单击模型字段后的，进入选择模型页面。
  图62 单击设置图标
13. 选择component模型中的“disabled”字段，单击“确定”，返回设计页面。
  图63 选择“disabled”字段
设置审核信息。
1. 按照11.a中操作，复制主管信息容器，并将标题内容设置为“审核信息”。
  图64 设置审核信息
2. 从“基本组件 > 表单”中，拖拽“多行输入框”组件到表单中。
  图65 添加多行输入框组件到表单中
3. 选择多行输入框组件，设置标签为“主管意见”。
  图66 修改标签为主管意见
4. 在“公共”中开启“只读”，将组件设置为“只读”。
  图67 开启只读属性
5. 在“数据绑定 > 值绑定”中，单击，进入模型选择页面。
6. 选择“formData”模型中的“命名空间__managerReview__CST”字段，单击“确定”，返回设计页面。
  图68 选择命名空间__managerReview__CST字段
设置总结。
1. 同样，复制“审核信息”容器，将容器中标题组件的“标题内容”设置为“总结”。
  图69 设置标题内容为总结
2. 从“基本组件 > 表单”中，拖拽多行输入框组件到表单中。
  图70 添加多行输入框组件到表单中
3. 在“基本属性”中，设置“标签”为“年度总结”，设置“占位符”为“请输入年度总结”。
  图71 设置多行输入框组件的标签和占位符
4. 在表“单校验”中，开启“必填”，将组件设置为必填。
  图72 开启必填
5. 在“数据绑定 > 值绑定”中，单击，进入模型选择页面。
6. 选择“forData”模型中的“命名空间__employeeSelfAssessment__CST”字段，单击“确定”，返回设计页面。
  图73 选择命名空间__employeeSelfAssessment__CST字段
7. 单击“属性值绑定”后的“+”，属性选择“只读”，再单击模型字段后的，进入模型选择页面。
  图74 单击设置图标
8. 选中“component”模型中的“disabled”字段，单击“确定”，返回设计页面。
  图75 选中disabled字段

设置提交按钮。

从“基本组件 > 布局”中，拖拽“容器”组件拖拽到表单中。
图76 添加容器组件到表单中
在“基本属性”中，设置“水平对齐方式”为“中”。
图77 设置水平对齐方式
从“基本组件 > 布局”中，拖拽“容器”组件拖拽到表单中。
图78 添加按钮组件到容器中
选中按钮组件，设置“显示名称”为“提交”，“大小”选择“默认”。
图79 设置按钮基本属性
在“数据绑定 > 属性值绑定”中，单击“+”，属性选择“禁用”，单击模型字段后的。
图80 单击设置图标
选择“component”模型中的“disabled”，单击“确定”，返回设计页面。
图81 选中disabled字段
选中按钮组件，在“事件”页签，单击“点击”后的“+”，进入添加动作页面。

在自定义动作代码区域中，输入如下示例代码，单击“创建”。

var performance = context.$model.ref("formData").getData(); 
if (!performance.命名空间__employee__CST) { 
    performance.命名空间__employee__CST = context.$user.userId; 
} 
if (performance.命名空间__state__CST) { 
    performance.命名空间__state__CST = ''; 
} 
context.$component.form.formValidate().then(function (valid) { 
    if (valid) { 
        context.$page.params["bp.name"] = "命名空间__performanceManagement"; 
        context.$bpm.submitTask({ 
            performance: performance 
        }).then(function () { 
            context.$model.ref("component").setValue("disabled", true); 
            context.$dialog.success({ 
                title: context.$page.$page.$t("eventContext.success"), 
                content: context.$page.$page.$t("eventContext.submitSuccess"), 
                okText: context.$page.$page.$t("eventContext.confirm"), 
                onOk: function () { 
                    if (context.$page.params.interviewID) { 
                        closeCurrentTab(); 
                    } 
                } 
            }); 
        }).catch(function (err) { 
            context.$message.error(err.resMsg || err.message || err); 
        }); 
    } 
}); 
 
function closeCurrentTab() { 
    if (parent.bingo) { 
        var removeTab = parent.bingo.removeTab; 
        var getCurrentTab = parent.bingo.getCurrentTab; 
        if (removeTab && getCurrentTab) { 
            return removeTab(getCurrentTab()); 
        } 
    } 
    if (window.parent != window) { 
        window.parent.close(); 
    } else { 
        window.close(); 
    } 
}

其中，“formData”为4.c中为表单创建的对象模型名称，“命名空间__employee__CST”、“命名空间__state__CST”为步骤三：添加绩效对象中添加的对象字段，“命名空间__performanceManagement”为后续步骤中创建的工作流的名称。