YangHuCost/web/building_saas/standard_interface/index.js

/*
 * @Descripttion: 招投标数据接口
 * @Author: vian
 * @Date: 2020-08-17 15:07:31
 */

/**
 * 用于导出的挂载变量，各地区对外接口需要作覆盖它。
 * 注意：导出脚本必须有一个“entry”方法挂载在“INTERFACE_EXPORT”对象上。 eg: INTERFACE_EXPORT = { entry: () => void }
 * entry方法返回的结果必须为xml的object形式：
 * xml: 
 * <JingJiBiao Xmbh="001">
 *   <ZhaoBiaoXx Zbr="vian">
 *   </ZhaoBiaoXx>
 * </JingJiBiao>
 * entry方法返回的数据结构:
 * {
 *   name: 'JingJiBiao',
 *   attrs: [{ name: 'xmbh', value: '001' }],
 *   children: [
 *      { 
 *        name: 'ZhaoBiaoXx',
 *        attrs: [{ name: 'Zbr', value: 'vian' }],
 *        children: []
 *      }  
 *   ]
 * }
 */
let INTERFACE_EXPORT = {};

// 用于导入的挂载变量
let INTERFACE_IMPORT = {};

const STD_INTERFACE = (() => {
    'use strict';

    // 地区配置，key为地区，value为该地区接口的js文件名。
    // 注意：相同地区的导入导出接口js文件名称应相同。eg: 安徽马鞍山导出：在export目录下：anhui_maanshan.js; 在import目录下：anhui_maanshan.js;
    const config = {
        '安徽@马鞍山': 'anhui_maanshan.js',
    };

    // 根据地区配置，初始化地区选项
    function initExportAreas($parentAreas, $subAreas) {
        const connectedAreas = Object.keys(config);
        const parentMap = {};
        connectedAreas.forEach(connectedArea => {
            const areas = connectedArea.split('@');
            (parentMap[areas[0]] || (parentMap[areas[0]] = [])).push(areas[1]);
        });
        const parentAreasHtml = Object
            .keys(parentMap)
            .reduce((acc, area) => acc += `<option value="${area}">${area}</option>`, '');
        $parentAreas.html(parentAreasHtml);
        const subAreasHtml = parentMap[Object.keys(parentMap)[0]].reduce((acc, area) => acc += `<option value="${area}">${area}</option>`, '');
        $subAreas.html(subAreasHtml);
        // 父级地区变更，子地区选项更新
        $parentAreas.change(function () {
            const curArea = $(this).val();
            const subAreasHtml = parentMap[curArea].reduce((acc, area) => acc += `<option value="${area}">${area}</option>`, '');
            $subAreas.html(subAreasHtml);
        });
    }

    /**
     * 动态加载script
     * 由于后续的接口可能会非常多，一次性加载所有的接口文件完全没必要，而且不可控，很容易导致初次加载速度变慢。
     * 在选定相关地区后，再根据地区对应的script路径，动态加载script
     * 不需要缓存，缓存可能会影响正常操作的性能。而且导入导出时动态获取接口文件的需要的时间，客户是不可感知的。
     * @param {String} path - 需要加载的scipt路径
     * @return {Promise}
     */
    function loadScript(path) {
        return new Promise((resolve, reject) => {
            const scriptID = 'interface-script';
            const body = document.getElementsByTagName('body')[0];
            // 移除原来的
            const orgScript = document.getElementById(scriptID);
            if (orgScript) {
                body.removeChild(orgScript);
            }
            // 增加新的
            const script = document.createElement('script');
            script.src = path;
            script.type = 'text/javascript';
            script.id = scriptID;
            body.appendChild(script);
            script.onload = script.onreadystatechange = function () { // ie、ff触发事件不同，都写上
                if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
                    script.onload = script.onreadystatechange = null;
                    resolve();
                }
            };
            script.onerror = function () {
                reject('script加载失败。');
            };
        });
    }

    const ScriptType = {
        EXPORT: 'export',
        IMPORT: 'import',
    };

    let curArea = '';
    /**
     * 根据地区和脚本类型加载脚本
     * @param {String} area - 地区选项 eg: '安徽省@马鞍山'
     * @param {Number} scriptType - 脚本类型
     * @return {Void}
     */
    async function loadScriptByArea(area, scriptType) {
        if (area === curArea) {
            return;
        }
        curArea = area;
        const path = config[area];
        if (!path) {
            throw new Error(`[${area}]不存在有效script配置。`);
        }
        const fullPath = `/web/building_saas/standard_interface/${scriptType}/${path}`;
        await loadScript(fullPath);
    }

    return {
        initExportAreas,
        ScriptType,
        loadScriptByArea,
    };

})();