feat: 表格按钮
This commit is contained in:
100011797
parent
c22c195200
commit
78e423cc50
|
|
@ -4,17 +4,17 @@
|
|||
<div class="jtable-body-header-left">
|
||||
<slot name="headerTitle"></slot>
|
||||
</div>
|
||||
<div class="jtable-body-header-right">
|
||||
<div class="jtable-setting-item" :class="[ModelEnum.CARD === model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
|
||||
<div class="jtable-body-header-right" v-if="!model">
|
||||
<div class="jtable-setting-item" :class="[ModelEnum.CARD === _model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
|
||||
<AppstoreOutlined />
|
||||
</div>
|
||||
<div class="jtable-setting-item" :class="[ModelEnum.TABLE === model ? 'active' : '']" @click="modelChange(ModelEnum.TABLE)">
|
||||
<div class="jtable-setting-item" :class="[ModelEnum.TABLE === _model ? 'active' : '']" @click="modelChange(ModelEnum.TABLE)">
|
||||
<UnorderedListOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jtable-content">
|
||||
<div v-if="model === ModelEnum.CARD" class="jtable-card">
|
||||
<div v-if="_model === ModelEnum.CARD" class="jtable-card">
|
||||
<div
|
||||
v-if="dataSource.length"
|
||||
class="jtable-card-items"
|
||||
|
|
@ -33,14 +33,28 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<a-table :columns="columns" :dataSource="dataSource" :pagination="false" />
|
||||
<a-table {...props} :columns="[..._columns]" :dataSource="dataSource" :pagination="false">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-tooltip v-for="i in actions" :key="i.key" {...i.tooltip}>
|
||||
<a-popconfirm v-if="i.popConfirm" {...i.popConfirm}>
|
||||
<a>{{i.text}}</a>
|
||||
</a-popconfirm>
|
||||
<a v-else @click="i.onClick && i.onClick(record)">{{i.text}}</a>
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jtable-pagination" v-if="dataSource.length">
|
||||
<a-pagination
|
||||
size="small"
|
||||
:total="50"
|
||||
:total="total"
|
||||
:show-total="total => `第 ${1} - ${1} 条/总共 ${total} 条`"
|
||||
@change="pageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,14 +63,17 @@
|
|||
<script setup lang="ts">
|
||||
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import type { TableProps } from 'ant-design-vue/es/table'
|
||||
import type { TooltipProps } from 'ant-design-vue/es/tooltip'
|
||||
import type { PopconfirmProps } from 'ant-design-vue/es/popconfirm'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import { CSSProperties } from 'vue';
|
||||
|
||||
enum ModelEnum {
|
||||
TABLE = 'TABLE',
|
||||
CARD = 'CARD',
|
||||
}
|
||||
|
||||
export declare type RequestData = {
|
||||
type RequestData = {
|
||||
code: string;
|
||||
result: {
|
||||
data: Record<string, any>[] | undefined;
|
||||
|
|
@ -67,6 +84,17 @@ export declare type RequestData = {
|
|||
status: number;
|
||||
} & Record<string, any>;
|
||||
|
||||
export interface ActionsType {
|
||||
key: string;
|
||||
text: string;
|
||||
disabled?: boolean;
|
||||
permission: boolean;
|
||||
onClick?: (data: any) => void;
|
||||
style?: CSSProperties;
|
||||
tooltip?: TooltipProps;
|
||||
popConfirm: PopconfirmProps
|
||||
}
|
||||
|
||||
interface JTableProps extends TableProps{
|
||||
request: (params: Record<string, any> & {
|
||||
pageSize: number;
|
||||
|
|
@ -74,28 +102,34 @@ interface JTableProps extends TableProps{
|
|||
}) => Promise<Partial<RequestData>>;
|
||||
cardBodyClass?: string;
|
||||
columns: Record<string, any>[];
|
||||
params: Record<string, any> & {
|
||||
params?: Record<string, any> & {
|
||||
pageSize: number;
|
||||
pageIndex: number;
|
||||
}
|
||||
};
|
||||
model?: keyof typeof ModelEnum | undefined; // 显示table还是card
|
||||
actions?: ActionsType[]
|
||||
}
|
||||
// props和emit
|
||||
const emit = defineEmits(["modelChange"]);
|
||||
// const emit = defineEmits(["modelChange"]);
|
||||
const props = withDefaults(defineProps<JTableProps>(), {
|
||||
cardBodyClass: '',
|
||||
request: undefined
|
||||
request: undefined,
|
||||
})
|
||||
|
||||
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
|
||||
const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
|
||||
|
||||
const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
|
||||
const column = ref<number>(4);
|
||||
const dataSource = ref<Record<string, any>[]>([])
|
||||
console.log(props)
|
||||
const pageIndex = ref<number>(0)
|
||||
const pageSize = ref<number>(6)
|
||||
const total = ref<number>(0)
|
||||
const _columns = ref<Record<string, any>[]>([])
|
||||
// 方法
|
||||
|
||||
// 切换卡片和表格
|
||||
const modelChange = (type: keyof typeof ModelEnum) => {
|
||||
model.value = type
|
||||
_model.value = type
|
||||
}
|
||||
|
||||
// 请求数据
|
||||
|
|
@ -106,11 +140,43 @@ const handleSearch = async (params1?: Record<string, any>) => {
|
|||
...params1
|
||||
})
|
||||
if(resp.status === 200){
|
||||
dataSource.value = resp.result?.data || []
|
||||
dataSource.value = [ // resp.result?.data ||
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
],
|
||||
pageIndex.value = resp.result?.pageIndex || 0
|
||||
pageSize.value = resp.result?.pageSize || 6
|
||||
total.value = resp.result?.total || 0
|
||||
}
|
||||
}
|
||||
|
||||
const pageChange = () => {
|
||||
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
if(Array.isArray(props.actions) && props.actions.length) {
|
||||
_columns.value = [...props.columns,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250
|
||||
}
|
||||
]
|
||||
} else {
|
||||
_columns.value = [...props.columns]
|
||||
}
|
||||
handleSearch(props.params)
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -16,15 +16,16 @@
|
|||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
}
|
||||
},
|
||||
]"
|
||||
:actions="actions"
|
||||
:request="request"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary">新增</a-button>
|
||||
</template>
|
||||
<template #cardRender="slotProps">
|
||||
<CardBox>
|
||||
<CardBox :actions="actions">
|
||||
<template #content>
|
||||
{{slotProps.item.name}}
|
||||
</template>
|
||||
|
|
@ -37,8 +38,13 @@
|
|||
<script setup lang="ts">
|
||||
import server from "@/utils/request";
|
||||
import CardBox from '@/components/CardBox/index.vue';
|
||||
const request = (data: any) => server.post(`/device-product/_query`, data)
|
||||
|
||||
const request = (data: any) => server.post(`/device-product/_query`, data)
|
||||
const actions = [{
|
||||
key: 'delete',
|
||||
disabled: true,
|
||||
text: "删除"
|
||||
}]
|
||||
</script>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue