@dt-frames/ui 1.0.4 → 1.0.7

package/src/components/table/src/hooks/useHeaderCode.ts

@@ -0,0 +1,89 @@
+import { error, http, Recordable, useAppStore } from "@dt-frames/core"
+import { BasicColumn } from "../types/table.type"
+
+const codeMap = new Map()
+
+// 解析header
+export function useHeaderCode(code: string, templates: Recordable = {}, changeColumns: ( rows: BasicColumn[] ) => void) {
+    const { appConf } = useAppStore()
+
+    if( !appConf.pages.queryColumnApi ) {
+        error('请在init.config.ts中配置queryColumnApi！')
+        return
+    }
+
+
+    // 设置文字对齐方式
+    const getAlign = ( key: number | null ) => key === 0 ? 'center' : key === 2 ? 'right' : 'left'
+    
+
+    // 渲染单元格
+    const renderCell = ( type: number, ctx: string ): Recordable => {
+        switch( type ) {
+            // 时间
+            case 0: return { date: ctx }
+
+            // 字典
+            case 1: return { dict: ctx }
+
+            // 百分比
+            case 5: return { percent: ctx }
+
+            // structure
+            case 7: 
+                if( !appConf.structure[ctx] ) {
+                    error(`未找到structure: ${ ctx } !`)
+                    return { }
+                }
+                return { dict: appConf.structure[ctx] }
+            
+            // 自定义模板
+            case 10: return templates[ctx]
+
+            // 数字
+            case 11: return { number: ctx }
+        }
+    }
+
+
+    function getColumns() {
+        if( codeMap.get(code ) ) {
+            changeColumns( codeMap.get(code ) )
+            return
+        }
+        
+        http.post(
+            appConf.pages.queryColumnApi,
+            { tableCode: code }
+        ).then( rsp => {
+            handleData(rsp)
+        } )
+    }
+
+    function handleData(data: Recordable[]) {
+        let rows: BasicColumn[] = []
+
+        data.forEach( it => {
+            let obj: BasicColumn = {
+                title: it.cloumnName,
+                dataIndex: it.cloumnCode,
+                sorter: it.ifOrder,
+                align: getAlign(it.textAlign),
+                ifShow: Boolean( it.ifDisplay ),
+                defaultHidden: !Boolean( it.ifDisplay )
+            }
+
+            if( it.cloumnType !== undefined ) obj.render = renderCell( it.cloumnType, it.dictCode )
+
+            if( it.width ) obj.width = Number(it.width)
+
+            rows.push(obj)
+        } )
+
+        codeMap.set(code, rows )
+        changeColumns( rows )
+    }
+
+    getColumns()
+
+}

package/src/components/table/src/hooks/useRowSelection.ts

@@ -4,9 +4,8 @@
 
 import { isFunction, Recordable } from "@dt-frames/core";
 import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
-import { computed, ComputedRef, ref, Ref, toRaw, unref, watch, nextTick } from "vue";
-import { BasicTableProps } from "../types/table.type";
-import { omit } from 'lodash-es'
+import { computed, ComputedRef, ref, Ref, toRaw, unref, watch, nextTick } from "vue"
+import { BasicTableProps } from "../types/table.type"
 
 interface TreeHelperConfig {
     id: string;

package/src/components/table/src/hooks/useTable.ts

@@ -1,6 +1,7 @@
-import { DynamicProps, Nullable, getDynamicProps, error } from '@dt-frames/core'
+import { DynamicProps, Nullable, getDynamicProps, error, Recordable } from '@dt-frames/core'
 import { onUnmounted, ref, toRaw, unref, watch } from 'vue'
 import { BasicColumn, BasicTableProps, TableActionType } from '../types/table.type'
+import { useHeaderCode } from './useHeaderCode'
 
 
 type Props = Partial<DynamicProps<BasicTableProps>>
@@ -18,7 +19,19 @@ export function useTable(tableProps?: Props) {
         if( unref(loadedRef) && instance === unref(tableRef) ) return
 
         tableRef.value = instance
-        tableProps && instance.setProps(getDynamicProps(tableProps))
+
+        if( tableProps.columnCode ) {
+            useHeaderCode( 
+                tableProps.columnCode as string, 
+                tableProps.templates as Recordable, 
+                (columns: BasicColumn[]) => {
+                    tableProps.columns = columns
+
+                    instance.setProps(getDynamicProps(tableProps))
+                }
+            )
+        }
+
 
         watch(
             () => tableProps,

package/src/components/table/src/hooks/useTableHeader.ts

@@ -12,7 +12,7 @@ export function useTableHeader(
         const { tableSetting, toolbar } = unref(propsRef)
 
         const { getSlot } = useSlots()
-        const hideTitle = !slots.toolbar && !slots.headerTop && (!tableSetting || !tableSetting.length)
+        const hideTitle = !slots.toolbar && !slots.headerTop && !tableSetting
 
         return {
             title: hideTitle 
@@ -21,7 +21,7 @@ export function useTableHeader(
                 h(
                     TableHeader,
                     {
-                        tableSetting,
+                        tableTools: tableSetting,
                         toolbar,
                         onColumnsChange: handlers.onColumnsChange
                     } as Recordable,

package/src/components/table/src/hooks/useTableScroll.ts

@@ -20,11 +20,12 @@ export function useTableScroll(
     const debounceRedoHeight = useDebounceFn( redoHeight, 100 )
 
     watch(
-        () => unref(propsRef)?.dataSource?.length,
-        () => {
+        () => propsRef.value.dataSource,
+        (v) => {
             debounceRedoHeight()
         },
         {
+            deep: true,
             flush: 'post'   // 在dom渲染之后监听
         }
     )
@@ -194,7 +195,8 @@ export function useTableScroll(
         calcScroll(bodyEl)
 
         bodyEl.addEventListener('scroll', (e) => {
-            calcScroll(bodyEl)
+            // 这里做一个节流
+            useDebounceFn( () => { calcScroll(bodyEl) }, 100 )()
         })
     }
 

package/src/components/table/src/index.vue

@@ -14,7 +14,7 @@
         </template>
 
         <template #bodyCell="{ column, record, index }">
-            <template v-if="column.render">
+            <template v-if="column?.render">
                 <TableRender :column="column" :record="record" :index="index"></TableRender>
             </template>
         </template>
@@ -32,7 +32,6 @@
     import { usePagination } from "./hooks/usePagination"
     import { useDataSource } from "./hooks/useDataSource"
     import { useRowSelection } from "./hooks/useRowSelection"
-    import TableHeader from './components/TableHeader.vue'
     import TableRender from './components/TableRender.vue'
     import { createTableInstance } from "./hooks/useTableInstance"
     import { useColumns } from "./hooks/useColumns"
@@ -45,7 +44,6 @@
         props: TableProps,
         components: {
             Table,
-            TableHeader,
             TableRender
         },
         emits: [
@@ -127,6 +125,21 @@
                 getRowClassName
             } = useRows( getProps )
 
+            /**
+             * 表格改变
+             */
+            const { 
+                handleTableChange
+            } = useDataSource(
+                getProps,
+                {
+                    getPaginationInfo,
+                    setPagination,
+                    clearSelectedRowKeys
+                },
+                emit
+            )
+
 
             const getBind = computed(() => {
                 return {
@@ -139,7 +152,7 @@
                     pagination: toRaw(unref(getPaginationInfo)),
                     rowSelection: unref(getRowSelectionRef),
                     rowKey: unref(getProps).rowKey,
-                    columns: toRaw(unref(getViewColumns)),
+                    columns: unref(getViewColumns),
                     tableLayout: 'fixed'
                 }
             })
@@ -163,22 +176,6 @@
             }
             const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
             
-
-            /**
-             * 表格改变
-             */
-            const { 
-                handleTableChange
-            } = useDataSource(
-                getProps,
-                {
-                    getPaginationInfo,
-                    setPagination,
-                    clearSelectedRowKeys
-                },
-                emit
-            )
-
             emit('register', tableAction)
 
             return {
@@ -188,7 +185,7 @@
                 handleTableChange,
                 getSelectRows,
                 handleResizeColumn: (w, col) => {
-                    col.width = w;
+                    col.width = w
                     setCacheColumnsByField(col.dataIndex, col)
                 }
             }

package/src/components/table/src/props.ts

@@ -3,7 +3,7 @@ import { PropType } from 'vue'
 import { DEFAULT_SORT_FN } from './const'
 import type { PaginationProps } from 'ant-design-vue/lib/pagination'
 import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
-import { ActionType, BasicColumn, BtnsType, SizeType } from './types/table.type'
+import { ActionType, BasicColumn, BtnsType, SizeType, TableSetting } from './types/table.type'
 import { ButtonProps } from '../../forms'
 import { DownloadType } from './types/tableHeader.type'
 
@@ -12,7 +12,7 @@ export const TableProps = {
     clickRowSelect: { type: Boolean, default: false },
 
     // 表格设置
-    tableSetting: {type: Array, default: ['redo', 'size', 'setting', 'fullscreen']},
+    tableSetting: {type: Object as PropType<TableSetting>, default: () => ({})},
 
     // 是否显示斑马条纹
     striped: { type: Boolean, default: true },
@@ -28,7 +28,7 @@ export const TableProps = {
     maxWidth: { type: Number },
 
     // 是否需要虚拟滚动
-    virtual: { type: Boolean, default: true },
+    virtual: { type: Boolean, default: false },
 
     // 排序
     sortFn: { type: Function, default: DEFAULT_SORT_FN },
@@ -50,6 +50,11 @@ export const TableProps = {
     // 默认的排序
     defSort: { type: Object as PropType<Recordable>, default: null },
 
+    // 列code编码
+    columnCode: { type: String },
+    // 列自定义的模板
+    templates: { type: Object as PropType<Recordable>, default: {} },
+
     // 列 
     columns: { type: [Array] as PropType<BasicColumn[]>, default: () => [] },
 
@@ -82,7 +87,7 @@ export const TableProps = {
 
     size: {
         type: String as PropType<SizeType>,
-        default: 'default',
+        default: 'small',
     },
 
     // 分页、排序、筛选变化时触发

package/src/components/table/src/types/table.type.ts

@@ -21,7 +21,7 @@ export interface TableRowSelection<T = any> extends ITableRowSelection {
 
 export type TableSetting = {
     // 表格刷新
-    redo?: boolean
+    download?: boolean
     // 表格的尺寸
     size?: boolean
     // 是否显示列控制
@@ -50,7 +50,7 @@ export type SorterResult = {
 }
 
 export type CellFormat =
-  | ((text: string, record: Recordable, index: number) => any)
+  | ((record: Recordable, index: number, text: string) => any)
   | { dict: DictType }
   | { number: string }
   | { date: string }

package/src/theme/header/components/logo.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="dt-logo" :class="getLogoClass">
-        <img src="../../../assets/imgs/logo/logo.png" />
+        <!-- <img src="../../../assets/imgs/logo/logo.jpeg" /> -->
+        <DtIcon icon-class="logo" :size="42" class-name="brand-logo"></DtIcon>
         <div class="dt-logo__title" v-show="showTitle">
             {{ title }}
         </div>
@@ -10,8 +11,9 @@
 <script lang="ts" setup>
     import { computed, unref } from "vue";
     import { useMenu, useTheme } from "@dt-frames/core"
+    import { DtIcon } from "../../../components"
 
-    const title = 'Ithink-DT 深迪科技';
+    const title = '隆基税务后台管理系统';
     const { getCollapsedShowTitle } = useMenu()
 
     const props = defineProps({

package/src/theme/header/components/user-info.vue

@@ -19,7 +19,7 @@
                     <span v-icon="'ic:baseline-lock'"></span>
                     锁定屏幕
                 </li>
-                <li>
+                <li @click="signOut()">
                     <span v-icon="'ant-design:logout-outlined'"></span>
                     退出系统
                 </li>
@@ -27,17 +27,34 @@
         </template> 
 
         <div class="userInfo">
-            <Avatar :src="getUserInfo?.avatar" :size="28" />
-            <span class="name">{{ getUserInfo?.realName }}</span>
+            <Avatar :size="28" >
+                <template #icon><img src="../../../assets/imgs/header/avatar.png" /></template>
+            </Avatar>
+            <span class="name">{{ getUserInfo?.userNo }}</span>
         </div>
     </Popover>
 </template>
 
 <script setup lang="ts">
     import { Popover, Avatar } from 'ant-design-vue';
-    import { CacheKey, DtCache, useHeader } from '@dt-frames/core';
+    import { CacheKey, DtCache, useAppStore, useHeader, isObject, isFunction, useGo, Pages } from '@dt-frames/core'
 
     const getUserInfo = DtCache.getLocal(CacheKey.USER_INFO)
     const { getUserActions } = useHeader()
+    const { appConf } = useAppStore()
+    const go = useGo()
+
+
+    // 退出系统
+    function signOut() {
+        if( isObject(appConf.pages?.ssoLogin) && appConf.pages.ssoLogin?.logout) {
+            let redictUrl = isFunction(appConf.pages.ssoLogin.logout) 
+                ? appConf.pages.ssoLogin.logout() 
+                : appConf.pages.ssoLogin.logout
 
+            location.href = redictUrl
+        } else {
+            go(Pages.LOGIN)
+        }
+    }
 </script>

package/src/theme/header/index.less

@@ -121,10 +121,6 @@
                 color: #333;
             }
         }
-
-        .icon{
-            padding: 0 14px;
-        }
     }
 
     &--light{
@@ -209,6 +205,14 @@
         right: 4px;
         top: 10px;
     }
+
+    
+}
+
+.brand-logo{
+    width: 40px;
+    height: 60px;
+    margin-left: -7px;
 }
 
 .dt-multiple-header{

package/es/index.css

@@ -1 +0,0 @@
-.red[data-v-60d583d2]{color:red}

package/es/style/components/forms/src/index.less

@@ -1,82 +0,0 @@
-.text-secondary{
-    color: #666;
-}
-
-.suffix-item .suffix {
-    display: inline-flex;
-    padding-left: 6px;
-    margin-top: 1px;
-    line-height: 1;
-    align-items: center;
-}
-
-.form-btns{
-    button{
-        margin-left: 12px;
-    }
-
-    .advanced{
-        margin-left: 8px;
-        .text{
-            margin-right: 5px;
-        }
-        .basic-arrow{
-            margin-left: -8px;
-        }
-    }
-}
-
-.basic-arrow{
-    display: inline-block;
-    cursor: pointer;
-    transform: rotate(0deg);
-    transition: all 0.3s ease 0.1s;
-    transform-origin: center center;
-
-    
-    .dt-icon{
-        vertical-align: middle;
-        color: @primary-color !important;
-    }
-
-    &--active{
-        transform: rotate(180deg);
-    }
-}
-
-.form-btns{
-    .ant-form-item-control-input-content{
-        display: flex;
-        .ant-btn{
-            display: flex;
-            align-items: center;
-        }
-        .ant-btn .dt-icon{
-            font-size: 20px;
-            height: 100%;
-
-            svg{
-                display: block;
-                height: 100%;
-                text-align: center;
-            }
-
-            .preIcon{
-                padding-right: 2px;
-            }
-        }
-
-        .ant-btn-primary .dt-icon svg{
-            color: #fff;
-        }
-    }
-}
-
-.basic-form--compact{
-    .ant-form-item {
-        margin-bottom: 14px !important;
-    }
-}
-
-
-

package/es/style/components/icons/src/index.less

@@ -1,96 +0,0 @@
-@primary-color: #269ac1;
-@icon-pick-hover-color: #269ac1;
-
-.svg-icon {
-    fill: currentColor;
-    vertical-align: middle;
-}
-
-.dt-icon{
-    display: inline-block;
-    text-align: center;
-    & > svg{
-        vertical-align: middle;
-    }
-}
-
-.dt-pick-icon {
-    display: flex;
-    flex-direction: row;
-    height: 600px;
-
-    &__menus{
-        height: 100%;
-        overflow-y: auto;
-        width: 140px;
-        border-right: 1px solid #e7e7e7;
-        border-top: 1px solid #e7e7e7;
-        background: #fff;
-        .menu{
-            border-bottom: 1px solid #e7e7e7;
-            padding: 8px;
-            text-align: center;
-            cursor: pointer;
-            transform: all 0.25s;
-            p{
-                font-size: 14px;
-                line-height: 24x;
-                span{
-                    opacity: 0.7;
-                    font-size: 12px;
-                    padding-left: 6px;
-                }
-            }
-            &.active, &:hover{
-                background: @primary-color;
-                color: #fff;
-            }
-        }
-    }
-
-    &__content{
-        height: 100%;
-        overflow-y: auto;
-        flex: 1;
-        background: #fff;
-
-        .ant-input-search{
-            width: 50%;
-            margin: 0 25% 40px 25%;
-        }
-
-        &_item{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            padding: 20px;
-            a {
-                margin: 6px;
-                line-height: 22px;
-                height: 30px;
-                width: 30px;
-                text-align: center;
-                cursor: pointer;
-                padding: 4px;
-                transform: all 0.2s;
-                border: 1px solid #fff;
-                &:hover{
-                    border: 1px solid @primary-color;
-                    border-radius: 4px;
-                    color: @primary-color;
-                }
-            }
-        }
-
-        i{
-            font-size: 22px;
-        }
-    }
-}
-
-.dt-pick-icon-item{
-    .ant-tooltip-inner, .ant-tooltip-arrow-content {
-        background: #fff !important;
-        color: @icon-pick-hover-color ;
-    }
-}

package/es/style/components/modal/src/index.less

@@ -1,60 +0,0 @@
-.fullscreen-modal {
-    overflow: hidden;
-
-    .ant-modal {
-        top: 0 !important;
-        right: 0 !important;
-        bottom: 0 !important;
-        left: 0 !important;
-        width: 100% !important;
-        height: 100%;
-        padding: 0;
-
-        &-content {
-            height: 100%;
-        }
-    }
-}
-
-.dt-basic-modal-close {
-    display: flex;
-    height: 95%;
-    align-items: center;
-    justify-content: space-around;
-
-    > span {
-        margin-left: 48px;
-        font-size: 16px;
-    }
-
-    &--can-full {
-        margin-right: 15px;
-        > i {
-            padding-right: 15px;
-            width: 40px;
-        }
-    }
-
-    &:not(&--can-full) {
-        > i:nth-child(1) {
-            &:hover {
-                font-weight: 700;
-            }
-        }
-
-        &>i:nth-child(1) {
-            display: inline-block;
-            padding: 10px;
-
-            &:hover {
-                color: @primary-color;
-            }
-        }
-
-        &>i:last-child {
-            &:hover {
-                color: @error-color;
-            }
-        }
-    }
-}