fix: 修改table卡片插槽样式

src/components/CardBox/index.vue

@@ -54,8 +54,8 @@
                         delete: item.key === 'delete',
                     }"
                 >
-                <!-- <slot name="actions" v-bind="item"></slot> -->
+                <slot name="actions" v-bind="item"></slot>
-                <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
+                <!-- <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
                     <a-button :disabled="item.disabled">
                         <DeleteOutlined v-if="item.key === 'delete'" />
                         <template v-else>
@@ -72,7 +72,7 @@
                             <span>{{ item.text }}</span>
                         </template>
                     </a-button>
-                </template>
+                </template> -->
                 </div>
             </div>
         </slot>
@@ -284,13 +284,14 @@ const handleClick = () => {
             display: flex;
             flex-grow: 1;
 
-            & > span,
+            & > :deep(span, button) {
-            button {
+                width: 100%;
-                width: 100% !important;
+                border-radius: 0;
-                border-radius: 0 !important;
             }
 
-            button {
+            :deep(button) {
+                width: 100%;
+                border-radius: 0;
                 background: #f6f6f6;
                 border: 1px solid #e6e6e6;
                 color: #2f54eb;
@@ -322,7 +323,7 @@ const handleClick = () => {
                 flex-basis: 60px;
                 flex-grow: 0;
 
-                button {
+                :deep(button) {
                     background: @error-color-deprecated-bg;
                     border: 1px solid @error-color-outline;
 
@@ -348,7 +349,7 @@ const handleClick = () => {
                 }
             }
 
-            button[disabled] {
+            :deep(button[disabled]) {
                 background: @disabled-bg;
                 border-color: @disabled-color;
 

src/components/Table/index.tsx

@@ -11,16 +11,21 @@ enum ModelEnum {
     CARD = 'CARD',
 }
 
+enum TypeEnum {
+    TREE = 'TREE',
+    PAGE = 'PAGE',
+}
+
 type RequestData = {
     code: string;
     result: {
-        data: Record<string, any>[] | undefined;
+        data?: Record<string, any>[] | undefined;
         pageIndex: number;
         pageSize: number;
         total: number;
     };
     status: number;
-} & Record<string, any>;
+} | Record<string, any>;
 
 export interface ActionsType {
     key: string;
@@ -39,16 +44,10 @@ export interface JColumnProps extends ColumnProps{
 }
 
 export interface JTableProps extends TableProps{
-    request?: (params: Record<string, any> & {
+    request?: (params?: Record<string, any>) => Promise<Partial<RequestData>>;
-        pageSize: number;
-        pageIndex: number;
-    }) => Promise<Partial<RequestData>>;
     cardBodyClass?: string;
     columns: JColumnProps[];
-    params?: Record<string, any> & {
+    params?: Record<string, any>;
-        pageSize: number;
-        pageIndex: number;
-    };
     model?: keyof typeof ModelEnum | undefined; // 显示table还是card
     // actions?: ActionsType[];
     noPagination?: boolean;
@@ -64,6 +63,8 @@ export interface JTableProps extends TableProps{
      */
      gridColumns?: number[];
      alertRender?: boolean;
+     type?: keyof typeof TypeEnum;
+     defaultParams?: Record<string, any>;
 }
 
 const JTable = defineComponent<JTableProps>({
@@ -96,10 +97,6 @@ const JTable = defineComponent<JTableProps>({
             type: [String, undefined],
             default: undefined
         },
-        // actions: {
-        //     type: Array as PropType<ActionsType[]>,
-        //     default: () => []
-        // },
         noPagination: {
             type: Boolean,
             default: false
@@ -127,6 +124,19 @@ const JTable = defineComponent<JTableProps>({
         alertRender: {
             type: Boolean,
             default: true
+        },
+        type: {
+            type: String,
+            default: 'PAGE'
+        },
+        defaultParams: {
+            type: Object,
+            default: () => {
+                return {
+                    pageIndex: 0,
+                    pageSize: 12
+                }
+            }
         }
     } as any,
     setup(props: JTableProps ,{ slots, emit }){
@@ -163,17 +173,17 @@ const JTable = defineComponent<JTableProps>({
             loading.value = true
             if(props.request) {
                 const resp = await props.request({
-                    pageSize: 12,
+                    ...props.defaultParams,
-                    pageIndex: 1,
                     ..._params
                 })
                 if(resp.status === 200){
+                    if(props.type === 'PAGE'){
                         // 判断如果是最后一页且最后一页为空，就跳转到前一页
-                    if(resp.result?.data?.length === 0 && resp.result.total && resp.result.pageSize && resp.result.pageIndex) {
+                        if(resp.result.total && resp.result.pageSize && resp.result.pageIndex && resp.result?.data?.length === 0) {
                             handleSearch({
                                 ..._params,
                                 pageSize: pageSize.value,
-                            pageIndex: pageIndex.value - 1,
+                                pageIndex: pageIndex.value > 0 ?  pageIndex.value - 1 : 0,
                             })
                         } else {
                             _dataSource.value = resp.result?.data || []
@@ -181,6 +191,11 @@ const JTable = defineComponent<JTableProps>({
                             pageSize.value = resp.result?.pageSize || 6
                             total.value = resp.result?.total || 0
                         }
+                    } else {
+                        _dataSource.value = resp?.result || []
+                    }
+                } else {
+                    _dataSource.value  = []
                 }
             } else {
                 _dataSource.value = props?.dataSource || []
@@ -282,7 +297,7 @@ const JTable = defineComponent<JTableProps>({
                 </div>
                 {/* 分页 */}
                 {
-                    _dataSource.value.length && !props.noPagination &&
+                    (!!_dataSource.value.length) && !props.noPagination &&
                     <div class={styles['jtable-pagination']}>
                         <Pagination 
                             size="small" 
@@ -292,14 +307,16 @@ const JTable = defineComponent<JTableProps>({
                             current={pageIndex.value}
                             pageSize={pageSize.value}
                             pageSizeOptions={['12', '24', '48', '60', '100']}
-                            showTotal={(total, range) => {
+                            showTotal={(num) => {
-                                return `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`
+                                const minSize = pageIndex.value * pageSize.value + 1;
+                                const MaxSize = (pageIndex.value + 1) * pageSize.value;
+                                return `第 ${minSize} - ${MaxSize > num ? num : MaxSize} 条/总共 ${num} 条`;
                             }}
                             onChange={(page, size) => {
                                 handleSearch({
                                     ...props.params,
                                     pageSize: size,
-                                    pageIndex: pageSize.value === size ? page : 1,
+                                    pageIndex: pageSize.value === size ? page : 0
                                 })
                             }}
                         />

src/views/demo/table/index.vue

@@ -37,7 +37,7 @@
                             </a-col>
                         </a-row>
                     </template>
-                    <!-- <template #actions="item">
+                    <template #actions="item">
                         <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
                             <a-button :disabled="item.disabled">
                                 <DeleteOutlined v-if="item.key === 'delete'" />
@@ -56,7 +56,7 @@
                                 </template>
                             </a-button>
                         </template>
-                    </template> -->
+                    </template>
                 </CardBox>
             </template>
             <template #id="slotProps">
@@ -152,27 +152,23 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
             tooltip: {
                 title: '导入'
             },
+            disabled: true,
             icon: 'icon-xiazai'
         },
         {
             key: 'delete',
-            // disabled: true,
             text: "删除",
-            disabled: !!data?.state,
             tooltip: {
                 title: !!data?.state ? '正常的产品不能删除' : '删除'
             },
-            // popConfirm: {
+            popConfirm: {
-            //     title: '确认删除?'
+                title: '确认删除?'
-            // },
+            },
-
             icon: 'icon-huishouzhan'
         }
     ]
 }
 
-const p = h('p', 'hi')
-
 </script>