Merge branch 'main' into pages

This commit is contained in:
xiaoxian521 2024-09-24 12:12:16 +08:00
commit 81111c096a
6 changed files with 80 additions and 62 deletions

View File

@ -54,7 +54,7 @@ const props = {
export default defineComponent({ export default defineComponent({
name: "PureTableBar", name: "PureTableBar",
props, props,
emits: ["refresh"], emits: ["refresh", "fullscreen"],
setup(props, { emit, slots, attrs }) { setup(props, { emit, slots, attrs }) {
const size = ref("default"); const size = ref("default");
const loading = ref(false); const loading = ref(false);
@ -117,6 +117,11 @@ export default defineComponent({
toggleRowExpansionAll(props.tableRef.data, isExpandAll.value); toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
} }
function onFullscreen() {
isFullscreen.value = !isFullscreen.value;
emit("fullscreen", isFullscreen.value);
}
function toggleRowExpansionAll(data, isExpansion) { function toggleRowExpansionAll(data, isExpansion) {
data.forEach(item => { data.forEach(item => {
props.tableRef.toggleRowExpansion(item, isExpansion); props.tableRef.toggleRowExpansion(item, isExpansion);
@ -378,7 +383,7 @@ export default defineComponent({
class={["w-[16px]", iconClass.value]} class={["w-[16px]", iconClass.value]}
icon={isFullscreen.value ? ExitFullscreen : Fullscreen} icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"} v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
onClick={() => (isFullscreen.value = !isFullscreen.value)} onClick={() => onFullscreen()}
/> />
</div> </div>
</div> </div>

View File

@ -52,7 +52,7 @@ const props = {
export default defineComponent({ export default defineComponent({
name: "VxeTableBar", name: "VxeTableBar",
props, props,
emits: ["refresh"], emits: ["refresh", "fullscreen"],
setup(props, { emit, slots, attrs }) { setup(props, { emit, slots, attrs }) {
const size = ref("small"); const size = ref("small");
const loading = ref(false); const loading = ref(false);
@ -113,6 +113,11 @@ export default defineComponent({
props.vxeTableRef.refreshColumn(); props.vxeTableRef.refreshColumn();
} }
function onFullscreen() {
isFullscreen.value = !isFullscreen.value;
emit("fullscreen", isFullscreen.value);
}
function reloadColumn() { function reloadColumn() {
const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item => const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item =>
checkedColumns.value.includes(item.title) checkedColumns.value.includes(item.title)
@ -369,7 +374,7 @@ export default defineComponent({
class={["w-[16px]", iconClass.value]} class={["w-[16px]", iconClass.value]}
icon={isFullscreen.value ? ExitFullscreen : Fullscreen} icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"} v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
onClick={() => (isFullscreen.value = !isFullscreen.value)} onClick={() => onFullscreen()}
/> />
</div> </div>
</div> </div>

View File

@ -26,6 +26,11 @@ const {
handleDelete, handleDelete,
handleSelectionChange handleSelectionChange
} = useDept(); } = useDept();
function onFullscreen() {
//
tableRef.value.setAdaptive();
}
</script> </script>
<template> <template>
@ -75,6 +80,7 @@ const {
:columns="columns" :columns="columns"
:tableRef="tableRef?.getTableRef()" :tableRef="tableRef?.getTableRef()"
@refresh="onSearch" @refresh="onSearch"
@fullscreen="onFullscreen"
> >
<template #buttons> <template #buttons>
<el-button <el-button

View File

@ -27,6 +27,11 @@ const {
handleDelete, handleDelete,
handleSelectionChange handleSelectionChange
} = useMenu(); } = useMenu();
function onFullscreen() {
//
tableRef.value.setAdaptive();
}
</script> </script>
<template> <template>
@ -66,6 +71,7 @@ const {
:isExpandAll="false" :isExpandAll="false"
:tableRef="tableRef?.getTableRef()" :tableRef="tableRef?.getTableRef()"
@refresh="onSearch" @refresh="onSearch"
@fullscreen="onFullscreen"
> >
<template #buttons> <template #buttons>
<el-button <el-button

View File

@ -96,7 +96,7 @@ defineExpose({ onTreeReset });
<template> <template>
<div <div
v-loading="treeLoading" v-loading="treeLoading"
class="h-full bg-bg_color overflow-auto" class="h-full bg-bg_color overflow-hidden relative"
:style="{ minHeight: `calc(100vh - 141px)` }" :style="{ minHeight: `calc(100vh - 141px)` }"
> >
<div class="flex items-center h-[34px]"> <div class="flex items-center h-[34px]">
@ -151,54 +151,56 @@ defineExpose({ onTreeReset });
</el-dropdown> </el-dropdown>
</div> </div>
<el-divider /> <el-divider />
<el-tree <el-scrollbar height="calc(90vh - 88px)">
ref="treeRef" <el-tree
:data="treeData" ref="treeRef"
node-key="id" :data="treeData"
size="small" node-key="id"
:props="defaultProps" size="small"
default-expand-all :props="defaultProps"
:expand-on-click-node="false" default-expand-all
:filter-node-method="filterNode" :expand-on-click-node="false"
@node-click="nodeClick" :filter-node-method="filterNode"
> @node-click="nodeClick"
<template #default="{ node, data }"> >
<span <template #default="{ node, data }">
:class="[ <div
'pl-1', :class="[
'pr-1', 'rounded',
'rounded', 'flex',
'flex', 'items-center',
'items-center', 'select-none',
'select-none', 'hover:text-primary',
'hover:text-primary', searchValue.trim().length > 0 &&
searchValue.trim().length > 0 && node.label.includes(searchValue) &&
node.label.includes(searchValue) && 'text-red-500',
'text-red-500', highlightMap[node.id]?.highlight ? 'dark:text-primary' : ''
highlightMap[node.id]?.highlight ? 'dark:text-primary' : '' ]"
]" :style="{
:style="{ color: highlightMap[node.id]?.highlight
color: highlightMap[node.id]?.highlight ? 'var(--el-color-primary)'
? 'var(--el-color-primary)' : '',
: '', background: highlightMap[node.id]?.highlight
background: highlightMap[node.id]?.highlight ? 'var(--el-color-primary-light-7)'
? 'var(--el-color-primary-light-7)' : 'transparent'
: 'transparent' }"
}" >
> <IconifyIconOffline
<IconifyIconOffline :icon="
:icon=" data.type === 1
data.type === 1 ? OfficeBuilding
? OfficeBuilding : data.type === 2
: data.type === 2 ? LocationCompany
? LocationCompany : Dept
: Dept "
" />
/> <span class="!w-[120px] !truncate" :title="node.label">
{{ node.label }} {{ node.label }}
</span> </span>
</template> </div>
</el-tree> </template>
</el-tree>
</el-scrollbar>
</div> </div>
</template> </template>

View File

@ -1,6 +1,6 @@
import { tableData } from "../data"; import { tableData } from "../data";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { clone, delay } from "@pureadmin/utils"; import { clone } from "@pureadmin/utils";
export function useColumns() { export function useColumns() {
const dataList = ref([]); const dataList = ref([]);
@ -38,14 +38,8 @@ export function useColumns() {
} }
onMounted(() => { onMounted(() => {
delay(600).then(() => { clone(tableData, true).forEach((item, index) => {
const newList = []; dataList.value.push({ id: index, ...item });
Array.from({ length: 6 }).forEach(() => {
newList.push(clone(tableData, true));
});
newList.flat(Infinity).forEach((item, index) => {
dataList.value.push({ id: index, ...item });
});
}); });
}); });