更新时间：2023-04-07 GMT+08:00
开发页面
背景信息
在开发高级页面过程中，可以使用预置的组件，快速构建页面；也可以自定义组件构建页面。
开发自定义组件时，可以根据组件功能下载组件模板进行开发。
|
组件模板名称 |
功能 |
|---|---|
|
widgetVueTemplate |
当自定义组件需要使用Vue库时，请选用该模板。 |
|
widgetPropertyTemplate |
当自定义组件需要通过自定义属性栏配置属性时，请选用该模板。 |
|
widgetActionTemplate |
自定义组件需要添加动作属性时，请选用该模板。 |
|
widgetEventTemplate |
当自定义组件需要添加事件属性时，请选用该模板。 |
|
widgetBridgeTemplate |
当自定义组件需要通过桥接器调用后台数据时，请选用该模板。 |
|
widgetPageMacroTemplate |
当需要使用页面宏来存储变量时，请选用该模板。 |
开发自定义组件
- 下载系统预置的组件模板。
- 在左侧导航栏中，单击
，选择“高级页面 > 组件模板”。 - 根据需求选择模板（例如，widgetVueTemplate），在组件模板详情页中单击“下载”按钮，在“下载组件模板”弹窗中输入组件名称（例如：shiftManagement），单击“保存”按钮即可。
图1 选择模板
图2 下载组件模板
- 在左侧导航栏中，单击
- 初识组件文件结构。
将下载到本地的组件包进行解压，使用您熟悉的开发工具进行开发。本章节以下载的shiftManagement组件为例，介绍组件包的文件结构以及各文件的功能。
表1 组件文件结构 文件名
文件说明
shiftManagement.js
组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见高级页面组件中预置的API。
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
组件的国际化资源文件，用于配置多语言（本例模板中未体现）。
- 开发组件。
开发后的组件示例包。
主要文件说明：
- 在shiftManagement组件的shiftManagement.ftl中，实现DOM结构。
页面标题和搜索区域示例：
- 在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; } ...... ......
- 在shiftManagement组件的shiftManagement.ftl中，实现DOM结构。
- 定义组件依赖库。
本节开发的示例组件shiftManagement依赖Vue、VueI18n和Element库，所依赖的Vue库已在之前选择的组件模板“widgetVueTemplate”中定义，这里只需要在shiftManagement组件包的packageinfo.json文件中定义所依赖的VueI18n和Element库即可。
- 在左侧导航栏中，单击
，选择“高级页面 > 库”。 - 搜索库，查看库ID和版本号信息（以查询Element库为例）。
本例中查询的Element库ID为：global_Element，库最新版本号为：101.0.4。
- 继续查找VueI18n库的库ID和最新版本号。
- 在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所示，选择自定义组件“shiftManagement”，拖入到页面内容区域。
- 单击页面上方保存按钮，保存配置，单击发布，发布页面，最后单击释放锁按钮，退出编辑状态。
如果需要再次编辑，需要单击
，获取锁在进行编辑。图6 保存，发布并释放锁
父主题： 开发实例
