mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
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
This commit is contained in:
RealityBoy
GitHub
parent
66fdfebb5e
commit
923f09db5b
@ -52,7 +52,6 @@ const include = [
|
||||
const exclude = [
|
||||
"@iconify-icons/ep",
|
||||
"@iconify-icons/ri",
|
||||
"@iconify-icons/mdi",
|
||||
"@pureadmin/theme/dist/browser-utils"
|
||||
];
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@ -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:
|
||||
{
|
||||
|
||||
@ -10,6 +10,11 @@ type Result = {
|
||||
};
|
||||
};
|
||||
|
||||
type ResultDept = {
|
||||
success: boolean;
|
||||
data?: Array<any>;
|
||||
};
|
||||
|
||||
/** 获取用户管理列表 */
|
||||
export const getUserList = (data?: object) => {
|
||||
return http.request<Result>("post", "/user", { data });
|
||||
@ -22,5 +27,5 @@ export const getRoleList = (data?: object) => {
|
||||
|
||||
/** 获取部门管理列表 */
|
||||
export const getDeptList = (data?: object) => {
|
||||
return http.request<Result>("post", "/dept", { data });
|
||||
return http.request<ResultDept>("post", "/dept", { data });
|
||||
};
|
||||
|
||||
@ -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);
|
||||
|
||||
5
src/components/RePureTableBar/index.ts
Normal file
5
src/components/RePureTableBar/index.ts
Normal file
@ -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);
|
||||
@ -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 = `
|
||||
<path class="path" d="
|
||||
M 30 15
|
||||
L 28 17
|
||||
M 25.61 25.61
|
||||
A 15 15, 0, 0, 1, 15 30
|
||||
A 15 15, 0, 1, 1, 27.99 7.5
|
||||
L 15 15
|
||||
"
|
||||
style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
|
||||
/>
|
||||
`;
|
||||
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<any>,
|
||||
default() {
|
||||
return {};
|
||||
}
|
||||
},
|
||||
// 是否显示加载动画，默认false 不加载
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
type: Object as PropType<any>
|
||||
}
|
||||
};
|
||||
|
||||
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")}
|
||||
>
|
||||
松散
|
||||
宽松
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
style={getDropdownItemStyle.value("default")}
|
||||
@ -108,11 +97,8 @@ export default defineComponent({
|
||||
|
||||
const reference = {
|
||||
reference: () => (
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon={Setting}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
<SettingIcon
|
||||
class={["w-[16px]", iconClass.value]}
|
||||
onMouseover={e => (buttonRef.value = e.currentTarget)}
|
||||
/>
|
||||
)
|
||||
@ -120,13 +106,7 @@ export default defineComponent({
|
||||
|
||||
return () => (
|
||||
<>
|
||||
<div
|
||||
{...attrs}
|
||||
class="w-[99/100] mt-6 p-2 bg-bg_color"
|
||||
v-loading={props.loading}
|
||||
element-loading-svg={loadingSvg}
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
>
|
||||
<div {...attrs} class="w-[99/100] mt-6 p-2 bg-bg_color">
|
||||
<div class="flex justify-between w-full h-[60px] p-4">
|
||||
<p class="font-bold truncate">{props.title}</p>
|
||||
<div class="flex items-center justify-around">
|
||||
@ -138,36 +118,32 @@ export default defineComponent({
|
||||
content={isExpandAll.value ? "折叠" : "展开"}
|
||||
placement="top"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon={isExpandAll.value ? UnExpand : Expand}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
<ExpandIcon
|
||||
class={["w-[16px]", iconClass.value]}
|
||||
style={{
|
||||
transform: isExpandAll.value ? "none" : "rotate(-90deg)"
|
||||
}}
|
||||
onClick={() => onExpand()}
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
</>
|
||||
) : undefined}
|
||||
) : null}
|
||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon="refreshRight"
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
onClick={() => emit("refresh")}
|
||||
<RefreshIcon
|
||||
class={[
|
||||
"w-[16px]",
|
||||
iconClass.value,
|
||||
loading.value ? "animate-spin" : ""
|
||||
]}
|
||||
onClick={() => onReFresh()}
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
|
||||
<el-tooltip effect="dark" content="密度" placement="top">
|
||||
<el-dropdown v-slots={dropdown} trigger="click">
|
||||
<IconifyIconOffline
|
||||
class="cursor-pointer"
|
||||
icon={ArrowCollapse}
|
||||
width="16"
|
||||
color="text_color_regular"
|
||||
/>
|
||||
<CollapseIcon class={["w-[16px]", iconClass.value]} />
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
@ -199,11 +175,7 @@ export default defineComponent({
|
||||
content="列设置"
|
||||
/>
|
||||
</div>
|
||||
{props.dataList.length > 0 ? (
|
||||
slots.default({ size: size.value, checkList: checkList.value })
|
||||
) : (
|
||||
<el-empty description="暂无数据" />
|
||||
)}
|
||||
{slots.default({ size: size.value, checkList: checkList.value })}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
1
src/components/RePureTableBar/src/svg/collapse.svg
Normal file
1
src/components/RePureTableBar/src/svg/collapse.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2Zm10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z"/></svg>
|
||||
|
After Width: | Height: | Size: 441 B |
1
src/components/RePureTableBar/src/svg/expand.svg
Normal file
1
src/components/RePureTableBar/src/svg/expand.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
|
||||
|
After Width: | Height: | Size: 163 B |
1
src/components/RePureTableBar/src/svg/refresh.svg
Normal file
1
src/components/RePureTableBar/src/svg/refresh.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
|
||||
|
After Width: | Height: | Size: 235 B |
1
src/components/RePureTableBar/src/svg/settings.svg
Normal file
1
src/components/RePureTableBar/src/svg/settings.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A9.99 9.99 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.803a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12a4.99 4.99 0 0 1-1.273 3.334 8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
|
||||
|
After Width: | Height: | Size: 1011 B |
@ -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}
|
||||
>
|
||||
<div class="absolute top-[50%] left-[50%] font-bold">
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
class="cursor-pointer"
|
||||
icon="refreshRight"
|
||||
icon={RefreshRight}
|
||||
width="30"
|
||||
color="var(--el-color-primary)"
|
||||
/>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import tableProBar from "./src/bar";
|
||||
import { withInstall } from "@pureadmin/utils";
|
||||
|
||||
/** table-crud组件 */
|
||||
export const TableProBar = withInstall(tableProBar);
|
||||
@ -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 (
|
||||
<span class="flex items-center -mt-6">
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
@ -21,7 +20,7 @@ export function useColumns() {
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即解冻
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
@ -36,7 +35,7 @@ export function useColumns() {
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-8">
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
color="#F56C6C"
|
||||
width="18px"
|
||||
@ -49,7 +48,7 @@ export function useColumns() {
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即升级
|
||||
<IconifyIconOffline
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export function useColumns() {
|
||||
const columns: TableColumnList = [
|
||||
{
|
||||
type: "selection",
|
||||
width: 55,
|
||||
align: "left",
|
||||
hide: ({ checkList }) => !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 }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.status === 1 ? "danger" : "success"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.status === 0 ? "关闭" : "开启"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
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
|
||||
};
|
||||
}
|
||||
114
src/views/system/dept/hook.tsx
Normal file
114
src/views/system/dept/hook.tsx
Normal file
@ -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 }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
type={row.status === 1 ? "danger" : "success"}
|
||||
effect="plain"
|
||||
>
|
||||
{row.status === 0 ? "关闭" : "开启"}
|
||||
</el-tag>
|
||||
)
|
||||
},
|
||||
{
|
||||
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
|
||||
};
|
||||
}
|
||||
@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { FormInstance } from "element-plus";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { ref } from "vue";
|
||||
import { useDept } from "./hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
import EditPen from "@iconify-icons/ep/edit-pen";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
@ -16,47 +14,19 @@ defineOptions({
|
||||
name: "Dept"
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
user: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const formRef = ref();
|
||||
const tableRef = ref();
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleSelectionChange(val) {
|
||||
console.log("handleSelectionChange", val);
|
||||
}
|
||||
|
||||
async function onSearch() {
|
||||
loading.value = true;
|
||||
const { data } = await getDeptList();
|
||||
dataList.value = handleTree(data as any);
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSelectionChange
|
||||
} = useDept();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -68,10 +38,20 @@ onMounted(() => {
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
>
|
||||
<el-form-item label="部门名称：" prop="user">
|
||||
<el-input v-model="form.user" placeholder="请输入部门名称" clearable />
|
||||
<el-input
|
||||
v-model="form.user"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="开启" value="1" />
|
||||
<el-option label="关闭" value="0" />
|
||||
</el-select>
|
||||
@ -91,11 +71,9 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<TableProBar
|
||||
<PureTableBar
|
||||
title="部门列表"
|
||||
:loading="loading"
|
||||
:tableRef="tableRef?.getTableRef()"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<template #buttons>
|
||||
@ -112,6 +90,7 @@ onMounted(() => {
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
default-expand-all
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@ -150,6 +129,6 @@ onMounted(() => {
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</TableProBar>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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<PaginationProps>({
|
||||
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 }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
@ -46,12 +64,12 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "显示顺序",
|
||||
prop: "sort"
|
||||
prop: "sort",
|
||||
minWidth: 100
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 130,
|
||||
minWidth: 130,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
@ -68,7 +86,7 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: 180,
|
||||
minWidth: 180,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
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
|
||||
};
|
||||
}
|
||||
@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { useColumns } from "./columns";
|
||||
import { getRoleList } from "@/api/system";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { type FormInstance } from "element-plus";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { ref } from "vue";
|
||||
import { useRole } from "./hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Database from "@iconify-icons/ri/database-2-line";
|
||||
import More from "@iconify-icons/ep/more-filled";
|
||||
import Delete from "@iconify-icons/ep/delete";
|
||||
@ -19,64 +17,22 @@ defineOptions({
|
||||
name: "Role"
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
name: "",
|
||||
code: "",
|
||||
status: ""
|
||||
});
|
||||
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
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: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useRole();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -88,13 +44,28 @@ onMounted(() => {
|
||||
class="bg-bg_color w-[99/100] pl-8 pt-4"
|
||||
>
|
||||
<el-form-item label="角色名称：" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入角色名称" clearable />
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识：" prop="code">
|
||||
<el-input v-model="form.code" placeholder="请输入角色标识" clearable />
|
||||
<el-input
|
||||
v-model="form.code"
|
||||
placeholder="请输入角色标识"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择状态" clearable>
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择状态"
|
||||
clearable
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
</el-select>
|
||||
@ -114,12 +85,7 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<TableProBar
|
||||
title="角色列表"
|
||||
:loading="loading"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<PureTableBar title="角色列表" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增角色
|
||||
@ -131,6 +97,7 @@ onMounted(() => {
|
||||
align-whole="center"
|
||||
showOverflowTooltip
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@ -151,8 +118,8 @@ onMounted(() => {
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(EditPen)"
|
||||
@click="handleUpdate(row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
@ -172,18 +139,18 @@ onMounted(() => {
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@click="handleUpdate(row)"
|
||||
:icon="useRenderIcon(More)"
|
||||
@click="handleUpdate(row)"
|
||||
/>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@ -194,7 +161,7 @@ onMounted(() => {
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@ -209,7 +176,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</TableProBar>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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<PaginationProps>({
|
||||
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 }) => (
|
||||
<el-tag
|
||||
size={props.size}
|
||||
@ -47,16 +65,18 @@ export function useColumns() {
|
||||
{
|
||||
label: "部门",
|
||||
prop: "dept",
|
||||
minWidth: 90,
|
||||
formatter: ({ dept }) => dept.name
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "mobile"
|
||||
prop: "mobile",
|
||||
minWidth: 90
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "status",
|
||||
width: 130,
|
||||
minWidth: 90,
|
||||
cellRenderer: scope => (
|
||||
<el-switch
|
||||
size={scope.props.size === "small" ? "small" : "default"}
|
||||
@ -73,7 +93,7 @@ export function useColumns() {
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
width: 180,
|
||||
minWidth: 90,
|
||||
prop: "createTime",
|
||||
formatter: ({ createTime }) =>
|
||||
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
|
||||
};
|
||||
}
|
||||
@ -1,11 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import tree from "./tree.vue";
|
||||
import { useColumns } from "./columns";
|
||||
import { getUserList } from "@/api/system";
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import { type FormInstance } from "element-plus";
|
||||
import { TableProBar } from "@/components/ReTable";
|
||||
import { type PaginationProps } from "@pureadmin/table";
|
||||
import { useUser } from "./hook";
|
||||
import { PureTableBar } from "@/components/RePureTableBar";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
import Role from "@iconify-icons/ri/admin-line";
|
||||
@ -21,69 +18,28 @@ defineOptions({
|
||||
name: "User"
|
||||
});
|
||||
|
||||
const form = reactive({
|
||||
username: "",
|
||||
mobile: "",
|
||||
status: ""
|
||||
});
|
||||
const dataList = ref([]);
|
||||
const loading = ref(true);
|
||||
const { columns } = useColumns();
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const pagination = reactive<PaginationProps>({
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
background: true
|
||||
});
|
||||
|
||||
function handleUpdate(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
console.log(row);
|
||||
}
|
||||
|
||||
function handleCurrentChange(val: number) {
|
||||
console.log(`current page: ${val}`);
|
||||
}
|
||||
|
||||
function handleSizeChange(val: number) {
|
||||
console.log(`${val} items per page`);
|
||||
}
|
||||
|
||||
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: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
onSearch();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
onSearch();
|
||||
});
|
||||
const formRef = ref();
|
||||
const {
|
||||
form,
|
||||
loading,
|
||||
columns,
|
||||
dataList,
|
||||
pagination,
|
||||
buttonClass,
|
||||
onSearch,
|
||||
resetForm,
|
||||
handleUpdate,
|
||||
handleDelete,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleSelectionChange
|
||||
} = useUser();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main flex">
|
||||
<tree />
|
||||
<div class="flex-1 ml-4">
|
||||
<div class="main">
|
||||
<tree class="w-[17%] float-left" />
|
||||
<div class="float-right w-[81%]">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:inline="true"
|
||||
@ -95,6 +51,7 @@ onMounted(() => {
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码：" prop="mobile">
|
||||
@ -102,10 +59,16 @@ onMounted(() => {
|
||||
v-model="form.mobile"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
<el-select v-model="form.status" placeholder="请选择" clearable>
|
||||
<el-select
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
</el-select>
|
||||
@ -125,12 +88,7 @@ onMounted(() => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<TableProBar
|
||||
title="用户管理"
|
||||
:loading="loading"
|
||||
:dataList="dataList"
|
||||
@refresh="onSearch"
|
||||
>
|
||||
<PureTableBar title="用户管理" @refresh="onSearch">
|
||||
<template #buttons>
|
||||
<el-button type="primary" :icon="useRenderIcon(AddFill)">
|
||||
新增用户
|
||||
@ -141,6 +99,7 @@ onMounted(() => {
|
||||
border
|
||||
align-whole="center"
|
||||
table-layout="auto"
|
||||
:loading="loading"
|
||||
:size="size"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
@ -182,7 +141,7 @@ onMounted(() => {
|
||||
</el-popconfirm>
|
||||
<el-dropdown>
|
||||
<el-button
|
||||
class="ml-3"
|
||||
class="ml-3 mt-[2px]"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@ -193,7 +152,7 @@ onMounted(() => {
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@ -204,7 +163,7 @@ onMounted(() => {
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:size="size"
|
||||
@ -219,7 +178,7 @@ onMounted(() => {
|
||||
</template>
|
||||
</pure-table>
|
||||
</template>
|
||||
</TableProBar>
|
||||
</PureTableBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
1
src/views/system/user/svg/expand.svg
Normal file
1
src/views/system/user/svg/expand.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
|
||||
|
After Width: | Height: | Size: 163 B |
1
src/views/system/user/svg/unexpand.svg
Normal file
1
src/views/system/user/svg/unexpand.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M4 2H2v20h2v-9h14.17l-5.5 5.5l1.41 1.42L22 12l-7.92-7.92l-1.41 1.42l5.5 5.5H4V2Z"/></svg>
|
||||
|
After Width: | Height: | Size: 166 B |
@ -1,18 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { handleTree } from "@/utils/tree";
|
||||
import type { ElTree } from "element-plus";
|
||||
import { getDeptList } from "@/api/system";
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
import { ref, watch, onMounted, getCurrentInstance } from "vue";
|
||||
import { ref, computed, watch, onMounted, getCurrentInstance } from "vue";
|
||||
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
|
||||
import Expand from "@iconify-icons/mdi/arrow-expand-down";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Dept from "@iconify-icons/ri/git-branch-line";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import Reset from "@iconify-icons/ri/restart-line";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
import More2Fill from "@iconify-icons/ri/more-2-fill";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import LocationCompany from "@iconify-icons/ep/add-location";
|
||||
import ExpandIcon from "./svg/expand.svg?component";
|
||||
import UnExpandIcon from "./svg/unexpand.svg?component";
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
@ -20,17 +19,26 @@ interface Tree {
|
||||
highlight?: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
const treeRef = ref();
|
||||
const treeData = ref([]);
|
||||
const isExpand = ref(true);
|
||||
const searchValue = ref("");
|
||||
const highlightMap = ref({});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name"
|
||||
};
|
||||
|
||||
const treeData = ref([]);
|
||||
const searchValue = ref("");
|
||||
const { proxy } = getCurrentInstance();
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
const highlightMap = ref({});
|
||||
const buttonClass = computed(() => {
|
||||
return [
|
||||
"!h-[20px]",
|
||||
"reset-margin",
|
||||
"!text-gray-500",
|
||||
"dark:!text-white",
|
||||
"dark:hover:!text-primary"
|
||||
];
|
||||
});
|
||||
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true;
|
||||
@ -54,13 +62,14 @@ function nodeClick(value) {
|
||||
}
|
||||
|
||||
function toggleRowExpansionAll(status) {
|
||||
isExpand.value = status;
|
||||
const nodes = (proxy.$refs["treeRef"] as any).store._getAllNodes();
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
nodes[i].expanded = status;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置状态（选中状态、搜索框值、树初始化）
|
||||
/** 重置状态（选中状态、搜索框值、树初始化） */
|
||||
function onReset() {
|
||||
highlightMap.value = {};
|
||||
searchValue.value = "";
|
||||
@ -73,12 +82,12 @@ watch(searchValue, val => {
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await getDeptList();
|
||||
treeData.value = handleTree(data as any);
|
||||
treeData.value = handleTree(data);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-[260px] h-full min-h-[780px] bg-bg_color">
|
||||
<div class="h-full min-h-[780px] bg-bg_color overflow-auto">
|
||||
<div class="flex items-center h-[34px]">
|
||||
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
||||
部门列表
|
||||
@ -99,7 +108,7 @@ onMounted(async () => {
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-dropdown>
|
||||
<el-dropdown :hide-on-click="false">
|
||||
<IconifyIconOffline
|
||||
class="w-[28px] cursor-pointer"
|
||||
width="18px"
|
||||
@ -109,29 +118,18 @@ onMounted(async () => {
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Expand)"
|
||||
@click="toggleRowExpansionAll(true)"
|
||||
:icon="useRenderIcon(isExpand ? ExpandIcon : UnExpandIcon)"
|
||||
@click="toggleRowExpansionAll(isExpand ? false : true)"
|
||||
>
|
||||
展开全部
|
||||
{{ isExpand ? "折叠全部" : "展开全部" }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(UnExpand)"
|
||||
@click="toggleRowExpansionAll(false)"
|
||||
>
|
||||
折叠全部
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
<el-button
|
||||
class="reset-margin !h-[20px] !text-gray-500 dark:!text-white dark:hover:!text-primary"
|
||||
:class="buttonClass"
|
||||
link
|
||||
type="primary"
|
||||
:icon="useRenderIcon(Reset)"
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { IconifyIconOffline } from "@/components/ReIcon";
|
||||
import TypeIt from "@/components/ReTypeit";
|
||||
import OfficeBuilding from "@iconify-icons/ep/office-building";
|
||||
import Tickets from "@iconify-icons/ep/tickets";
|
||||
@ -21,7 +20,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={User} />
|
||||
<iconify-icon-offline icon={User} />
|
||||
</el-icon>
|
||||
用户名
|
||||
</div>
|
||||
@ -32,7 +31,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Iphone} />
|
||||
<iconify-icon-offline icon={Iphone} />
|
||||
</el-icon>
|
||||
手机号
|
||||
</div>
|
||||
@ -43,7 +42,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Location} />
|
||||
<iconify-icon-offline icon={Location} />
|
||||
</el-icon>
|
||||
居住地
|
||||
</div>
|
||||
@ -57,7 +56,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Tickets} />
|
||||
<iconify-icon-offline icon={Tickets} />
|
||||
</el-icon>
|
||||
标签
|
||||
</div>
|
||||
@ -76,7 +75,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={OfficeBuilding} />
|
||||
<iconify-icon-offline icon={OfficeBuilding} />
|
||||
</el-icon>
|
||||
联系地址
|
||||
</div>
|
||||
@ -90,7 +89,7 @@ export function useColumns() {
|
||||
labelRenderer: () => (
|
||||
<div class="flex items-center">
|
||||
<el-icon>
|
||||
<IconifyIconOffline icon={Notebook} />
|
||||
<iconify-icon-offline icon={Notebook} />
|
||||
</el-icon>
|
||||
好好学习，天天向上
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user