您可以通過在動作面板中對函數進行調用,即可快速實現對應功能。本文介紹頁面和頁面框架的動作面板中的內置函數。

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;
}