@dt-frames/ui 1.0.3 → 1.0.6

package/src/components/table/src/components/setting/Column.vue

@@ -99,11 +99,10 @@
     import { Tooltip, Popover, Checkbox, Button, CheckboxGroup, Divider } from 'ant-design-vue'
     import { getPopupContainer as getParentContainer, isNullAndUnDef } from '@dt-frames/core'
     import { DtIcon } from '../../../../icons/index'
-    import { computed, reactive, ref, unref, watchEffect, useAttrs } from 'vue'
+    import { computed, reactive, ref, unref, watchEffect, useAttrs, nextTick } from 'vue'
     import type { ColumnStateType, ColumnOptionsType } from '../../types/tableHeader.type'
     import { getTableInstance } from '../../hooks/useTableInstance'
     import { BasicColumn } from '../../types/table.type'
-    import { nextTick } from 'process'
     import { isFunction } from '@vueuse/core'
     import { cloneDeep, omit } from 'lodash-es'
 

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

@@ -147,7 +147,7 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
             title: '操作',
             align: 'center',
             expand,
-            width: (expand ? (column.btns.length * 30 + 40) : 70) + 'px',
+            width: `${ (expand ? (column.btns.length * 30 + 40) : 70) }px`,
             ...column,
             flag: ACTION_COLUMN,
         }
@@ -256,7 +256,7 @@ export function useColumns(
 
 
     // 设置列信息
-    function setColumns(columnList: Partial<BasicColumn>[] | string[]) {
+    function setColumns(columnList: Partial<BasicColumn>[] | string[] = []) {
         const columns = cloneDeep(columnList)
 
         if( !isArray( columns ) ) return

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/directives/index.ts

@@ -2,7 +2,6 @@
 import { App } from 'vue'
 import { authMounted } from './permission'
 import { iconMounted } from './icon'
-import '@purge-icons/generated'
 
 
 const dtDirectives = [

package/src/directives/permission.ts

@@ -2,7 +2,7 @@
  * 权限控制，不使用传统的通过css隐藏dom元素
  * 使用方法： v-auth="'ADD'"
 */
-import { useAuthStore } from '@dt-frames/core';
+import { CacheKey, DtCache } from '@dt-frames/core';
 import type { DirectiveBinding } from 'vue';
 
 
@@ -10,8 +10,7 @@ function hasAuth( el: Element, binding: any ) {
     const value = binding.value;
     if (!value) return;
 
-    let { getAuths } = useAuthStore();
-    if(!getAuths.includes( value )) {
+    if(!DtCache.getLocal(CacheKey.AUTHS).includes( value )) {
         el.parentNode?.removeChild(el);
     }
 }

package/src/theme/footer/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-    import { useMenu, useTheme } from '@dt-frames/core';
+    import { useTheme } from '@dt-frames/core';
     import { LayoutFooter } from 'ant-design-vue';
     import { computed, unref } from 'vue';
 

package/src/theme/header/components/bread-crumb.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { ref, watch, watchEffect } from 'vue'
+    import { ref, watchEffect } from 'vue'
     import { Breadcrumb } from 'ant-design-vue'
     import { getBreadCrumb } from '../helper/menu-tree'
     import { useRouter } from 'vue-router';

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

@@ -7,8 +7,6 @@
 
 <script lang="ts" setup>
     import { useFullscreen } from '@vueuse/core';
-    import { DtIcon } from '../../../components/icons'
-    
     const { toggle, isFullscreen } = useFullscreen();
 
 </script>

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/notify.vue

@@ -14,10 +14,9 @@
 
 <script lang="ts" setup>
     import { ref } from 'vue';
-    import { Popover, Tabs, TabPane } from 'ant-design-vue';
+    import { Popover } from 'ant-design-vue';
     import { useHeader } from '@dt-frames/core';
 
-    const activeKey = ref('1');
     const { getShowNotice } = useHeader()
     
 </script>

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 { useAuthStore, useHeader } from '@dt-frames/core';
+    import { CacheKey, DtCache, useAppStore, useHeader, isObject, isFunction, useGo, Pages } from '@dt-frames/core'
 
-    const { getUserInfo } = useAuthStore()
+    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/helper/menu-tree.ts

@@ -1,7 +1,7 @@
 /** =====================================
  *  定义一些菜单操作的方法
  *  =====================================*/
-import { Menus, useAuthStore } from "@dt-frames/core";
+import { CacheKey, DtCache, Menus, useAuthStore } from "@dt-frames/core";
 import { trim } from 'lodash-es'
 
 function deleteChildrenProp( menu: any ) {
@@ -13,8 +13,7 @@ function deleteChildrenProp( menu: any ) {
 
 // 获取当前路由的面包屑
 export function getBreadCrumb(path: string, menus?: Menus[]) {
-    const { getMenus } = useAuthStore()
-    const _menus = menus || getMenus
+    const _menus = menus || DtCache.getLocal(CacheKey.MENUS) || []
 
     let routes: Menus[] = []
 
@@ -45,8 +44,6 @@ export function getBreadCrumb(path: string, menus?: Menus[]) {
 }
 
 export function getFilterMenu( filter: string = '', flag: boolean = false) {
-    const { getMenus } = useAuthStore()
-
     let _menus = [];
 
     if( !trim(filter) && !flag ) return _menus;
@@ -61,7 +58,7 @@ export function getFilterMenu( filter: string = '', flag: boolean = false) {
         } )
     }
 
-    getTargetMenus( getMenus );
+    getTargetMenus( DtCache.getLocal(CacheKey.MENUS) );
 
     return _menus;
 }

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/src/theme/sider/helper/split-menu.ts

@@ -67,8 +67,7 @@ export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
 
     async function getMenus() {
         if (unref(normalType)) {
-            const { getMenus } = useAuthStore()
-            menusRef.value = getMenus
+            menusRef.value = DtCache.getLocal(CacheKey.MENUS)
             return;
         }
 

package/src/theme/tabs/components/TabContent.vue

@@ -29,7 +29,6 @@
 
 <script lang="ts" setup>
     import { Dropdown, Menu, MenuDivider, MenuItem } from 'ant-design-vue'
-    import { DtIcon } from '../../../components/icons';
     import { useTabDropdown } from '../hooks/useTabDropdown';
 
     const { getDropMenuList, handleContext, handleMenuEvent } = useTabDropdown()

package/src/theme/tabs/index.vue

@@ -30,7 +30,7 @@
     import { Tabs, TabPane } from 'ant-design-vue'
     import { computed, ref, unref, watch } from 'vue'
     import { menuList2Map, RouteReuseStore, useGo, useMultipleTab } from '@dt-frames/core'
-    import { useRouter, Router } from 'vue-router'
+    import { useRouter } from 'vue-router'
     import TabContent from './components/TabContent.vue'
     import TabRedo from './components/TabRedo.vue'
     import { initAffixTabs, useTabsDrag } from './hooks/useMultifyTabs'

package/src/theme/theme.less

@@ -3,7 +3,8 @@
 @import './tabs/index.less';
 @import './footer/index.less';
 @import './transition.less';
-
+@import '../components/icons/index.less';
+@import '../components/container/index.less';
 
 @page-bg-color: #f0f2f5;
 

package/src/theme/theme.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="dt-theme">
+    <div class="dt-theme" v-if="currentRoute.fullPath && getAppConf?.router.unRequireAuthPage.length">
         <ConfigProvider :locale="zhCN">
             <!-- 不需要权限登录 -->
-            <template v-if="currentRoute.meta?.requiresAuth === false">
+            <template v-if="getAppConf?.router.unRequireAuthPage.includes(currentRoute.fullPath)">
                 <router-view></router-view>
             </template>
 
@@ -33,7 +33,7 @@
     import { computed, unref, ref } from 'vue'
     import { useRouter } from 'vue-router'
     import { Layout, ConfigProvider } from 'ant-design-vue'
-    import { useHeader, useMenu, useTheme } from '@dt-frames/core'
+    import { useAppStore, useHeader, useMenu, useTheme } from '@dt-frames/core'
 
     import DtFeature from './feature/index.vue'
     import DtHeader from './header/index.vue'
@@ -57,6 +57,7 @@
     const { getShowFullHeaderRef, getFixed, getHeaderHeight } = useHeader()
     const { getSplit, getShowMenu, getShowSidebar } = useMenu()
     const { getFooter, getShowFooter } = useTheme()
+    const { getAppConf } = useAppStore()
 
     const { height } = unref(getFooter) as any;
 

package/es/assets/data/icon.d.ts

@@ -1,4 +0,0 @@
-export declare const pickIcons: {
-    type: string;
-    icons: string[];
-}[];

package/es/assets/data/icon.ts

@@ -1,69 +0,0 @@
-export const pickIcons = [
-    {
-        type: '操作',
-        icons: [
-            'ic:baseline-3d-rotation',
-            'ic:baseline-abc',
-            'ic:baseline-accessibility',
-            'ic:baseline-accessibility-new',
-            'ic:baseline-accessible',
-            'ic:baseline-accessible-forward',
-            'ic:baseline-account-balance',
-            'ic:baseline-account-balance-wallet',
-            'ic:baseline-account-box',
-            'ic:baseline-account-circle',
-            'ic:baseline-add-card',
-            'ic:baseline-add-shopping-cart',
-            'ic:baseline-add-task',
-            'ic:baseline-add-to-drive',
-            'ic:baseline-addchart',
-            'ic:baseline-admin-panel-settings',
-            'ic:baseline-ads-click',
-            'ic:baseline-alarm',
-            'ic:baseline-alarm-add',
-            'ic:baseline-alarm-off',
-            'ic:baseline-alarm-on',
-            'ic:baseline-all-inbox',
-            'ic:baseline-analytics',
-            'ic:baseline-anchor',
-            'ic:baseline-android',
-            'ic:baseline-announcement',
-            'ic:baseline-api',
-            'ic:baseline-app-blocking',
-            'ic:baseline-app-shortcut',
-            'ic:baseline-arrow-circle-down'
-        ]
-    }, {
-        type: '警告',
-        icons: [
-            'ic:baseline-add-alert',
-            'ic:baseline-auto-delete',
-            'ic:baseline-error',
-            'ic:baseline-error-outline',
-            'ic:baseline-notification-important',
-            'ic:baseline-warning',
-            'ic:baseline-warning-amber',
-            'ic:outline-add-alert',
-            'ic:outline-auto-delete',
-            'ic:outline-error',
-            'ic:outline-error-outline',
-            'ic:outline-notification-important',
-            'ic:outline-warning',
-            'ic:outline-warning-amber',
-            'ic:round-add-alert',
-            'ic:round-auto-delete',
-            'ic:round-error',
-            'ic:round-error-outline',
-            'ic:round-notification-important',
-            'ic:round-warning',
-            'ic:round-warning-amber',
-            'ic:sharp-add-alert',
-            'ic:sharp-auto-delete',
-            'ic:sharp-error',
-            'ic:sharp-error-outline',
-            'ic:sharp-notification-important',
-            'ic:sharp-warning',
-            'ic:sharp-warning-amber'
-        ]
-    }
-]