10
10
<img src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
11
11
</p >
12
12
13
+ ## 地址
14
+
15
+ - [ ⚡️ vue2.x + element-ui(免费商用,支持 PC、平板、手机)] ( https://github.com/cool-team-official/cool-admin-vue )
16
+
17
+ - [ ⚡️ vue3.x + element-plus + ts + webpack(免费商用,支持 PC、平板、手机)] ( https://github.com/cool-team-official/cool-admin-vue/tree/vue3-ts-webpack )
18
+
19
+ - [ 📌 vue3.x + element-plus + ts + vite(测试中)] ( )
20
+
21
+ - [ 🌐 码云仓库地址] ( https://gitee.com/cool-team-official/cool-admin-vue )
22
+
13
23
## 演示
14
24
15
25
[ https://show.cool-admin.com ] ( https://show.cool-admin.com )
16
26
17
- - 账户:admin
18
- - 密码:123456
27
+ 账户:admin,密码:123456
19
28
20
- <img src =" https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png " alt =" Admin Home " ></a >
29
+ <img src =" https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png " alt =" Admin Home " ></a >
21
30
22
31
## 项目后端
23
32
35
44
36
45
[ https://bbs.cool-js.com/ ] ( https://bbs.cool-js.com/ )
37
46
38
- ## 使用条件
39
-
40
- 请确保您的操作系统上安装了 Node.js(> = 8.9.0)、@vue/cli (> 3.0.0)。
41
-
42
47
## 安装项目依赖
43
48
44
49
推荐使用 ` yarn ` :
@@ -60,231 +65,3 @@ yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
60
65
``` shell
61
66
yarn serve
62
67
```
63
-
64
- ## 极速 CRUD
65
-
66
- 1 . ` vscode ` 编辑器下输入关键字 ` cl-crud ` ,会生成对应的模板代码:
67
-
68
- ``` html
69
- <template >
70
- <cl-crud ref =" crud" @load =" onLoad" >
71
- <el-row type =" flex" align =" middle" >
72
- <!-- 刷新按钮 -->
73
- <cl-refresh-btn />
74
- <!-- 新增按钮 -->
75
- <cl-add-btn />
76
- <!-- 删除按钮 -->
77
- <cl-multi-delete-btn />
78
- <cl-flex1 />
79
- <!-- 关键字搜索 -->
80
- <cl-search-key />
81
- </el-row >
82
-
83
- <el-row >
84
- <!-- 数据表格 -->
85
- <cl-table v-bind =" table" ></cl-table >
86
- </el-row >
87
-
88
- <el-row type =" flex" >
89
- <cl-flex1 />
90
- <!-- 分页控件 -->
91
- <cl-pagination />
92
- </el-row >
93
-
94
- <!-- 新增、编辑 -->
95
- <cl-upsert ref =" upsert" v-bind =" upsert" ></cl-upsert >
96
- </cl-crud >
97
- </template >
98
-
99
- <script >
100
- export default {
101
- data () {
102
- return {
103
- // 新增、编辑配置
104
- upsert: {
105
- items: []
106
- },
107
- // 表格配置
108
- table: {
109
- columns: []
110
- }
111
- };
112
- },
113
- methods: {
114
- onLoad ({ ctx, app }) {
115
- // crud 配置
116
- ctx .service ().done ();
117
- // 发送 page 接口请求
118
- app .refresh ();
119
- }
120
- }
121
- };
122
- </script >
123
- ```
124
-
125
- 2 . 编辑数据表格 ` cl-table ` :
126
-
127
- ``` js
128
- {
129
- table: {
130
- // 参数与 el-table-column 一致,并支持许多骚操作
131
- columns: [
132
- // 多选列
133
- {
134
- type: " selection" ,
135
- width: 60
136
- },
137
- // 自定义列
138
- {
139
- label: " 昵称" ,
140
- prop: " name"
141
- },
142
- {
143
- label: " 账户" ,
144
- prop: " price" ,
145
- sortable: " custom" // 是否添加排序
146
- },
147
- {
148
- label: " 状态" ,
149
- prop: " status" ,
150
- // 字典匹配,使用 el-tag 展示
151
- dict: [
152
- {
153
- label: " 启用" ,
154
- value: 1 ,
155
- type: " primary"
156
- },
157
- {
158
- label: " 禁用" ,
159
- value: 0 ,
160
- type: " danger"
161
- }
162
- ]
163
- },
164
- {
165
- label: " 创建时间" ,
166
- prop: " createTime"
167
- },
168
- // 操作按钮列,默认包含:编辑、删除
169
- {
170
- type: " op"
171
- }
172
- ];
173
- }
174
- }
175
- ```
176
-
177
- 3 . 编辑新增、编辑表单 ` cl-upsert ` :
178
-
179
- ``` js
180
- {
181
- upsert: {
182
- items: [
183
- {
184
- label: " 昵称" ,
185
- prop: " name" ,
186
- // 参数与 el-form-item 一致
187
- props: {},
188
- value: " 神仙都没用" , // 昵称默认值
189
- // 渲染参数,支持 slot, 组件实例,jsx
190
- component: {
191
- name: " el-input" , // 可以是任意已注册的组件名
192
- props: {}, // 组件的参数
193
- on: {} // 组件的回调事件
194
- },
195
- // 验证规则,与 el-form 一致
196
- rules: {
197
- required: true ,
198
- message: " 昵称不呢为空"
199
- }
200
- },
201
- {
202
- label: " 存款" ,
203
- prop: " price" ,
204
- component: {
205
- name: " el-input-number" ,
206
- props: {
207
- min: 0 ,
208
- max: 10000
209
- }
210
- }
211
- },
212
- {
213
- label: " 状态" ,
214
- prop: " status" ,
215
- value: 1 ,
216
- component: {
217
- name: " el-radio-group" ,
218
- options: [
219
- {
220
- label: " 启用" ,
221
- value: 1
222
- },
223
- {
224
- label: " 禁用" ,
225
- value: 0
226
- }
227
- ]
228
- }
229
- }
230
- ];
231
- }
232
- }
233
- ```
234
-
235
- 4 . 绑定 ` service ` 。在 ` src/service/ ` 下新建文件 ` test.js ` ,并编辑:
236
-
237
- ``` js
238
- // src/service/test.js
239
- import { BaseService , Service , Permission } from " cl-admin" ;
240
-
241
- // 请求接口的路径
242
- @Service (" test" )
243
- class Test extends BaseService {
244
- // 继承 BaseService 后,拥有 page, list, add, delete, update, info 6个基本接口
245
-
246
- // 自定义其他接口
247
- @Permission (" product" ) // 权限装饰器,可选
248
- product (id ) {
249
- // this.request() 参数与 axios 一致
250
- return this .request ({
251
- url: " /product" ,
252
- method: " POST" ,
253
- data: {
254
- id
255
- }
256
- });
257
- }
258
- }
259
-
260
- export default Test ;
261
- ```
262
-
263
- 在 ` src/service/ ` 下的文件,框架会自动根据 ` 目录结构 ` 和 ` 文件名称 ` 格式化成对应的 ` $service ` 对象。你现在可以这么使用它:
264
-
265
- ``` js
266
- this .$service .test .page ({ page: 1 });
267
- this .$service .test .product (1 );
268
- ```
269
-
270
- ` service ` 编写好后,我们把它绑定在 ` crud ` 上:
271
-
272
- ``` js
273
- export default {
274
- methods: {
275
- onLoad ({ ctx, app }) {
276
- // 绑定 service,这边指定到 test 即可
277
- ctx .service (this .$service .test ).done ();
278
-
279
- // 发起 page 请求
280
- app .refresh ({
281
- // 请求默认参数
282
- });
283
- }
284
- }
285
- };
286
- ```
287
-
288
- 5 . 效果预览
289
-
290
- ![ ] ( https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/crud.png )
0 commit comments