egg-jianghu/app/view/common/uiAction.html

egg-jianghu

<!--uiAction.html start-->
<!-- 注入 ui action 数据到页面中 -->
<script>
  const excudeTimeout = async (timeout) => {
    await new Promise((resolve, reject) => {
      setTimeout(()=> {
        resolve();
      }, timeout)
    });
  }
  (function () {
  
    const uiActionList = <$ uiActionList | dump | safe $>;
    const uiActionMap = {};
    uiActionList.forEach(({uiActionId, uiActionConfig}) => {
      const {before = [], main = [],  after = []} = uiActionConfig;
      uiActionMap[uiActionId] = [
        ...before,
        ...main,
        ...after,
      ]
    });
  
    window.uiActionMap = uiActionMap;
    window.$vueComponent = {};
    window.vueComputed = {}
    window.vueData = {};
  
    window.registerData = (data, computed) => {
      Object.assign(window.vueData, data)
      Object.assign(window.vueComputed, computed)
    }

    const urlPathList = window.location.pathname.split('/');
    const currentPageId = urlPathList && urlPathList[urlPathList.length - 1];

    window.jianghuUiActionMixins = {
      beforeCreate() {
        if(this.$options.vueComponent) {
          window.$vueComponent[this.$options.vueComponent] = this;
        }
        Object.assign(window.vueData, this.$options.jhData)
      },
      methods: {
        async doUiAction(uiActionId, uiActionParamObj) {
          const actions = window.uiActionMap[uiActionId];
          if (!actions) {
            console.error('doUiAction 异常; actionId找不到', { pageId: currentPageId, uiActionId })
          }
          const checkVueComponentFunctionExist = ({ vueComponent, vueComponentName, functionName }) => {
            if (!vueComponent) {
              console.error('doUiAction 异常; vueComponent找不到', { pageId: currentPageId, uiActionId, vueComponent: vueComponentName, function: functionName })
              throw new Error('方法不存在');
            }
            if (typeof(vueComponent[functionName]) !== 'function') {
              console.error(`doUiAction 异常; ${vueComponentName}.${functionName}不是可执行方法`, { pageId: currentPageId, uiActionId, vueComponent: vueComponentName, function: functionName })
              throw new Error('${vueComponent}.${functionName}不是可执行方法');
            }
          }
          for (let i = 0; i < actions.length; i++) {
            const action = actions[i];
            const param = { ...(action.functionParamObj || {}), ...(uiActionParamObj || {}) };
            let res = null;
              if (action.vueComponent) {
                for (let index = 0; index < 15; index++) {
                  if (window.$vueComponent[action.vueComponent]) {
                    checkVueComponentFunctionExist({ vueComponent: window.$vueComponent[action.vueComponent], vueComponentName: action.vueComponent, functionName: action.function });
                    res = await window.$vueComponent[action.vueComponent][action.function](param);
                    break;
                  }
                  await excudeTimeout(150);
                  if (index === 14) {
                    checkVueComponentFunctionExist({ vueComponent: window.$vueComponent[action.vueComponent], vueComponentName: action.vueComponent, functionName: action.function });
                    res = await window.$vueComponent[action.vueComponent][action.function](param);
                  }
                }
              } else {
                checkVueComponentFunctionExist({ vueComponent: this, vueComponentName: 'this', functionName: action.function });
                res = await this[action.function](param);
              }
              // 如果返回 false 则不往下执行 action
              // 例如: confirmDailog false
              if (res === false) {
                return;
              }
          }
        },
      }
    };
  
  })();
  </script>
  <!--uiAction.html end-->