refactor: 组件代码重构,修改组件注册方式

getFormDetail,getTableDetail,getTables,getFormkey,crud 5个方法通过外部传入

CHANGELOG.md

@@ -1,10 +1,58 @@
-## 0.3.2 (2020-11-27)
+# [0.5.0](https://github.com/BoBoooooo/Element-Pro-Crud/compare/0.3.3...0.5.0) (2020-12-08)
+
+### 🚀 性能优化
+范围|描述|commitId
+--|--|--
+ - | 优化表单设计器默认配置项 | [2c96915](https://github.com/BoBoooooo/Element-Pro-Crud/commit/2c96915)
+
+## [0.3.3](https://github.com/BoBoooooo/Element-Pro-Crud/compare/0.3.2...0.3.3) (2020-12-08)
+
+### 🐛 Bug 修复
+范围|描述|commitId
+--|--|--
+ - | axios token prefix bug | [c1aed5a](https://github.com/BoBoooooo/Element-Pro-Crud/commit/c1aed5a)
+
+
+### 📝 文档
+范围|描述|commitId
+--|--|--
+ - | update docs | [ec7ee69](https://github.com/BoBoooooo/Element-Pro-Crud/commit/ec7ee69)
+
+
+### 🚀 性能优化
+范围|描述|commitId
+--|--|--
+ - | 更新版本至0.3.3 | [e1c919b](https://github.com/BoBoooooo/Element-Pro-Crud/commit/e1c919b)
+ CrudTable | tableTitle默认隐藏 | [75d4f57](https://github.com/BoBoooooo/Element-Pro-Crud/commit/75d4f57)
+ - | 优化调试逻辑 | [30d8c1d](https://github.com/BoBoooooo/Element-Pro-Crud/commit/30d8c1d)
+ - | 组件代码优化 | [4023818](https://github.com/BoBoooooo/Element-Pro-Crud/commit/4023818)
+
+## [0.3.2](https://github.com/BoBoooooo/Element-Pro-Crud/compare/0.3.1...0.3.2) (2020-11-27)
+
+### chore
+范围|描述|commitId
+--|--|--
+ docs,crud-table | [@0](https://github.com/0).3.2 修改README文档,新增dialogWidth,epmtyText属性,修复已知Bug | [7dcc25a](https://github.com/BoBoooooo/Element-Pro-Crud/commit/7dcc25a)
+
+## [0.3.1](https://github.com/BoBoooooo/Element-Pro-Crud/compare/0.3.0...0.3.1) (2020-11-26)
 
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
- - | [@0](https://github.com/0).2.4,修复表单设计器getData 多选情况下bug | [a8ec788](https://github.com/BoBoooooo/Element-Pro-Crud/commit/a8ec788)
  - | 文本组件新增对齐方式/字体大小配置项 | [78388ac](https://github.com/BoBoooooo/Element-Pro-Crud/commit/78388ac)
+
+
+### chore
+范围|描述|commitId
+--|--|--
+ - | version update to 0.3.1 | [0748286](https://github.com/BoBoooooo/Element-Pro-Crud/commit/0748286)
+
+# [0.3.0](https://github.com/BoBoooooo/Element-Pro-Crud/compare/c003a89...0.3.0) (2020-11-23)
+
+### 🌟 新功能
+范围|描述|commitId
+--|--|--
+ - | [@0](https://github.com/0).2.4,修复表单设计器getData 多选情况下bug | [a8ec788](https://github.com/BoBoooooo/Element-Pro-Crud/commit/a8ec788)
  FormDesign | 初步提交一版表单设计器 | [0161f67](https://github.com/BoBoooooo/Element-Pro-Crud/commit/0161f67)
  FormDesigner | 级联选择器新增支持配置父子级联关系,version update to 0.2.2 | [40cd7d1](https://github.com/BoBoooooo/Element-Pro-Crud/commit/40cd7d1)
  index | fix eslint bug | [a09ae6b](https://github.com/BoBoooooo/Element-Pro-Crud/commit/a09ae6b)
@@ -57,13 +105,6 @@
  - | update version to 0.1.0-1 | [070beed](https://github.com/BoBoooooo/Element-Pro-Crud/commit/070beed)
 
 
-### 🔨 代码重构
-范围|描述|commitId
---|--|--
- - | 调整目录结构,加入types声明文件 | [ab896f3](https://github.com/BoBoooooo/Element-Pro-Crud/commit/ab896f3)
- - | refactor some details | [742f6a6](https://github.com/BoBoooooo/Element-Pro-Crud/commit/742f6a6)
-
-
 ### 🚀 性能优化
 范围|描述|commitId
 --|--|--
@@ -90,13 +131,6 @@
  - | version update to 0.2.5 | [211ab70](https://github.com/BoBoooooo/Element-Pro-Crud/commit/211ab70)
 
 
-### chore
-范围|描述|commitId
---|--|--
- - | 由于是umd打包发布,依赖全部并入devDependencies | [cf2ece3](https://github.com/BoBoooooo/Element-Pro-Crud/commit/cf2ece3)
- - | version update to 0.3.1 | [0748286](https://github.com/BoBoooooo/Element-Pro-Crud/commit/0748286)
-
-
 范围|描述|commitId
 --|--|--
  - | 0.1.6 | [44bae78](https://github.com/BoBoooooo/Element-Pro-Crud/commit/44bae78)
@@ -107,3 +141,16 @@
  - | Update README.md | [c69ba5b](https://github.com/BoBoooooo/Element-Pro-Crud/commit/c69ba5b)
  - | [feat](bobo-npm-plugin-test): 初始化项目,结合bobo-npm-plugin-test发布 | [c003a89](https://github.com/BoBoooooo/Element-Pro-Crud/commit/c003a89)
 
+
+### 🔨 代码重构
+范围|描述|commitId
+--|--|--
+ - | 调整目录结构,加入types声明文件 | [ab896f3](https://github.com/BoBoooooo/Element-Pro-Crud/commit/ab896f3)
+ - | refactor some details | [742f6a6](https://github.com/BoBoooooo/Element-Pro-Crud/commit/742f6a6)
+
+
+### chore
+范围|描述|commitId
+--|--|--
+ - | 由于是umd打包发布,依赖全部并入devDependencies | [cf2ece3](https://github.com/BoBoooooo/Element-Pro-Crud/commit/cf2ece3)
+

README.md

@@ -45,7 +45,7 @@ npm i element-pro-crud -S
   <head>
     <meta charset="UTF-8" />
     <!-- 引入ProCrud CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-pro-crud@0.1.2/lib/ProCrud.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-pro-crud@0.5.0/lib/ProCrud.css" />
     <!-- 引入ElementUI CSS -->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
     />
@@ -64,7 +64,7 @@ npm i element-pro-crud -S
   <!-- import ElementUI -->
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   <!-- import ElementProCrud -->
-  <script src="https://cdn.jsdelivr.net/npm/element-pro-crud@0.1.2/lib/ProCrud.umd.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/element-pro-crud@0.5.0/lib/ProCrud.umd.js"></script>
 
   <script>
     new Vue({
@@ -87,14 +87,20 @@ npm i element-pro-crud -S
 
   在 main.js 中写入以下内容：
 
-  ``` javascript
+  ```javascript
   import ElementProCrud from 'element-pro-crud';
   import ElementUI from 'element-ui';
   import 'element-pro-crud/lib/ProCrud.css'; // 先引入插件css,避免css污染
   import 'element-ui/lib/theme-chalk/index.css';
 
   Vue.use(ElementUI)
-  Vue.use(ElementProCrud);
+  Vue.use(ElementProCrud, {
+    getTables: Function; // axios方法获取数据库中所有的表
+    getFormKey: Function; // axios方法获取某张表中所有字段信息
+    getFormDetail: Function;// 获取某个表单设计json
+    getTableDetail: Function;// 获取某个表格设计json
+    crud: (dml: DML, tableName: string, data?: object, params?: object)=> AxiosPromise; // 通用CRUD封装
+  });
   ```
 
 #### 按需引入
@@ -103,16 +109,13 @@ npm i element-pro-crud -S
   Vue.use(GenerateForm);
 
   import Vue from 'vue';
-  import { GenerateForm,CrudTable } from 'element-pro-crud';
+  import { GenerateForm, CrudTable, FormDesignerDialog, TableDesignerDialog } from 'element-pro-crud';
   import App from './App.vue';
 
-  Vue.component(GenerateForm.name, GenerateForm);
-  Vue.component(CrudTable.name, CrudTable);
-
-  /* 或写为
-  * Vue.use(GenerateForm)
-  * Vue.use(CrudTable)
-  */
+  Vue.use(GenerateForm); // 不需要传options
+  Vue.use(CrudTable, options);// options介绍如上,getTables,getFormKey两个方法可以缺省
+  Vue.use(FormDesignerDialog, options);// options介绍如上
+  Vue.use(TableDesignerDialog, options);// options介绍如上
 
   new Vue({
     el: '#app',
@@ -154,8 +157,11 @@ npm i element-pro-crud -S
 |       tableTitle       |                             表格标题                              |     String      |                    -                    |    ''     |
 |      tableParams       |                   表格请求参数(带查询参数请求)                    |  Object,Array   |                    -                    |    {}     |
 |        textMap         |                          表单对话框标题                           |     Object      | { add:'添加',edit:'编辑',detail:'查看'} |    {}     |
-|     promiseForDel      |                    自定义删除按钮 promise 请求                    |    Function     |      Function({id})      |   -    |
+|     promiseForDel      |                    自定义删除按钮 promise 请求                    |    Function     |      Function(id)      |   -    |
+|     promiseForDels      |                    自定义批量删除按钮 promise 请求                    |    Function     |      Function([id])      |   -    |
+|    promiseForDetail    |                    详情 promise 请求                    |    Function     |                    (id: string):Object => formData                 |   -    |
 |    promiseForSelect    |                    自定义列表查询 promise 请求                    |    Function     |                    Function(searchCondition)                   |   -    |
+|    promiseForSave    |                    自定义保存方法 promise 请求                    |    Function     |                    Function(formValue, status)                   |   -    |
 |     btnAddOnClick      |                         添加按钮点击事件                          |    Function     |                    -                    |   -    |
 |    btnRowAddOnClick    |                    表格行中的添加按钮点击事件                     |    Function     |                    Function(row)                    |   -    |
 |     btnEditOnClick     |                         编辑按钮点击事件                          |    Function     |                    Function(row)                   |   -    |

examples/App.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import { DML, crud } from '@/api/public/crud';
+import { DML, crud } from './api/crud';
 
 export default {
   name: 'app',

src/api/public/crud.ts → examples/api/crud.ts

@@ -6,7 +6,7 @@
  * @Date: 2020年04月24 11:35:00
  */
 
-import axios from '../axios';
+import axios from './axios';
 
 interface optionsType {
   url: string; // 请求地址

src/api/system/form.ts → examples/api/plugin.ts

@@ -4,7 +4,7 @@
  * @author: BoBo
  * @Date: 2020年08月26 16:14:53
  */
-import axios from '../axios';
+import axios from './axios';
 
 /**
  * 获取数据库中所有表名
@@ -41,7 +41,7 @@ export function getFormDetail(tablename) {
 }
 
 /**
- *
+ * 获取某张表所有字段信息
  * @param {String} tablename
  */
 export function getFormKey(tablename) {

examples/demo.html

@@ -13,11 +13,23 @@
       href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
     />
     <link rel="stylesheet" href="../lib/ProCrud.css" />
+    <!-- 服务器地址 -->
+    <script>
+      window.__HOST__URL__ = "http://localhost:7788";
+    </script>
+    <!-- 后台url地址 -->
+    <script>
+      window.__PREFIX__URL__ = "/";
+    </script>
   </head>
   <body>
     <div id="app">
-      <el-button @click="showDialog('form')" type="primary">打开表单设计器</el-button>
-      <el-button @click="showDialog('table')" type="danger">打开表格设计器</el-button>
+      <el-button @click="showDialog('form')" type="primary"
+        >打开表单设计器</el-button
+      >
+      <el-button @click="showDialog('table')" type="danger"
+        >打开表格设计器</el-button
+      >
       <form-designer-dialog ref="form"></form-designer-dialog>
       <table-designer-dialog ref="table"></table-designer-dialog>
       <crud-table tableName="dept" tableTitle="表格示例"></crud-table>
@@ -32,11 +44,11 @@
   <script>
     new Vue({
       el: "#app",
-      methods:{
-        showDialog(name){
+      methods: {
+        showDialog(name) {
           this.$refs[name].showDialog();
-        }
-      }
+        },
+      },
     });
   </script>
 </html>

examples/main.ts

@@ -4,9 +4,16 @@ import App from './App.vue';
 import plugin from '../src/index';
 // 引入ElementUI
 import './element';
-import axios from '../src/api/axios';
+import axios from './api/axios';
+import * as pluginsApis from './api/plugin';
+import { crud } from './api/crud';
 
-Vue.use(plugin);
+
+Vue.use(plugin, {
+  ...pluginsApis,
+  axios,
+  crud,
+});
 Vue.config.productionTip = false;
 
 axios({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",

packages/crud-table/index.ts

@@ -2,7 +2,10 @@ import CrudTable from './src/CrudTable.vue';
 
 // 为组件添加 install 方法，用于按需引入
 // eslint-disable-next-line func-names
-CrudTable.install = function (Vue) {
+CrudTable.install = function (Vue, options) {
+  if (options) {
+    Vue.prototype.$PROCRUD = options;
+  }
   Vue.component('CrudTable', CrudTable);
 };