SOP/sop-website/website-front/pages/doc/doc.js

layui.config({
    base: '../../assets/lib/layuiext/module/'
}).extend({
    treetable: 'treetable-lay/treetable'
}).use(['element', 'form', 'treetable'], function(){ //加载code模块
    var form = layui.form;
    var treetable = layui.treetable;
    var $ = layui.jquery;

    // key:module
    var docItemStore = {};
    
    function initDocModules() {
        $.getJSON(SopConfig.url + '/doc/getDocBaseInfo', function (baseInfo) {
            var html = [];
            var docInfoList = baseInfo.docInfoList;
            for (var i = 0; i < docInfoList.length; i++) {
                var docInfo = docInfoList[i];
                var selected = i === 0 ? 'selected="selected"' : '';
                var title = docInfo.title;
                html.push('<option value="' + title + '" ' + selected + '>' + title + '</option>');
            }
            $('#moduleList').html(html.join(''));
            $('.url-prod').text(baseInfo.urlProd);
            form.render('select');

            if (docInfoList && docInfoList.length > 0) {
                selectDocInfo(docInfoList[0].title);
            }
        })
    }
    
    function selectDocInfo(title) {
        $.getJSON(SopConfig.url + '/doc/docinfo/' + title, function (docInfo) {
            var moduleList = docInfo.docModuleList;
            var html = [];
            var firstItem;
            for (var j = 0; j < moduleList.length; j++) {
                var module = moduleList[j];
                var docItems = module.docItems;
                html.push('<li><h2>' + module.module + '</h2></li>');
                for (var i = 0; i < docItems.length; i++) {
                    var docItem = docItems[i];
                    var first = j == 0 && j == 0;
                    if (first) {
                        firstItem = docItem;
                    }
                    docItemStore[docItem.nameVersion] = docItem;
                    /*
                    <li class="site-tree-noicon layui-this">
                    <a href="/">
                        <cite>统一收单交易退款查询</cite>
                    </a>
                </li>
                     */
                    html.push('<li class="site-tree-noicon" nameversion="'+docItem.nameVersion+'">');
                    html.push('<a href="#"><cite>'+docItem.summary+'</cite></a>')
                }
            }

            $('#docItemTree').html(html.join(''));
            if (firstItem) {
                selectDocItem(firstItem.nameVersion);
            }
        })
    }

    function initEvent() {
        form.on('select(moduleListFilter)', function (data) {
            selectDocInfo(data.value);
        })
        $('#docItemTree').on('click', 'li', function () {
            var $li = $(this);
            selectDocItem($li.attr('nameversion'));
        })
    }

    function selectDocItem(nameVersion) {
        var docItem = docItemStore[nameVersion];
        $('.sop-name').text(docItem.name);
        $('.sop-version').text(docItem.version);
        $('.sop-summary').text(docItem.summary);
        $('.sop-description').text(docItem.description || docItem.summary);

        createRequestParameter(docItem);
        createResponseParameter(docItem);
        createResponseCode(docItem);

        var $li = $('#docItemTree').find('li[nameversion="'+nameVersion+'"]');
        $li.addClass('layui-this').siblings().removeClass('layui-this');
    }

    function createRequestParameter(docItem) {
        var data = buildTreeData(docItem.requestParameters);
        createTreeTable('treeTableReq', data);
    }

    function createResponseParameter(docItem) {
        var data = buildTreeData(docItem.responseParameters);
        createTreeTable('treeTableResp', data);
    }

    function buildTreeData(parameters, parentId) {
        var data = [];
        parentId = parentId || 0;
        for (var i = 0; i < parameters.length; i++) {
            var parameter = parameters[i];
            parameter.id = parentId * 100 + (i + 1);
            parameter.parentId = parentId;
            data.push(parameter);
            var refs = parameter.refs;
            if (refs && refs.length > 0) {
                var childData = buildTreeData(refs, parameter.id);
                data = data.concat(childData);
            }
        }
        return data;
    }

    function createTreeTable(id, data) {
        var el = '#' + id;
        $(el).text('');
        treetable.render({
            elem: el,
            treeColIndex: 0,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'parentId',
            treeDefaultClose: false,
            treeLinkage: false,
            data: data,
            page: false,
            cols: [[
                {field: 'name', title: '参数'}
                ,{field: 'type', title: '类型', width: 80}
                ,{field: 'required', title: '是否必填', width: 100, templet:function (row) {
                        return row.required ? '<span style="color: red;">是</span>' : '否';
                    }}
                ,{field: 'maxLength', title: '最大长度', width: 100}
                ,{field: 'description', title: '描述', width: 200}
                ,{field: 'paramExample', title: '示例值', width: 200}
            ]]
        });
    }

    function createResponseCode(docItem) {
        var responseParameters = docItem.responseParameters;
        var method = docItem.name.replace(/\./g, '_');
        var result = [];
        for (var i = 0; i < responseParameters.length; i++) {
            var responseParameter = responseParameters[i];
            result.push('\"'+responseParameter.name+'\": \"' + responseParameter.example + '\"')
        }
        var bizResult = result.join(",");
        var json = '{\n' +
            '    "'+method+'_response": {\n' +
            '        "code": "10000",\n' +
            '        "msg": "Success",\n' +
            bizResult +
            '    },\n' +
            '    "sign": "xxxxxx"\n' +
            '}';
        json = formatJson(json);
        $('#responseExampleJson').text(json);

        var errorJson = '{\n' +
            '    "'+method+'_response": {\n' +
            '        "code": "20000",\n' +
            '        "msg": "Service is temporarily unavailable",\n' +
            '        "sub_code": "isp.unknow-error",\n' +
            '        "sub_msg": "服务暂不可用"\n' +
            '    },\n' +
            '    "sign": "xxxxxxx"\n' +
            '}';
        errorJson = formatJson(errorJson);
        $('#responseErrorJson').text(errorJson);
    }

    initDocModules();
    initEvent();
});