@ajaxjs/ui 1.2.2 → 1.2.4

package/dist/api-selector/api-list.ts

@@ -0,0 +1,135 @@
+import dataservice from './api-list-dataservice';
+import swagger from './api-list-swagger';
+
+export default {
+    props: {
+        apiRoot: { type: String, required: true }  // 接口前缀
+    },
+    mixins: [dataservice, swagger],
+    data() {
+        return {
+            API: this.apiRoot + '/admin',
+            showSelector: false,
+            selectedTab: 'dataservice',
+            treeAllApi: [],
+            selectedApi: { // 已加入的 api。treeAllApi 包含 dom 的信息，不能用来持久化
+                DataService: {},
+                Swagger: {}
+            },
+            contextSelectdNode: {// 右击时选中的节点，可删除、测试等 
+                root: {}, node: {}, data: {}
+            }
+        }
+    },
+    mounted(): void {
+        this.getDataService();
+        this.getSwaggerData();
+    },
+    methods: {
+        /**
+         * 自动填充的过滤
+         * 
+         * @param value 
+         * @param option 
+         * @returns 
+         */
+        auotCompleteFilter(value: string, option: string): boolean {
+            return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
+        },
+
+        /**
+         * 选好了，加入到列表中
+         */
+        selectHandler(): void {
+            let arr: any[];
+            // if ('dataservice' == this.selectedTab) {
+            arr = this.$refs.treeDataservice.getCheckedNodes();
+
+            if (arr && arr.length) {
+                arr.forEach((treeNode: any) => {
+                    if (treeNode.method && treeNode.title) {
+                        let key: string = treeNode.method + '_' + treeNode.title;
+
+                        if (!this.selectedApi.DataService[key]) { // 防止重复加入相同的 
+                            this.treeAllApi.push(this.renderDataServiceNode(treeNode.title, treeNode.method, treeNode.cfg, true));
+                            this.selectedApi.DataService[key] = true;
+                        } else {
+                            // this.$Message.error(`已加入相同的 ${treeNode.title} API`);
+                        }
+                    }
+                });
+            }
+            // } else if ('swagger' == this.selectedTab) {
+            arr = this.$refs.treeSwagger.getCheckedNodes();
+
+            if (arr && arr.length) {
+                arr.forEach((treeNode: any) => {
+                    if (treeNode.method && treeNode.title) {
+                        let key: string = treeNode.method + '_' + treeNode.title;
+
+                        if (!this.selectedApi.Swagger[key]) { // 防止重复加入相同的 
+                            this.treeAllApi.push(this.renderSwaggerNode(treeNode.title, treeNode.method, true));
+                            this.selectedApi.Swagger[key] = true;
+                        } else {
+                            /*                   if (treeNode.title == '请求参数')
+                                                  debugger;
+                                              this.$Message.error(`已加入相同的 ${treeNode.title} API`); */
+                        }
+                    }
+                });
+            }
+            // }
+
+            this.sendSelected();
+        },
+
+        /**
+         * watch 无效，于是写到了这里
+         * 
+         * @private
+         */
+        sendSelected(): void {
+            let arr: ApiListSelectedReuslt[] = [];
+
+            for (let key in this.selectedApi.DataService) {
+                let _arr: string[] = key.split('_');
+                arr.push({ method: _arr[0], url: key.replace(_arr[0] + '_', '') });
+            }
+
+            this.$emit('apiselected', arr);
+        },
+
+        /**
+         * 删除树节点
+         */
+        handleContextMenuDelete(): void {
+            let { root, node } = this.contextSelectdNode;
+            console.log(node)
+            const index = root.indexOf(node);
+            this.treeAllApi.splice(index, 1);
+
+            let key: string = node.node.method + '_' + node.node.title;
+            if (this.selectedApi.Swagger[key])
+                delete this.selectedApi.Swagger[key];
+
+            if (this.selectedApi.DataService[key])
+                delete this.selectedApi.DataService[key];
+        },
+
+        /**
+         * 测试 API
+         */
+        handleContextMenuTest(): void {
+            alert('TODO')
+        }
+    },
+    watch: {
+        selectedApi: {
+            deep: false,
+            handler(v: any): void {
+                alert(this.$emit)
+                this.$emit('apiselected', 888);
+            }
+        }
+    }
+};

package/dist/api-selector/index.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="api-selector" style="margin:0 auto;min-width:245px;">
+      <Tabs value="name1">
+        <TabPane label="接口数据" name="name1">
+          <header>
+            <div class="add" title="选择 API" @click="showSelector=true">+</div><span>数据源</span>
+          </header>
+          <Tree ref="treeAllApi" :data="treeAllApi" class="apiTree" empty-text="暂无选择 API，请点击上方 “+” 添加 API "></Tree>
+        </TabPane>
+        <TabPane label="静态数据" name="name2">静态数据 TODO</TabPane>
+      </Tabs>
+
+      <!-- 右键菜单 -->
+      <Dropdown transfer ref="contentFileMenu" style="display: none;" trigger="click">
+        <DropdownMenu slot="list" ref="pp">
+          <DropdownItem @click.native="handleContextMenuTest">测试</DropdownItem>
+          <Divider style="margin:0" />
+          <DropdownItem @click.native="handleContextMenuDelete" style="color: #ed4014">移除</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+
+      <Modal v-model="showSelector" title="选择 API" ok-text="保存选择" @on-ok="selectHandler" cancel-text="关闭" width="470">
+        <Tabs v-model="selectedTab" :animated="false">
+          <TabPane label="数据服务" name="dataservice">
+            <AutoComplete v-model="SwaggerFilter.keyword" :data="SwaggerFilter.data" :filter-method="auotCompleteFilter" @on-select="filterHandler" icon="ios-search" placeholder="请输入 API 之 URL"></AutoComplete>
+            <Tree ref="treeDataservice" :data="DataServiceTreeData" :load-data="loadTablesCfg" show-checkbox class="apiTree"></Tree>
+          </TabPane>
+
+          <TabPane label="Swagger API" name="swagger">
+            <AutoComplete v-model="SwaggerFilter.keyword" :data="SwaggerFilter.data" :filter-method="auotCompleteFilter" @on-select="filterHandler" icon="ios-search" placeholder="请输入 API 之 URL"></AutoComplete>
+            <Tree ref="treeSwagger" :data="SwaggerTreeData" show-checkbox class="apiTree" @on-select-change="treeSwaggerHandler"></Tree>
+          </TabPane>
+        </Tabs>
+      </Modal>
+    </div>
+</template>
+<script lang="ts" src="./api-list.ts"></script>
+
+<style lang="less">
+.api-selector {
+    .add:hover {
+        color: #2d8cf0;
+    }
+    header {
+        height: 38px;
+        line-height: 38px;
+        border-bottom: 1px solid lightgray;
+        padding: 0 5px;
+        .add {
+            float: right;
+            font-size: 30px;
+            padding: 0;
+            cursor: pointer;
+        }
+    }
+
+    .ivu-tabs-bar {
+        margin-bottom: 0;
+    }
+
+    .ivu-menu-submenu-title {
+        border-bottom: 1px solid lightgray;
+    }
+
+    .ivu-tree-title {
+        // overflow: hidden;
+        // text-overflow: ellipsis;
+        // white-space: nowrap;
+        // max-width: 200px;
+    }
+    .ivu-tree li ul {
+        padding-left: 8px;
+    }
+}
+
+.http-method {
+    padding: 1px 6px;
+    margin-right: 5px;
+    border-radius: 3px;
+    font-size: 8px;
+
+    &.get {
+        color: #3175fe;
+        border: 1px solid #3175fe;
+    }
+
+    &.post {
+        color: green;
+        border: 1px solid green;
+    }
+    &.put {
+        color: rgb(224, 60, 254);
+        border: 1px solid rgb(224, 60, 254);
+    }
+    &.delete {
+        color: red;
+        border: 1px solid red;
+    }
+}
+
+.apiTree {
+    max-height: 500px;
+    overflow-y: auto;
+    margin-top: 5px;
+}
+
+.api-type {
+    padding: 1px 6px;
+    margin-right: 5px;
+    border-radius: 3px;
+    font-size: 8px;
+    border: 1px solid gray;
+    &.swagger {
+        border-color: #ffe1b3;
+        background-color: #fcffe4;
+        color: #fdc06e;
+    }
+    &.dataservice {
+        padding: 1px 4px;
+        border-color: #dc9ad8;
+        background-color: #fae4f8;
+        color: #dc9ad8;
+    }
+}
+</style>

package/dist/api-selector/test-dataservice.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    title: string;
+    expand: boolean;
+    children: ({
+        title: string;
+        expand: boolean;
+        children: {
+            title: string;
+            render: (h: any, { root, node, data }: {
+                root: any;
+                node: any;
+                data: any;
+            }) => any[];
+        }[];
+    } | {
+        title: string;
+        expand: boolean;
+        children: {
+            title: string;
+        }[];
+    })[];
+}[];
+export default _default;

package/dist/api-selector/test-dataservice.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        title: "parent 1",
+        expand: true,
+        children: [
+            {
+                title: "parent 1-1",
+                expand: true,
+                children: [
+                    {
+                        title: "leaf 1-1-2",
+                        render: (h, { root, node, data }) => {
+                            return [
+                                h("span", { class: "http-method get" }, "GET"),
+                                h("span", data.title),
+                            ];
+                        },
+                    },
+                    {
+                        title: "leaf 1-1-2",
+                        render: (h, { root, node, data }) => {
+                            return [
+                                h("span", { class: "http-method get" }, "GET"),
+                                h("span", data.title),
+                            ];
+                        },
+                    },
+                    {
+                        title: "leaf 1-1-1",
+                        render: (h, { root, node, data }) => {
+                            return [
+                                h("span", { class: "http-method post" }, "POST"),
+                                h("span", data.title),
+                            ];
+                        },
+                    },
+                    {
+                        title: "leaf 1-1-1",
+                        render: (h, { root, node, data }) => {
+                            return [
+                                h("span", { class: "http-method put" }, "PUT"),
+                                h("span", data.title),
+                            ];
+                        },
+                    },
+                    {
+                        title: "leaf 1-1-1",
+                        render: (h, { root, node, data }) => {
+                            return [
+                                h("span", { class: "http-method delete" }, "DELETE"),
+                                h("span", data.title),
+                            ];
+                        },
+                    },
+                ],
+            },
+            {
+                title: "parent 1-2",
+                expand: true,
+                children: [
+                    {
+                        title: "leaf 1-2-1",
+                    },
+                    {
+                        title: "leaf 1-2-1",
+                    },
+                ],
+            },
+        ],
+    },
+];
+//# sourceMappingURL=test-dataservice.js.map

package/dist/api-selector/test-dataservice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-dataservice.js","sourceRoot":"","sources":["../../src/api-selector/test-dataservice.js"],"names":[],"mappings":";;AAAA,kBAAe;IACb;QACE,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,IAAI;QAEZ,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,YAAY;gBACnB,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE;oBACR;wBACE,KAAK,EAAE,YAAY;wBACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;4BAClC,OAAO;gCACL,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC;gCAC9C,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;6BACtB,CAAC;wBACJ,CAAC;qBACF;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;4BAClC,OAAO;gCACL,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC;gCAC9C,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;6BACtB,CAAC;wBACJ,CAAC;qBACF;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;4BAClC,OAAO;gCACL,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,MAAM,CAAC;gCAChD,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;6BACtB,CAAC;wBACJ,CAAC;qBACF;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;4BAClC,OAAO;gCACL,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,KAAK,CAAC;gCAC9C,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;6BACtB,CAAC;wBACJ,CAAC;qBACF;oBACD;wBACE,KAAK,EAAE,YAAY;wBACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE;4BAClC,OAAO;gCACL,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,QAAQ,CAAC;gCACpD,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;6BACtB,CAAC;wBACJ,CAAC;qBACF;iBACF;aACF;YACD;gBACE,KAAK,EAAE,YAAY;gBACnB,MAAM,EAAE,IAAI;gBACZ,QAAQ,EAAE;oBACR;wBACE,KAAK,EAAE,YAAY;qBACpB;oBACD;wBACE,KAAK,EAAE,YAAY;qBACpB;iBACF;aACF;SACF;KACF;CACF,CAAC"}