feat: 表格按钮

src/components/Table/index.vue

@@ -4,17 +4,17 @@
             <div class="jtable-body-header-left">
                 <slot name="headerTitle"></slot>
             </div>
-            <div class="jtable-body-header-right">
+            <div class="jtable-body-header-right" v-if="!model">
-                <div class="jtable-setting-item" :class="[ModelEnum.CARD === model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
+                <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)
 })
 

src/views/demo/table/index.vue

@@ -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>