# 开发页面 #### 背景信息 在开发高级页面过程中，可以使用预置的组件，快速构建页面；也可以自定义组件构建页面。 开发自定义组件时，可以根据组件功能下载组件模板进行开发。 | **组件模板名称** | **功能** | |:---|:---| | widgetVueTemplate | 当自定义组件需要使用Vue库时，请选用该模板。 | | widgetPropertyTemplate | 当自定义组件需要通过自定义属性栏配置属性时，请选用该模板。 | | widgetActionTemplate | 自定义组件需要添加动作属性时，请选用该模板。 | | widgetEventTemplate | 当自定义组件需要添加事件属性时，请选用该模板。 | | widgetBridgeTemplate | 当自定义组件需要通过桥接器调用后台数据时，请选用该模板。 | | widgetPageMacroTemplate | 当需要使用页面宏来存储变量时，请选用该模板。 | #### 开发自定义组件 1. 下载系统预置的组件模板。 1. 在左侧导航栏中，单击![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565184225.png)，选择"高级页面 \> 组件模板"。 2. 根据需求选择模板（例如，widgetVueTemplate），在组件模板详情页中单击"下载"按钮，在"下载组件模板"弹窗中输入组件名称（例如：shiftManagement），单击"保存"按钮即可。 图1选择模板 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384469.png "点击放大") 图2下载组件模板 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514104678.png "点击放大") 2. 初识组件文件结构。 将下载到本地的组件包进行解压，使用您熟悉的开发工具进行开发。本章节以下载的shiftManagement组件为例，介绍组件包的文件结构以及各文件的功能。 表1组件文件结构 | **文件名** | **文件说明** | |:---|:---| | shiftManagement.js | 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见[高级页面组件中预置的API](https://support.huaweicloud.com/api-astrozero/astrozero_api_00102.html#section0)。 | | shiftManagement.editor.js | 组件属性定义文件，负责组件在编辑状态时，需要渲染的界面和逻辑。"\*.editor.js"只在组件编辑状态被加载，主要包含： - propertiesConfig：主要负责组件配置页面中，右侧的属性配置逻辑。 - create方法仅在组件首次被创建时，调用一次。 | | shiftManagement.css | 组件的样式文件，在该文件中编写组件的CSS样式。 | | shiftManagement.ftl | 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 | | packageinfo.json | 组件的元数据描述文件，定义了如下内容。 - widegtApi name：组件的名称。 - widgetDescription：组件的描述信息。 - authorName: ：组件的作者信息。 - localFileBasePath：组件本地调测路径。 - i18n：指定组件的国际化资源文件（本例模板中未体现）。 - requires：依赖的库名称和版本号。 - width：在绝对布局高级页面中添加该组件时的默认宽度，单位为px，不填写默认为200px（本例模板中未体现）。 - height：在绝对布局高级页面中添加该组件时的默认高度，单位为px，不填写默认为200px（本例模板中未体现）。 | | messages-zh/messages-en.json | 组件的国际化资源文件，用于配置多语言（本例模板中未体现）。 | 3. 开发组件。 开发后的组件示例包。 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565264573.png) 主要文件说明： - 在shiftManagement组件的shiftManagement.ftl中，实现DOM结构。 页面标题和搜索区域示例： ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514104686.png "点击放大") - 在shiftManagement组件的shiftManagement.js的render函数下，修改Vue实例。 ``` thisObj.vm = new Vue({ el: $("#shiftManagement", elem)[0], i18n: i18n, data: { shiftData: [], //班次列表数据 multipleSelection: [], //多选选中的内容 recListPageInfo: {// 分页信息 currentPage: 0, pageSize: 15, totalCount: 0 }, searchName: '', //查询条件 dialogFormVisible: false, //控制弹框显示与否 importDialogFormVisible: false, searchForm: { shiftName: "", shiftType: "", shiftCategory: "" },//搜索条件表单 addForm: { shiftName: "", shiftType: "", shiftStartTime: "", shiftEndTime: "", isRest: "", remark: "", repeatLaw: "", shiftCategory: "", period: "", workDay: "" },//新建编辑表单 selectWorkDayList: [], // 设置只能选择当前日期及之后的日期 pickerOptions: { disabledDate(time) { //如果没有后面的-8.64e7就是不可以选择今天的 return time.getTime() < Date.now() - 8.64e7; } }, rules: {//表单校验规则 shiftName: [ { required: true, message: '请输入班次名称', trigger: 'blur' } ], shiftType: [ { required: true, message: '请选择班次类型', trigger: 'blur' } ], shiftStartTime: [ { required: true, message: '请选择上班时间', trigger: 'blur' } ], shiftEndTime: [ { required: true, message: '请选择下班时间', trigger: 'blur' } ], repeatLaw: [ { required: true, message: '请选择重复规律', trigger: 'blur' } ], }, formLabelWidth: '120px', formLabelWidth1: '80px', baseUrl: widgetBasePath, rowId: "", selectRowIdList: [], //选中的rowId集合 disabled: false, //控制输入框是否可用 title: "", //弹窗标题 shiftTypes: [],//班次类型下拉列表 shiftCategorys: [],//所属班系下拉列表 operType: "", activeNames: ['1', '2'], isRestList: [ { "label": "是", "value": "是" }, { "label": "否", "value": "否" } ], importVisible: false, fileList: [], //文件列表 baseUrl: widgetBasePath, autoDeleteFile: false, importLoading: false, fileContentArr: [], //文件解析后的内容 isLoading: false, dayList: [ { "label": "1", "value": "1" }, { "label": "2", "value": "2" }, { "label": "3", "value": "3" }, { "label": "4", "value": "4" }, { "label": "5", "value": "5" }, { "label": "6", "value": "6" }, { "label": "7", "value": "7" }, { "label": "8", "value": "8" }, { "label": "9", "value": "9" }, { "label": "10", "value": "10" }, { "label": "11", "value": "11" }, { "label": "12", "value": "12" }, { "label": "13", "value": "13" }, { "label": "14", "value": "14" }, { "label": "15", "value": "15" }, { "label": "16", "value": "16" }, { "label": "17", "value": "17" }, { "label": "18", "value": "18" }, { "label": "19", "value": "19" }, { "label": "20", "value": "20" }, { "label": "21", "value": "21" }, { "label": "22", "value": "22" }, { "label": "23", "value": "23" }, { "label": "24", "value": "24" }, { "label": "25", "value": "25" }, { "label": "26", "value": "26" }, { "label": "27", "value": "27" }, { "label": "28", "value": "28" }, { "label": "29", "value": "29" }, { "label": "30", "value": "30" }, { "label": "31", "value": "31" }, ], workDate: "" //系统参数获取的工作日 }, async created() { this.dayList.forEach(item => { item.ischecked = false; }); this.queryOptions(); this.queryShiftInfo(this.searchForm, this.recListPageInfo.pageSize); await this.getSysParameter(["ISDP__workDate"]) }, methods: { /** * 编辑 */ handleEdit: function (index, row) { this.openDialog("modify", row); }, /** * 删除 */ handleDelete: function (index, row) { let _this = this; if (!row && _this.selectRowIdList.length == 0) { _this.$message({ type: 'warning', message: '请选择至少一条数据后再删除!' }); return false; } else { _this.$confirm('此操作将删除该记录, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let params = { "idlist": row ? [row.id] : _this.selectRowIdList } isdpPlusUtile.sendReqest("/service/ISDP__IntelligentSchedulingModel/1.0.1/batchDelShiftInfo", params, function (resp) { if (resp.resCode == "0") { _this.$message({ type: 'success', message: '删除成功!' }); _this.selectRowIdList = []; _this.queryShiftInfo(_this.searchForm, _this.recListPageInfo.pageSize); } else { _this.$message.error('请求失败，请联系管理员'); } }, function (err) { let msg = error.response.resMsg ? error.response.resMsg : '删除失败，请联系管理员' _this.$message.error(msg) }); }).catch(() => { _this.$message({ type: 'info', message: '已取消删除' }); }); } }, ...... ...... ``` - 在shiftManagement组件的shiftManagement.css中，实现CSS样式。 ``` #shiftManagement { background-color: #ffffff; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular; height: 100%; } #page1 { background-color: #f5f6f7; } .header { margin: 24px; } .ribbon { margin: 16px 24px; display: flex; flex-direction: column; align-items: center; width: 100%; } .oper-box { display: flex; flex-direction: row; align-items: center; } ...... ...... ``` 4. 定义组件依赖库。 本节开发的示例组件shiftManagement依赖Vue、VueI18n和Element库，所依赖的Vue库已在之前选择的组件模板"widgetVueTemplate"中定义，这里只需要在shiftManagement组件包的packageinfo.json文件中定义所依赖的VueI18n和Element库即可。 1. 在左侧导航栏中，单击![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384461.png)，选择"高级页面 \> 库"。 2. 搜索库，查看库ID和版本号信息（以查询Element库为例）。 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565024317.png "点击放大") ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565024329.png "点击放大") 本例中查询的Element库ID为：global_Element，库最新版本号为：101.0.4。 3. 继续查找VueI18n库的库ID和最新版本号。 4. 在shiftManagement组件包的packageinfo.json中，修改requires属性。Vue库已在之前选择的组件模板"widgetVueTemplate"中定义，无需修改。 ``` "requires": [ { "name": "global_Vue", "version": "100.7" }, { "name": "global_VueI18n", "version": "100.7.5" }, { "name": "global_Element", "version": "101.0.4" } ] ``` 5. 上传自定义组件。 1. 将开发好的组件代码压缩到后缀为.zip的压缩文件（shiftManagement.zip）。 2. 选择"高级页面 \> 组件"，单击"提交新组件"。 3. 在提交新组件页面，设置组件基本信息，并上传压缩文件，单击"提交"。 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424238.png "点击放大") #### 创建页面 1. 如[图3]所示，在应用的开发页面，选择存放页面的目录，单击目录对应的![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565264585.png)，选择"高级页面"。 例如，存放在"ScheduleBaseInfo \> Page"目录下。 图3创建高级页面 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565024313.png) 2. 如[图4]所示，在弹出的"添加高级页面"页面，选择"空白"，输入标签和名称，选择布局类型为"流式布局"，单击"添加"。 页面创建完成后，自动进入编辑页面。 图4添加高级页面 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424226.png "点击放大") #### 开发页面 1. 如[图5]所示，选择自定义组件"shiftManagement"，拖入到页面内容区域。 图5选择组件 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565384477.png "点击放大") 2. 单击页面上方保存按钮，保存配置，单击发布，发布页面，最后单击释放锁按钮，退出编辑状态。 ![](https://support.huaweicloud.com/devg-isdp-Intel/public_sys-resources/note_3.0-zh-cn.png) 如果需要再次编辑，需要单击![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514424250.png)，获取锁在进行编辑。 图6保存，发布并释放锁 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001565024321.png "点击放大") #### 预览页面 如[图7]所示，单击页面上方预览按钮，即可看到页面配置效果，如[图8]所示。 图7预览 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001513945098.png "点击放大") 图8预览效果 ![](https://support.huaweicloud.com/devg-isdp-Intel/zh-cn_image_0000001514264278.png "点击放大")