Skip to content

Commit ec1775c

Browse files
BoBooooooBoBoooooo
committed
docs: update README
1 parent bf2a4a2 commit ec1775c

File tree

2 files changed

+3
-266
lines changed

2 files changed

+3
-266
lines changed

‎README.md

+3-254
Original file line numberDiff line numberDiff line change
@@ -1,258 +1,7 @@
1-
21
# 🎉 ElementProCrud 🎉
32

4-
## [文档地址](http://crud.boboooooo.top)
5-
## [在线demo](http://server.boboooooo.top:9997)
6-
## [集成demo](http://server.boboooooo.top:9998)
7-
8-
## 特性
9-
- 基于el-table,el-form二次封装,表单表格支持可视化配置
10-
- 表单设计器
11-
- 基础组件: 内置element-ui表单组件
12-
- 高级组件:
13-
- `级联选择器` (el-cascader)
14-
- `富文本编辑器` Tinymce
15-
- `附件模块` (FileUpload)
16-
- `表格模块` (ProTable)
17-
- `树形下拉框` (vue-treeSelect)
18-
- `自定义插槽`
19-
- 表格设计器
20-
21-
## 核心依赖
22-
23-
``` javascript
24-
"dependencies": {
25-
"@riophae/vue-treeselect": "^0.4.0",
26-
"axios": "^0.19.2",
27-
"dayjs": "1.8.20",
28-
"element-ui": "^2.13.2",
29-
"lodash": "^4.17.14",
30-
"pinyin-match": "^1.0.9",
31-
"vue": "2.6.11",
32-
"vuedraggable": "^2.23.2"
33-
}
34-
```
35-
36-
## 开始使用
37-
38-
### 安装
39-
40-
```
41-
npm i element-pro-crud -S
42-
```
43-
44-
### CDN
45-
46-
``` html
47-
<!DOCTYPE html>
48-
<html>
49-
<head>
50-
<meta charset="UTF-8" />
51-
<!-- 引入ProCrud CSS -->
52-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-pro-crud/lib/ProCrud.css" />
53-
<!-- 引入ElementUI CSS -->
54-
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
55-
/>
56-
</head>
57-
<body>
58-
<div id="app">
59-
<el-button @click="showDialog('form')" type="primary">打开表单设计器</el-button>
60-
<el-button @click="showDialog('table')" type="danger">打开表格设计器</el-button>
61-
<form-designer-dialog ref="form"></form-designer-dialog>
62-
<table-designer-dialog ref="table"></table-designer-dialog>
63-
<crud-table tableName="dept" tableTitle="表格示例"></crud-table>
64-
</div>
65-
</body>
66-
<!-- import Vue before Element -->
67-
<script src="https://unpkg.com/vue/dist/vue.js"></script>
68-
<!-- import ElementUI -->
69-
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
70-
<!-- import ElementProCrud -->
71-
<script src="https://cdn.jsdelivr.net/npm/element-pro-crud/lib/ProCrud.umd.js"></script>
72-
<script src="https://cdn.bootcdn.net/ajax/libs/ace/test/ace.js"></script>
73-
74-
<script>
75-
new Vue({
76-
el: "#app",
77-
methods:{
78-
showDialog(name){
79-
this.$refs[name].showDialog();
80-
}
81-
}
82-
});
83-
</script>
84-
</html>
85-
```
86-
87-
### 引入 ElementProCrud
88-
89-
支持完整引入及按需引入,*该插件基于ElementUI封装,注意引用顺序*
90-
91-
#### 完整引入
92-
93-
在 main.js 中写入以下内容：
94-
95-
```javascript
96-
import ElementProCrud from 'element-pro-crud';
97-
import ElementUI from 'element-ui';
98-
import 'element-pro-crud/lib/ProCrud.css'; // 先引入插件css,避免css污染
99-
import 'element-ui/lib/theme-chalk/index.css';
100-
101-
Vue.use(ElementUI)
102-
Vue.use(ElementProCrud, {
103-
getTables: Function; // axios方法获取数据库中所有的表
104-
getFormKey: Function; // axios方法获取某张表中所有字段信息
105-
getFormDetail: Function;// 获取某个表单设计json
106-
getTableDetail: Function;// 获取某个表格设计json
107-
crud: (dml: DML, tableName: string, data?: object, params?: object)=> AxiosPromise; // 通用CRUD封装
108-
});
109-
```
110-
111-
#### 按需引入
112-
``` javascript
113-
import { GenerateForm } from 'element-pro-crud';
114-
Vue.use(GenerateForm);
115-
116-
import Vue from 'vue';
117-
import { GenerateForm, ProTable, FormDesigner, TableDesigner } from 'element-pro-crud';
118-
import App from './App.vue';
119-
120-
Vue.use(GenerateForm); // 不需要传options
121-
Vue.use(ProTable, options);// options介绍如上,getTables,getFormKey两个方法可以缺省
122-
Vue.use(FormDesigner, options);// options介绍如上
123-
Vue.use(TableDesigner, options);// options介绍如上
124-
125-
new Vue({
126-
el: '#app',
127-
render: h => h(App)
128-
});
129-
130-
```
131-
132-
#### 完整组件列表
133-
134-
- `GenerateForm` // 根据表单设计器json自动渲染表单
135-
136-
- `FormDesigner` // 表单设计器
137-
138-
- `TableDesigner` // 表格设计器
139-
140-
- `ProTable` // 高级增删改查 ProTable
141-
142-
## 组件文档
143-
144-
### ProTable
145-
146-
#### Props
147-
148-
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
149-
| :--------------------: | :---------------------------------------------------------------: | :-------------: | :-------------------------------------: | :-------: |
150-
| `el-table props` | el-table原生属性见文档 | https://element.eleme.cn/#/zh-CN/component/table |
151-
| columns | 表格json置 | Object | - | null |
152-
| searchMode | 查询区域模式 | String | popover/cover | popover |
153-
| listField | response 中数据位置 | String | data/data.list | data.list |
154-
| readOnly | GenerateFormDialog 中的表单禁用.null 表示均可编辑;{}表示全部只读; | Boolean | true/false | false | |
155-
| isMultiple | 是否开启多选 | Boolean | true,false | false |
156-
| emptyText | 列表数据为空时显示文字 | String | - | 暂无数据 |
157-
| prefill | 表单预填项(赋值初始值) | Object | - | null |
158-
| dialogAppendToBody | 表单对话框是否插入至 body 元素上 | Boolean | true/false | true |
159-
| dialogWidth | 表单宽度 | String | - | 80% |
160-
| tableName | 表名 | String | - | '' |
161-
| tableDesignerName | 用于请求表格设计 json 的 name,不传则默认读取 tableName | String | - | null |
162-
| dialogFormDesignerName | 对话框内加载 FormDesigner 的表名,,不传则默认读取 tableName | String | - | null |
163-
| orderCondition | 排序条件 | String | - | null |
164-
| visibleList | 内部元素显示控制(详情见下方) | Object | - | {} |
165-
| tableTitle | 表格标题 | String | - | '' |
166-
| tableParams | 表格请求参数(带查询参数请求) | Object,Array | - | {} |
167-
| textMap | 表单对话框标题 | Object | { add:'添加',edit:'编辑',detail:'查看'} | {} |
168-
| promiseForDel | 自定义删除按钮 promise 请求 | Function | Function(id) | - |
169-
| promiseForDels | 自定义批量删除按钮 promise 请求 | Function | Function([id]) | - |
170-
| promiseForDetail | 详情 promise 请求 | Function | (id: string):Object => formData | - |
171-
| promiseForSelect | 自定义列表查询 promise 请求 | Function | Function(searchCondition, clearParams) | - |
172-
| promiseForSave | 自定义保存方法 promise 请求 | Function | Function(formValue, status) | - |
173-
| btnAddOnClick | 添加按钮点击事件 | Function | - | - |
174-
| btnRowAddOnClick | 表格行中的添加按钮点击事件 | Function | Function(row) | - |
175-
| btnEditOnClick | 编辑按钮点击事件 | Function | Function(row) | - |
176-
| btnDetailOnClick | 查看按钮点击事件 | Function | Function(row) | - |
177-
| btnDelVisibleFunc | 表格行中的删除按钮是否显示事件 | Function | Function(row) | - |
178-
| btnAddVisibleFunc | 表格行中的添加按钮是否显示事件 | Function | Function(row) | - |
179-
| btnEditVisibleFunc | 表格行中的编辑按钮是否显示事件 | Function | Function(row) | - |
180-
| btnDetailVisibleFunc | 表格行中的查看按钮是否显示事件 | Function | Function(row) | - |
181-
| showPagination | 自定义列表 config 请求 | Boolean | true/false | true |
182-
| remoteFuncs | 远程数据方法(用于表单内远端数据请求) | Object | - | {} |
183-
| pageSize | 动态传入分页 | Array | - | [10,50,100] |
184-
| maxHeightMinus | 表格自适应高度需要减去的高度值 | Number | - | 285 |
185-
| fullHeight | 是否自适应屏幕高度(配置MaxHeightMinus) | Boolean | - | false |
186-
| selectableFunc | 选择框动态判断是否显示 | Function | - | null |
187-
| dialogFullscreen | 表单是否全屏 | Boolean | - | false |
188-
| dialogCloseOnClickModal | 表单点击阴影是否可以关闭 | Boolean | - | false |
189-
| showColumnIndex | 是否显示序号列 | Boolean | - | false |
190-
| formTableConfig | 表单中表格的tableConfig | Object | - | 详情看GenerateFormItem中解释 |
191-
| formValuesAsync | 异步更新表单数据 | Object | - | 外层异步传入数据更新表单,注意不能直接修改formValues |
192-
| actionColumnWidth | 操作列宽度(有时需要直接指定列宽) | Number | - | null |
193-
| paginationLayout | 分页显示 | String | 见官网 | total, prev, pager, next, jumper, sizes |
194-
195-
#### Props 补充说明
196-
197-
- `visibleList`
198-
199-
```
200-
// 内部元素显示控制
201-
{
202-
searchForm: true, // 查询区域
203-
tableTitle: false, // 表格标题
204-
btnAdd: true, // 添加按钮
205-
btnDel: false, // 批量删除按钮
206-
actionColumnBtnAdd: false, // 操作列添加按钮
207-
actionColumnBtnEdit: true, // 操作列编辑按钮
208-
actionColumnBtnDetail: false, // 操作列查看按钮
209-
actionColumnBtnDel: true, // 操作列删除按钮
210-
actionColumn: true, // 操作列
211-
seniorSearchBtn:true, // 高级查询按钮
212-
btnAddOnColumnHeader: false, // 操作列header添加按钮
213-
};
214-
```
215-
216-
- `textMap`
217-
218-
```
219-
// 按钮文字Map
220-
{
221-
add: '添加',
222-
edit: '编辑',
223-
del: '删除',
224-
detail: '查看',
225-
multiDel: '批量删除'
226-
}
227-
```
228-
229-
230-
231-
#### Events
232-
233-
| 事件名称 | 说明 | 回调参数 |
234-
| :-------: | :--------------------------: | :------------------------------------------------: |
235-
| `el-table events` | el-table原生事件见文档 | https://element.eleme.cn/#/zh-CN/component/table |
236-
| selection-change | 多选事件 | 选中的行 (params: Array) |
237-
| form-change | 监听 dialog 中 form 对象改变 | 返回当前表单对象以及当前表单 json (params: Object) |
238-
| form-btn-on-click | 表单内按钮组件点击回调 | widget(表单组件json) |
239-
240-
241-
#### Slots
242-
243-
| 插槽名称 | 说明 |
244-
| :-------------: | :--------------------------------------: |
245-
| columnFormatter | 结合表格设计自定义列使用 |
246-
| btnBarPrevBtn | 自定义右上角功能按钮 |
247-
| btnCustom | 自定义操作按钮 参数为 {row} |
248-
| dialogFooter | 弹出表单右侧底部slot |
249-
250-
#### Methods
3+
详情见[文档](https://crud.boboooooo.top)
2514

252-
| 方法名 | 说明 | 参数 |
253-
| :---------: | :----------: | :--: |
254-
| tableReload | 重新加载列表 | - |
5+
[在线 demo](http://server.boboooooo.top:9997)
2556

256-
#### TODO
257-
- tree-select 懒加载
258-
- 表单表格设计器 dev模式
7+
[生产环境 demo](http://server.boboooooo.top:9998)

‎src/component/table-designer/src/TableDesigner.vue

-12
Original file line numberDiff line numberDiff line change
@@ -140,18 +140,6 @@ export default {
140140
minColumnWidth: 140,
141141
// 获取表单实体
142142
entity: {},
143-
remoteFuncs: {
144-
getTablesOfDB: (resolve) => {
145-
// 请求表名列表
146-
this.$PROCRUD.getTables().then((res) => {
147-
const options = res.data.map(item => ({
148-
label: item.TABLE_NAME,
149-
value: item.TABLE_NAME,
150-
}));
151-
resolve(options);
152-
});
153-
},
154-
},
155143
};
156144
},
157145
methods: {

0 commit comments

Comments
 (0)