Skip to content

Commit 9b39326

Browse files
icssoaicssoa
committed
格式化代码
1 parent 8bf7507 commit 9b39326

File tree

3 files changed

+281
-15
lines changed

3 files changed

+281
-15
lines changed

‎README.md

Lines changed: 277 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,290 @@
1-
# front-next-vue3
1+
<p align="center">
2+
<a href="https://show.cool-admin.com/" target="blank"><img src="https://admin.cool-js.com/logo.png" width="200" alt="cool-admin Logo" /></a>
3+
</p>
24

3-
## Project setup
4-
```
5-
yarn install
5+
<p align="center">cool-admin 一个很酷的后台权限管理系统，开源免费，模块化、插件化、极速开发 CRUD，方便快速构建迭代后台管理系统， 到论坛 进一步了解</p>
6+
7+
<p align="center">
8+
<a href="https://github.com/cool-team-official/cool-admin-vue/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="GitHub license" />
9+
<a href=""><img src="https://img.shields.io/github/package-json/v/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
10+
<img src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
11+
</p>
12+
13+
## 演示
14+
15+
[https://show.cool-admin.com](https://show.cool-admin.com)
16+
17+
- 账户：admin
18+
- 密码：123456
19+
20+
<img src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png" alt="Admin Home"></a>
21+
22+
## 项目后端
23+
24+
[https://github.com/cool-team-official/cool-admin-midway](https://github.com/cool-team-official/cool-admin-midway)
25+
26+
## 微信群
27+
28+
<img width="260" src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/wechat.jpeg" alt="Admin Wechat"></a>
29+
30+
## 微信公众号
31+
32+
<img width="260" src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/mp.jpg" alt="Admin Wechat"></a>
33+
34+
## 在线社区
35+
36+
[https://bbs.cool-js.com/](https://bbs.cool-js.com/)
37+
38+
## 使用条件
39+
40+
请确保您的操作系统上安装了 Node.js（> = 8.9.0）、@vue/cli （> 3.0.0）。
41+
42+
## 安装项目依赖
43+
44+
推荐使用 `yarn`：
45+
46+
```shell
47+
yarn
648
```
749

8-
### Compiles and hot-reloads for development
50+
解决 `node-sass` 网络慢的方法：
51+
52+
```shell
53+
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
954
```
55+
56+
## 运行应用程序
57+
58+
安装过程完成后，运行以下命令启动服务。您可以在浏览器中预览网站 [http://localhost:9000](http://localhost:9000)
59+
60+
```shell
1061
yarn serve
1162
```
1263

13-
### Compiles and minifies for production
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+
}
14233
```
15-
yarn build
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;
16261
```
17262

18-
### Lints and fixes files
263+
在 `src/service/` 下的文件，框架会自动根据 `目录结构` 和 `文件名称` 格式化成对应的 `$service` 对象。你现在可以这么使用它：
264+
265+
```js
266+
this.$service.test.page({ page: 1 });
267+
this.$service.test.product(1);
19268
```
20-
yarn lint
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+
};
21286
```
22287

23-
### Customize configuration
24-
See [Configuration Reference](https://cli.vuejs.org/config/).
288+
5. 效果预览
289+
290+
![](https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/crud.png)

‎src/crud/types/adv-search.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import { FormItem } from "./form";
22

3-
export interface AdvSearchItem extends FormItem {}
3+
export type AdvSearchItem = FormItem;

‎src/crud/types/upsert.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Form, FormItem, FormRef } from "./form";
22

3-
export interface UpsertItem extends FormItem {}
3+
export type UpsertItem = FormItem;
44

5-
export interface UpsertRef extends FormRef {}
5+
export type UpsertRef = FormRef;
66

7-
export interface Upsert extends Form {}
7+
export type Upsert = Form;

0 commit comments

Comments
 (0)