diff --git a/README.md b/README.md index 76604df..a45945a 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,23 @@ GitHub tag

+## 地址 + +- [⚡️ 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 -Admin Home +Admin Home ## 项目后端 @@ -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 - - - -``` - -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) diff --git a/src/cool/modules/base/components/dept/check.vue b/src/cool/modules/base/components/dept/check.vue index 4b8bad4..29274a8 100644 --- a/src/cool/modules/base/components/dept/check.vue +++ b/src/cool/modules/base/components/dept/check.vue @@ -54,7 +54,7 @@ export default defineComponent({ setup(props, { emit }) { // 请求服务 - const $service = inject("$service"); + const $service = inject("service"); // 表单值 const form = inject("form"); diff --git a/src/cool/modules/base/components/dept/move.tsx b/src/cool/modules/base/components/dept/move.tsx index 3ac244e..1d3cdf8 100644 --- a/src/cool/modules/base/components/dept/move.tsx +++ b/src/cool/modules/base/components/dept/move.tsx @@ -9,7 +9,7 @@ export default defineComponent({ emits: ["success", "error"], setup(_: any, { emit }) { - const $service = inject("$service"); + const $service = inject("service"); const { refs, setRefs } = useRefs(); // 树形列表 diff --git a/src/cool/modules/base/components/dept/tree.vue b/src/cool/modules/base/components/dept/tree.vue index 45b380a..1198d93 100644 --- a/src/cool/modules/base/components/dept/tree.vue +++ b/src/cool/modules/base/components/dept/tree.vue @@ -94,7 +94,7 @@ export default defineComponent({ const isDrag = ref(false); // 请求服务 - const $service = inject("$service"); + const $service = inject("service"); // 允许托的规则 function allowDrag({ data }: any) { diff --git a/src/cool/modules/base/components/menu/perms.vue b/src/cool/modules/base/components/menu/perms.vue index 20fd010..1e3e9fc 100644 --- a/src/cool/modules/base/components/menu/perms.vue +++ b/src/cool/modules/base/components/menu/perms.vue @@ -28,7 +28,7 @@ export default defineComponent({ emits: ["update:modelValue"], setup(props, { emit }) { - const $service = inject("$service"); + const $service = inject("service"); // 绑定值 const value = ref([]); diff --git a/src/cool/modules/base/components/menu/tree.vue b/src/cool/modules/base/components/menu/tree.vue index ae34249..735253f 100644 --- a/src/cool/modules/base/components/menu/tree.vue +++ b/src/cool/modules/base/components/menu/tree.vue @@ -50,7 +50,7 @@ export default defineComponent({ setup(props, { emit }) { // 请求服务 - const $service = inject("$service"); + const $service = inject("service"); // 关键字 const keyword = ref(""); diff --git a/src/cool/modules/base/components/role/perms.vue b/src/cool/modules/base/components/role/perms.vue index 37902bf..cc256b3 100644 --- a/src/cool/modules/base/components/role/perms.vue +++ b/src/cool/modules/base/components/role/perms.vue @@ -41,7 +41,7 @@ export default defineComponent({ }, setup(props, { emit }) { - const $service = inject("$service"); + const $service = inject("service"); // 树形列表 const list = ref([]); diff --git a/src/cool/modules/base/components/role/select.vue b/src/cool/modules/base/components/role/select.vue index 936aeb3..373845a 100644 --- a/src/cool/modules/base/components/role/select.vue +++ b/src/cool/modules/base/components/role/select.vue @@ -25,7 +25,7 @@ export default defineComponent({ setup(props, { emit }) { // 请求服务 - const $service = inject("$service"); + const $service = inject("service"); // 数据列表 const list = ref([]); diff --git a/src/cool/modules/base/pages/login/components/captcha.vue b/src/cool/modules/base/pages/login/components/captcha.vue index 160c11d..f59ad9f 100644 --- a/src/cool/modules/base/pages/login/components/captcha.vue +++ b/src/cool/modules/base/pages/login/components/captcha.vue @@ -15,7 +15,7 @@ export default defineComponent({ setup(_, { emit }) { const base64 = ref(""); const svg = ref(""); - const $service = inject("$service"); + const $service = inject("service"); const refresh = () => { $service.open diff --git a/src/cool/modules/base/views/info.vue b/src/cool/modules/base/views/info.vue index 224d25d..7d4aba0 100644 --- a/src/cool/modules/base/views/info.vue +++ b/src/cool/modules/base/views/info.vue @@ -32,7 +32,7 @@ export default defineComponent({ setup() { const store = useStore(); - const $service = inject("$service"); + const $service = inject("service"); // 表单数据 const form = reactive(store.getters.userInfo); diff --git a/src/cool/modules/base/views/log.vue b/src/cool/modules/base/views/log.vue index c80d202..b5d4b12 100644 --- a/src/cool/modules/base/views/log.vue +++ b/src/cool/modules/base/views/log.vue @@ -48,7 +48,7 @@ export default defineComponent({ name: "sys-log", setup() { - const $service = inject("$service"); + const $service = inject("service"); const { refs, setRefs } = useRefs(); // 天数 diff --git a/src/cool/modules/base/views/menu.vue b/src/cool/modules/base/views/menu.vue index a4d5ad2..035aca7 100644 --- a/src/cool/modules/base/views/menu.vue +++ b/src/cool/modules/base/views/menu.vue @@ -89,7 +89,7 @@ export default defineComponent({ setup() { const router = useRouter(); const { refs, setRefs } = useRefs(); - const $service = inject("$service"); + const $service = inject("service"); // crud 加载 function onLoad({ ctx, app }: CrudLoad) { diff --git a/src/cool/modules/base/views/param.vue b/src/cool/modules/base/views/param.vue index d914f9f..1c21d4e 100644 --- a/src/cool/modules/base/views/param.vue +++ b/src/cool/modules/base/views/param.vue @@ -47,7 +47,7 @@ export default defineComponent({ name: "sys-param", setup() { - const $service = inject("$service"); + const $service = inject("service"); const { refs, setRefs } = useRefs(); // 选项卡 diff --git a/src/cool/modules/base/views/plugin.vue b/src/cool/modules/base/views/plugin.vue index 0f311b5..0a7a2bb 100644 --- a/src/cool/modules/base/views/plugin.vue +++ b/src/cool/modules/base/views/plugin.vue @@ -57,7 +57,7 @@ export default defineComponent({ name: "sys-plugin", setup() { - const $service = inject("$service"); + const $service = inject("service"); const { refs, setRefs } = useRefs(); // 编辑权限 diff --git a/src/cool/modules/base/views/role.vue b/src/cool/modules/base/views/role.vue index 53db3d6..06ac1bb 100644 --- a/src/cool/modules/base/views/role.vue +++ b/src/cool/modules/base/views/role.vue @@ -29,7 +29,7 @@ export default defineComponent({ name: "sys-role", setup() { - const $service = inject("$service"); + const $service = inject("service"); // 表单值 const form = reactive({ diff --git a/src/cool/modules/base/views/user.vue b/src/cool/modules/base/views/user.vue index 04932f5..5d336e0 100644 --- a/src/cool/modules/base/views/user.vue +++ b/src/cool/modules/base/views/user.vue @@ -118,7 +118,7 @@ export default { name: "sys-user", setup() { - const $service = inject("$service"); + const $service = inject("service"); const store = useStore(); const { refs, setRefs } = useRefs(); diff --git a/src/cool/modules/chat/components/chat.vue b/src/cool/modules/chat/components/chat.vue index e409eb7..22aa61f 100644 --- a/src/cool/modules/chat/components/chat.vue +++ b/src/cool/modules/chat/components/chat.vue @@ -85,7 +85,7 @@ export default defineComponent({ setup(_, { emit }) { const store = useStore(); const { refs, setRefs } = useRefs(); - const $service = inject("$service"); + const $service = inject("service"); const mitt = inject("mitt"); // 当前会话 diff --git a/src/cool/modules/chat/components/message.vue b/src/cool/modules/chat/components/message.vue index 3d15d57..48298de 100644 --- a/src/cool/modules/chat/components/message.vue +++ b/src/cool/modules/chat/components/message.vue @@ -126,7 +126,7 @@ export default defineComponent({ setup() { const store = useStore(); const { refs, setRefs } = useRefs(); - const $service = inject("$service"); + const $service = inject("service"); const chat = inject("chat"); const mitt = inject("mitt"); diff --git a/src/cool/modules/chat/components/session.vue b/src/cool/modules/chat/components/session.vue index af44323..8bfd51a 100644 --- a/src/cool/modules/chat/components/session.vue +++ b/src/cool/modules/chat/components/session.vue @@ -63,7 +63,7 @@ import { parseContent } from "../utils"; export default defineComponent({ setup() { const store = useStore(); - const $service = inject("$service"); + const $service = inject("service"); const mitt = inject("mitt"); // 当前会话信息 diff --git a/src/cool/modules/task/views/task.vue b/src/cool/modules/task/views/task.vue index 602f51b..f4840bd 100644 --- a/src/cool/modules/task/views/task.vue +++ b/src/cool/modules/task/views/task.vue @@ -232,7 +232,7 @@ export default defineComponent({ setup() { const { refs, setRefs } = useRefs(); - const $service = inject("$service"); + const $service = inject("service"); // 任务列表 const list = reactive([ diff --git a/src/core/set/service.ts b/src/core/set/service.ts index ab9d753..ba9f547 100644 --- a/src/core/set/service.ts +++ b/src/core/set/service.ts @@ -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); } diff --git a/src/crud/components/dialog/index.tsx b/src/crud/components/dialog/index.tsx index 12f67c6..f9a593c 100644 --- a/src/crud/components/dialog/index.tsx +++ b/src/crud/components/dialog/index.tsx @@ -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 ( -
+
{ctx.$slots.default && ctx.$slots.default()}
);