fix: yarn.lock不忽略

.gitignore

@@ -11,7 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-yarn.lock
 components.d.ts
 
 # Editor directories and files

src/components/Table/index.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="jtable-body">
+        <div class="jtable-body-header">
+            <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)">
+                    <AppstoreOutlined />
+                </div>
+                <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="dataSource.length"
+                    class="jtable-card-items"
+                    :style="{gridTemplateColumns: `repeat(${column}, 1fr)`}"
+                >
+                    <div 
+                        class="jtable-card-item" 
+                        v-for="(item, index) in dataSource" 
+                        :key="index"
+                    >
+                        <slot name="cardRender" :item="item" :index="index"></slot>
+                    </div>
+                </div>
+                <div v-else>
+                    <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+                </div>
+            </div>
+            <div v-else>
+                <a-table :columns="columns" :dataSource="dataSource" :pagination="false" />
+            </div>
+        </div>
+        <div class="jtable-pagination" v-if="dataSource.length">
+            <a-pagination
+                size="small"
+                :total="50"
+                :show-total="total => `第 ${1} - ${1} 条/总共 ${total} 条`"
+            />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
+import type { TableProps } from 'ant-design-vue/es/table'
+import { Empty } from 'ant-design-vue'
+
+enum ModelEnum {
+    TABLE = 'TABLE',
+    CARD = 'CARD',
+}
+
+export declare type RequestData = {
+    code: string;
+    result: {
+        data: Record<string, any>[] | undefined;
+        pageIndex: number;
+        pageSize: number;
+        total: number;
+    };
+    status: number;
+} & Record<string, any>;
+
+interface JTableProps extends TableProps{
+    request: (params: Record<string, any> & {
+        pageSize: number;
+        pageIndex: number;
+    }) => Promise<Partial<RequestData>>;
+    cardBodyClass?: string;
+    columns: Record<string, any>[];
+    params: Record<string, any> & {
+        pageSize: number;
+        pageIndex: number;
+    }
+}
+// props和emit
+const emit = defineEmits(["modelChange"]);
+const props = withDefaults(defineProps<JTableProps>(), {
+    cardBodyClass: '',
+    request: undefined
+})
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
+const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
+const column = ref<number>(4);
+const dataSource = ref<Record<string, any>[]>([])
+console.log(props)
+// 方法
+
+// 切换卡片和表格
+const modelChange = (type: keyof typeof ModelEnum) => {
+    model.value = type
+}
+
+// 请求数据
+const handleSearch = async (params1?: Record<string, any>) => {
+    const resp = await props.request({
+        pageSize: 10,
+        pageIndex: 1,
+        ...params1
+    })
+    if(resp.status === 200){
+        dataSource.value = resp.result?.data || []
+    }
+}
+
+watchEffect(() => {
+    handleSearch(props.params)
+})
+
+</script>
+
+<style lang="less" scoped> 
+.jtable-body {
+    width: 100%;
+    padding: 0 24px 24px;
+    background-color: white;
+    .jtable-body-header {
+        padding: 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .jtable-body-header-right {
+            display: flex;
+            gap: 8px;
+            .jtable-setting-item {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: @primary-color-hover;
+                }
+
+                &.active {
+                    color: @primary-color-active;
+                }
+            }
+        }
+    }
+    .jtable-content {
+        .jtable-card {
+            .jtable-card-items {
+                display: grid;
+                grid-gap: 26px;
+                // grid-template-columns: repeat(4, 1fr);
+                .jtable-card-item {
+                    display: flex;
+                }
+            }
+        }
+    }
+    .jtable-pagination {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+        // position: absolute;
+        // right: 24px;
+        // bottom: 24px;
+    }
+}   
+</style>

src/components/Table/old/index.tsx

@@ -1,7 +1,8 @@
 import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
 import styles from './index.module.less'
-import { Space, Pagination, Table, Empty } from 'ant-design-vue'
+import { Pagination, Table, Empty } from 'ant-design-vue'
 import type { TableProps } from 'ant-design-vue/es/table'
+
 enum ModelEnum {
     TABLE = 'TABLE',
     CARD = 'CARD',
@@ -17,18 +18,15 @@ export declare type RequestData = {
     };
     status: number;
 } & Record<string, any>;
-// interface ColumnType extends 
 
 interface JTableProps extends TableProps{
-    // columns?: ColumnsType<RecordType>;
     request: (params: Record<string, any> & {
-        pageSize?: number;
+        pageSize: number;
-        pageIndex?: number;
+        pageIndex: number;
     }) => Promise<Partial<RequestData>>;
-    cardBodyClass?: string;
+    cardBodyClass: string;
 }
 
-
 const JTable = defineComponent<JTableProps>({
     name: 'JTable',
     slots: [
@@ -38,10 +36,15 @@ const JTable = defineComponent<JTableProps>({
     emits: [
         'modelChange', // 切换卡片和表格
     ],
-    setup(props: JTableProps, { slots, emit }){
+    props: {
+        cardBodyClass: '',
+        request: undefined,
+        columns: []
+    } as any,
+    setup(props ,{ slots, emit }){
         const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
         const column = ref<number>(3);
-        console.log(props)
+        console.log(props.columns, props.request)
         const dataSource = ref<any[]>([
             {
               key: '1',
@@ -81,6 +84,8 @@ const JTable = defineComponent<JTableProps>({
               },
         ])
 
+        // 请求数据
+
         onMounted(() => {
 
         })

src/components/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
-import JTable from './Table/index'
+import JTable from './Table/index.vue'
 import TitleComponent from "./TitleComponent/index.vue";
 import Form from './Form'
 

src/router/menu.ts

@@ -38,7 +38,7 @@ export default [
     },
     {
         path: '/table',
-        component: () => import('@/views/table/index.vue')
+        component: () => import('@/views/demo/table/index.vue')
     },
     {
         path: '/form',

src/views/demo/table/index.vue

@@ -18,20 +18,27 @@
                     key: 'address',
                 }
             ]"
+            :request="request"
         >
             <template #headerTitle>
                 <a-button type="primary">新增</a-button>
             </template>
             <template #cardRender="slotProps">
-                {{slotProps.name}}
+                <CardBox>
+                    <template #content>
+                        {{slotProps.item.name}}
+                    </template>
+                </CardBox>
             </template>
         </JTable>
     </div>
 </template>
 
 <script setup lang="ts">
-import { post } from "@/utils/request";
+import server from "@/utils/request";
-// :request="post('/device-product/_query', {})"
+import CardBox from '@/components/CardBox/index.vue';
+const request = (data: any) => server.post(`/device-product/_query`, data)
+
 </script>