From 69d0f2d756f53928a13d3273975c6a7dd1b7ef4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9E=E4=BB=99=E9=83=BD=E6=B2=A1=E7=94=A8?= <615206459@qq.com> Date: Thu, 26 Dec 2024 17:32:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E6=94=B9=E4=B8=BB=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/crud/index.d.ts | 3 + packages/crud/package.json | 4 +- packages/crud/src/components/crud/helper.ts | 4 +- .../crud/src/components/form/helper/action.ts | 5 +- packages/crud/src/components/form/index.tsx | 8 +- packages/crud/src/components/search/index.tsx | 133 +++- packages/crud/src/hooks/crud.ts | 3 +- packages/crud/src/locale/en.ts | 4 +- packages/crud/src/locale/ja.ts | 4 +- packages/crud/src/locale/zh-cn.ts | 4 +- packages/crud/src/locale/zh-tw.ts | 4 +- packages/crud/src/static/index.scss | 24 + packages/crud/src/test/service.ts | 4 +- packages/crud/src/utils/index.ts | 4 +- packages/crud/src/utils/vnode.tsx | 5 +- .../crud/types/components/search/index.d.ts | 3 + packages/crud/types/locale/en.d.ts | 2 + packages/crud/types/locale/index.d.ts | 8 + packages/crud/types/locale/ja.d.ts | 2 + packages/crud/types/locale/zh-cn.d.ts | 2 + packages/crud/types/locale/zh-tw.d.ts | 2 + pnpm-lock.yaml | 609 +++++++++--------- src/modules/base/components/editor/index.tsx | 3 +- src/modules/base/components/menu/file.vue | 1 - .../base/pages/main/components/amenu.vue | 3 +- .../base/pages/main/components/process.vue | 16 +- .../base/pages/main/components/route-nav.vue | 1 + .../base/pages/main/components/topbar.vue | 4 +- src/modules/base/pages/main/index.vue | 19 +- src/modules/base/static/svg/screen-full.svg | 17 + src/modules/base/static/svg/screen-normal.svg | 17 + src/modules/base/store/app.ts | 28 +- .../base/views/user/components/dept-list.vue | 35 +- .../demo/views/crud/components/form/open.vue | 2 +- .../views/crud/components/search/collapse.vue | 120 ++++ src/modules/demo/views/crud/index.vue | 5 +- src/modules/helper/views/plugins/vue.vue | 11 +- src/plugins/crud/components/render/index.tsx | 22 + src/plugins/crud/config.ts | 8 +- src/plugins/echarts/config.ts | 1 + src/plugins/element-ui/config.ts | 1 + 42 files changed, 753 insertions(+), 404 deletions(-) create mode 100644 src/modules/base/static/svg/screen-full.svg create mode 100644 src/modules/base/static/svg/screen-normal.svg create mode 100644 src/modules/demo/views/crud/components/search/collapse.vue create mode 100644 src/plugins/crud/components/render/index.tsx diff --git a/package.json b/package.json index 79945be..059e626 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "format": "prettier --write src/" }, "dependencies": { - "@cool-vue/crud": "^7.2.5", + "@cool-vue/crud": "^7.2.7", "@element-plus/icons-vue": "^2.3.1", "@vueuse/core": "^11.1.0", "@wangeditor/editor": "^5.1.23", diff --git a/packages/crud/index.d.ts b/packages/crud/index.d.ts index 8659e28..612733b 100644 --- a/packages/crud/index.d.ts +++ b/packages/crud/index.d.ts @@ -160,6 +160,8 @@ declare namespace ClCrud { seeMore: string; hideContent: string; nonEmpty: string; + collapse: string; + expand: string; [key: string]: string; } @@ -669,6 +671,7 @@ declare namespace ClSearch { data?: T; props?: ElementPlus.FormProps; resetBtn?: boolean; + collapse?: boolean; Form?: ClForm.Ref; onChange?(data: T, prop: string): void; onLoad?(data: T): void; diff --git a/packages/crud/package.json b/packages/crud/package.json index cfd590a..71192a2 100644 --- a/packages/crud/package.json +++ b/packages/crud/package.json @@ -1,6 +1,6 @@ { "name": "@cool-vue/crud", - "version": "7.2.5", + "version": "7.2.7", "private": false, "main": "./dist/index.umd.min.js", "typings": "types/index.d.ts", @@ -8,7 +8,7 @@ "dev": "vue-cli-service serve", "build": "vue-cli-service build", "tsc": "tsc --watch", - "dist": "tsc && yarn build --target lib --name index ./src/index.ts" + "dist": "tsc && pnpm build --target lib --name index ./src/index.ts" }, "dependencies": { "@element-plus/icons-vue": "^2.3.1", diff --git a/packages/crud/src/components/crud/helper.ts b/packages/crud/src/components/crud/helper.ts index 18951ee..6ebcca8 100644 --- a/packages/crud/src/components/crud/helper.ts +++ b/packages/crud/src/components/crud/helper.ts @@ -1,7 +1,7 @@ import { ElMessageBox, ElMessage } from "element-plus"; import { Mitt } from "../../utils/mitt"; import { ref } from "vue"; -import { isArray, isFunction } from "lodash-es"; +import { assign, isArray, isFunction } from "lodash-es"; import { merge } from "../../utils"; interface Options { @@ -56,7 +56,7 @@ export function useHelper({ config, crud, mitt }: Options) { return new Promise((success, error) => { // 合并请求参数 - const reqParams = paramsReplace(Object.assign(crud.params, params)); + const reqParams = paramsReplace(assign(crud.params, params)); // Loading crud.loading = true; diff --git a/packages/crud/src/components/form/helper/action.ts b/packages/crud/src/components/form/helper/action.ts index 9d85a0d..eaf9674 100644 --- a/packages/crud/src/components/form/helper/action.ts +++ b/packages/crud/src/components/form/helper/action.ts @@ -1,3 +1,4 @@ +import { assign } from "lodash-es"; import { dataset } from "../../../utils"; export function useAction({ @@ -48,7 +49,7 @@ export function useAction({ break; case "props": - Object.assign(d.component.props, data); + assign(d.component.props, data); break; case "hidden": @@ -60,7 +61,7 @@ export function useAction({ break; default: - Object.assign(d, data); + assign(d, data); break; } } else { diff --git a/packages/crud/src/components/form/index.tsx b/packages/crud/src/components/form/index.tsx index 89af8be..39e1100 100644 --- a/packages/crud/src/components/form/index.tsx +++ b/packages/crud/src/components/form/index.tsx @@ -1,5 +1,5 @@ import { defineComponent, h, nextTick, toRef, watch } from "vue"; -import { cloneDeep, isBoolean } from "lodash-es"; +import { assign, cloneDeep, isBoolean, keys } from "lodash-es"; import { useAction, useForm, usePlugins, useTabs } from "./helper"; import { useBrowser, useConfig, useElApi, useRefs } from "../../hooks"; import { getValue, merge } from "../../utils"; @@ -205,7 +205,7 @@ export default defineComponent({ Tabs.toGroup({ refs, config, - prop: Object.keys(error)[0] + prop: keys(error)[0] }); } }); @@ -347,7 +347,7 @@ export default defineComponent({ deep(e); }); - Object.assign(form, data); + assign(form, data); } // 渲染表单项 @@ -575,9 +575,7 @@ export default defineComponent({ custom() { return ( { e.onClick({ scope: form }); diff --git a/packages/crud/src/components/search/index.tsx b/packages/crud/src/components/search/index.tsx index be19109..7a56356 100644 --- a/packages/crud/src/components/search/index.tsx +++ b/packages/crud/src/components/search/index.tsx @@ -1,5 +1,4 @@ -import { useConfig, useCore, useForm } from "../../hooks"; -import { isEmpty, keys } from "lodash-es"; +import { useConfig, useCore, useForm, useProxy, useRefs } from "../../hooks"; import { onMounted, PropType, @@ -9,10 +8,12 @@ import { reactive, inject, mergeProps, - watch, - watchEffect + nextTick, + onUnmounted } from "vue"; import { useApi } from "../form/helper"; +import { Search, Refresh, Bottom, Top } from "@element-plus/icons-vue"; +import { mitt } from "../../utils/mitt"; export default defineComponent({ name: "cl-search", @@ -24,7 +25,7 @@ export default defineComponent({ }, props: { type: Object, - default: () => {} + default: () => { } }, // 表单值 @@ -47,6 +48,9 @@ export default defineComponent({ default: false }, + // 是否需要折叠 + collapse: Boolean, + // 初始化 onLoad: Function, @@ -58,6 +62,7 @@ export default defineComponent({ setup(props, { slots, expose, emit }) { const { crud } = useCore(); + const { refs, setRefs } = useRefs() const { style } = useConfig(); // 配置 @@ -71,6 +76,12 @@ export default defineComponent({ // 加载中 const loading = ref(false); + // 展开 + const isExpand = ref(!config.collapse); + + // 显示展开、收起按钮 + const showExpandBtn = ref(false); + // 搜索 function search(params?: any) { const form = Form.value?.getForm(); @@ -123,14 +134,43 @@ export default defineComponent({ emit("reset", d); } - expose({ + // 收起、展开 + function expand() { + isExpand.value = !isExpand.value; + + nextTick(() => { + crud?.["cl-table"].calcMaxHeight() + }) + } + + // 判断展开状态 + function onExpand() { + if (config.collapse) { + const el = refs.form?.querySelector(".cl-form__items"); + + if (el) { + showExpandBtn.value = el.clientHeight > 84; + } + } + } + + function onResize() { + onExpand(); + } + + const ctx = { search, reset, Form, + config, ...useApi({ Form }) - }); + }; + + useProxy(ctx); + expose(ctx); onMounted(() => { + // 打开表单 Form.value?.open({ op: { hidden: true @@ -141,18 +181,51 @@ export default defineComponent({ on: { open(data) { config.onLoad?.(data); + onExpand(); }, change(data, prop) { config.onChange?.(data, prop); } } }); + + mitt.on("resize", onResize); }); + onUnmounted(() => { + mitt.off("resize", onResize); + }) + return () => { + const btnEl = ( + + {/* 重置按钮 */} + {config.resetBtn && ( + + {crud.dict.label.reset} + + )} + + {/* 搜索按钮 */} + { + search(); + }}> + {crud.dict.label.search} + + + {/* 自定义按钮 */} + {slots?.buttons?.(Form.value?.form)} + + ); + return ( - isEmpty(config.items) || ( - + + @@ -44,7 +51,7 @@ import { ContextMenu } from '@cool-vue/crud'; import { useBase, type Process } from '/$/base'; const { refs, setRefs, route, router, mitt } = useCool(); -const { process } = useBase(); +const { process, app } = useBase(); // 刷新当前路由 function toRefresh() { @@ -61,6 +68,11 @@ function toBack() { router.back(); } +// 设置全屏 +function toFull() { + app.setFull(!app.isFull); +} + // 跳转 function toPath() { const d = process.list.find(e => e.active); @@ -173,7 +185,6 @@ onMounted(() => { &__op { list-style: none; - margin-right: 5px; .item { display: inline-flex; @@ -201,6 +212,7 @@ onMounted(() => { flex: 1; position: relative; overflow: hidden; + margin: 0 5px; } &__scroller { diff --git a/src/modules/base/pages/main/components/route-nav.vue b/src/modules/base/pages/main/components/route-nav.vue index a8a53c9..694442d 100644 --- a/src/modules/base/pages/main/components/route-nav.vue +++ b/src/modules/base/pages/main/components/route-nav.vue @@ -58,6 +58,7 @@ const lastName = computed(() => last(list.value)?.meta?.label); diff --git a/src/modules/base/static/svg/screen-full.svg b/src/modules/base/static/svg/screen-full.svg new file mode 100644 index 0000000..d4da693 --- /dev/null +++ b/src/modules/base/static/svg/screen-full.svg @@ -0,0 +1,17 @@ + + + + diff --git a/src/modules/base/static/svg/screen-normal.svg b/src/modules/base/static/svg/screen-normal.svg new file mode 100644 index 0000000..4561b14 --- /dev/null +++ b/src/modules/base/static/svg/screen-normal.svg @@ -0,0 +1,17 @@ + + + + diff --git a/src/modules/base/store/app.ts b/src/modules/base/store/app.ts index 8f3848c..0a0bd57 100644 --- a/src/modules/base/store/app.ts +++ b/src/modules/base/store/app.ts @@ -13,14 +13,15 @@ export const useAppStore = defineStore('app', function () { ...config.app }); + // 设置基本信息 + function set(data: any) { + merge(info, data); + storage.set('__app__', info); + } + // 是否折叠 const isFold = ref(false); - // 事件 - const events = reactive<{ [key: string]: any[] }>({ - hasToken: [] - }); - // 折叠 function fold(v?: boolean) { if (v === undefined) { @@ -30,12 +31,19 @@ export const useAppStore = defineStore('app', function () { isFold.value = v; } - // 设置基本信息 - function set(data: any) { - merge(info, data); - storage.set('__app__', info); + // 是否全屏 + const isFull = ref(false); + + // 设置全屏 + function setFull(state: boolean) { + isFull.value = state; } + // 事件 + const events = reactive<{ [key: string]: any[] }>({ + hasToken: [] + }); + // 添加事件 function addEvent(name: string, func: any) { if (func) { @@ -52,6 +60,8 @@ export const useAppStore = defineStore('app', function () { info, isFold, fold, + isFull, + setFull, events, set, addEvent diff --git a/src/modules/base/views/user/components/dept-list.vue b/src/modules/base/views/user/components/dept-list.vue index 72bc190..ff89a0c 100644 --- a/src/modules/base/views/user/components/dept-list.vue +++ b/src/modules/base/views/user/components/dept-list.vue @@ -3,28 +3,28 @@
组织架构 -
-
  • +
    -
  • + -
  • - 保存 +
    + 保存 取消 -
  • - + +
    @@ -392,21 +392,32 @@ onMounted(function () { &__op { display: flex; + align-items: center; - li { + .item { display: flex; justify-content: center; align-items: center; list-style: none; margin-left: 5px; - padding: 5px; cursor: pointer; border-radius: 4px; + font-size: 16px; + height: 26px; + width: 26px; - &:not(.no):hover { + &:hover { background-color: var(--el-fill-color-light); } } + + .btns { + margin-left: 10px; + + .el-button + .el-button { + margin-left: 10px; + } + } } &__container { diff --git a/src/modules/demo/views/crud/components/form/open.vue b/src/modules/demo/views/crud/components/form/open.vue index 2dca047..bb83980 100644 --- a/src/modules/demo/views/crud/components/form/open.vue +++ b/src/modules/demo/views/crud/components/form/open.vue @@ -20,7 +20,7 @@
    - + + diff --git a/src/modules/demo/views/crud/index.vue b/src/modules/demo/views/crud/index.vue index 307ae31..2ac42a6 100644 --- a/src/modules/demo/views/crud/index.vue +++ b/src/modules/demo/views/crud/index.vue @@ -27,6 +27,7 @@