fix: 🧩 修改bar组件

This commit is contained in:
Bunny 2024-05-12 03:07:48 +08:00
parent d6a36abc47
commit ef51ae18ce
4 changed files with 54 additions and 9 deletions

View File

@ -10,7 +10,7 @@ export default defineFakeRoute([
return {
success: true,
data: {
avatar: "https://avatars.githubusercontent.com/u/44761321",
avatar: "https://pic3.zhimg.com/80/v2-0888fd6c14153bb36fb630230f73a802_720w.webp",
username: "admin",
nickname: "小铭",
// 一个用户可能有多个角色
@ -24,7 +24,7 @@ export default defineFakeRoute([
return {
success: true,
data: {
avatar: "https://avatars.githubusercontent.com/u/52823142",
avatar: "https://pic2.zhimg.com/v2-9ee815c09ec2e1f3a007e8d77ec06375_r.jpg",
username: "common",
nickname: "小林",
roles: ["common"],

View File

@ -3,7 +3,6 @@ import { transformI18n } from "@/plugins/i18n";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { computed, defineComponent, getCurrentInstance, nextTick, type PropType, ref, unref } from "vue";
import { cloneDeep, delay, getKeyList, isBoolean, isFunction } from "@pureadmin/utils";
import DragIcon from "@/assets/table-bar/drag.svg?component";
import ExpandIcon from "@/assets/table-bar/expand.svg?component";
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@ -32,6 +31,34 @@ const props = {
tableKey: {
type: [String, Number] as PropType<string | number>,
default: "0"
},
dataList: {
type: Array,
default: []
},
loading: {
type: Boolean,
default: false
},
pagination: {
type: Object,
default: {}
},
size: {
type: String as PropType<any>,
default: "default"
},
handleSelectionChange: {
type: String as PropType<any>,
default: () => {}
},
handleSizeChange: {
type: String as PropType<any>,
default: () => {}
},
handleCurrentChange: {
type: String as PropType<any>,
default: () => {}
}
};
@ -52,7 +79,7 @@ export default defineComponent({
const dynamicColumns = ref(cloneDeep(props?.columns));
const getDropdownItemStyle = computed(() => {
return s => {
return (s: string) => {
return {
background: s === size.value ? useEpThemeStoreHook().epThemeColor : "",
color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
@ -161,7 +188,7 @@ export default defineComponent({
};
const isFixedColumn = (label: string) => {
return dynamicColumns.value.filter(item => transformI18n(item.label) === transformI18n(label))[0].fixed ? true : false;
return !!dynamicColumns.value.filter(item => transformI18n(item.label) === transformI18n(label))[0].fixed;
};
const rendTippyProps = (content: string) => {
@ -181,7 +208,7 @@ export default defineComponent({
return () => (
<>
<div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
<div {...attrs} size={props.size} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
<div class="flex justify-between w-full h-[60px] p-4">
{slots?.title ? slots.title() : <p class="font-bold truncate">{props.title}</p>}
<div class="flex items-center justify-around">
@ -244,6 +271,24 @@ export default defineComponent({
size: size.value,
dynamicColumns: dynamicColumns.value
})}
{/*<PureTable*/}
{/* ref="tableRef"*/}
{/* columns={dynamicColumns.value}*/}
{/* adaptiveConfig={{ offsetBottom: 108 }}*/}
{/* headerCellStyle={{*/}
{/* background: "var(--el-fill-color-light)",*/}
{/* color: "var(--el-text-color-primary)"*/}
{/* }}*/}
{/* adaptive*/}
{/* align-whole="center"*/}
{/* row-key="id"*/}
{/* table-layout="auto"*/}
{/* data={props.dataList}*/}
{/* loading={props.loading}*/}
{/* pagination={props.pagination}*/}
{/* paginationSmall={props.size == "small"}*/}
{/* {...props}*/}
{/*/>*/}
</div>
</>
);

View File

@ -4,9 +4,9 @@ import { useRole } from "@/hooks/monitor/useRole";
import { getPickerShortcuts } from "../../utils";
import { PureTableBar } from "@/components/TableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import PureTable from "@pureadmin/table";
import Delete from "@iconify-icons/ep/delete";
import Refresh from "@iconify-icons/ep/refresh";
import PureTable from "@pureadmin/table";
defineOptions({
name: "LoginLog"
@ -49,7 +49,7 @@ const { form, loading, columns, dataList, pagination, selectedNum, onSearch, cle
</el-popconfirm>
</template>
<template v-slot="{ size, dynamicColumns }">
<div v-if="selectedNum > 0" v-motion-fade class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center">
<div v-motion-fade class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center">
<div class="flex-auto">
<span class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]" style="font-size: var(--el-font-size-base)"> 已选 {{ selectedNum }} </span>
<el-button text type="primary" @click="onSelectionCancel"> 取消选择</el-button>

View File

@ -39,7 +39,7 @@ const { form, loading, columns, dataList, pagination, onSearch, resetForm, handl
}"
:loading="loading"
:pagination="pagination"
:paginationSmall="size === 'small' ? true : false"
:paginationSmall="size === 'small'"
:size="size"
adaptive
align-whole="center"