fix: table actions

src/components/CardBox/index.vue

@@ -54,31 +54,24 @@
                         delete: item.key === 'delete',
                     }"
                 >
+                <!-- <slot name="actions" v-bind="item"></slot> -->
                 <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
-                    <template v-if="item.key === 'delete'">
                     <a-button :disabled="item.disabled">
-                            <DeleteOutlined />
+                        <DeleteOutlined v-if="item.key === 'delete'" />
-                        </a-button>
-                    </template>
                         <template v-else>
-                        <a-button :disabled="item.disabled">
                             <AIcon :type="item.icon" />
                             <span>{{ item.text }}</span>
-                        </a-button>
                         </template>
+                    </a-button>
                 </a-popconfirm>
                 <template v-else>
-                    <template v-if="item.key === 'delete'">
                     <a-button :disabled="item.disabled">
-                            <DeleteOutlined />
+                        <DeleteOutlined v-if="item.key === 'delete'" />
-                        </a-button>
-                    </template>
                         <template v-else>
-                        <a-button :disabled="item.disabled">
                             <AIcon :type="item.icon" />
                             <span>{{ item.text }}</span>
-                        </a-button>
                         </template>
+                    </a-button>
                 </template>
                 </div>
             </div>
@@ -291,10 +284,10 @@ const handleClick = () => {
             display: flex;
             flex-grow: 1;
 
-            > span,
+            & > span,
-            & button {
+            button {
-                width: 100%;
+                width: 100% !important;
-                border-radius: 0;
+                border-radius: 0 !important;
             }
 
             button {
@@ -372,9 +365,9 @@ const handleClick = () => {
                 }
             }
 
-            :deep(.ant-tooltip-disabled-compatible-wrapper) {
+            // :deep(.ant-tooltip-disabled-compatible-wrapper) {
-                width: 100%;
+            //     width: 100%;
-            }
+            // }
         }
     }
 }

src/components/Table/index.tsx

@@ -50,11 +50,20 @@ export 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>[];
+    gridColumn: number;
+    /**
+     * 用于不同分辨率
+     * gridColumns[0] 1366 ~ 1440 分辨率；
+     * gridColumns[1] 1440 ~  1600 分辨率；
+     * gridColumns[2] > 1600 分辨率；
+     */
+     gridColumns?: number[];
+     alertRender?: boolean;
 }
 
 const JTable = defineComponent<JTableProps>({
@@ -87,10 +96,10 @@ const JTable = defineComponent<JTableProps>({
             type: [String, undefined],
             default: undefined
         },
-        actions: {
+        // actions: {
-            type: Array as PropType<ActionsType[]>,
+        //     type: Array as PropType<ActionsType[]>,
-            default: () => []
+        //     default: () => []
-        },
+        // },
         noPagination: {
             type: Boolean,
             default: false
@@ -106,12 +115,24 @@ const JTable = defineComponent<JTableProps>({
         dataSource: {
             type: Array,
             default: () => []
+        },
+        gridColumns: {
+            type: Array as PropType<Number[]>,
+            default: [2, 3, 4]
+        },
+        gridColumn: {
+            type: Number,
+            default: 4
+        },
+        alertRender: {
+            type: Boolean,
+            default: true
         }
     } as any,
     setup(props: JTableProps ,{ slots, emit }){
         const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
         const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
-        const column = ref<number>(4);
+        const column = ref<number>(props.gridColumn || 4);
         const _dataSource = ref<Record<string, any>[]>([])
         const pageIndex = ref<number>(0)
         const pageSize = ref<number>(6)
@@ -119,9 +140,20 @@ const JTable = defineComponent<JTableProps>({
         const _columns = ref<JColumnProps[]>(props?.columns || [])
         const loading = ref<boolean>(true)
 
-        // alert关闭，取消选择
+        /**
-        const handleAlertClose = () => {
+         * 监听宽度，计算显示卡片个数
-            emit('cancelSelect')
+         */
+        const windowChange = () => {
+            if (window.innerWidth <= 1440) {
+                const _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2;
+                column.value = props.gridColumns ? props.gridColumns[0] : _column
+            } else if (window.innerWidth > 1440 && window.innerWidth <= 1600) {
+                const _column = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3;
+                column.value = props.gridColumns ? props.gridColumns[1] : _column
+            } else if (window.innerWidth > 1600) {
+                const _column = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4;
+                column.value = props.gridColumns ? props.gridColumns[2] : _column
+            }
         }
 
         /**
@@ -153,7 +185,6 @@ const JTable = defineComponent<JTableProps>({
             } else {
                 _dataSource.value = props?.dataSource || []
             }
-            
             loading.value = false
         }
 
@@ -161,6 +192,16 @@ const JTable = defineComponent<JTableProps>({
             handleSearch(props.params)
         })
 
+        onMounted(() => {
+            window.onresize = () => {
+                windowChange()
+            }
+        })
+
+        onUnmounted(() => {
+            window.onresize = null
+        })
+        
         return () => <Spin spinning={loading.value}>
                 <div class={styles["jtable-body"]}>
                 <div class={styles["jtable-body-header"]}>
@@ -184,12 +225,14 @@ const JTable = defineComponent<JTableProps>({
                 {/* content */}
                 <div class={styles['jtable-content']}>
                     {
-                        props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
+                        props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
                         <div class={styles['jtable-alert']}>
                             <Alert
                                 message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
                                 type="info"
-                                onClose={handleAlertClose}
+                                onClose={() => {
+                                    emit('cancelSelect')
+                                }}
                                 closeText={<a>取消选择</a>}
                              />
                         </div> : null
@@ -205,8 +248,10 @@ const JTable = defineComponent<JTableProps>({
                                 >
                                     {
                                         _dataSource.value.map(item => slots.card ? 
-                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
+                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>
-                                            : null)
+                                                {slots.card(item)}
+                                            </div> : null
+                                        )
                                     }
                                 </div> : 
                                 <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
@@ -225,7 +270,7 @@ const JTable = defineComponent<JTableProps>({
                                         const {column, record} = dt;
                                         if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
                                             const _key = column?.key || column?.dataIndex
-                                            return slots?.[_key]!({row: record, actions: props.actions})
+                                            return slots?.[_key]!(record)
                                         } else {
                                             return record?.[column?.dataIndex] || ''
                                         }

src/views/demo/table/index.vue

@@ -1,7 +1,92 @@
 <template>
     <div class="box">
         <JTable 
-            :columns="[
+            :columns="columns"
+            :request="request"
+            :rowSelection="{
+                selectedRowKeys: _selectedRowKeys,
+                onChange: onSelectChange
+            }"
+            @cancelSelect="cancelSelect"
+        >
+            <template #headerTitle>
+                <a-button type="primary">新增</a-button>
+            </template>
+            <template #card="slotProps">
+                <CardBox 
+                    :value="slotProps" 
+                    @click="handleClick" 
+                    :actions="getActions(slotProps)" 
+                    v-bind="slotProps" 
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.state ? 'success' : 'error'"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/device-product.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                         <h3>{{slotProps.name}}</h3>
+                         <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>直连设备</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <!-- <template #actions="item">
+                        <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                        <template v-else>
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </template>
+                    </template> -->
+                </CardBox>
+            </template>
+            <template #id="slotProps">
+                <a>{{slotProps.id}}</a>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip v-for="i in getActions(slotProps)" :key="i.key" v-bind="i.tooltip">
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                        </a-popconfirm>
+                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import server from "@/utils/request";
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import { DeleteOutlined } from '@ant-design/icons-vue'
+
+const request = (data: any) => server.post(`/device-product/_query`, data)
+
+const columns = [
     {
         title: '名称',
         dataIndex: 'name',
@@ -25,99 +110,6 @@
         width: 250,
         scopedSlots: true
     }   
-            ]"
-            :actions="actions"
-            :request="request"
-            :rowSelection="{
-                selectedRowKeys: _selectedRowKeys,
-                onChange: onSelectChange
-            }"
-            @cancelSelect="cancelSelect"
-        >
-            <template #headerTitle>
-                <a-button type="primary">新增</a-button>
-            </template>
-            <template #card="slotProps">
-                <CardBox :value="slotProps" @click="handleClick" :actions="slotProps.actions" v-bind="slotProps.row" :active="_selectedRowKeys.includes(slotProps.row.id)">
-                    <template #img>
-                        <slot name="img">
-                            <img :src="getImage('/device-product.png')" />
-                        </slot>
-                    </template>
-                    <template #content>
-                         <h3>{{slotProps.row.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>
-                </CardBox>
-            </template>
-            <template #id="slotProps">
-                <a>{{slotProps.row.id}}</a>
-            </template>
-            <template #action="slotProps">
-                <a-space :size="16">
-                    <a-tooltip v-for="i in slotProps.actions" :key="i.key" v-bind="i.tooltip">
-                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
-                            <a-button style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
-                        </a-popconfirm>
-                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps.row)">
-                            <AIcon :type="i.icon" />
-                        </a-button>
-                    </a-tooltip>
-                </a-space>
-            </template>
-        </JTable>
-    </div>
-</template>
-
-<script setup lang="ts">
-import server from "@/utils/request";
-import type { ActionsType } from '@/components/Table/index.vue'
-import { getImage } from '@/utils/comm';
-
-const request = (data: any) => server.post(`/device-product/_query`, data)
-const actions: ActionsType[] = [
-    {
-        key: 'edit',
-        // disabled: true,
-        text: "编辑",
-        tooltip: {
-            title: '编辑'
-        },
-        icon: 'icon-rizhifuwu'
-    },
-    {
-        key: 'import',
-        // disabled: true,
-        text: "导入",
-        tooltip: {
-            title: '导入'
-        },
-        icon: 'icon-xiazai'
-    },
-    {
-        key: 'delete',
-        // disabled: true,
-        text: "删除",
-        tooltip: {
-            title: '删除'
-        },
-        popConfirm: {
-            title: '确认删除?'
-        },
-    }
 ]
 
 const _selectedRowKeys = ref<string[]>([])
@@ -141,6 +133,46 @@ const handleClick = (dt: any) => {
     }
 }
 
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if(!data){
+        return []
+    }
+    return [
+        {
+            key: 'edit',
+            text: "编辑",
+            tooltip: {
+                title: '编辑'
+            },
+            icon: 'icon-rizhifuwu'
+        },
+        {
+            key: 'import',
+            text: "导入",
+            tooltip: {
+                title: '导入'
+            },
+            icon: 'icon-xiazai'
+        },
+        {
+            key: 'delete',
+            // disabled: true,
+            text: "删除",
+            disabled: !!data?.state,
+            tooltip: {
+                title: !!data?.state ? '正常的产品不能删除' : '删除'
+            },
+            // popConfirm: {
+            //     title: '确认删除?'
+            // },
+
+            icon: 'icon-huishouzhan'
+        }
+    ]
+}
+
+const p = h('p', 'hi')
+
 </script>