@dt-frames/ui 1.0.4 → 1.0.5

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

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

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>
@@ -127,6 +127,21 @@
                 getRowClassName
             } = useRows( getProps )
 
+            /**
+             * 表格改变
+             */
+            const { 
+                handleTableChange
+            } = useDataSource(
+                getProps,
+                {
+                    getPaginationInfo,
+                    setPagination,
+                    clearSelectedRowKeys
+                },
+                emit
+            )
+
 
             const getBind = computed(() => {
                 return {
@@ -139,7 +154,7 @@
                     pagination: toRaw(unref(getPaginationInfo)),
                     rowSelection: unref(getRowSelectionRef),
                     rowKey: unref(getProps).rowKey,
-                    columns: toRaw(unref(getViewColumns)),
+                    columns: unref(getViewColumns),
                     tableLayout: 'fixed'
                 }
             })
@@ -163,22 +178,6 @@
             }
             const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
             
-
-            /**
-             * 表格改变
-             */
-            const { 
-                handleTableChange
-            } = useDataSource(
-                getProps,
-                {
-                    getPaginationInfo,
-                    setPagination,
-                    clearSelectedRowKeys
-                },
-                emit
-            )
-
             emit('register', tableAction)
 
             return {
@@ -188,7 +187,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, CellFormat, SizeType } from './types/table.type'
 import { ButtonProps } from '../../forms'
 import { DownloadType } from './types/tableHeader.type'
 
@@ -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<CellFormat> },
+
     // 列 
     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/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;
-            }
-        }
-    }
-}