diff --git a/mock/system.ts b/mock/system.ts index 63d2afca4..620bd99dc 100644 --- a/mock/system.ts +++ b/mock/system.ts @@ -60,7 +60,7 @@ export default [ code: 0, data: [ { - name: "pure-admin", + name: "杭州总公司", parentId: 0, sort: 0, leaderUserId: 1, @@ -72,7 +72,7 @@ export default [ remark: "备注、备注、备注、备注、备注、备注、备注" }, { - name: "深圳总公司", + name: "郑州分公司", parentId: 100, sort: 1, leaderUserId: 104, @@ -108,7 +108,7 @@ export default [ remark: "备注、备注、备注、备注、备注、备注、备注" }, { - name: "长沙分公司", + name: "深圳分公司", parentId: 100, sort: 2, leaderUserId: null, diff --git a/package.json b/package.json index 31f0cfb7f..d6efd2af8 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@iconify-icons/fa": "^1.2.2", "@iconify-icons/fa-solid": "^1.2.2", "@iconify-icons/fluent": "^1.2.5", + "@iconify-icons/mdi": "^1.2.8", "@iconify-icons/ri": "^1.2.1", "@iconify-icons/uil": "^1.2.1", "@iconify/vue": "^3.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a87bbc20..c919766d3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,6 +9,7 @@ specifiers: "@iconify-icons/fa": ^1.2.2 "@iconify-icons/fa-solid": ^1.2.2 "@iconify-icons/fluent": ^1.2.5 + "@iconify-icons/mdi": ^1.2.8 "@iconify-icons/ri": ^1.2.1 "@iconify-icons/uil": ^1.2.1 "@iconify/vue": ^3.2.1 @@ -154,6 +155,7 @@ devDependencies: "@iconify-icons/fa": 1.2.2 "@iconify-icons/fa-solid": 1.2.2 "@iconify-icons/fluent": 1.2.5 + "@iconify-icons/mdi": 1.2.8 "@iconify-icons/ri": 1.2.1 "@iconify-icons/uil": 1.2.1 "@iconify/vue": 3.2.1_vue@3.2.32 @@ -997,6 +999,15 @@ packages: "@iconify/types": 1.1.0 dev: true + /@iconify-icons/mdi/1.2.8: + resolution: + { + integrity: sha512-yG/fH+6PGTTPhqcgdk0NZ465pDIJebdxWDTPPe9P2Fd76bxaoCIcMQSqv/V9g5ADrELdrK1CmHnro+/jd42/0A== + } + dependencies: + "@iconify/types": 1.1.0 + dev: true + /@iconify-icons/ri/1.2.1: resolution: { diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts index 04b109b1f..317bcb052 100644 --- a/src/components/ReIcon/src/iconifyIconOffline.ts +++ b/src/components/ReIcon/src/iconifyIconOffline.ts @@ -112,6 +112,12 @@ import FlUser from "@iconify-icons/fluent/person-12-filled"; addIcon("peoples", Peoples); addIcon("flUser", FlUser); +// Material Design Icons +import Expand from "@iconify-icons/mdi/arrow-expand-down"; +import UnExpand from "@iconify-icons/mdi/arrow-expand-right"; +addIcon("expand", Expand); +addIcon("unExpand", UnExpand); + // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html export default defineComponent({ name: "IconifyIcon", diff --git a/src/components/ReTable/README.md b/src/components/ReTable/README.md new file mode 100644 index 000000000..b6228da3e --- /dev/null +++ b/src/components/ReTable/README.md @@ -0,0 +1,16 @@ +## 一款基于`element-plus`表格封装的`table-crud`组件库，采用`tsx`语法编写，通过一些灵活的配置项即可实现增删改查 + +### wait todo + +- 搜索组件 +- 表格组件 +- 弹框组件 +- form 组件 + +### completed + +- 操作栏组件 + +目前只完成了操作栏组件，后续有时间慢慢完善对应组件，因为作者比较忙，暂无具体计划完成时间，忘谅解，当然非常欢迎 pr，等这些组件全部完成后，我会单独抽离成`npm`包的形式发布。 + +注意：该组件库为了快速成型，内部依赖了`windicss`。 diff --git a/src/components/ReTable/index.ts b/src/components/ReTable/index.ts new file mode 100644 index 000000000..5572821ac --- /dev/null +++ b/src/components/ReTable/index.ts @@ -0,0 +1,8 @@ +import { App } from "vue"; +import epTableProBar from "./src/bar"; + +export const EpTableProBar = Object.assign(epTableProBar, { + install(app: App) { + app.component(epTableProBar.name, epTableProBar); + } +}); diff --git a/src/components/ReTable/src/bar.tsx b/src/components/ReTable/src/bar.tsx new file mode 100644 index 000000000..417cb9c12 --- /dev/null +++ b/src/components/ReTable/src/bar.tsx @@ -0,0 +1,216 @@ +import { emitter } from "/@/utils/mitt"; +import { IconifyIconOffline } from "../../ReIcon"; +import { defineComponent, ref, computed, PropType } from "vue"; +import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; + +export const loadingSvg = ` + +`; + +const props = { + // 头部最左边的标题 + title: { + type: String, + default: "列表" + }, + // 表格数据 + dataList: { + type: Array, + default: () => { + return []; + } + }, + // 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 + tableRef: { + type: Object as PropType, + default() { + return {}; + } + }, + // 是否显示加载动画，默认false 不加载 + loading: { + type: Boolean, + default: false + } +}; + +export default defineComponent({ + name: "epTableProBar", + props, + emits: ["refresh"], + setup(props, { emit, slots }) { + const buttonRef = ref(); + const checkList = ref([]); + const currentWidth = ref(0); + const size = ref("default"); + const isExpandAll = ref(true); + + const getDropdownItemStyle = computed(() => { + return s => { + return { + background: + s === size.value ? useEpThemeStoreHook().epThemeColor : "", + color: s === size.value ? "#f4f4f5" : "#000" + }; + }; + }); + + function onExpand() { + isExpandAll.value = !isExpandAll.value; + toggleRowExpansionAll(props.dataList, isExpandAll.value); + } + + function toggleRowExpansionAll(data, isExpansion) { + data.forEach(item => { + props.tableRef.toggleRowExpansion(item, isExpansion); + if (item.children !== undefined && item.children !== null) { + toggleRowExpansionAll(item.children, isExpansion); + } + }); + } + + // 监听容器 + emitter.on("resize", ({ detail }) => { + const { width } = detail; + currentWidth.value = width; + }); + + const dropdown = { + dropdown: () => ( + + (size.value = "large")} + > + 松散 + + (size.value = "default")} + > + 默认 + + (size.value = "small")} + > + 紧凑 + + + ) + }; + + const reference = { + reference: () => ( + (buttonRef.value = e.currentTarget)} + /> + ) + }; + + return () => ( + <> +
+
+

+ {currentWidth.value > 390 ? props.title : "列表"} +

+
+
{slots?.buttons()}
+ {props.tableRef?.size ? ( + <> + + onExpand()} + /> + + + + ) : undefined} + + emit("refresh")} + /> + + + + + + + + + + + + + + + + +
+ + +
+ {props.dataList.length > 0 ? ( + slots.default({ size: size.value, checkList: checkList.value }) + ) : ( + + )} +
+ + ); + } +}); diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index ed390876a..f23f4ee51 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -6,36 +6,22 @@ export default {