twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-09 13:53:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: system pages (#399)

Browse Source 
* 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
2022-12-16 14:34:10 +08:00
committed by GitHub
parent 66fdfebb5e
commit 923f09db5b
25 changed files with 521 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ReIcon/src/offlineIcon.ts
View File

@@ -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
View 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);

124
src/components/ReTable/src/bar.tsx → src/components/RePureTableBar/src/bar.tsx
View File

@@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

1
src/components/RePureTableBar/src/svg/expand.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 163 B

1
src/components/RePureTableBar/src/svg/refresh.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 235 B

1
src/components/RePureTableBar/src/svg/settings.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1011 B

6
src/components/ReQrcode/src/index.tsx
View File

@@ -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)"
/>

5
src/components/ReTable/index.ts
View File

@@ -1,5 +0,0 @@
import tableProBar from "./src/bar";
import { withInstall } from "@pureadmin/utils";
/** table-crud组件 */
export const TableProBar = withInstall(tableProBar);