Merge branch 'dev' into dev-hub

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,33 @@
                 </div>
             </div>
             <div v-else>
-                <a-table :columns="columns" :dataSource="dataSource" :pagination="false" />
+                <a-table {...props} :columns="[..._columns]" :dataSource="dataSource" :pagination="false" :scroll="{ x: 1366 }">
+                    <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} 条`"
+                :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>
@@ -49,14 +68,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 +89,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,43 +107,78 @@ 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
 }
 
 // 请求数据
 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 || []
+        pageIndex.value = resp.result?.pageIndex || 0
+        pageSize.value = resp.result?.pageSize || 6
+        total.value = resp.result?.total || 0
+    }
+}
+
+const pageChange = (page: number, size: number) => {
+    if(pageSize.value === size) {
+        handleSearch({
+            pageSize: size,
+            pageIndex: page,
+        })
+    } else {
+        handleSearch({
+            pageSize: size,
+            pageIndex: 1,
+        })
     }
 }
 
 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)
 })
 
@@ -160,9 +228,9 @@ watchEffect(() => {
         margin-top: 20px;
         display: flex;
         justify-content: flex-end;
-        // position: absolute;
+        /deep/  .ant-pagination-item {
-        // right: 24px;
+            display: none !important;
-        // bottom: 24px;
+        }
     }
 }   
 </style>

src/views/demo/table/index.vue

@@ -3,28 +3,29 @@
         <JTable 
             :columns="[
                 {
-                    title: '姓名',
+                    title: '名称',
                     dataIndex: 'name',
                     key: 'name',
                 },
                 {
-                    title: '年龄',
+                    title: 'ID',
-                    dataIndex: 'age',
+                    dataIndex: 'id',
-                    key: 'age',
+                    key: 'id',
                 },
                 {
-                    title: '住址',
+                    title: '分类',
-                    dataIndex: 'address',
+                    dataIndex: 'classifiedName',
-                    key: 'address',
+                    key: 'classifiedName',
-                }
+                },
             ]"
+            :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,20 @@
 <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: 'edit',
+        // disabled: true,
+        text: "编辑"
+    },
+    {
+        key: 'delete',
+        disabled: true,
+        text: "删除"
+    }
+]
 </script>