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/6] =?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/6] 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>
 
 

From e3c3e43b31d582e4f67987104a8ae6dcae8584bc Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Wed, 11 Jan 2023 14:33:17 +0800
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E6=8F=92?=
 =?UTF-8?q?=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                  |  14 +++
 src/components/CardBox/index.vue |   2 +-
 src/components/Table/index.vue   | 203 ++++++++++++++++++-------------
 src/components/index.ts          |   4 +-
 src/views/demo/table/index.vue   |  58 +++++++--
 5 files changed, 186 insertions(+), 95 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index c6352220..810334ea 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,29 +7,43 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
     ACol: typeof import('ant-design-vue/es')['Col']
     ACollapse: typeof import('ant-design-vue/es')['Collapse']
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APagination: typeof import('ant-design-vue/es')['Pagination']
+    APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ATable: typeof import('ant-design-vue/es')['Table']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
+    FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
     GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
     MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
+    PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/Table/index.vue')['default']
+    TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
     ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
   }
 }
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index 7eda82d6..fc942f65 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -60,7 +60,7 @@
         </div>
 
         <!-- 按钮 -->
-        <slot name="botton-tool">
+        <slot name="bottom-tool">
             <div v-if="showTool" class="card-tools">
                 <div
                     v-for="item in actions"
diff --git a/src/components/Table/index.vue b/src/components/Table/index.vue
index 3747311c..9a623d59 100644
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@@ -1,68 +1,89 @@
 <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" v-if="!model">
-                <div class="jtable-setting-item" :class="[ModelEnum.CARD === _model ? 'active' : '']" @click="modelChange(ModelEnum.CARD)">
-                    <AppstoreOutlined />
+    <a-spin :spinning="loading">
+        <div class="jtable-body">
+            <div class="jtable-body-header">
+                <div class="jtable-body-header-left">
+                    <slot name="headerTitle"></slot>
                 </div>
-                <div class="jtable-setting-item" :class="[ModelEnum.TABLE === _model ? 'active' : '']" @click="modelChange(ModelEnum.TABLE)">
-                    <UnorderedListOutlined  />
+                <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)">
+                        <UnorderedListOutlined  />
+                    </div>
                 </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-content">
+                <!-- <div class="jtable-alert">
+                    <a-alert message="Info Text" type="info" />
+                </div> -->
+                <div v-if="_model === ModelEnum.CARD" class="jtable-card">
                     <div 
-                        class="jtable-card-item" 
-                        v-for="(item, index) in dataSource" 
-                        :key="index"
+                        v-if="_dataSource.length"
+                        class="jtable-card-items"
+                        :style="{gridTemplateColumns: `repeat(${column}, 1fr)`}"
                     >
-                        <slot name="cardRender" :item="item" :index="index"></slot>
+                        <div 
+                            class="jtable-card-item" 
+                            v-for="(item, index) in _dataSource" 
+                            :key="index"
+                        >
+                            <CardBox :actions="actions" v-bind="cardProps">
+                                <template #img>
+                                    <slot name="img">
+                                        <img :src="getImage('/device-product.png')" />
+                                    </slot>
+                                </template>
+                                <template #content>
+                                    <slot name="cardContent" :item="item" :index="index"></slot>
+                                </template>
+                            </CardBox>
+                        </div>
+                    </div>
+                    <div v-else>
+                        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
                     </div>
                 </div>
                 <div v-else>
-                    <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
+                    <a-table :rowSelection="rowSelection" :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" v-bind="i.tooltip">
+                                        <a-popconfirm v-if="i.popConfirm" v-bind="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 v-else-if="column.scopedSlots">
+                               <slot :name="column.key" :row="record"></slot>
+                            </template>
+                        </template>
+                    </a-table>
                 </div>
             </div>
-            <div v-else>
-                <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 class="jtable-pagination" v-if="_dataSource.length && !noPagination">
+                <a-pagination
+                    size="small"
+                    :total="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>
-        <div class="jtable-pagination" v-if="dataSource.length">
-            <a-pagination
-                size="small"
-                :total="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>
+    </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -72,6 +93,7 @@ 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';
+import { getImage } from '@/utils/comm';
 
 enum ModelEnum {
     TABLE = 'TABLE',
@@ -91,17 +113,18 @@ type RequestData = {
 
 export interface ActionsType {
     key: string;
-    text: string;
+    text?: string;
     disabled?: boolean;
-    permission: boolean;
+    permission?: boolean;
     onClick?: (data: any) => void;
     style?: CSSProperties;
     tooltip?: TooltipProps;
-    popConfirm: PopconfirmProps
+    popConfirm?: PopconfirmProps;
+    icon?: string;
 }
 
 interface JTableProps extends TableProps{
-    request: (params: Record<string, any> & {
+    request?: (params: Record<string, any> & {
         pageSize: number;
         pageIndex: number;
     }) => Promise<Partial<RequestData>>;
@@ -112,10 +135,13 @@ interface JTableProps extends TableProps{
         pageIndex: number;
     };
     model?: keyof typeof ModelEnum | undefined; // 显示table还是card
-    actions?: ActionsType[]
+    actions?: ActionsType[];
+    noPagination?: boolean;
+    rowSelection?: TableProps['rowSelection'];
+    cardProps?:  Record<string, any>;
+    dataSource?:  Record<string, any>[];
 }
-// props和emit
-// const emit = defineEmits(["modelChange"]);
+// props
 const props = withDefaults(defineProps<JTableProps>(), {
     cardBodyClass: '',
     request: undefined,
@@ -125,45 +151,56 @@ const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
 
 const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
 const column = ref<number>(4);
-const dataSource = ref<Record<string, any>[]>([])
+const _dataSource = ref<Record<string, any>[]>([])
 const pageIndex = ref<number>(0)
 const pageSize = ref<number>(6)
 const total = ref<number>(0)
 const _columns = ref<Record<string, any>[]>([])
+const loading = ref<boolean>(true)
+// 
+// const slotColumns = computed(() => props.columns.filter((item) => item.scopedSlots))
 // 方法
-
 // 切换卡片和表格
 const modelChange = (type: keyof typeof ModelEnum) => {
     _model.value = type
 }
-
 // 请求数据
-const handleSearch = async (params1?: Record<string, any>) => {
+const handleSearch = async (_params?: Record<string, any>) => {
+    loading.value = true
+    if(props.request) {
     const resp = await props.request({
-        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
+            pageSize: 12,
+            pageIndex: 1,
+            ..._params
+        })
+        if(resp.status === 200){
+            // 判断如果是最后一页且最后一页为空，就跳转到前一页
+            if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
+                handleSearch({
+                    ..._params,
+                    pageSize: pageSize.value,
+                    pageIndex: pageIndex.value - 1,
+                })
+            } else {
+                _dataSource.value = resp.result?.data || []
+                pageIndex.value = resp.result?.pageIndex || 0
+                pageSize.value = resp.result?.pageSize || 6
+                total.value = resp.result?.total || 0
+            }
+        }
+    } else {
+        _dataSource.value = props?.dataSource || []
     }
+    
+    loading.value = false
 }
 
 const pageChange = (page: number, size: number) => {
-    if(pageSize.value === size) {
-        handleSearch({
-            pageSize: size,
-            pageIndex: page,
-        })
-    } else {
-        handleSearch({
-            pageSize: size,
-            pageIndex: 1,
-        })
-    }
+    handleSearch({
+        ...props.params,
+        pageSize: size,
+        pageIndex: pageSize.value === size ? page : 1,
+    })
 }
 
 watchEffect(() => {
diff --git a/src/components/index.ts b/src/components/index.ts
index 7bcdd04e..d3daf534 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,7 +3,8 @@ import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
 import JTable from './Table/index.vue'
 import TitleComponent from "./TitleComponent/index.vue";
-import Form from './Form'
+import Form from './Form';
+import CardBox from './CardBox/index.vue';
 
 export default  {
     install(app: App) {
@@ -12,5 +13,6 @@ export default  {
             .component('JTable', JTable)
             .component('TitleComponent', TitleComponent)
             .component('Form', Form)
+            .component('CardBox', CardBox)
     }
 }
diff --git a/src/views/demo/table/index.vue b/src/views/demo/table/index.vue
index 66db096e..c2986eb6 100644
--- a/src/views/demo/table/index.vue
+++ b/src/views/demo/table/index.vue
@@ -11,6 +11,7 @@
                     title: 'ID',
                     dataIndex: 'id',
                     key: 'id',
+                    scopedSlots: true
                 },
                 {
                     title: '分类',
@@ -20,16 +21,30 @@
             ]"
             :actions="actions"
             :request="request"
+            :rowSelection="rowSelection"
         >
             <template #headerTitle>
                 <a-button type="primary">新增</a-button>
             </template>
-            <template #cardRender="slotProps">
-                <CardBox :actions="actions">
-                    <template #content>
-                        {{slotProps.item.name}}
-                    </template>
-                </CardBox>
+            <template #cardContent="slotProps">
+                <h3>{{slotProps.item.name}}</h3>
+                <a-row>
+                    <a-col :span="12">
+                        <div class="card-item-content-text">
+                            设备类型
+                        </div>
+                        <div>直连设备</div>
+                    </a-col>
+                    <a-col :span="12">
+                        <div class="card-item-content-text">
+                            产品名称
+                        </div>
+                        <div>测试固定地址</div>
+                    </a-col>
+                </a-row>
+            </template>
+            <template #id="slotProps">
+                <a>{{slotProps.row.id}}</a>
             </template>
         </JTable>
     </div>
@@ -37,21 +52,44 @@
 
 <script setup lang="ts">
 import server from "@/utils/request";
-import CardBox from '@/components/CardBox/index.vue';
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import type { TableProps, TableColumnType } from 'ant-design-vue';
 
 const request = (data: any) => server.post(`/device-product/_query`, data)
-const actions = [
+const actions: ActionsType[] = [
     {
         key: 'edit',
         // disabled: true,
-        text: "编辑"
+        text: "编辑",
+        tooltip: {
+            title: '编辑'
+        },
+        // component: <UnorderedListOutlined />
     },
     {
         key: 'delete',
         disabled: true,
-        text: "删除"
+        text: "删除",
+        tooltip: {
+            title: '删除'
+        },
+        popConfirm: {
+            title: '确认删除?'
+        }
     }
 ]
+
+const rowSelection: TableProps['rowSelection'] = {
+    onChange: (selectedRowKeys: string[], selectedRows: any[]) => {
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+    },
+    getCheckboxProps: (record: any) => ({
+        disabled: record.name === 'Disabled User',
+        name: record.name,
+    }),
+};
+
 </script>
 
 

From bf493c3a96c762d5bccfba4502fdaacb4ed0fd0a Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Wed, 11 Jan 2023 16:06:06 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84FormBuilder?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                        |  17 ++
 src/components/Form/FormBuilder.vue    | 251 ++++++++++++++++++++++++-
 src/components/Form/index.modules.d.ts |  40 ++++
 src/components/Form/index.ts           |   1 +
 src/components/Form/util.ts            |  15 ++
 src/style.css                          |   4 +
 src/views/demo/Form.vue                |  54 +++++-
 7 files changed, 376 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Form/index.modules.d.ts
 create mode 100644 src/components/Form/util.ts

diff --git a/components.d.ts b/components.d.ts
index 7c068950..d63a4b41 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,8 +8,25 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
     CardBox: typeof import('./src/components/CardBox/index.vue')['default']
     FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
diff --git a/src/components/Form/FormBuilder.vue b/src/components/Form/FormBuilder.vue
index d1a74645..6de34440 100644
--- a/src/components/Form/FormBuilder.vue
+++ b/src/components/Form/FormBuilder.vue
@@ -1,11 +1,254 @@
 <template>
-  <div class=''>
-
+  <div class='JForm-content'>
+    <a-form
+      v-bind='props'
+      :model='formData.data'
+      layout='vertical'
+    >
+      <a-row :type='rowType'>
+        <a-col v-for='item in formOptions.data' :key='item.key' :span='item.span'>
+          <a-form-item
+            :name='item.name'
+            :required='item.required'
+            :rules='item.rules'
+            :noStyle='item.noStyle'
+          >
+            <template #label>
+              <span>{{ item.title }}</span>
+              <a-tooltip :title='item.tooltip'>
+                <QuestionCircleOutlined v-if='!!item.tooltip' style='margin-left: 4px; color: rgba(0,0,0,.45) ' />
+              </a-tooltip>
+            </template>
+            <a-input
+              v-if='item.component === componentType.input'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-select
+              v-else-if='item.component === componentType.select'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :options='item.options'
+            />
+            <a-inputnumber
+              v-else-if='item.component === componentType.inputNumber'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-input-password
+              v-else-if='item.component === componentType.password'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-switch
+              v-else-if='item.component === componentType.switch'
+              v-bind='item.componentProps'
+              v-model:checked='formData.data[item.name]'
+            />
+            <a-radio-group
+              v-else-if='item.component === componentType.radio'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-checkbox-group
+              v-else-if='item.component === componentType.checkbox'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :options='item.options'
+            />
+            <a-time-picker
+              v-else-if='item.component === componentType.time'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-date-picker
+              v-else-if='item.component === componentType.date'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <a-tree-select
+              v-else-if='item.component === componentType.tree'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+              :tree-data='item.options'
+            />
+            <a-upload
+              v-else-if='item.component === componentType.upload'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+            <component
+              v-else
+              :is='item.component'
+              v-bind='item.componentProps'
+              v-model:value='formData.data[item.name]'
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
   </div>
 </template>
 
-<script setup type='ts' name='FormBuilder'>
-const data = reactive({})
+<script setup lang='ts' name='FormBuilder'>
+import type { Options, OptionsItem, OptionsComponent } from './index.modules'
+import { PropType } from 'vue'
+import { get, isArray, isString, pick, set } from 'lodash-es'
+import { formProps } from 'ant-design-vue/es/form'
+import { Form } from 'ant-design-vue';
+import componentType from './util'
+import {
+  QuestionCircleOutlined
+} from '@ant-design/icons-vue';
+
+const useform = Form.useForm;
+
+const props = defineProps({
+  ...formProps,
+  options: {
+    type: Object as PropType<Options>,
+    default: () => []
+  },
+  initValue: {
+    type: Object,
+    default: () => ({})
+  },
+  column: {
+    type: Number,
+    default: 1
+  }
+})
+
+// 表单数据
+const formData = reactive({
+  data: {}
+})
+
+const formOptions = reactive<{ data: OptionsComponent[]}>({
+  data: []
+}) // 表单Item
+
+const { resetFields, validate} = useform(formData, props.rules)
+
+const rowType = ref<string | undefined>(undefined)
+
+const calculateItemSpan = (span?: number | string) => {
+  const itemSpan = 24 / props.column
+  if (!span) return itemSpan
+
+  if (isString(span) && span.includes('px')) {
+    rowType.value = 'flex'
+  } else {
+    return span
+  }
+}
+
+/**
+ * 根据传入的表单options生成表单
+ * @param data {Options}
+ * @param parentKey
+ */
+const handleFormData = (data: Options, parentKey: Array<string> = []): any => {
+  const cacheModel: any = {}
+
+  Object.keys(data).forEach(async (key) => {
+    const optionItem = data[key]
+    const _key = [...parentKey, key]
+    if ('type' in optionItem && optionItem.type === 'Object') {
+      const dataModel = handleFormData(optionItem.properties, _key)
+      cacheModel[key] = dataModel
+    } else if (!('visible' in optionItem) || ('visible' in optionItem && optionItem.visible !== true)){
+      // 处理默认值以及原始值
+      const keyValue = get(formData.data, _key)
+      let _options: any[] = []
+
+      if (keyValue) { // 当前值在formModel中
+        cacheModel[key] = keyValue
+      } else {
+        cacheModel[key] = (optionItem as OptionsItem).default
+      }
+      // 处理options
+      if ('options' in optionItem) {
+        _options = optionItem.options!
+      }
+      // 处理 onSearch 请求
+      if ('onSearch' in optionItem) {
+        const data = await optionItem.onSearch!()
+        if (data) {
+          _options = data
+        }
+      }
+      const optionsItemProps = pick(optionItem, ['componentProps', 'title', 'component', 'rules', 'required', 'hidden', 'tooltip', 'noStyle'])
+      //
+      formOptions.data.push({
+        ...optionsItemProps,
+        name: _key,
+        options: _options,
+        key: isArray(_key) ? _key.toString() : _key,
+        span: calculateItemSpan((optionItem as OptionsItem).span)
+      })
+    }
+  })
+  return cacheModel
+}
+
+/**
+ * 重置表单
+ */
+const resetModel = () => {
+  resetFields()
+}
+
+/**
+ * 验证并提交表单
+ */
+const formValidate = () => {
+  return new Promise((res, rej) => {
+    validate().then(data => {
+      res(formData.data)
+    }).catch(err => {
+      rej(err)
+    })
+  })
+}
+/**
+ * 改变单个值
+ */
+const setItemValue = (key: string | (string | number)[], value: any) => {
+  set(formData.data, key, value)
+}
+
+/**
+ * 修改整个表单值
+ * @param data
+ */
+const setData = (data: any) => {
+  formData.data = data
+}
+
+
+if (props.initValue) {
+  formData.data = props.initValue
+}
+
+formData.data = handleFormData(props.options)
+
+watch(props.options, (newValue: any) => {
+  formOptions.data = []
+  formData.data = handleFormData(newValue)
+})
+
+watch(props.initValue, (newValue: any) => {
+  formData.data = newValue
+})
+
+defineExpose({
+  resetModel,
+  formValidate,
+  setItemValue,
+  setData
+})
+
 </script>
 
 <style scoped>
diff --git a/src/components/Form/index.modules.d.ts b/src/components/Form/index.modules.d.ts
new file mode 100644
index 00000000..fd4eabaa
--- /dev/null
+++ b/src/components/Form/index.modules.d.ts
@@ -0,0 +1,40 @@
+import type { FormProps } from 'ant-design-vue/es/form'
+
+export interface OptionsComponent {
+  /** FormItem title **/
+  title?: string
+  /** 组件名称 **/
+  component?: string
+  /** 组件Props **/
+  componentProps?: any
+  /** 组件Options **/
+  options?: any[]
+  name?: any
+  [name: string]: any
+}
+
+export interface OptionsItem extends OptionsComponent{
+  /** 内置查询，会覆盖options **/
+  onSearch?: () => Promise<any>
+  default?: any
+  /** 隐藏Item，值不会进入到FormModel中 **/
+  visible?: boolean
+  /** 表单隐藏域 **/
+  hidden?: boolean,
+  span?: number | string
+  rules?: FormProps.rules
+  required?: boolean
+  tooltip?: string
+  noStyle?: boolean
+}
+
+interface ObjectTypes {
+  type: 'Object'
+  properties: {
+    [name: string]: OptionsItem
+  }
+}
+
+export interface Options extends FormProps {
+  [name: string]: ObjectTypes | OptionsItem
+}
\ No newline at end of file
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index 1ae62176..8a209d84 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -1,3 +1,4 @@
 import FormBuilder from './FormBuilder.vue'
+export { default as componentType } from './util'
 
 export default FormBuilder
\ No newline at end of file
diff --git a/src/components/Form/util.ts b/src/components/Form/util.ts
new file mode 100644
index 00000000..b0374175
--- /dev/null
+++ b/src/components/Form/util.ts
@@ -0,0 +1,15 @@
+const optionComponentType = {
+  input: 'input',
+  inputNumber: 'inputNumber',
+  password: 'password',
+  switch: 'switch',
+  radio: 'radio',
+  checkbox: 'checkbox',
+  time: 'time',
+  date: 'date',
+  treeSelect: 'treeSelect',
+  upload: 'upload',
+  tree: 'tree',
+  select: 'select'
+}
+export default optionComponentType
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
index e69de29b..30cdc6c2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,4 @@
+.ant-form-item-required:before {
+    position: absolute;
+    right: -12px;
+}
\ No newline at end of file
diff --git a/src/views/demo/Form.vue b/src/views/demo/Form.vue
index 1f48bc29..cd585a77 100644
--- a/src/views/demo/Form.vue
+++ b/src/views/demo/Form.vue
@@ -1,9 +1,59 @@
 <template>
-  <Form />
+  <Form
+    ref='form'
+    :options='options'
+    :initValue='initValue'
+  />
+  <a-button @click='submit'>提交</a-button>
+  <a-button @click='reset'>重置</a-button>
+  <a-button @click='setValue'>修改name</a-button>
 </template>
 
 <script setup name='FormDemo'>
-const data = reactive({})
+import { componentType } from 'components/Form'
+const form = ref()
+const initValue = reactive({})
+
+const submit = () => {
+  form.value.formValidate().then(res => {
+    console.log(res)
+  })
+}
+
+const reset = () => {
+
+}
+
+const setValue =() => {
+  initValue.name = '111111'
+}
+
+const options = reactive({
+  name: {
+    component: componentType.input,
+    componentProps: {
+      style: {
+        width: '200px'
+      }
+    },
+    title: '测试',
+    required: true
+  },
+  sex: {
+    component: componentType.select,
+    title: '性别',
+    options: [
+      { label: '111', value: 1 },
+      { label: '222', value: 2 },
+    ],
+    required: true,
+    rules: [
+      { required: true, message: '请选择性别'}
+    ],
+    tooltip: '性别',
+    default: 1
+  }
+})
 </script>
 
 <style scoped>

From e2e12cd5c52204d7712265c794641c712424cb63 Mon Sep 17 00:00:00 2001
From: xieyonghong <18010623010@163.com>
Date: Wed, 11 Jan 2023 16:10:58 +0800
Subject: [PATCH 6/6] =?UTF-8?q?update:=20=E4=BC=98=E5=8C=96FormBuilder?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E9=AA=8C=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Form/FormBuilder.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Form/FormBuilder.vue b/src/components/Form/FormBuilder.vue
index 6de34440..cac91d0a 100644
--- a/src/components/Form/FormBuilder.vue
+++ b/src/components/Form/FormBuilder.vue
@@ -1,6 +1,7 @@
 <template>
   <div class='JForm-content'>
     <a-form
+      ref='form'
       v-bind='props'
       :model='formData.data'
       layout='vertical'
@@ -95,13 +96,12 @@ import type { Options, OptionsItem, OptionsComponent } from './index.modules'
 import { PropType } from 'vue'
 import { get, isArray, isString, pick, set } from 'lodash-es'
 import { formProps } from 'ant-design-vue/es/form'
-import { Form } from 'ant-design-vue';
 import componentType from './util'
 import {
   QuestionCircleOutlined
 } from '@ant-design/icons-vue';
 
-const useform = Form.useForm;
+const form = ref()
 
 const props = defineProps({
   ...formProps,
@@ -128,8 +128,6 @@ const formOptions = reactive<{ data: OptionsComponent[]}>({
   data: []
 }) // 表单Item
 
-const { resetFields, validate} = useform(formData, props.rules)
-
 const rowType = ref<string | undefined>(undefined)
 
 const calculateItemSpan = (span?: number | string) => {
@@ -196,7 +194,7 @@ const handleFormData = (data: Options, parentKey: Array<string> = []): any => {
  * 重置表单
  */
 const resetModel = () => {
-  resetFields()
+  form.value.resetFields()
 }
 
 /**
@@ -204,9 +202,9 @@ const resetModel = () => {
  */
 const formValidate = () => {
   return new Promise((res, rej) => {
-    validate().then(data => {
+    form.value.validate().then(() => {
       res(formData.data)
-    }).catch(err => {
+    }).catch((err: any) => {
       rej(err)
     })
   })