From 26c84eeab643e73dda7a08eb0226c0dd32bb21e9 Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Tue, 10 Jan 2023 17:06:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20yarn.lock=E4=B8=8D=E5=BF=BD=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 -
 src/components/Table/index.vue                | 168 ++++++++++++++++++
 .../Table/{ => old}/index.module.less         |   0
 src/components/Table/{ => old}/index.tsx      |  23 ++-
 src/components/index.ts                       |   2 +-
 src/router/menu.ts                            |   2 +-
 src/views/{ => demo}/table/index.vue          |  13 +-
 7 files changed, 194 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Table/index.vue
 rename src/components/Table/{ => old}/index.module.less (100%)
 rename src/components/Table/{ => old}/index.tsx (93%)
 rename src/views/{ => demo}/table/index.vue (70%)

diff --git a/.gitignore b/.gitignore
index 1b4684cb..21c8f822 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,7 +11,6 @@ node_modules
 dist
 dist-ssr
 *.local
-yarn.lock
 components.d.ts
 
 # Editor directories and files
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
new file mode 100644
index 00000000..9b21c30c
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Table/index.module.less b/src/components/Table/old/index.module.less
similarity index 100%
rename from src/components/Table/index.module.less
rename to src/components/Table/old/index.module.less
diff --git a/src/components/Table/index.tsx b/src/components/Table/old/index.tsx
similarity index 93%
rename from src/components/Table/index.tsx
rename to src/components/Table/old/index.tsx
index 8e774af4..39ac9e9c 100644
--- a/src/components/Table/index.tsx
+++ b/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;
-        pageIndex?: number;
+        pageSize: 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(() => {
 
         })
diff --git a/src/components/index.ts b/src/components/index.ts
index 7ba45972..7bcdd04e 100644
--- a/src/components/index.ts
+++ b/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'
 
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 51647777..2c52f2c2 100644
--- a/src/router/menu.ts
+++ b/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',
diff --git a/src/views/table/index.vue b/src/views/demo/table/index.vue
similarity index 70%
rename from src/views/table/index.vue
rename to src/views/demo/table/index.vue
index 0684d3d0..89887a55 100644
--- a/src/views/table/index.vue
+++ b/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";
-// :request="post('/device-product/_query', {})"
+import server from "@/utils/request";
+import CardBox from '@/components/CardBox/index.vue';
+const request = (data: any) => server.post(`/device-product/_query`, data)
+
 </script>