@ajaxjs/ui 1.2.1 → 1.2.3

package/dist/libs/common.d.ts

@@ -0,0 +1,201 @@
+/**
+ * 后端响应的消息
+ */
+declare interface RepsonseResult {
+    /**
+     * 操作代码
+     */
+    code?: number;
+
+    /**
+     * 操作是否成功
+     */
+    status: boolean;
+
+    /**
+     * 操作说明
+     */
+    message: string;
+
+    /**
+     * 结果，实体，
+     */
+    data: any;
+
+    /**
+     * 进行新建的时候返回的实体 id
+     */
+    newlyId?: number;
+
+    /**
+     * 分页列表的总数
+     */
+    total?: number;
+}
+
+/**
+ * JSON 接口返回的通用
+ */
+type JsonResponse = {
+    /**
+     * 1 = 成功，0 = 失败
+     */
+    status: number;
+
+    /**
+     * 信息
+     */
+    message: string;
+
+    /**
+     * 分页的总数
+     */
+    total?: number;
+
+    /**
+     * 返回数据
+     */
+    data: any;
+};
+
+// 官方 API 还没提供，自己写一个
+interface FileReaderEventTarget extends EventTarget {
+    result: string
+}
+
+interface FileReaderEvent extends Event {
+    target: FileReaderEventTarget;
+    getMessage(): string;
+}
+
+/**
+ * JSON 实体
+ */
+declare type JsonParam = { [key: string]: string | number | boolean | JsonParam | any[] };
+
+/**
+ * key 和 value 都是 string 类型的 JSON 实体
+ */
+declare type StringJsonParam = { [key: string]: string };
+
+/*
+ * 公共类型
+ */
+
+declare type ManagedWidget = {
+};
+
+/**
+ * 按钮事件
+ */
+declare type ButtonEvent = {
+    /**
+     * 按钮文本
+     */
+    name: string;
+
+    /**
+     * JS 事件代码
+     */
+    event: string;
+}
+
+/**
+ * 数据绑定配置
+ */
+declare type DataBinding = {
+    /**
+     * 请求方法
+     */
+    httpMethod?: string;
+
+    /**
+     * 请求地址
+     */
+    url: string,
+
+    /**
+     * 固定参数
+     */
+    baseParams: string,
+
+    /**
+     * 动态获取参数的函数
+     */
+    beforeRequest: string;
+};
+
+/**
+ * 解析过后的请求对象
+ */
+type ManagedRequest = {
+    /**
+     * 请求地址
+     */
+    url: string;
+
+    /**
+     * 请求参数
+     */
+    params: any;
+};
+
+/**
+ * 模型与表单共有的字段
+ */
+declare type BaseModel = {
+    /**
+    * 字段名、Key
+    */
+    name: string;
+
+    /**
+     * 名称，UI 外显名称
+     */
+    label: string;
+
+    /**
+     * 说明
+     */
+    comment?: string;
+
+    /**
+    * 是否必填
+    */
+    isNull?: boolean;
+
+    /**
+     * 数据长度/最大长度
+     */
+    length?: number;
+
+    /**
+     * 其他扩展属性
+     */
+    ext_attribs?: any;
+};
+
+/**
+ * 模型
+ */
+declare type Model = BaseModel & {
+    /**
+     * 数据类型
+     */
+    dataType?: string;
+
+    /**
+     * 是否主键
+     */
+    isKey?: boolean;
+
+    /**
+     *默认值
+    */
+    defaultValue?: string | number | boolean | null;
+
+    /**
+     * 是否跨表字段
+     */
+    isCrossTable?: boolean;
+};

package/dist/libs/entity.d.ts

@@ -0,0 +1,26 @@
+type Entity = {
+    /**
+     * 类型
+     */
+    type: string;
+    /**
+     * 数据长度
+     */
+    width: number;
+    /**
+     * 是否允许为空
+     */
+    isNotNull: boolean;
+    /**
+     * 默认值
+     */
+    defaultValue: any;
+    /**
+     * 校验规则
+     */
+    regexp: RegExp;
+    /**
+     * 注释说明
+     */
+    comment: string;
+};

package/dist/libs/entity.js

@@ -0,0 +1 @@
+//# sourceMappingURL=entity.js.map

package/dist/libs/entity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity.js","sourceRoot":"","sources":["../../src/libs/entity.ts"],"names":[],"mappings":""}

package/dist/libs/entity.ts

@@ -0,0 +1,31 @@
+type Entity = {
+    /**
+     * 类型
+     */
+    type: string;
+
+    /**
+     * 数据长度
+     */
+    width: number;
+
+    /**
+     * 是否允许为空
+     */
+    isNotNull: boolean;
+
+    /**
+     * 默认值
+     */
+    defaultValue: any;
+
+    /**
+     * 校验规则
+     */
+    regexp: RegExp;
+
+    /**
+     * 注释说明
+     */
+    comment: string;
+};

package/dist/libs/iview-widgets.d.ts

@@ -0,0 +1,59 @@
+/**
+ * iView Table 配置字段， data 字段
+ */
+type TableListConfig = {
+    /**
+     * 列定义
+     */
+    columns: any[];
+    /**
+     * 表格数据
+     */
+    data: any[];
+    /**
+     * 记录总数
+     */
+    total: number;
+    /**
+     * MySQL 分页方式 start
+     */
+    start?: number;
+    /**
+     * MySQL 分页方式 limit
+     */
+    limit?: number;
+    /**
+     * 页码，表示第几页
+     */
+    pageNo?: number;
+    /**
+     * 每页记录数，等同于 MySQL 分页方式 limit
+     */
+    pageSize?: number;
+    /**
+     * 表格处于加载中状态
+     */
+    loading?: boolean;
+};
+/**
+ * iView Table 配置方法
+ */
+type TableListMethod = {
+    /**
+     * 异步加载列表数据
+     */
+    getData(): void;
+    /**
+     * 打开详情 UI
+     *
+     * @param id
+     */
+    openInfo?(id: number): void;
+    /**
+     * 删除
+     *
+     * @param id
+     * @param index 行号
+     */
+    deleteInfo?(id: number, index: number): void;
+};

package/dist/libs/iview-widgets.js

@@ -0,0 +1,2 @@
+// iView 组件的配置定义
+//# sourceMappingURL=iview-widgets.js.map

package/dist/libs/iview-widgets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iview-widgets.js","sourceRoot":"","sources":["../../src/libs/iview-widgets.ts"],"names":[],"mappings":"AAAA,gBAAgB"}

package/dist/libs/iview-widgets.ts

@@ -0,0 +1,73 @@
+// iView 组件的配置定义
+
+//  cfg: any;
+
+/**
+ * iView Table 配置字段， data 字段
+ */
+type TableListConfig = {
+    /**
+     * 列定义
+     */
+    columns: any[];
+
+    /**
+     * 表格数据
+     */
+    data: any[];
+
+    /**
+     * 记录总数
+     */
+    total: number;
+
+    /**
+     * MySQL 分页方式 start
+     */
+    start?: number;
+
+    /**
+     * MySQL 分页方式 limit
+     */
+    limit?: number;
+
+    /**
+     * 页码，表示第几页
+     */
+    pageNo?: number;
+
+    /**
+     * 每页记录数，等同于 MySQL 分页方式 limit
+     */
+    pageSize?: number;
+
+    /**
+     * 表格处于加载中状态
+     */
+    loading?: boolean;
+};
+
+/**
+ * iView Table 配置方法
+ */
+type TableListMethod = {
+    /**
+     * 异步加载列表数据
+     */
+    getData(): void;
+
+    /**
+     * 打开详情 UI
+     * 
+     * @param id 
+     */
+    openInfo?(id: number): void;
+
+    /**
+     * 删除
+     * 
+     * @param id 
+     * @param index 行号
+     */
+    deleteInfo?(id: number, index: number): void;
+};

package/dist/main.d.ts

@@ -1 +1 @@
-import '@/style/reset.less';
+import 'view-design/dist/styles/iview.css';

package/dist/main.js

@@ -4,13 +4,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = __importDefault(require("vue"));
-const App_vue_1 = __importDefault(require("./App.vue"));
-const router_1 = __importDefault(require("./router"));
-require("@/style/reset.less");
-// import '@/style/common-functions.less';
+const index_vue_1 = __importDefault(require("./api-selector/index.vue"));
+const index_vue_2 = __importDefault(require("./api-helper/index.vue"));
+const view_design_1 = __importDefault(require("view-design"));
+require("view-design/dist/styles/iview.css");
 vue_1.default.config.productionTip = false;
-new vue_1.default({
-    router: router_1.default,
-    render: h => h(App_vue_1.default)
-}).$mount('#app');
+vue_1.default.use(view_design_1.default);
+const apiSelectorFn = h => h(index_vue_1.default, {
+    props: {
+        apiRoot: 'foo'
+    }
+});
+const apiHelperFn = h => h(index_vue_2.default, {
+    props: {
+        apiRoot: 'foo'
+    }
+});
+new vue_1.default({ render: apiHelperFn }).$mount('#app');
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":";;;;;AAAA,8CAAqB;AACrB,wDAA2B;AAC3B,sDAA6B;AAC7B,8BAA4B;AAC5B,0CAA0C;AAE1C,aAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AAEjC,IAAI,aAAG,CAAC;IACN,MAAM,EAAN,gBAAM;IACN,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAG,CAAC;CACpB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":";;;;;AAAA,8CAAqB;AACrB,yEAAmD;AACnD,uEAA+C;AAC/C,8DAAiC;AACjC,6CAA2C;AAE3C,aAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AACjC,aAAG,CAAC,GAAG,CAAC,qBAAM,CAAC,CAAC;AAEhB,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAW,EAAE;IACtC,KAAK,EAAE;QACH,OAAO,EAAE,KAAK;KACjB;CACJ,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAS,EAAE;IAClC,KAAK,EAAE;QACH,OAAO,EAAE,KAAK;KACjB;CACJ,CAAC,CAAC;AAEH,IAAI,aAAG,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}

package/dist/main.ts

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import apiSelector from './api-selector/index.vue';
+import apiHelper from './api-helper/index.vue';
+import ViewUI from 'view-design';
+import 'view-design/dist/styles/iview.css';
+
+Vue.config.productionTip = false;
+Vue.use(ViewUI);
+
+const apiSelectorFn = h => h(apiSelector, {
+    props: {
+        apiRoot: 'foo'
+    }
+});
+
+const apiHelperFn = h => h(apiHelper, {
+    props: {
+        apiRoot: 'foo'
+    }
+});
+
+new Vue({ render: apiHelperFn }).$mount('#app');

package/dist/table-selector/table-selector.htm

@@ -0,0 +1,28 @@
+<template id="table-selector-tpl">
+    <div class="table-selector">
+        <Row style="margin:20px 0;" type="flex" justify="center" align="middle">
+            <i-Col v-if="isCrossDb" span="6" style="padding-right:10px;">
+                <i-Select placeholder="请选择数据库名" v-model="databaseName">
+                    <i-Option v-for="d in databaseList" :key="d" :value="d">{{d}}</i-Option>
+                </i-Select>
+            </i-Col>
+            <i-Col :span="isCrossDb ? 6 : 12">
+                <i-Input search enter-button placeholder="按表名模糊搜索" @on-keyup="search" ref="inputEl"></i-Input>
+            </i-Col>
+            <i-Col span="12">
+                &nbsp;&nbsp;&nbsp;<a @click="resetData">重置</a>
+            </i-Col>
+        </Row>
+
+        <i-Table :columns="list_column" :data="data" width="100%" @on-selection-change="onSelect" max-height="300" :loading="loading" class="table-selector-table">
+            <template slot-scope="{row}" slot="select">
+                <a @click="$emit('on-select', row, databaseName)">选择</a>
+            </template>
+        </i-Table>
+        <br />
+
+        <div class="ivu-mt ivu-text-right" v-if="!isFilter">
+            <Page :total="total" :current.sync="current" show-total :page-size="pageSize" />
+        </div>
+    </div>
+</template>

package/dist/table-selector/table-selector.js

@@ -0,0 +1,149 @@
+Vue.component('table-selector', {
+    template: '#table-selector-tpl',
+    data() {
+        return {
+            // isCrossDb: false,
+            list_column: [
+                {
+                    title: "#",
+                    // key: 'id',
+                    width: 60,
+                    type: "index",
+                    // type: 'selection'
+                },
+                {
+                    title: "表名",
+                    key: 'tableName',
+                },
+                {
+                    title: "说明",
+                    key: 'comment',
+                },
+                {
+                    title: "操作",
+                    slot: 'select'
+                }
+            ],
+            listData: [], // 显示数据
+            data: [], // 全部数据
+            total: 0,
+            current: 1,
+            pageSize: 5,
+            isFilter: false,
+            start: 0,
+            searchKeyword: "",
+            loading: false,
+            databaseList: [],
+            databaseName: "",
+        }
+    },
+    props: {
+        apiUrl: { type: String, required: true },
+        isCrossDb: { type: Boolean, required: true },
+        dataSourceId: { type: Number, required: true },
+    },
+    mounted() {
+        // this.isCrossDb = true;
+        // this.getData();
+    },
+    methods: {
+        getData() {
+            this.loading = true;
+            let url = `${DS_CONFIG.API_ROOT}/admin/${this.dataSourceId}/getAllTables?start=${this.start}&limit=${this.pageSize}`;
+
+            if (this.searchKeyword)
+                url += `&tablename=${this.searchKeyword}`;
+            if (this.databaseName)
+                url += `&dbName=${this.databaseName}`;
+
+            aj.xhr.get(url, j => {
+                if (j.status) {
+                    this.data = j.data;
+                    this.total = j.total;
+                } else
+                    this.$Message.error(j.message);
+
+                this.loading = false;
+            });
+        },
+        handleChangePageSize() {
+            let start = (this.current - 1) * this.pageSize,
+                end = start + this.pageSize;
+
+            this.listData = this.data.slice(start, end);
+        },
+        onSelect(arr) {
+            arr.forEach((item) => {
+                this.data.forEach((_item) => { });
+            });
+        },
+        resetData() {
+            this.searchKeyword = "";
+
+            this.start = 0;
+            this.getData();
+            this.$refs.inputEl.$el.querySelector("input").value = "";
+        },
+        search(ev) {
+            let input = ev.target,
+                v = input.value;
+
+            if (v) {
+                this.searchKeyword = v;
+                this.start = 0;
+                this.current = 1;
+                this.getData();
+            }
+        },
+        onkeypress(ev) {
+            let input = ev.target,
+                v = input.value;
+
+            if (v) {
+                this.isFilter = true;
+                let arr = this.data.filter((item) => item.tableName.indexOf(v) != -1);
+                this.listData = arr;
+            } else {
+                this.resetData();
+            }
+        },
+    },
+    watch: {
+        /**
+         * 分页
+         *
+         * @param v
+         */
+        current(v) {
+            this.start = (v - 1) * this.pageSize;
+            this.getData();
+        },
+        dataSourceId(id) {
+            if (id) {
+                if (this.isCrossDb)
+                    aj.xhr.get(`${DS_CONFIG.API_ROOT}/admin/${this.dataSourceId}/get_databases`, j => {
+                        if (j.status) {
+                            // 过滤 mysql 自带的库
+                            let not = ['information_schema', 'performance_schema', 'sys', 'mysql'];
+                            let arr = j.data.filter(db => !not.includes(db));
+
+                            this.databaseList = arr;
+
+                            // 默认选中第一个
+                            this.start = 0;
+                            this.current = 1;
+                            this.databaseName = arr[0];
+                        } else
+                            this.$Message.error(j.message);
+                    });
+                else {
+                    this.databaseName = null;
+                    this.getData();
+                }
+            }
+        },
+        databaseName(v) {
+            this.getData(); // 会重复请求
+        },
+    },
+});