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] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E6=8F=92=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>