您可以通過在動作面板中對函數進行調用,即可快速實現對應功能。本文介紹頁面和頁面框架的動作面板中的內置函數。
1、調用后端服務方法
說明
- 函數在傳遞參數時,如果傳送的是頁面設計器內定義的變量,則需要使用內置函數。
- API及函數參數具體使用方法,請參見Fusion官方文檔。
/**
* 調用后端服務方法
* @param 后端服務方法編碼
* @param 服務方法傳參
*/
this.my.invokeFunction("completeWorkflowUserTask", {})
2、快捷調用警告框
/**
* 快捷調用警告對話框
* @param 同Fusion組件的config配置
*/
this.my.alert({
content: "",
onOk: () => { },
});
3、快捷調用確認對話框
/**
* 快捷調用確認對話框
* @param 同Fusion組件的config配置
*/
this.my.confirm({
content: "",
onOk: () => { },
onCancel: () => { },
});
4、快捷調用消息彈窗
/**
* 快捷調用消息彈窗
* @param 同Fusion組件的config配置
*/
this.my.showMessage({
type: 'error',
title: '錯誤',
content: '請聯系相關人員反饋!',
duration: 0, // 永遠存在
hasMask: true
});
5、關閉showMessage產生的彈窗
/**
* 關閉showMessage產生的彈窗
*/
this.my.hideMessage();
6、快捷調用成功消息彈窗
/**
* 快捷調用成功消息彈窗
* @param 同Fusion組件的config配置
*/
this.my.success("demo");
7、快捷調用錯誤消息彈窗
/**
* 快捷調用錯誤消息彈窗
* @param 同Fusion組件的config配置
*/
this.my.error("demo");
8、快捷調用加載消息彈窗
/**
* 快捷調用加載消息彈窗
* @param 同Fusion組件的config配置
*/
this.my.loading("demo");
9、打開外部鏈接
/**
* 打開外部鏈接
* @param 外部鏈接地址
* @param 外部鏈接地址的queryString
*/
this.my.router.openLink("http://www.baidu.com/a=hello", { a: "world", b: "hello" } "self");
10、打開內部頁面
/**
* 打開內部頁面
* @param 內部頁面地址
* @param 內部頁面參數
*/
@Deprecated
this.my.router.push("anyUrl", {});
11、push方法的封裝版本,打開appPage內部頁面
/**
* push方法的封裝版本,打開appPage內部頁面
* @param pageId
* @param 內部頁面參數
*/
this.my.router.openPage("pageId", {});
12、push方法的封裝版本,打開simplePage內部頁面
/**
* push方法的封裝版本,打開simplePage內部頁面
* @param pageId
* @param 內部頁面參數
*/
this.my.router.openSimplePage("pageId", {});
13、獲取當前的URL對象
/**
* 獲取當前的Url對象
*/
this.my.router.getLocationUri();
14、getLocationUrl的封裝版本,直接獲取當前查詢字符串的Map
/**
* getLocationUri的封裝版本,直接獲取當前查詢字符串的Map
*/
this.my.router.getUrlQuery();
15、回退到上一個內部頁面,等同于點擊瀏覽器左上角退后按鈕
/**
* 回退到上一個內部頁面,等同于點擊瀏覽器左上角退后按鈕
*/
this.my.router.goBack();
16、獲取變量
/**
* 獲取變量
* @param 變量名
*/
this.my.getVariableValue("varName");
17、設置變量
/**
* 設置變量
* @param 變量名
* @param 變量值
*/
this.my.setVariableValue("varName", 1234);
18、手動設置導航菜單
說明 setNavList的優先級高于自動加載導航菜單,會對其進行覆蓋。
/**
* 手動設置導航菜單,注意setNavList的優先級高于自動加載導航菜單,會對其進行覆蓋
* @param 導航菜單項,數據結構同yapi的獲取導航接口navList返回值
*/
this.my.setNavList([{navType: "menu", menuType: "appPage", targetName: "pageId", displayName: "頁面名", icon: "icon-page", children: [], key: "asdasdqwdqwd"}])
19、裸調ajax
/**
* 裸調ajax
* @param 請求地址
* @param 請求配置,同Axios Request Config
*/
this.my.request("/lightAppEngine/metadata/navigation/getNavigation/v1", {method: "post", data: {applicationCode: "qing10"}}).then(res=>console.log(res))
20、對request的post封裝
/**
* 對request的post封裝
* @param 請求地址
* @param Request Body
* @param 請求配置,同Axios Request Config
*/
this.my.post(url, data?, config?)
21、對request的get封裝
/**
* 對request的get封裝
* @param 請求地址
* @param Query String
* @param 請求配置,同Axios Request Config
*/
this.my.get(url, params?, config?)
22、表單驗證場景的函數示例
// 針對表單驗證場景
export function validate() {
const p = new Promise((resolve, reject) => {
this.getComponent("表單的唯一標識").validate((errors, values) => {
if (!_.isEmpty(errors)) {
reject(errors)
} else {
resolve(values);
}
})
})
p.then((values) => {
// 校驗成功邏輯
}).catch((errors) => {
// 校驗失敗邏輯
})
return p;
}