feat: 表格插槽

2023-01-11 14:33:17 +08:00 · 2023-01-11 14:33:17 +08:00 · e3c3e43b31
parent aab98f3ddf
commit e3c3e43b31
5 changed files with 186 additions and 95 deletions
--- 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']
  }
 }
--- 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"
--- 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(() => {
--- 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)
    }
 }
--- 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>