Skip to content

Commit db85ae7

Browse files
committed
调整 service
1 parent 9b39326 commit db85ae7

File tree

22 files changed

+37
-258
lines changed

22 files changed

+37
-258
lines changed

README.md

+12-235
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,23 @@
1010
<img src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
1111
</p>
1212

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+
1323
## 演示
1424

1525
[https://show.cool-admin.com](https://show.cool-admin.com)
1626

17-
- 账户:admin
18-
- 密码:123456
27+
账户:admin,密码:123456
1928

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>
2130

2231
## 项目后端
2332

@@ -35,10 +44,6 @@
3544

3645
[https://bbs.cool-js.com/](https://bbs.cool-js.com/)
3746

38-
## 使用条件
39-
40-
请确保您的操作系统上安装了 Node.js(> = 8.9.0)、@vue/cli (> 3.0.0)。
41-
4247
## 安装项目依赖
4348

4449
推荐使用 `yarn`
@@ -60,231 +65,3 @@ yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
6065
```shell
6166
yarn serve
6267
```
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)

src/cool/modules/base/components/dept/check.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default defineComponent({
5454
5555
setup(props, { emit }) {
5656
// 请求服务
57-
const $service = inject<any>("$service");
57+
const $service = inject<any>("service");
5858
5959
// 表单值
6060
const form = inject<any>("form");

src/cool/modules/base/components/dept/move.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default defineComponent({
99
emits: ["success", "error"],
1010

1111
setup(_: any, { emit }) {
12-
const $service = inject<any>("$service");
12+
const $service = inject<any>("service");
1313
const { refs, setRefs } = useRefs();
1414

1515
// 树形列表

src/cool/modules/base/components/dept/tree.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export default defineComponent({
9494
const isDrag = ref<boolean>(false);
9595
9696
// 请求服务
97-
const $service = inject<any>("$service");
97+
const $service = inject<any>("service");
9898
9999
// 允许托的规则
100100
function allowDrag({ data }: any) {

src/cool/modules/base/components/menu/perms.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default defineComponent({
2828
emits: ["update:modelValue"],
2929
3030
setup(props, { emit }) {
31-
const $service = inject("$service");
31+
const $service = inject<any>("service");
3232
3333
// 绑定值
3434
const value = ref<any[]>([]);

src/cool/modules/base/components/menu/tree.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default defineComponent({
5050
5151
setup(props, { emit }) {
5252
// 请求服务
53-
const $service = inject<any>("$service");
53+
const $service = inject<any>("service");
5454
5555
// 关键字
5656
const keyword = ref<string>("");

src/cool/modules/base/components/role/perms.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default defineComponent({
4141
},
4242
4343
setup(props, { emit }) {
44-
const $service = inject<any>("$service");
44+
const $service = inject<any>("service");
4545
4646
// 树形列表
4747
const list = ref<any[]>([]);

src/cool/modules/base/components/role/select.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default defineComponent({
2525
2626
setup(props, { emit }) {
2727
// 请求服务
28-
const $service = inject<any>("$service");
28+
const $service = inject<any>("service");
2929
3030
// 数据列表
3131
const list = ref<any[]>([]);

src/cool/modules/base/pages/login/components/captcha.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default defineComponent({
1515
setup(_, { emit }) {
1616
const base64 = ref("");
1717
const svg = ref("");
18-
const $service = inject<any>("$service");
18+
const $service = inject<any>("service");
1919
2020
const refresh = () => {
2121
$service.open

src/cool/modules/base/views/info.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default defineComponent({
3232
3333
setup() {
3434
const store = useStore();
35-
const $service = inject<any>("$service");
35+
const $service = inject<any>("service");
3636
3737
// 表单数据
3838
const form = reactive<any>(store.getters.userInfo);

src/cool/modules/base/views/log.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default defineComponent({
4848
name: "sys-log",
4949
5050
setup() {
51-
const $service = inject<any>("$service");
51+
const $service = inject<any>("service");
5252
const { refs, setRefs } = useRefs();
5353
5454
// 天数

src/cool/modules/base/views/menu.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default defineComponent({
8989
setup() {
9090
const router = useRouter();
9191
const { refs, setRefs } = useRefs();
92-
const $service = inject<any>("$service");
92+
const $service = inject<any>("service");
9393
9494
// crud 加载
9595
function onLoad({ ctx, app }: CrudLoad) {

src/cool/modules/base/views/param.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default defineComponent({
4747
name: "sys-param",
4848
4949
setup() {
50-
const $service = inject<any>("$service");
50+
const $service = inject<any>("service");
5151
const { refs, setRefs } = useRefs();
5252
5353
// 选项卡

src/cool/modules/base/views/plugin.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default defineComponent({
5757
name: "sys-plugin",
5858
5959
setup() {
60-
const $service = inject<any>("$service");
60+
const $service = inject<any>("service");
6161
const { refs, setRefs } = useRefs();
6262
6363
// 编辑权限

src/cool/modules/base/views/role.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default defineComponent({
2929
name: "sys-role",
3030
3131
setup() {
32-
const $service = inject<any>("$service");
32+
const $service = inject<any>("service");
3333
3434
// 表单值
3535
const form = reactive<any>({

0 commit comments

Comments
 (0)