# 步骤四：开发员工自评表页面 1. 创建员工自评页面。 1. 在应用设计器的左侧导航栏中，选择"界面"，单击页面后的"+"，进入添加标准页面。 2. 设置页面的标签和名称，单击"添加"，即可创建一个标准页面。 图1添加标准页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002339995320.png "点击放大") 表1新建标准页面参数说明 | 参数 | 说明 | 示例 | |:---|:---|:---| | 标签 | 输入标准页面的标签名，用于在页面显示，创建后可修改。 取值范围：1\~64个字符。 | 员工自评 | | 名称 | 输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： - 长度不能超过64个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在华为云Astro轻应用中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 - 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。 | selfAssessment | 2. 设置员工自评表页面的标题。 1. 在标准页面的设计页面，从"基本组件 \> 布局"中，拖拽"容器"组件到中间设计区。 图2添加容器组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374059033.png "点击放大") 2. 选中容器组件，在"属性 \> 样式 \> 高级设置"中，输入如下样例代码。 图3组件高级设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340028090.png "点击放大") ``` :root{ width:100%; height:100%; border-top: 12px solid #147aec; } ``` 样式代码中的**width:100%** 和**height:100%** 用于将容器的宽度和高度设置成百分比，**border-top: 12px solid #147aec**用于设置容器的边框。 图4将容器组件的宽和高设置成百分比 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374080865.png) 图5设置容器组件的边框 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340043250.png) 3. 从"基本组件 \> 布局"中，拖拽"分栏"组件到容器中。 图6添加分栏组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374731865.png "点击放大") 4. 选择分栏组件，在"属性 \> 行布局 \> PC"中将分栏设置为**1栏** 。 图7将分栏设置为1栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340893850.png "点击放大") 5. 将"布局模式"设置为"弹性布局"、"垂直对齐方式"设置"中"、"水平排列方式"设置为"居中对齐"。 图8设置布局模式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002341053614.png) 6. 从"基本组件 \> 基本"中，拖拽一个"标题"组件到分栏中。 图9添加标题组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340072396.png "点击放大") 7. 选中标题组件，将"标题内容"设置为"员工自评表"。 图10设置标题内容 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340240544.png "点击放大") 8. 在"样式 \> 字体"中，将字体粗细设置为"600 Semi Bold"，字体大小设置为"28px"，字体颜色为"#147AEC"并居中显示。 图11设置标题字体 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340086220.png "点击放大") 3. 添加一个滚动容器组件到分栏组件下方。 1. 从"基本组件 \> 高级"中，拖拽一个"滚动容器"组件到**分栏组件下方** 。 图12添加滚动容器组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374286133.png "点击放大") 2. 选中滚动容器组件，在"属性 \> 样式 \> 布局"中将组件的"高"设置为"700px"。 图13设置高为700px ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374392017.png "点击放大") 3. 在"基本属性"中，将"高度"设置为"700"。 图14设置高度为700 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340419206.png "点击放大") 4. 在滚动容器中添加一个表单组件。 1. 从"基本组件 \> 布局"中，拖拽一个"表单"组件到**滚动容器** 中。 图15添加表单组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340269170.png "点击放大") 2. 选中表单组件，单击"属性 \> 数据绑定 \> 值绑定"中的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340273546.png)，进入选择模型页面。 图16选择值绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340432694.png "点击放大") 3. 单击"新增模型"，"模型名称"设置为"formData"，"来源"选择"对象"，单击"下一步"。 图17新建formData模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374153233.png "点击放大") 4. 选择[步骤三：添加绩效对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0066.html)中创建的对象，勾选**全部** 字段，单击"下一步"。 图18模型基本信息设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374315681.png "点击放大") 5. 直接单击"确定"，返回选择模型页面，选择已创建的模型，单击"确定"。 图19选择已创建的模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340279122.png "点击放大") 6. 在弹出的提示框中，单击"只绑定模型"，返回设计页面。 图20选择只绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340440130.png) 5. 添加一个容器组件到表单中。 1. 从"基本组件 \> 布局"中，拖拽一个"容器"组件到**表单** 中。 图21添加容器到表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340463152.png "点击放大") 2. 选中容器组件，在"属性 \> 基本属性"中，选择"弹性布局"，"排列方向"选择"行"，"水平对齐方式"选择"起点对齐"，"垂直对齐方式"选择"中间对齐"。 图22设置容器组件基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340304380.png "点击放大") 3. 在"样式 \> 布局"中，将"高"设置为"35px"。 图23设置容器组件的高 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340306344.png) 4. 在"样式 \> 背景"中，将背景颜色设置为"rgb(233, 243, 255)"。 图24设置组件背景 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374193197.png) 5. 在"样式 \> 边框"中，将边框的左边框线的"宽"为"5.33px"，"颜色"为"#147AEC"，"线型"选择"实线"。 图25设置组件边框 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374356713.png) 6. 添加一个标题组件到容器中。 1. 从"基本组件 \> 基本"中，拖拽一个"标题"组件到**容器** 中。 图26添加标题组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374511865.png "点击放大") 2. 选中标题组件，修改"标题内容"为"基础信息"，"标题类型"设置为"Heading 2"。 图27设置标题属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340327104.png "点击放大") 7. 从"基本组件 \> 布局"，拖拽一个"分栏"组件到**表单中容器组件下方** ，并将"布局模式"设置为"弹性布局"。 图28添加分栏组件到表单中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340487976.png "点击放大") 8. 在分栏组件的左侧栏中，添加一个输入框组件。 1. 从"基本组件 \> 表单"中，拖拽一个"输入框"组件至左侧栏中。 图29添加输入框组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374369109.png "点击放大") 2. 选中输入框组件，设置"标签"为"姓名"。 图30设置输入框标签为姓名 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340333364.png "点击放大") 3. 在"表单校验"中开启"必填"，在"公共"中开启"只读"。 图31表单校验和公共设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340334978.png) 4. 单击"属性 \> 数据绑定 \> 值绑定"中的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340354002.png)，进入选择模型页面。 5. 单击"新增模型"，模型名称设置为"currentUser"，来源选择"自定义"，单击"下一步"。 图32新建currentUser模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374497553.png "点击放大") 6. 单击"新增节点"，修改字段名称修改为"name"，字段类型选择为"Any"，单击"下一步"。 图33新建name字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374499753.png "点击放大") 7. 单击"确定"，返回选择模型页面，选择"currentUser"模型中的"name"字段。 图34选择name字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374501673.png "点击放大") 8. 单击"确定"，返回标准页面设计页面，可查看到组件已绑定模型。 图35查看组件绑定的模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374504213.png "点击放大") 9. 添加一个下拉框组件到分栏组件的右侧栏中。 1. 从"基本组件 \> 表单"中，拖拽一个"下拉框"组件至**右边栏** 中。 图36添加下拉框组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340348486.png "点击放大") 2. 选择下拉框组件，将标签设置为"现任职时间（本年度内任职月份数）"，占位符设置为"请选择本年度内现任职时间"。 图37修改标签和占位符 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374510793.png "点击放大") 3. 在选项中，单击"增加选项"，新增12个选项，内容分别为1\~12。 图38添加12个选项 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374481521.png) 4. 在"数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340604930.png)，进入选择模型页面。 图39单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374602865.png) 5. 在formData模型中，选择"*命名空间* __timeOfPresentJob__CST"字段，单击"确定"，返回设计页面。 图40选择*命名空间* __timeOfPresentJob__CST字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374603453.png "点击放大") 6. 单击属性值绑定后的"+"，属性选择"只读"，再单击模型字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340720560.png)，进入选择模型页面。 图41添加属性值绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340766050.png) 7. 单击"新增模型"，模型名称设置为"component"，来源选择"自定义"，单击"下一步"。 图42新建component模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340767166.png "点击放大") 8. 单击"新增节点"，设置字段名称为"disabled"，字段类型为"Any"，单击"下一步"。 图43新建disabled字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374485957.png "点击放大") 9. 单击"确定"，返回模型选择页面，选中disabled字段，单击"确定"，返回设计页面。 图44选中模型中的disabled字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374606693.png "点击放大") 10. 添加一个输入框组件到表单中。 1. 从"基本组件 \> 表单"中，拖拽一个"输入框"组件至表单中。 图45添加输入框组件 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340775008.png "点击放大") 2. 选中输入框组件，设置标签为"岗位"，占位符为"请输入岗位"。 图46设置输入框标签和占位符 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374615717.png "点击放大") 3. 在"数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340778120.png)，进入选择模型页面。 图47单击属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374736297.png) 4. 选择formData模型中的"*命名空间* __employeeJob__CST"字段，单击"确定"，返回设计页面。 图48选择*命名空间* __employeeJob__CS字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374736645.png "点击放大") 5. 单击属性值绑定后的"+"，属性选择"只读"，单击模型字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340620000.png)，进入选择模型页面。 图49单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374618513.png) 6. 选择"component"模型中的"disabled"字段，单击"确定"，返回设计页面。 图50选择disabled字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340781468.png "点击放大") 11. 设置主管信息。 1. 选中基础信息所在的容器组件，单击右键选择"复制"。 图51复制基础信息 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340783992.png "点击放大") 2. 在表单中，单击右键选择"粘贴"（**以下所有拖拽和粘贴的内容都是放在表单里面** ）。 图52粘贴后效果 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340788624.png "点击放大") 3. 选中容器中的标题组件，将标题内容为"主管信息"、标题类型为"Heading2"。 图53修改标题内容 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340789768.png "点击放大") 4. 从"基本组件 \> 布局"中，拖拽一个分栏组件到表单中。 图54添加分栏组件到表单中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340634276.png "点击放大") 5. 选中分栏组件，在行布局将分栏组件设置为**1栏** 。 图55设置为一栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374633037.png "点击放大") 6. 从"基本组件 \> 表单"中，拖拽"下拉框"组件至栏中。 图56添加下拉框组件到栏中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340637700.png "点击放大") 7. 选中下拉框组件，设置标签为"姓名"，占位符为"请选择主管姓名"。 图57设置下拉框标签和占位符 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340638616.png "点击放大") 8. 在选项中，单击选项后的"-"，取消默认提供的选项。 图58取消默认选项 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374757813.png) 9. 在表单校验中，开启"必填"按钮，设置该下拉框是必填的。 图59开启必填按钮 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374639117.png) 10. 在"数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374760017.png)，进入选择模型页面。 图60单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374641133.png) 11. 选择formData模型中的"*命名空间* __manager__CST"，单击"确定"。 图61选择*命名空间* __manager__CST字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374644717.png "点击放大") 12. 单击属性值绑定后的"+"，属性选择"只读"，再单击模型字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340648228.png)，进入选择模型页面。 图62单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340808664.png) 13. 选择component模型中的"disabled"字段，单击"确定"，返回设计页面。 图63选择"disabled"字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374648113.png "点击放大") 12. 设置审核信息。 1. 按照[11.a]中操作，复制主管信息容器，并将标题内容设置为"审核信息"。 图64设置审核信息 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374769809.png "点击放大") 2. 从"基本组件 \> 表单"中，拖拽"多行输入框"组件到表单中。 图65添加多行输入框组件到表单中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340813818.png "点击放大") 3. 选择多行输入框组件，设置标签为"主管意见"。 图66修改标签为主管意见 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340654374.png "点击放大") 4. 在"公共"中开启"只读"，将组件设置为"只读"。 图67开启只读属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340655430.png) 5. 在"数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374773729.png)，进入模型选择页面。 6. 选择"formData"模型中的"*命名空间* __managerReview__CST"字段，单击"确定"，返回设计页面。 图68选择*命名空间* __managerReview__CST字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340817114.png "点击放大") 13. 设置总结。 1. 同样，复制"审核信息"容器，将容器中标题组件的"标题内容"设置为"总结"。 图69设置标题内容为总结 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340819722.png "点击放大") 2. 从"基本组件 \> 表单"中，拖拽多行输入框组件到**表单** 中。 图70添加多行输入框组件到表单中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340694776.png "点击放大") 3. 在"基本属性"中，设置"标签"为"年度总结"，设置"占位符"为"请输入年度总结"。 图71设置多行输入框组件的标签和占位符 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374817633.png) 4. 在表"单校验"中，开启"必填"，将组件设置为必填。 图72开启必填 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340701032.png) 5. 在"数据绑定 \> 值绑定"中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374819769.png)，进入模型选择页面。 6. 选择"formData"模型中的"*命名空间* __employeeSelfAssessment__CST"字段，单击"确定"，返回设计页面。 图73选择*命名空间* __employeeSelfAssessment__CST字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340862596.png "点击放大") 7. 单击"属性值绑定"后的"+"，属性选择"只读"，再单击模型字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374821557.png)，进入模型选择页面。 图74单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340864268.png) 8. 选中"component"模型中的"disabled"字段，单击"确定"，返回设计页面。 图75选中disabled字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374823661.png "点击放大") 14. 设置提交按钮。 1. 从"基本组件 \> 布局"中，拖拽"容器"组件拖拽到**表单** 中。 图76添加容器组件到表单中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340936888.png "点击放大") 2. 在"基本属性"中，设置"水平对齐方式"为"中"。 图77设置水平对齐方式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002375014713.png) 3. 从"基本组件 \> 布局"中，拖拽"容器"组件拖拽到**表单** 中。 图78添加按钮组件到容器中 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374934865.png "点击放大") 4. 选中按钮组件，设置"显示名称"为"提交"，"大小"选择"默认"。 图79设置按钮基本属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002341096640.png) 5. 在"数据绑定 \> 属性值绑定"中，单击"+"，属性选择"禁用"，单击模型字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002340936892.png)。 图80单击设置图标 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002375014717.png) 6. 选择"component"模型中的"disabled"，单击"确定"，返回设计页面。 图81选中disabled字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002374934869.png "点击放大") 7. 选中按钮组件，在"事件"页签，单击"点击"后的"+"，进入添加动作页面。 8. 在自定义动作代码区域中，输入如下示例代码，单击"创建"。 ``` 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* "为[步骤三：添加绩效对象](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_bestpractice_0066.html)中添加的对象字段，"*命名空间__performanceManagement*"为后续步骤中创建的工作流的名称。 15. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000002341096636.png)，保存标准页面。