fix: vue转tsx

2023-01-12 15:31:20 +08:00 · 2023-01-12 15:31:20 +08:00 · 7451dad544
parent b0983a1988
commit 7451dad544
13 changed files with 4208 additions and 3765 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
    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']
    ASwitch: typeof import('ant-design-vue/es')['Switch']
    ATable: typeof import('ant-design-vue/es')['Table']
--- a/package.json
+++ b/package.json
@ -48,6 +48,7 @@
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-style-import": "^2.0.0",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vue-tsc": "^1.0.11"
  },
--- a/src/components/Table/index.module.less
+++ b/src/components/Table/index.module.less
@ -0,0 +1,52 @@
+.jtable-body {
+    width: 100%;
+    padding: 0 24px 24px;
+    background-color: white;
+    .jtable-body-header {
+        padding: 16px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .jtable-body-header-right {
+            display: flex;
+            gap: 8px;
+            .jtable-setting-item {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 16px;
+                cursor: pointer;
+
+                &:hover {
+                    color: @primary-color-hover;
+                }
+
+                &.active {
+                    color: @primary-color-active;
+                }
+            }
+        }
+    }
+    .jtable-content {
+        .jtable-alert {
+            margin-bottom: 16px;
+        }
+        .jtable-card {
+            .jtable-card-items {
+                display: grid;
+                grid-gap: 26px;
+                .jtable-card-item {
+                    display: flex;
+                }
+            }
+        }
+    }
+    .jtable-pagination {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+        :global {
+            .ant-pagination-item {
+                display: none !important;
+            }
+        } 
+    }
+}   
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@ -0,0 +1,268 @@
+import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
+import styles from './index.module.less'
+import { Pagination, Table, Empty, Spin, Alert } from 'ant-design-vue'
+import type { TableProps, ColumnProps } 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 { CSSProperties, PropType } from 'vue';
+
+enum ModelEnum {
+    TABLE = 'TABLE',
+    CARD = 'CARD',
+}
+
+type RequestData = {
+    code: string;
+    result: {
+        data: Record<string, any>[] | undefined;
+        pageIndex: number;
+        pageSize: number;
+        total: number;
+    };
+    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;
+    icon?: string;
+}
+
+export interface JColumnProps extends ColumnProps{
+    scopedSlots?: boolean; // 是否为插槽 true: 是 false: 否
+}
+
+export interface JTableProps extends TableProps{
+    request?: (params: Record<string, any> & {
+        pageSize: number;
+        pageIndex: number;
+    }) => Promise<Partial<RequestData>>;
+    cardBodyClass?: string;
+    columns: JColumnProps[];
+    params?: Record<string, any> & {
+        pageSize: number;
+        pageIndex: number;
+    };
+    model?: keyof typeof ModelEnum | undefined; // 显示table还是card
+    actions?: ActionsType[];
+    noPagination?: boolean;
+    rowSelection?: TableProps['rowSelection'];
+    cardProps?:  Record<string, any>;
+    dataSource?:  Record<string, any>[];
+}
+
+const JTable = defineComponent<JTableProps>({
+    name: 'JTable',
+    slots: [
+        'headerTitle', // 顶部左边插槽
+        'card', // 卡片内容
+    ],
+    emits: [
+        'modelChange', // 切换卡片和表格
+    ],
+    props: {
+        request: {
+            type: Function,
+            default: undefined
+        },
+        cardBodyClass: {
+            type: String,
+            default: ''
+        },
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        params: {
+            type: Object,
+            default: () => {}
+        },
+        model: {
+            type: [String, undefined],
+            default: undefined
+        },
+        actions: {
+            type: Array as PropType<ActionsType[]>,
+            default: () => []
+        },
+        noPagination: {
+            type: Boolean,
+            default: false
+        },
+        rowSelection: {
+            type: Object as PropType<TableProps['rowSelection']>,
+            default: () => undefined
+        },
+        cardProps: {
+            type: Object,
+            default: undefined
+        },
+        dataSource: {
+            type: Array,
+            default: () => []
+        }
+    } 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 _dataSource = ref<Record<string, any>[]>([])
+        const pageIndex = ref<number>(0)
+        const pageSize = ref<number>(6)
+        const total = ref<number>(0)
+        const _columns = ref<JColumnProps[]>(props?.columns || [])
+        const loading = ref<boolean>(true)
+
+        // alert关闭，取消选择
+        const handleAlertClose = () => {
+            emit('cancelSelect')
+        }
+
+        /**
+         * 请求数据
+         */
+        const handleSearch = async (_params?: Record<string, any>) => {
+            loading.value = true
+            if(props.request) {
+            const resp = await props.request({
+                    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
+        }
+
+        watchEffect(() => {
+            handleSearch(props.params)
+        })
+        
+        return () => <Spin spinning={loading.value}>
+                <div class={styles["jtable-body"]}>
+                <div class={styles["jtable-body-header"]}>
+                    <div class={styles["jtable-body-header-left"]}>
+                        {/* 顶部左边插槽 */}
+                        {slots.headerTitle && slots.headerTitle()}
+                    </div>
+                    <div class={styles["jtable-body-header-right"]}>
+                        <div class={[styles["jtable-setting-item"], ModelEnum.CARD === _model.value ? styles['active'] : '']} onClick={() => {
+                            _model.value = ModelEnum.CARD
+                        }}>
+                            <AppstoreOutlined />
+                        </div>
+                        <div class={[styles["jtable-setting-item"], ModelEnum.TABLE === _model.value ? styles['active'] : '']} onClick={() => {
+                            _model.value = ModelEnum.TABLE
+                        }}>
+                            <UnorderedListOutlined  />
+                        </div>
+                    </div>
+                </div>
+                {/* content */}
+                <div class={styles['jtable-content']}>
+                    {
+                        props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
+                        <div class={styles['jtable-alert']}>
+                            <Alert
+                                message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
+                                type="info"
+                                onClose={handleAlertClose}
+                                closeText={<a>取消选择</a>}
+                             />
+                        </div> : null
+                    }
+                    {
+                        _model.value === ModelEnum.CARD ?
+                        <div class={styles['jtable-card']}>
+                            {
+                                _dataSource.value.length ? 
+                                <div 
+                                    class={styles['jtable-card-items']}
+                                    style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
+                                >
+                                    {
+                                        _dataSource.value.map(item => slots.card ? 
+                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
+                                            : null)
+                                    }
+                                </div> : 
+                                <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
+                            }
+                        </div> :
+                        <div>
+                            <Table
+                                dataSource={_dataSource.value}
+                                columns={_columns.value}
+                                pagination={false}
+                                rowKey="id"
+                                rowSelection={props.rowSelection}
+                                scroll={{x: 1366}}
+                                v-slots={{
+                                    bodyCell: (dt: Record<string, any>) => {
+                                        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})
+                                        } else {
+                                            return record?.[column?.dataIndex] || ''
+                                        }
+                                    }
+                                }}
+                             />
+                        </div>
+                    }
+                </div>
+                {/* 分页 */}
+                {
+                    _dataSource.value.length && !props.noPagination &&
+                    <div class={styles['jtable-pagination']}>
+                        <Pagination 
+                            size="small" 
+                            total={total.value}
+                            showQuickJumper={false}
+                            showSizeChanger={true}
+                            current={pageIndex.value}
+                            pageSize={pageSize.value}
+                            pageSizeOptions={['12', '24', '48', '60', '100']}
+                            showTotal={(total, range) => {
+                                return `第 ${range[0]} - ${range[1]} 条/总共 ${total} 条`
+                            }}
+                            onChange={(page, size) => {
+                                handleSearch({
+                                    ...props.params,
+                                    pageSize: size,
+                                    pageIndex: pageSize.value === size ? page : 1,
+                                })
+                            }}
+                        />
+                    </div>
+                }
+            </div>
+        </Spin>
+    }
+})
+
+export default JTable
--- a/src/components/Table/index.vue
+++ b/src/components/Table/index.vue
@ -79,7 +79,7 @@
    </a-spin>
 </template>

-<script setup lang="ts">
+<script setup lang="ts" name="JTable">
 import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
 import type { TableProps, ColumnsType } from 'ant-design-vue/es/table'
 import type { TooltipProps } from 'ant-design-vue/es/tooltip'
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import AIcon from './AIcon'
 import PermissionButton from './PermissionButton/index.vue'
-import JTable from './Table/index.vue'
+import JTable from './Table/index'
 import TitleComponent from "./TitleComponent/index.vue";
 import Form from './Form';
 import CardBox from './CardBox/index.vue';
--- a/src/main.ts
+++ b/src/main.ts
@ -3,7 +3,7 @@ import App from './App.vue'
 import store from './store'
 import router from './router'
 import components from './components'
-import './style.css'
+import './style.less'
 import 'ant-design-vue/es/notification/style/css';
 import Antd from 'ant-design-vue/es'

--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@ -44,6 +44,10 @@ export default [
        path: '/form',
        component: () => import('@/views/demo/Form.vue')
    },
+    {
+        path: '/test',
+        component: () => import('@/views/demo/test')
+    },
    // end: 测试用, 可删除

    // link 运维管理
--- a/src/style.less
+++ b/src/style.less
--- a/src/views/demo/table/index.vue
+++ b/src/views/demo/table/index.vue
@ -38,14 +38,14 @@
                <a-button type="primary">新增</a-button>
            </template>
            <template #card="slotProps">
-                <CardBox :value="slotProps" @click="handleClick" :actions="actions" v-bind="slotProps" :active="_selectedRowKeys.includes(slotProps.id)">
+                <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.name}}</h3>
+                         <h3>{{slotProps.row.name}}</h3>
                         <a-row>
                            <a-col :span="12">
                                <div class="card-item-content-text">
@ -68,11 +68,11 @@
            </template>
            <template #action="slotProps">
                <a-space :size="16">
-                    <a-tooltip v-for="i in actions" :key="i.key" v-bind="i.tooltip">
+                    <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)">
+                        <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/src/views/demo/test.tsx
+++ b/src/views/demo/test.tsx
@ -0,0 +1,9 @@
+import { Button } from 'ant-design-vue'
+
+export default defineComponent({
+    setup(){
+        return () => <div>
+        <Button type='primary'>新增</Button>
+    </div>
+    }
+})
--- a/vite.config.ts
+++ b/vite.config.ts
@ -8,7 +8,7 @@ import { createHtmlPlugin } from 'vite-plugin-html'
 import Config from './config/config'
 import {VueAmapResolver} from '@vuemap/unplugin-resolver'
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
-
+import { createStyleImportPlugin, AndDesignVueResolve } from 'vite-plugin-style-import'
 import * as path from 'path'


@ -69,7 +69,10 @@ export default defineConfig(({ mode}) => {
                  }
              }
          }),
-          VueSetupExtend()
+          VueSetupExtend(),
+          createStyleImportPlugin({
+            resolves: [AndDesignVueResolve()]
+          })
      ],
      server: {
          host:'0.0.0.0',
--- a/yarn.lock
+++ b/yarn.lock