From 66fdfebb5e9b0c681a33fa3861db0852931ea1cf Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 15 Dec 2022 12:28:51 +0800 Subject: [PATCH 1/2] chore: update `@pureadmin/theme` latest --- build/plugins.ts | 9 +------ package.json | 2 +- pnpm-lock.yaml | 50 +++++++++++++++++++-------------------- src/layout/theme/index.ts | 11 ++++----- types/shims-vue.d.ts | 2 -- 5 files changed, 31 insertions(+), 43 deletions(-) diff --git a/build/plugins.ts b/build/plugins.ts index edc31c2a9..60089c783 100644 --- a/build/plugins.ts +++ b/build/plugins.ts @@ -40,14 +40,7 @@ export function getPluginsList( themePreprocessorPlugin({ scss: { multipleScopeVars: genScssMultipleScopeVars(), - // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效 - extract: true, - // 会选取defaultScopeName对应的主题css文件在html添加link - themeLinkTagId: "head", - // "head"||"head-prepend" || "body" ||"body-prepend" - themeLinkTagInjectTo: "head", - // 是否对抽取的css文件内对应scopeName的权重类名移除 - removeCssScopeName: false + extract: true } }), // svg组件化支持 diff --git a/package.json b/package.json index 97c72e6f1..99db94a72 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "@iconify-icons/ri": "^1.2.3", "@iconify/vue": "^4.0.0", "@intlify/vite-plugin-vue-i18n": "^6.0.3", - "@pureadmin/theme": "^2.4.0", + "@pureadmin/theme": "^3.0.0", "@types/element-resize-detector": "1.1.3", "@types/intro.js": "^5.1.0", "@types/js-cookie": "^3.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f78d6b695..1cb5c928f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,7 +14,7 @@ specifiers: "@logicflow/extension": ^1.1.30 "@pureadmin/descriptions": ^1.1.0 "@pureadmin/table": ^1.9.0 - "@pureadmin/theme": ^2.4.0 + "@pureadmin/theme": ^3.0.0 "@pureadmin/utils": ^1.8.5 "@types/element-resize-detector": 1.1.3 "@types/intro.js": ^5.1.0 @@ -153,7 +153,7 @@ dependencies: vue-pdf-embed: 1.1.5_vue@3.2.45 vue-router: 4.1.6_vue@3.2.45 vue-types: 4.2.1_vue@3.2.45 - vue-virtual-scroller: 2.0.0-beta.5_vue@3.2.45 + vue-virtual-scroller: 2.0.0-beta.7_vue@3.2.45 vue3-danmaku: 1.2.0_vue@3.2.45 vuedraggable: 4.1.0_vue@3.2.45 xgplayer: 2.32.2 @@ -163,16 +163,16 @@ devDependencies: "@commitlint/cli": 13.1.0 "@commitlint/config-conventional": 13.1.0 "@iconify-icons/ep": 1.2.10 - "@iconify-icons/mdi": 1.2.34 + "@iconify-icons/mdi": 1.2.35 "@iconify-icons/ri": 1.2.4 "@iconify/vue": 4.0.2_vue@3.2.45 "@intlify/vite-plugin-vue-i18n": 6.0.3_vite@3.1.8+vue-i18n@9.2.2 - "@pureadmin/theme": 2.4.0 + "@pureadmin/theme": 3.0.0 "@types/element-resize-detector": 1.1.3 "@types/intro.js": 5.1.0 "@types/js-cookie": 3.0.2 "@types/mockjs": 1.0.7 - "@types/node": 18.11.13 + "@types/node": 18.11.15 "@types/nprogress": 0.2.0 "@types/qrcode": 1.5.0 "@types/qs": 6.9.7 @@ -933,10 +933,10 @@ packages: vue: 3.2.45 dev: false - /@humanwhocodes/config-array/0.11.7: + /@humanwhocodes/config-array/0.11.8: resolution: { - integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw== + integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g== } engines: { node: ">=10.10.0" } dependencies: @@ -971,10 +971,10 @@ packages: "@iconify/types": 2.0.0 dev: true - /@iconify-icons/mdi/1.2.34: + /@iconify-icons/mdi/1.2.35: resolution: { - integrity: sha512-3A7ezd/9mQKM9KEqR8QIfJaBWJ/HfZ3u45oy5/yU6FlTQrfRx+f+e0hD0nwAkbOptZmz2sFsGIfwBdX4Kl+JIw== + integrity: sha512-cOxQdQqMcV/CA3d2CkTFVRyvYRDE5SpX0Wekjl5lbEQ5IkAPy0hJrOebSH1Jo+IB8Nm3DbAT7xkj3TjgJ7VmEA== } dependencies: "@iconify/types": 2.0.0 @@ -1271,10 +1271,10 @@ packages: vue: 3.2.45 dev: false - /@pureadmin/theme/2.4.0: + /@pureadmin/theme/3.0.0: resolution: { - integrity: sha512-aqX2O5WpqOCUiy6jhle92Pj7gDqF1/cHPWD+fWcDmmgmV7l7zqEDMWmZI1Iueg55fGxR39D400LaD2VrE8ihGA== + integrity: sha512-1qs0fve9DY4XgI5xafTd9qRPuWSo2QGON7avBqKSSSjXpCbo2BOccsH6qh5N2BxVBVZQJBYZoMq3bAUdK2Q0Jw== } dependencies: "@zougt/some-loader-utils": 1.4.3 @@ -1463,10 +1463,10 @@ packages: } dev: false - /@types/node/18.11.13: + /@types/node/18.11.15: resolution: { - integrity: sha512-IASpMGVcWpUsx5xBOrxMj7Bl8lqfuTY7FKAnPmu5cHkfQVWF8GulWS1jbRqA934qZL35xh5xN/+Xe/i26Bod4w== + integrity: sha512-VkhBbVo2+2oozlkdHXLrb3zjsRkpdnaU2bXmX8Wgle3PUi569eLRaHGlgETQHR7lLL1w7GiG3h9SnePhxNDecw== } dev: true @@ -1497,7 +1497,7 @@ packages: integrity: sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA== } dependencies: - "@types/node": 18.11.13 + "@types/node": 18.11.15 dev: true /@types/qs/6.9.7: @@ -1513,7 +1513,7 @@ packages: integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw== } dependencies: - "@types/node": 18.11.13 + "@types/node": 18.11.15 dev: true /@types/semver/7.3.13: @@ -2742,7 +2742,7 @@ packages: dependencies: caniuse-lite: 1.0.30001439 electron-to-chromium: 1.4.284 - node-releases: 2.0.6 + node-releases: 2.0.7 update-browserslist-db: 1.0.10_browserslist@4.21.4 dev: true @@ -3283,12 +3283,12 @@ packages: source-map-js: 1.0.2 dev: true - /css-tree/2.3.0: + /css-tree/2.3.1: resolution: { - integrity: sha512-1rg0LiK2MFi4R3/lVvnRokEWTZb30ljSAe5x+0HHkZ+OqZaAeiP8g8Eh91VmkyCtQn9vMgQRiaTDYgLBt+2Qyw== + integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw== } - engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: ">=7.0.0" } + engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0 } dependencies: mdn-data: 2.0.30 source-map-js: 1.0.2 @@ -4358,7 +4358,7 @@ packages: hasBin: true dependencies: "@eslint/eslintrc": 1.3.3 - "@humanwhocodes/config-array": 0.11.7 + "@humanwhocodes/config-array": 0.11.8 "@humanwhocodes/module-importer": 1.0.1 "@nodelib/fs.walk": 1.2.8 ajv: 6.12.6 @@ -6178,10 +6178,10 @@ packages: } dev: false - /node-releases/2.0.6: + /node-releases/2.0.7: resolution: { - integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg== + integrity: sha512-EJ3rzxL9pTWPjk5arA0s0dgXpnyiAbJDE6wHT62g7VsgrgQgmmZ+Ru++M1BFofncWja+Pnn3rEr3fieRySAdKQ== } dev: true @@ -8142,7 +8142,7 @@ packages: "@trysound/sax": 0.2.0 commander: 7.2.0 css-select: 5.1.0 - css-tree: 2.3.0 + css-tree: 2.3.1 csso: 5.0.5 picocolors: 1.0.0 dev: true @@ -8827,10 +8827,10 @@ packages: vue: 3.2.45 dev: false - /vue-virtual-scroller/2.0.0-beta.5_vue@3.2.45: + /vue-virtual-scroller/2.0.0-beta.7_vue@3.2.45: resolution: { - integrity: sha512-P7m/8D/7bzu45gWqCflQxyZomWL4cy75AZXz73Ri43VYRiSx1hW8QNIGr6PoAR1kZAcEqHZwYlvM76gUDA3wdA== + integrity: sha512-OrouVj1i2939jaLjVfu8f5fsDlbzhAb4bOsYZYrAkpcVLylAmMoGtIL7eT3hJrdTiaKbwQpRdnv7DKf9Fn+tHg== } peerDependencies: vue: ^3.2.0 diff --git a/src/layout/theme/index.ts b/src/layout/theme/index.ts index 7e2c166bd..6180ab600 100644 --- a/src/layout/theme/index.ts +++ b/src/layout/theme/index.ts @@ -2,10 +2,7 @@ * @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行） */ -type MultipleScopeVarsItem = { - scopeName: string; - varsContent: string; -}; +import { type multipleScopeVarsOptions } from "@pureadmin/theme"; /** 预设主题色 */ const themeColors = { @@ -113,8 +110,8 @@ const themeColors = { /** * @description 将预设主题色处理成主题插件所需格式 */ -export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => { - const result = [] as MultipleScopeVarsItem[]; +export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => { + const result = [] as multipleScopeVarsOptions[]; Object.keys(themeColors).forEach(key => { result.push({ scopeName: `layout-theme-${key}`, @@ -129,7 +126,7 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => { $menuTitleHover: ${themeColors[key].menuTitleHover} !default; $menuActiveBefore: ${themeColors[key].menuActiveBefore} !default; ` - } as MultipleScopeVarsItem); + } as multipleScopeVarsOptions); }); return result; }; diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts index b217bbad6..576ca9197 100644 --- a/types/shims-vue.d.ts +++ b/types/shims-vue.d.ts @@ -9,7 +9,5 @@ declare module "*.scss" { export default scss; } -declare module "@pureadmin/theme"; declare module "vue-virtual-scroller"; declare module "vuedraggable/src/vuedraggable"; -declare module "@pureadmin/theme/dist/browser-utils"; From 923f09db5ba84507b20a932a93732d9ab118df62 Mon Sep 17 00:00:00 2001 From: RealityBoy <1923740402@qq.com> Date: Fri, 16 Dec 2022 14:34:10 +0800 Subject: [PATCH 2/2] refactor: system pages (#399) * refactor: system pages * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update * chore: update --- build/optimize.ts | 1 - package.json | 3 +- pnpm-lock.yaml | 13 +- src/api/system.ts | 7 +- src/components/ReIcon/src/offlineIcon.ts | 4 - src/components/RePureTableBar/index.ts | 5 + .../{ReTable => RePureTableBar}/src/bar.tsx | 124 +++++++---------- .../RePureTableBar/src/svg/collapse.svg | 1 + .../RePureTableBar/src/svg/expand.svg | 1 + .../RePureTableBar/src/svg/refresh.svg | 1 + .../RePureTableBar/src/svg/settings.svg | 1 + src/components/ReQrcode/src/index.tsx | 6 +- src/components/ReTable/index.ts | 5 - src/views/result/columns.tsx | 9 +- src/views/system/dept/columns.tsx | 64 --------- src/views/system/dept/hook.tsx | 114 ++++++++++++++++ src/views/system/dept/index.vue | 83 +++++------- .../system/role/{columns.tsx => hook.tsx} | 101 ++++++++++++-- src/views/system/role/index.vue | 125 +++++++----------- .../system/user/{columns.tsx => hook.tsx} | 101 ++++++++++++-- src/views/system/user/index.vue | 113 +++++----------- src/views/system/user/svg/expand.svg | 1 + src/views/system/user/svg/unexpand.svg | 1 + src/views/system/user/tree.vue | 68 +++++----- src/views/welcome/components/columns.tsx | 13 +- 25 files changed, 521 insertions(+), 444 deletions(-) create mode 100644 src/components/RePureTableBar/index.ts rename src/components/{ReTable => RePureTableBar}/src/bar.tsx (62%) create mode 100644 src/components/RePureTableBar/src/svg/collapse.svg create mode 100644 src/components/RePureTableBar/src/svg/expand.svg create mode 100644 src/components/RePureTableBar/src/svg/refresh.svg create mode 100644 src/components/RePureTableBar/src/svg/settings.svg delete mode 100644 src/components/ReTable/index.ts delete mode 100644 src/views/system/dept/columns.tsx create mode 100644 src/views/system/dept/hook.tsx rename src/views/system/role/{columns.tsx => hook.tsx} (59%) rename src/views/system/user/{columns.tsx => hook.tsx} (60%) create mode 100644 src/views/system/user/svg/expand.svg create mode 100644 src/views/system/user/svg/unexpand.svg diff --git a/build/optimize.ts b/build/optimize.ts index dfd6d7ede..9b04c0ce8 100644 --- a/build/optimize.ts +++ b/build/optimize.ts @@ -52,7 +52,6 @@ const include = [ const exclude = [ "@iconify-icons/ep", "@iconify-icons/ri", - "@iconify-icons/mdi", "@pureadmin/theme/dist/browser-utils" ]; diff --git a/package.json b/package.json index 99db94a72..4187fdf22 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "vue-pdf-embed": "^1.1.5", "vue-router": "^4.1.6", "vue-types": "^4.2.1", - "vue-virtual-scroller": "^2.0.0-alpha.1", + "vue-virtual-scroller": "2.0.0-beta.7", "vue3-danmaku": "^1.2.0", "vuedraggable": "^4.1.0", "xgplayer": "^2.32.1", @@ -81,7 +81,6 @@ "@commitlint/cli": "13.1.0", "@commitlint/config-conventional": "13.1.0", "@iconify-icons/ep": "^1.2.7", - "@iconify-icons/mdi": "^1.2.8", "@iconify-icons/ri": "^1.2.3", "@iconify/vue": "^4.0.0", "@intlify/vite-plugin-vue-i18n": "^6.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1cb5c928f..b0ee35cca 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,7 +6,6 @@ specifiers: "@commitlint/config-conventional": 13.1.0 "@howdyjs/mouse-menu": ^2.0.5 "@iconify-icons/ep": ^1.2.7 - "@iconify-icons/mdi": ^1.2.8 "@iconify-icons/ri": ^1.2.3 "@iconify/vue": ^4.0.0 "@intlify/vite-plugin-vue-i18n": ^6.0.3 @@ -104,7 +103,7 @@ specifiers: vue-router: ^4.1.6 vue-tsc: ^1.0.9 vue-types: ^4.2.1 - vue-virtual-scroller: ^2.0.0-alpha.1 + vue-virtual-scroller: 2.0.0-beta.7 vue3-danmaku: ^1.2.0 vuedraggable: ^4.1.0 xgplayer: ^2.32.1 @@ -163,7 +162,6 @@ devDependencies: "@commitlint/cli": 13.1.0 "@commitlint/config-conventional": 13.1.0 "@iconify-icons/ep": 1.2.10 - "@iconify-icons/mdi": 1.2.35 "@iconify-icons/ri": 1.2.4 "@iconify/vue": 4.0.2_vue@3.2.45 "@intlify/vite-plugin-vue-i18n": 6.0.3_vite@3.1.8+vue-i18n@9.2.2 @@ -971,15 +969,6 @@ packages: "@iconify/types": 2.0.0 dev: true - /@iconify-icons/mdi/1.2.35: - resolution: - { - integrity: sha512-cOxQdQqMcV/CA3d2CkTFVRyvYRDE5SpX0Wekjl5lbEQ5IkAPy0hJrOebSH1Jo+IB8Nm3DbAT7xkj3TjgJ7VmEA== - } - dependencies: - "@iconify/types": 2.0.0 - dev: true - /@iconify-icons/ri/1.2.4: resolution: { diff --git a/src/api/system.ts b/src/api/system.ts index 5e5ea1efe..041e5bf6f 100644 --- a/src/api/system.ts +++ b/src/api/system.ts @@ -10,6 +10,11 @@ type Result = { }; }; +type ResultDept = { + success: boolean; + data?: Array; +}; + /** 获取用户管理列表 */ export const getUserList = (data?: object) => { return http.request("post", "/user", { data }); @@ -22,5 +27,5 @@ export const getRoleList = (data?: object) => { /** 获取部门管理列表 */ export const getDeptList = (data?: object) => { - return http.request("post", "/dept", { data }); + return http.request("post", "/dept", { data }); }; diff --git a/src/components/ReIcon/src/offlineIcon.ts b/src/components/ReIcon/src/offlineIcon.ts index 1c2d3f4a6..ef3183377 100644 --- a/src/components/ReIcon/src/offlineIcon.ts +++ b/src/components/ReIcon/src/offlineIcon.ts @@ -43,7 +43,3 @@ addIcon("setting", Setting); addIcon("dept", Dept); addIcon("lollipop", Lollipop); addIcon("monitor", Monitor); - -// 非菜单图标 -import RefreshRight from "@iconify-icons/ep/refresh-right"; -addIcon("refreshRight", RefreshRight); diff --git a/src/components/RePureTableBar/index.ts b/src/components/RePureTableBar/index.ts new file mode 100644 index 000000000..e7b9e7140 --- /dev/null +++ b/src/components/RePureTableBar/index.ts @@ -0,0 +1,5 @@ +import pureTableBar from "./src/bar"; +import { withInstall } from "@pureadmin/utils"; + +/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/xiaoxian521/pure-admin-table */ +export const PureTableBar = withInstall(pureTableBar); diff --git a/src/components/ReTable/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx similarity index 62% rename from src/components/ReTable/src/bar.tsx rename to src/components/RePureTableBar/src/bar.tsx index 591a5af6b..bea38abbb 100644 --- a/src/components/ReTable/src/bar.tsx +++ b/src/components/RePureTableBar/src/bar.tsx @@ -1,54 +1,25 @@ -import { defineComponent, ref, computed, PropType } from "vue"; +import { delay } from "@pureadmin/utils"; import { useEpThemeStoreHook } from "@/store/modules/epTheme"; - -import UnExpand from "@iconify-icons/mdi/arrow-expand-right"; -import { IconifyIconOffline } from "../../ReIcon"; -import Expand from "@iconify-icons/mdi/arrow-expand-down"; -import ArrowCollapse from "@iconify-icons/mdi/arrow-collapse-vertical"; -import Setting from "@iconify-icons/ri/settings-3-line"; - -export const loadingSvg = ` - -`; +import { defineComponent, ref, computed, type PropType } from "vue"; +import ExpandIcon from "./svg/expand.svg?component"; +import RefreshIcon from "./svg/refresh.svg?component"; +import SettingIcon from "./svg/settings.svg?component"; +import CollapseIcon from "./svg/collapse.svg?component"; const props = { - // 头部最左边的标题 + /** 头部最左边的标题 */ title: { type: String, default: "列表" }, - // 表格数据 - dataList: { - type: Array, - default: () => { - return []; - } - }, - // 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 + /** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */ tableRef: { - type: Object as PropType, - default() { - return {}; - } - }, - // 是否显示加载动画，默认false 不加载 - loading: { - type: Boolean, - default: false + type: Object as PropType } }; export default defineComponent({ - name: "TableProBar", + name: "PureTableBar", props, emits: ["refresh"], setup(props, { emit, slots, attrs }) { @@ -56,6 +27,7 @@ export default defineComponent({ const checkList = ref([]); const size = ref("default"); const isExpandAll = ref(true); + const loading = ref(false); const getDropdownItemStyle = computed(() => { return s => { @@ -67,9 +39,26 @@ export default defineComponent({ }; }); + const iconClass = computed(() => { + return [ + "text-black", + "dark:text-white", + "duration-100", + "hover:!text-primary", + "cursor-pointer", + "outline-none" + ]; + }); + + function onReFresh() { + loading.value = true; + emit("refresh"); + delay(500).then(() => (loading.value = false)); + } + function onExpand() { isExpandAll.value = !isExpandAll.value; - toggleRowExpansionAll(props.dataList, isExpandAll.value); + toggleRowExpansionAll(props.tableRef.data, isExpandAll.value); } function toggleRowExpansionAll(data, isExpansion) { @@ -88,7 +77,7 @@ export default defineComponent({ style={getDropdownItemStyle.value("large")} onClick={() => (size.value = "large")} > - 松散 + 宽松 ( - (buttonRef.value = e.currentTarget)} /> ) @@ -120,13 +106,7 @@ export default defineComponent({ return () => ( <> -
+

{props.title}

@@ -138,36 +118,32 @@ export default defineComponent({ content={isExpandAll.value ? "折叠" : "展开"} placement="top" > - onExpand()} /> - ) : undefined} + ) : null} - emit("refresh")} + onReFresh()} /> - + @@ -199,11 +175,7 @@ export default defineComponent({ content="列设置" />
- {props.dataList.length > 0 ? ( - slots.default({ size: size.value, checkList: checkList.value }) - ) : ( - - )} + {slots.default({ size: size.value, checkList: checkList.value })}
); diff --git a/src/components/RePureTableBar/src/svg/collapse.svg b/src/components/RePureTableBar/src/svg/collapse.svg new file mode 100644 index 000000000..d84f87078 --- /dev/null +++ b/src/components/RePureTableBar/src/svg/collapse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/RePureTableBar/src/svg/expand.svg b/src/components/RePureTableBar/src/svg/expand.svg new file mode 100644 index 000000000..dbbd4ed7e --- /dev/null +++ b/src/components/RePureTableBar/src/svg/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/RePureTableBar/src/svg/refresh.svg b/src/components/RePureTableBar/src/svg/refresh.svg new file mode 100644 index 000000000..140288cde --- /dev/null +++ b/src/components/RePureTableBar/src/svg/refresh.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/RePureTableBar/src/svg/settings.svg b/src/components/RePureTableBar/src/svg/settings.svg new file mode 100644 index 000000000..be23a0bb2 --- /dev/null +++ b/src/components/RePureTableBar/src/svg/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ReQrcode/src/index.tsx b/src/components/ReQrcode/src/index.tsx index 17829bfdf..f2d556ec3 100644 --- a/src/components/ReQrcode/src/index.tsx +++ b/src/components/ReQrcode/src/index.tsx @@ -9,9 +9,9 @@ import { } from "vue"; import "./index.scss"; import { propTypes } from "@/utils/propTypes"; -import { IconifyIconOffline } from "../../ReIcon"; import { isString, cloneDeep } from "@pureadmin/utils"; import QRCode, { QRCodeRenderersOptions } from "qrcode"; +import RefreshRight from "@iconify-icons/ep/refresh-right"; interface QrcodeLogo { src?: string; @@ -244,9 +244,9 @@ export default defineComponent({ onClick={disabledClick} >
- diff --git a/src/components/ReTable/index.ts b/src/components/ReTable/index.ts deleted file mode 100644 index 9eae69fb2..000000000 --- a/src/components/ReTable/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import tableProBar from "./src/bar"; -import { withInstall } from "@pureadmin/utils"; - -/** table-crud组件 */ -export const TableProBar = withInstall(tableProBar); diff --git a/src/views/result/columns.tsx b/src/views/result/columns.tsx index df818d6be..7c1d5b369 100644 --- a/src/views/result/columns.tsx +++ b/src/views/result/columns.tsx @@ -1,4 +1,3 @@ -import { IconifyIconOffline } from "@/components/ReIcon"; import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line"; import CloseCircleLine from "@iconify-icons/ri/close-circle-line"; @@ -8,7 +7,7 @@ export function useColumns() { cellRenderer: () => { return ( - 立即解冻 - { return ( - 立即升级 - !checkList.includes("勾选列") - }, - { - label: "序号", - type: "index", - width: 60, - hide: ({ checkList }) => !checkList.includes("序号列") - }, - { - label: "部门名称", - prop: "name", - width: 180, - align: "left" - }, - { - label: "排序", - prop: "sort", - width: 60 - }, - { - label: "状态", - prop: "status", - width: 80, - cellRenderer: ({ row, props }) => ( - - {row.status === 0 ? "关闭" : "开启"} - - ) - }, - { - label: "创建时间", - width: 180, - prop: "createTime", - formatter: ({ createTime }) => - dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") - }, - { - label: "备注", - prop: "remark" - }, - { - label: "操作", - fixed: "right", - width: 140, - slot: "operation" - } - ]; - - return { - columns - }; -} diff --git a/src/views/system/dept/hook.tsx b/src/views/system/dept/hook.tsx new file mode 100644 index 000000000..eadc976ff --- /dev/null +++ b/src/views/system/dept/hook.tsx @@ -0,0 +1,114 @@ +import dayjs from "dayjs"; +import { handleTree } from "@/utils/tree"; +import { getDeptList } from "@/api/system"; +import { reactive, ref, onMounted } from "vue"; + +export function useDept() { + const form = reactive({ + user: "", + status: "" + }); + const dataList = ref([]); + const loading = ref(true); + + const columns: TableColumnList = [ + { + type: "selection", + width: 55, + align: "left", + hide: ({ checkList }) => !checkList.includes("勾选列") + }, + { + label: "序号", + type: "index", + minWidth: 70, + hide: ({ checkList }) => !checkList.includes("序号列") + }, + { + label: "部门名称", + prop: "name", + width: 180, + align: "left" + }, + { + label: "排序", + prop: "sort", + minWidth: 70 + }, + { + label: "状态", + prop: "status", + minWidth: 100, + cellRenderer: ({ row, props }) => ( + + {row.status === 0 ? "关闭" : "开启"} + + ) + }, + { + label: "创建时间", + minWidth: 200, + prop: "createTime", + formatter: ({ createTime }) => + dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") + }, + { + label: "备注", + prop: "remark", + minWidth: 200 + }, + { + label: "操作", + fixed: "right", + width: 160, + slot: "operation" + } + ]; + + function handleUpdate(row) { + console.log(row); + } + + function handleDelete(row) { + console.log(row); + } + + function handleSelectionChange(val) { + console.log("handleSelectionChange", val); + } + + function resetForm(formEl) { + if (!formEl) return; + formEl.resetFields(); + onSearch(); + } + + async function onSearch() { + loading.value = true; + const { data } = await getDeptList(); + dataList.value = handleTree(data); + setTimeout(() => { + loading.value = false; + }, 500); + } + + onMounted(() => { + onSearch(); + }); + + return { + form, + loading, + columns, + dataList, + onSearch, + resetForm, + handleUpdate, + handleDelete, + handleSelectionChange + }; +} diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index 77f047fb8..6bd4b1bc6 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -1,11 +1,9 @@ - +
diff --git a/src/views/system/role/columns.tsx b/src/views/system/role/hook.tsx similarity index 59% rename from src/views/system/role/columns.tsx rename to src/views/system/role/hook.tsx index e37e90d7c..f9f3d46ad 100644 --- a/src/views/system/role/columns.tsx +++ b/src/views/system/role/hook.tsx @@ -1,11 +1,25 @@ -import { ref } from "vue"; import dayjs from "dayjs"; import { message } from "@/utils/message"; +import { getRoleList } from "@/api/system"; import { ElMessageBox } from "element-plus"; +import { type PaginationProps } from "@pureadmin/table"; +import { reactive, ref, computed, onMounted } from "vue"; -export function useColumns() { +export function useRole() { + const form = reactive({ + name: "", + code: "", + status: "" + }); + const dataList = ref([]); + const loading = ref(true); const switchLoadMap = ref({}); - + const pagination = reactive({ + total: 0, + pageSize: 10, + currentPage: 1, + background: true + }); const columns: TableColumnList = [ { type: "selection", @@ -21,19 +35,23 @@ export function useColumns() { }, { label: "角色编号", - prop: "id" + prop: "id", + minWidth: 100 }, { label: "角色名称", - prop: "name" + prop: "name", + minWidth: 120 }, { label: "角色标识", - prop: "code" + prop: "code", + minWidth: 150 }, { label: "角色类型", prop: "type", + minWidth: 150, cellRenderer: ({ row, props }) => ( ( dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") @@ -80,6 +98,15 @@ export function useColumns() { slot: "operation" } ]; + const buttonClass = computed(() => { + return [ + "!h-[20px]", + "reset-margin", + "!text-gray-500", + "dark:!text-white", + "dark:hover:!text-primary" + ]; + }); function onChange({ row, index }) { ElMessageBox.confirm( @@ -123,7 +150,59 @@ export function useColumns() { }); } + function handleUpdate(row) { + console.log(row); + } + + function handleDelete(row) { + console.log(row); + } + + function handleSizeChange(val: number) { + console.log(`${val} items per page`); + } + + function handleCurrentChange(val: number) { + console.log(`current page: ${val}`); + } + + function handleSelectionChange(val) { + console.log("handleSelectionChange", val); + } + + async function onSearch() { + loading.value = true; + const { data } = await getRoleList(); + dataList.value = data.list; + pagination.total = data.total; + setTimeout(() => { + loading.value = false; + }, 500); + } + + const resetForm = formEl => { + if (!formEl) return; + formEl.resetFields(); + onSearch(); + }; + + onMounted(() => { + onSearch(); + }); + return { - columns + form, + loading, + columns, + dataList, + pagination, + buttonClass, + onSearch, + resetForm, + handleUpdate, + handleDelete, + handleSizeChange, + handleCurrentChange, + handleSelectionChange }; } diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index 7046ed494..33bf023b1 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -1,11 +1,9 @@ diff --git a/src/views/system/user/columns.tsx b/src/views/system/user/hook.tsx similarity index 60% rename from src/views/system/user/columns.tsx rename to src/views/system/user/hook.tsx index 2ef28e2da..641a4e54f 100644 --- a/src/views/system/user/columns.tsx +++ b/src/views/system/user/hook.tsx @@ -1,11 +1,25 @@ -import { ref } from "vue"; import dayjs from "dayjs"; import { message } from "@/utils/message"; +import { getUserList } from "@/api/system"; import { ElMessageBox } from "element-plus"; +import { type PaginationProps } from "@pureadmin/table"; +import { reactive, ref, computed, onMounted } from "vue"; -export function useColumns() { +export function useUser() { + const form = reactive({ + username: "", + mobile: "", + status: "" + }); + const dataList = ref([]); + const loading = ref(true); const switchLoadMap = ref({}); - + const pagination = reactive({ + total: 0, + pageSize: 10, + currentPage: 1, + background: true + }); const columns: TableColumnList = [ { type: "selection", @@ -21,19 +35,23 @@ export function useColumns() { }, { label: "用户编号", - prop: "id" + prop: "id", + minWidth: 130 }, { label: "用户名称", - prop: "username" + prop: "username", + minWidth: 130 }, { label: "用户昵称", - prop: "nickname" + prop: "nickname", + minWidth: 130 }, { label: "性别", prop: "sex", + minWidth: 90, cellRenderer: ({ row, props }) => ( dept.name }, { label: "手机号码", - prop: "mobile" + prop: "mobile", + minWidth: 90 }, { label: "状态", prop: "status", - width: 130, + minWidth: 90, cellRenderer: scope => ( dayjs(createTime).format("YYYY-MM-DD HH:mm:ss") @@ -85,6 +105,15 @@ export function useColumns() { slot: "operation" } ]; + const buttonClass = computed(() => { + return [ + "!h-[20px]", + "reset-margin", + "!text-gray-500", + "dark:!text-white", + "dark:hover:!text-primary" + ]; + }); function onChange({ row, index }) { ElMessageBox.confirm( @@ -128,7 +157,59 @@ export function useColumns() { }); } + function handleUpdate(row) { + console.log(row); + } + + function handleDelete(row) { + console.log(row); + } + + function handleSizeChange(val: number) { + console.log(`${val} items per page`); + } + + function handleCurrentChange(val: number) { + console.log(`current page: ${val}`); + } + + function handleSelectionChange(val) { + console.log("handleSelectionChange", val); + } + + async function onSearch() { + loading.value = true; + const { data } = await getUserList(); + dataList.value = data.list; + pagination.total = data.total; + setTimeout(() => { + loading.value = false; + }, 500); + } + + const resetForm = formEl => { + if (!formEl) return; + formEl.resetFields(); + onSearch(); + }; + + onMounted(() => { + onSearch(); + }); + return { - columns + form, + loading, + columns, + dataList, + pagination, + buttonClass, + onSearch, + resetForm, + handleUpdate, + handleDelete, + handleSizeChange, + handleCurrentChange, + handleSelectionChange }; } diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue index 8033fca68..a9d8aeb6b 100644 --- a/src/views/system/user/index.vue +++ b/src/views/system/user/index.vue @@ -1,11 +1,8 @@ - +
diff --git a/src/views/system/user/svg/expand.svg b/src/views/system/user/svg/expand.svg new file mode 100644 index 000000000..dbbd4ed7e --- /dev/null +++ b/src/views/system/user/svg/expand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/system/user/svg/unexpand.svg b/src/views/system/user/svg/unexpand.svg new file mode 100644 index 000000000..58d436587 --- /dev/null +++ b/src/views/system/user/svg/unexpand.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/system/user/tree.vue b/src/views/system/user/tree.vue index 3dadb6482..c4b68c977 100644 --- a/src/views/system/user/tree.vue +++ b/src/views/system/user/tree.vue @@ -1,18 +1,17 @@ - + { - 展开全部 + {{ isExpand ? "折叠全部" : "展开全部" }} - 折叠全部 - - - - (
- + 用户名
@@ -32,7 +31,7 @@ export function useColumns() { labelRenderer: () => (
- + 手机号
@@ -43,7 +42,7 @@ export function useColumns() { labelRenderer: () => (
- + 居住地
@@ -57,7 +56,7 @@ export function useColumns() { labelRenderer: () => (
- + 标签
@@ -76,7 +75,7 @@ export function useColumns() { labelRenderer: () => (
- + 联系地址
@@ -90,7 +89,7 @@ export function useColumns() { labelRenderer: () => (
- + 好好学习，天天向上