Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

components.d.ts

@@ -7,37 +7,6 @@ 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']
-    ACard: typeof import('ant-design-vue/es')['Card']
-    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
-    ACheckboxGroup: typeof import('ant-design-vue/es')['CheckboxGroup']
-    ACol: typeof import('ant-design-vue/es')['Col']
-    ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
-    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']
-    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
-    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
-    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']
-    ATextarea: typeof import('ant-design-vue/es')['Textarea']
-    ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
-    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
-    ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
-    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']

config/config.ts

@@ -1,6 +1,6 @@
 export default {
   theme: {
-    'primary-color': '#00A4FF',
+    'primary-color': '#1d39c4',
   },
   logo: '/favicon.ico',
   title: 'Jetlinks'

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"
   },

src/api/device/product.ts

@@ -0,0 +1,3 @@
+import server from '@/utils/request'
+
+export const queryNoPagingPost = (data: any) => server.post(`/device-product/_query/no-paging?paging=false`, data)

src/components/PermissionButton/index.vue

@@ -25,7 +25,7 @@
     <a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
   </a-tooltip>
 </template>
-<script setup lang="ts">
+<script setup lang="ts" name="PermissionButton">
 import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
 import { usePermissionStore } from '@/store/permission';
 

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;
+            }
+        } 
+    }
+}   

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

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'

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';

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'
 

src/utils/request.ts

@@ -26,23 +26,24 @@ export const request = axios.create({
  * @param {String} responseType 如果接口是需要导出文件流，那么responseType = 'blob'
  * @returns {AxiosInstance}
  */
-export const post = function(url: string, data = {}, params = {}) {
+export const post = function<T>(url: string, data = {}, params = {}) {
     params = typeof params === 'string' ? { responseType: params } : params
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         ...params,
         method: 'POST',
         url,
         data
     })
 }
+
 /**
  * put method request
  * @param {String} url
  * @param {Object} [data]
  * @returns {AxiosInstance}
  */
-export const put = function(url: string, data = {},) {
+export const put = function<T>(url: string, data = {},) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'PUT',
         url,
         data
@@ -55,8 +56,8 @@ export const put = function(url: string, data = {},) {
  * @param {Object} [data]
  * @returns {AxiosInstance}
  */
-export const patch = function(url: string, data = {}) {
+export const patch = function<T>(url: string, data = {}) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'PATCH',
         url,
         data
@@ -69,8 +70,8 @@ export const patch = function(url: string, data = {}) {
  * @param {Object} [ext] 扩展参数
  * @returns {AxiosInstance}
  */
-export const get = function(url: string, params = {},  ext?: any) {
+export const get = function<T>(url: string, params = {},  ext?: any) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'GET',
         url,
         params,
@@ -85,8 +86,8 @@ export const get = function(url: string, params = {},  ext?: any) {
  * @param {Object} [ext] 扩展参数
  * @returns {AxiosInstance}
  */
-export const remove = function(url: string, params = {}, ext?: any) {
+export const remove = function<T>(url: string, params = {}, ext?: any) {
-    return request({
+    return request<any, AxiosResponseRewrite<T>>({
         method: 'DELETE',
         url,
         params,
@@ -101,7 +102,7 @@ export const remove = function(url: string, params = {}, ext?: any) {
  * @return {*}
  */
 export const getStream = function(url: string, params = {}) {
-    return get(url, params, {
+    return get<any>(url, params, {
         responseType: 'arraybuffer' // 设置请求数据类型，返回blob可解析类型
     })
 }

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>

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>
+    }
+})

src/views/user/Login/index.vue

@@ -9,7 +9,6 @@
                     />
                 </div>
                 <div class="right">
-                    <div class="lang" data-lang=""></div>
                     <div class="content">
                         <div class="top">
                             <div class="header">
@@ -109,17 +108,13 @@
                                         </a-button>
                                     </a-form-item>
                                 </a-form>
-                                <div style="margin-top: 20px">
+                                <div class="other">
-                                    <a-divider plain style="height: 12px">
+                                    <a-divider plain>
-                                        <div
+                                        <div class="other-text">
-                                            style="color: #807676d9, font-size: 12px"
-                                        >
                                             其他方式登录
                                         </div>
                                     </a-divider>
-                                    <div
+                                    <div class="other-button">
-                                        style="position: relative, bottom: 10px; text-align: center"
-                                    >
                                         <a-button
                                             v-for="(item, index) in bindings"
                                             :key="index"
@@ -312,8 +307,6 @@ screenRotation(screenWidth.value, screenHeight.value);
 </script>
 
 <style scoped lang="less">
-@import 'ant-design-vue/es/style/themes/default.less';
-
 .container {
     display: flex;
     height: 100vh;
@@ -336,22 +329,12 @@ screenRotation(screenWidth.value, screenHeight.value);
             background: #fff;
         }
 
-        .lang {
-            width: 100%;
-            height: 40px;
-            line-height: 44px;
-            text-align: right;
-
-            :global(.ant-dropdown-trigger) {
-                margin-right: 24px;
-            }
-        }
-
         .content {
             display: flex;
             flex-direction: row-reverse;
             justify-content: center;
             padding: 0 0 15% 0;
+            margin-top: 20%;
 
             .top {
                 width: 100%;
@@ -404,17 +387,6 @@ screenRotation(screenWidth.value, screenHeight.value);
                         max-width: 328px;
                     }
 
-                    // ::v-deep {
-                    //     .@{ant-prefix}-tabs-nav-list {
-                    //         margin: auto;
-                    //         font-size: 16px;
-                    //     }
-
-                    //     // .ant-formily-item-size-large .ant-formily-item-help {
-                    //     //     text-align: left;
-                    //     // }
-                    // }
-
                     .icon {
                         margin-left: 16px;
                         color: rgba(0, 0, 0, 0.2);
@@ -429,12 +401,17 @@ screenRotation(screenWidth.value, screenHeight.value);
                     }
 
                     .other {
-                        margin-top: 24px;
+                        margin-top: 20px;
-                        line-height: 22px;
-                        text-align: left;
 
-                        .register {
+                        .other-text {
-                            float: right;
+                            color: #807676d9;
+                            font-size: 12px;
+                        }
+
+                        .other-button {
+                            position: relative;
+                            bottom: 10px;
+                            text-align: center;
                         }
                     }
 

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',
@@ -89,8 +92,8 @@ export default defineConfig(({ mode}) => {
           preprocessorOptions: {
               less: {
                   modifyVars: {
+                      hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`,
                       ...Config.theme,
-                      hack: `true; @import (reference) "${path.resolve('src/style/variable.less')}";`
                   },
                   javascriptEnabled: true,
               }