mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 06:02:38 +08:00
Code Issues Projects Releases Wiki Activity

调整 service

Browse Source
This commit is contained in:
icssoa 2021-03-29 11:19:58 +08:00
parent 9b393264d0
commit db85ae73eb
22 changed files with 37 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
README.md
View File

@ -10,14 +10,23 @@
<img src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
</p>
## 地址
- [⚡️ vue2.x + element-ui（免费商用，支持 PC、平板、手机）](https://github.com/cool-team-official/cool-admin-vue)
- [⚡️ vue3.x + element-plus + ts + webpack（免费商用，支持 PC、平板、手机）](https://github.com/cool-team-official/cool-admin-vue/tree/vue3-ts-webpack)
- [📌 vue3.x + element-plus + ts + vite（测试中）]()
- [🌐 码云仓库地址](https://gitee.com/cool-team-official/cool-admin-vue)
## 演示
[https://show.cool-admin.com](https://show.cool-admin.com)
- 账户：admin
- 密码：123456
账户：admin，密码：123456
<img src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png" alt="Admin Home"></a>
<img src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png" alt="Admin Home" ></a>
## 项目后端
@ -35,10 +44,6 @@
[https://bbs.cool-js.com/](https://bbs.cool-js.com/)
## 使用条件
请确保您的操作系统上安装了 Node.js（> = 8.9.0）、@vue/cli （> 3.0.0）。
## 安装项目依赖
推荐使用 `yarn`：
@ -60,231 +65,3 @@ yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
```shell
yarn serve
```
## 极速 CRUD
1. `vscode` 编辑器下输入关键字 `cl-crud`，会生成对应的模板代码：
```html
<template>
<cl-crud ref="crud" @load="onLoad">
<el-row type="flex" align="middle">
<!-- 刷新按钮 -->
<cl-refresh-btn />
<!-- 新增按钮 -->
<cl-add-btn />
<!-- 删除按钮 -->
<cl-multi-delete-btn />
<cl-flex1 />
<!-- 关键字搜索 -->
<cl-search-key />
</el-row>
<el-row>
<!-- 数据表格 -->
<cl-table v-bind="table"></cl-table>
</el-row>
<el-row type="flex">
<cl-flex1 />
<!-- 分页控件 -->
<cl-pagination />
</el-row>
<!-- 新增、编辑 -->
<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
</cl-crud>
</template>
<script>
export default {
data() {
return {
// 新增、编辑配置
upsert: {
items: []
},
// 表格配置
table: {
columns: []
}
};
},
methods: {
onLoad({ ctx, app }) {
// crud 配置
ctx.service().done();
// 发送 page 接口请求
app.refresh();
}
}
};
</script>
```
2. 编辑数据表格 `cl-table`：
```js
{
table: {
// 参数与 el-table-column 一致，并支持许多骚操作
columns: [
// 多选列
{
type: "selection",
width: 60
},
// 自定义列
{
label: "昵称",
prop: "name"
},
{
label: "账户",
prop: "price",
sortable: "custom" // 是否添加排序
},
{
label: "状态",
prop: "status",
// 字典匹配，使用 el-tag 展示
dict: [
{
label: "启用",
value: 1,
type: "primary"
},
{
label: "禁用",
value: 0,
type: "danger"
}
]
},
{
label: "创建时间",
prop: "createTime"
},
// 操作按钮列，默认包含：编辑、删除
{
type: "op"
}
];
}
}
```
3. 编辑新增、编辑表单 `cl-upsert`：
```js
{
upsert: {
items: [
{
label: "昵称",
prop: "name",
// 参数与 el-form-item 一致
props: {},
value: "神仙都没用", // 昵称默认值
// 渲染参数，支持 slot, 组件实例，jsx
component: {
name: "el-input", // 可以是任意已注册的组件名
props: {}, // 组件的参数
on: {} // 组件的回调事件
},
// 验证规则，与 el-form 一致
rules: {
required: true,
message: "昵称不呢为空"
}
},
{
label: "存款",
prop: "price",
component: {
name: "el-input-number",
props: {
min: 0,
max: 10000
}
}
},
{
label: "状态",
prop: "status",
value: 1,
component: {
name: "el-radio-group",
options: [
{
label: "启用",
value: 1
},
{
label: "禁用",
value: 0
}
]
}
}
];
}
}
```
4. 绑定 `service`。在 `src/service/` 下新建文件 `test.js`，并编辑：
```js
// src/service/test.js
import { BaseService, Service, Permission } from "cl-admin";
// 请求接口的路径
@Service("test")
class Test extends BaseService {
// 继承 BaseService 后，拥有 page, list, add, delete, update, info 6个基本接口
// 自定义其他接口
@Permission("product") // 权限装饰器，可选
product(id) {
// this.request() 参数与 axios 一致
return this.request({
url: "/product",
method: "POST",
data: {
id
}
});
}
}
export default Test;
```
在 `src/service/` 下的文件，框架会自动根据 `目录结构` 和 `文件名称` 格式化成对应的 `$service` 对象。你现在可以这么使用它：
```js
this.$service.test.page({ page: 1 });
this.$service.test.product(1);
```
`service` 编写好后，我们把它绑定在 `crud` 上：
```js
export default {
methods: {
onLoad({ ctx, app }) {
// 绑定 service，这边指定到 test 即可
ctx.service(this.$service.test).done();
// 发起 page 请求
app.refresh({
// 请求默认参数
});
}
}
};
```
5. 效果预览
![](https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/crud.png)

2
src/cool/modules/base/components/dept/check.vue
View File

@ -54,7 +54,7 @@ export default defineComponent({
setup(props, { emit }) {
// 请求服务
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 表单值
const form = inject<any>("form");

2
src/cool/modules/base/components/dept/move.tsx
View File

@ -9,7 +9,7 @@ export default defineComponent({
emits: ["success", "error"],
setup(_: any, { emit }) {
const $service = inject<any>("$service");
const $service = inject<any>("service");
const { refs, setRefs } = useRefs();
// 树形列表

2
src/cool/modules/base/components/dept/tree.vue
View File

@ -94,7 +94,7 @@ export default defineComponent({
const isDrag = ref<boolean>(false);
// 请求服务
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 允许托的规则
function allowDrag({ data }: any) {

2
src/cool/modules/base/components/menu/perms.vue
View File

@ -28,7 +28,7 @@ export default defineComponent({
emits: ["update:modelValue"],
setup(props, { emit }) {
const $service = inject("$service");
const $service = inject<any>("service");
// 绑定值
const value = ref<any[]>([]);

2
src/cool/modules/base/components/menu/tree.vue
View File

@ -50,7 +50,7 @@ export default defineComponent({
setup(props, { emit }) {
// 请求服务
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 关键字
const keyword = ref<string>("");

2
src/cool/modules/base/components/role/perms.vue
View File

@ -41,7 +41,7 @@ export default defineComponent({
},
setup(props, { emit }) {
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 树形列表
const list = ref<any[]>([]);

2
src/cool/modules/base/components/role/select.vue
View File

@ -25,7 +25,7 @@ export default defineComponent({
setup(props, { emit }) {
// 请求服务
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 数据列表
const list = ref<any[]>([]);

2
src/cool/modules/base/pages/login/components/captcha.vue
View File

@ -15,7 +15,7 @@ export default defineComponent({
setup(_, { emit }) {
const base64 = ref("");
const svg = ref("");
const $service = inject<any>("$service");
const $service = inject<any>("service");
const refresh = () => {
$service.open

2
src/cool/modules/base/views/info.vue
View File

@ -32,7 +32,7 @@ export default defineComponent({
setup() {
const store = useStore();
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 表单数据
const form = reactive<any>(store.getters.userInfo);

2
src/cool/modules/base/views/log.vue
View File

@ -48,7 +48,7 @@ export default defineComponent({
name: "sys-log",
setup() {
const $service = inject<any>("$service");
const $service = inject<any>("service");
const { refs, setRefs } = useRefs();
// 天数

2
src/cool/modules/base/views/menu.vue
View File

@ -89,7 +89,7 @@ export default defineComponent({
setup() {
const router = useRouter();
const { refs, setRefs } = useRefs();
const $service = inject<any>("$service");
const $service = inject<any>("service");
// crud 加载
function onLoad({ ctx, app }: CrudLoad) {

2
src/cool/modules/base/views/param.vue
View File

@ -47,7 +47,7 @@ export default defineComponent({
name: "sys-param",
setup() {
const $service = inject<any>("$service");
const $service = inject<any>("service");
const { refs, setRefs } = useRefs();
// 选项卡

2
src/cool/modules/base/views/plugin.vue
View File

@ -57,7 +57,7 @@ export default defineComponent({
name: "sys-plugin",
setup() {
const $service = inject<any>("$service");
const $service = inject<any>("service");
const { refs, setRefs } = useRefs();
// 编辑权限

2
src/cool/modules/base/views/role.vue
View File

@ -29,7 +29,7 @@ export default defineComponent({
name: "sys-role",
setup() {
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 表单值
const form = reactive<any>({

2
src/cool/modules/base/views/user.vue
View File

@ -118,7 +118,7 @@ export default {
name: "sys-user",
setup() {
const $service = inject<any>("$service");
const $service = inject<any>("service");
const store = useStore();
const { refs, setRefs } = useRefs();

2
src/cool/modules/chat/components/chat.vue
View File

@ -85,7 +85,7 @@ export default defineComponent({
setup(_, { emit }) {
const store = useStore();
const { refs, setRefs } = useRefs();
const $service = inject<any>("$service");
const $service = inject<any>("service");
const mitt = inject<any>("mitt");
// 当前会话

2
src/cool/modules/chat/components/message.vue
View File

@ -126,7 +126,7 @@ export default defineComponent({
setup() {
const store = useStore();
const { refs, setRefs } = useRefs();
const $service = inject<any>("$service");
const $service = inject<any>("service");
const chat = inject<any>("chat");
const mitt = inject<any>("mitt");

2
src/cool/modules/chat/components/session.vue
View File

@ -63,7 +63,7 @@ import { parseContent } from "../utils";
export default defineComponent({
setup() {
const store = useStore();
const $service = inject<any>("$service");
const $service = inject<any>("service");
const mitt = inject<any>("mitt");
// 当前会话信息

2
src/cool/modules/task/views/task.vue
View File

@ -232,7 +232,7 @@ export default defineComponent({
setup() {
const { refs, setRefs } = useRefs();
const $service = inject<any>("$service");
const $service = inject<any>("service");
// 任务列表
const list = reactive<any[]>([

2
src/core/set/service.ts
View File

@ -50,5 +50,5 @@ export default function(app: any) {
// @ts-ignore
app.config.globalProperties.$service = store.$service = modules;
app.provide("$service", modules);
app.provide("service", modules);
}

8
src/crud/components/dialog/index.tsx
View File

@ -264,8 +264,7 @@ export default defineComponent({
{
...ctx.props,
customClass,
fullscreen: ctx.isFullscreen,
key: ctx.cacheKey
fullscreen: ctx.isFullscreen
},
{
title() {
@ -273,7 +272,10 @@ export default defineComponent({
},
default() {
return (
<div class="cl-dialog__container" style={{ height: ctx.height }}>
<div
class="cl-dialog__container"
style={{ height: ctx.height }}
key={ctx.cacheKey}>
{ctx.$slots.default && ctx.$slots.default()}
</div>
);