@ajaxjs/ui 1.2.4 → 1.2.6

package/README.md

@@ -1,7 +1,23 @@
+[![NPM](https://img.shields.io/npm/v/@ajaxjs/ui.svg?sanitize=true)](https://www.npmjs.com/package/@ajaxjs/ui)
+[![Vue.js](https://img.shields.io/badge/Vue.js-2.6.14-brightgreen.svg?style=flat&logo=vuedotjs&logoColor=white)](https://vuejs.org)
+[![TypeScript](https://img.shields.io/badge/TypeScript-4.9.4-blue.svg?style=flat&logo=Typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![License](https://img.shields.io/badge/license-Apache--2.0-green.svg?longCache=true&style=flat)](http://www.apache.org/licenses/LICENSE-2.0.txt)
+[![Email](https://img.shields.io/badge/Contact--me-Email-orange.svg)](mailto:frank@ajaxjs.com)
+[![QQ群](https://framework.ajaxjs.com/static/qq.svg)](https://shang.qq.com/wpa/qunwpa?idkey=3877893a4ed3a5f0be01e809e7ac120e346102bd550deb6692239bb42de38e22)
+
 # Widgets based on iView.js
 
 for Vue2 & iView.js v2
 
+NPM: https://www.npmjs.com/package/@ajaxjs/ui.
+
+```shell
+npm i @ajaxjs/ui # install
+npm run dev # do coding
+npm run build # output js
+npm run release # deploy to NPM
+```
+
 ## API Selector API 选择器
 
 ## API Helper 可视化 HTTP 请求工具

package/dist/index.d.ts

@@ -36,5 +36,19 @@ declare const _default: {
         copyBeanClean(bean: {}): {};
     };
     iViewListCommon: import("vue").VueConstructor<iViewListCommon<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => iViewListCommon<Record<string, any>, Record<string, any>, never, never, any>>>;
+    DataSource: {
+        data(): {};
+        mounted(): void;
+        methods: {
+            active(item: any): void;
+            getList(cb: any): void;
+            add(): void;
+            create(): void;
+            update(): void;
+            del(id: any, name: any): void;
+            test(): void;
+        };
+    };
+    TableSelector: import("vue").VueConstructor<iViewListCommon<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => iViewListCommon<Record<string, any>, Record<string, any>, never, never, any>>>;
 };
 export default _default;

package/dist/index.js

@@ -10,10 +10,12 @@ const list_1 = __importDefault(require("./iView-ext/fast-iview-table/list"));
 const fast_iview_table_vue_1 = __importDefault(require("./iView-ext/fast-iview-table/fast-iview-table.vue"));
 const index_vue_1 = __importDefault(require("./api-selector/index.vue"));
 const index_vue_2 = __importDefault(require("./api-helper/index.vue"));
+const data_source_1 = __importDefault(require("./data-source/data-source"));
+const table_selector_vue_1 = __importDefault(require("./table-selector/table-selector.vue"));
 /**
  * 暴露各个组件
  */
 exports.default = {
-    ApiHelper: index_vue_2.default, ApiSelector: index_vue_1.default, Fast_iViewTable: list_1.default, iViewListCommon: fast_iview_table_vue_1.default
+    ApiHelper: index_vue_2.default, ApiSelector: index_vue_1.default, Fast_iViewTable: list_1.default, iViewListCommon: fast_iview_table_vue_1.default, DataSource: data_source_1.default, TableSelector: table_selector_vue_1.default
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,wCAAwC;AACxC,kDAAkD;;;;;AAElD,6EAAgE;AAChE,6GAAgF;AAChF,yEAAmD;AACnD,uEAA+C;AAE/C;;GAEG;AACH,kBAAe;IACX,SAAS,EAAT,mBAAS,EAAE,WAAW,EAAX,mBAAW,EAAE,eAAe,EAAf,cAAe,EAAE,eAAe,EAAf,8BAAe;CAC3D,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,sDAAsD;AACtD,wCAAwC;AACxC,kDAAkD;;;;;AAElD,6EAAgE;AAChE,6GAAgF;AAChF,yEAAmD;AACnD,uEAA+C;AAC/C,4EAAmD;AACnD,6FAAgE;AAEhE;;GAEG;AACH,kBAAe;IACX,SAAS,EAAT,mBAAS,EAAE,WAAW,EAAX,mBAAW,EAAE,eAAe,EAAf,cAAe,EAAE,eAAe,EAAf,8BAAe,EAAE,UAAU,EAAV,qBAAU,EAAC,aAAa,EAAb,4BAAa;CACrF,CAAC"}

package/dist/index.ts

@@ -6,10 +6,12 @@ import Fast_iViewTable from './iView-ext/fast-iview-table/list';
 import iViewListCommon from './iView-ext/fast-iview-table/fast-iview-table.vue';
 import ApiSelector from './api-selector/index.vue';
 import ApiHelper from './api-helper/index.vue';
+import DataSource from './data-source/data-source';
+import TableSelector from './table-selector/table-selector.vue';
 
 /**
  * 暴露各个组件
  */
 export default {
-    ApiHelper, ApiSelector, Fast_iViewTable, iViewListCommon
+    ApiHelper, ApiSelector, Fast_iViewTable, iViewListCommon, DataSource,TableSelector
 };

package/dist/table-selector/table-selector.vue

@@ -0,0 +1,180 @@
+<template>
+  <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>
+
+<script>
+import { xhr_get, xhr_post, getPageList } from '@ajaxjs/util/dist/util/xhr';
+
+// 选择表
+export default {
+  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: {
+    isCrossDb: { type: Boolean, required: true },
+    dataSourceId: { type: Number, required: true },
+  },
+  mounted() {
+    // this.isCrossDb = true;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.loading = true;
+      let url =`${window.config.dsApiRoot}/datasource/${this.dataSourceId}/get_all_tables?start=${this.start}&limit=${this.pageSize}`;
+      // let url = `${DS_CONFIG.API_ROOT}/admin0/${this.dataSourceId}/getAllTables?start=${this.start}&limit=${this.pageSize}`;
+
+      if (this.searchKeyword) url += `&tableName=${this.searchKeyword}`;
+      if (this.databaseName) url += `&dbName=${this.databaseName}`;
+
+     xhr_get(url, (j) => {
+        if (j.status) {
+          this.data = j.data.rows;
+          this.total = j.data.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(); // 会重复请求
+    },
+  },
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajaxjs/ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Widgets based on iView.js",
   "repository": {
     "type": "git",
@@ -23,7 +23,6 @@
   ],
   "dependencies": {
     "vue-codemirror": "^4.0.6",
-    "vuedraggable": "^2.24.3",
     "@ajaxjs/util": "1.1.1"
   },
   "devDependencies": {