From 78e423cc50bf6792a35421d844b0a49cb4faafb7 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Tue, 10 Jan 2023 18:30:05 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/index.vue | 96 ++++++++++++++++++++++++++++------
 src/views/demo/table/index.vue | 12 +++--
 2 files changed, 90 insertions(+), 18 deletions(-)

diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index 9b21c30c..c921bd97 100644
--- a/src/components/Table/index.vue
+++ b/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-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)
 })
 
diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue
index 89887a55..1aa3ed02 100644
--- a/src/views/demo/table/index.vue
+++ b/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>
 
 

From d682234293d68ddae95b91bf6a6793eeef7e6269 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Wed, 11 Jan 2023 10:01:28 +0800
Subject: [PATCH 2/3] fix: merge

---
 src/components/Table/index.vue | 44 ++++++++++++++++++----------------
 src/views/demo/table/index.vue | 31 ++++++++++++++----------
 2 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index c921bd97..c7143149 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -53,8 +53,13 @@
             <a-pagination
                 size="small"
                 :total="total"
-                :show-total="total => `第 ${1} - ${1} 条/总共 ${total} 条`"
+                :showQuickJumper="false"
+                :showSizeChanger="true"
+                v-model:current="pageIndex"
+                v-model:page-size="pageSize"
+                :show-total="(total, range) => `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`"
                 @change="pageChange"
+                :page-size-options="[12, 24, 48, 60, 100]"
             />
         </div>
     </div>
@@ -135,33 +140,30 @@ const modelChange = (type: keyof typeof ModelEnum) => {
 // 请求数据
 const handleSearch = async (params1?: Record<string, any>) => {
     const resp = await props.request({
-        pageSize: 10,
+        pageSize: 12,
         pageIndex: 1,
         ...params1
     })
     if(resp.status === 200){
-        dataSource.value = [ // resp.result?.data || 
-          {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-          },
-          {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-          },
-        ],
+        dataSource.value = resp.result?.data || []
         pageIndex.value = resp.result?.pageIndex || 0
         pageSize.value = resp.result?.pageSize || 6
         total.value = resp.result?.total || 0
     }
 }
 
-const pageChange = () => {
-
+const pageChange = (page: number, size: number) => {
+    if(pageSize.value === size) {
+        handleSearch({
+            pageSize: size,
+            pageIndex: page,
+        })
+    } else {
+        handleSearch({
+            pageSize: size,
+            pageIndex: 1,
+        })
+    }
 }
 
 watchEffect(() => {
@@ -226,9 +228,9 @@ watchEffect(() => {
         margin-top: 20px;
         display: flex;
         justify-content: flex-end;
-        // position: absolute;
-        // right: 24px;
-        // bottom: 24px;
+        /deep/  .ant-pagination-item {
+            display: none !important;
+        }
     }
 }   
 </style>
\ No newline at end of file
diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue
index 1aa3ed02..66db096e 100644
--- a/src/views/demo/table/index.vue
+++ b/src/views/demo/table/index.vue
@@ -3,19 +3,19 @@
         <JTable 
             :columns="[
                 {
-                    title: '姓名',
+                    title: '名称',
                     dataIndex: 'name',
                     key: 'name',
                 },
                 {
-                    title: '年龄',
-                    dataIndex: 'age',
-                    key: 'age',
+                    title: 'ID',
+                    dataIndex: 'id',
+                    key: 'id',
                 },
                 {
-                    title: '住址',
-                    dataIndex: 'address',
-                    key: 'address',
+                    title: '分类',
+                    dataIndex: 'classifiedName',
+                    key: 'classifiedName',
                 },
             ]"
             :actions="actions"
@@ -40,11 +40,18 @@ import server from "@/utils/request";
 import CardBox from '@/components/CardBox/index.vue';
 
 const request = (data: any) => server.post(`/device-product/_query`, data)
-const actions = [{
-    key: 'delete',
-    disabled: true,
-    text: "删除"
-}]
+const actions = [
+    {
+        key: 'edit',
+        // disabled: true,
+        text: "编辑"
+    },
+    {
+        key: 'delete',
+        disabled: true,
+        text: "删除"
+    }
+]
 </script>