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: () => (
- + 好好学习，天天向上