@dt-frames/ui 1.0.8 → 1.0.11

package/src/components/tree/src/props.ts

@@ -0,0 +1,133 @@
+import { Recordable } from "@dt-frames/core";
+import { TreeDataItem } from "ant-design-vue/lib/tree";
+import { PropType } from "vue";
+import { CheckKeys, ContextMenuItem, FieldNames, TreeActionItem, TreeItem } from "./type/tree"
+
+export const BasicProps = {
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    // 粘性选择
+    checkStrictly: Boolean,
+    // 展开的key值
+    expandedKeys: {
+        type: Array as PropType<KeyType[]>,
+        default: () => []
+    },
+    // 设置选中的key
+    selectedKeys: {
+        type: Array as PropType<KeyType[]>,
+        default: () => []
+    },
+    // 选中的节点
+    checkedKeys: {
+        type: Array as PropType<CheckKeys>,
+        default: () => []
+    },
+
+    // 定义树节点的lable title children 名称
+    fieldNames: {
+        type: Object as PropType<FieldNames>,
+    },
+
+    beforeRightClick: {
+        type: Function as PropType<(...arg: any) => ContextMenuItem[]>,
+        default: undefined,
+    },
+    
+    rightMenuList: {
+        type: Array as PropType<ContextMenuItem[]>,
+    },
+
+    // 
+    renderIcon: {
+        type: Function as PropType<(params: Recordable) => string>,
+    },
+
+    // 高亮搜索值，仅高亮具体匹配值（通过title）值为true时使用默认色值，值为#xxx时使用此值替代且高亮开启
+    highlight: {
+        type: [Boolean, String] as PropType<Boolean | String>,
+        default: false,
+    },
+
+    actionList: {
+        type: Array as PropType<TreeActionItem[]>,
+        default: () => [],
+    },
+
+    clickRowToExpand: {
+        type: Boolean,
+        default: false,
+    },
+
+    searchValue: {
+        type: String,
+        default: ''
+    },
+
+    filterFn: {
+        type: Function as PropType< (searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean >,
+        default: undefined,
+    },
+
+    checkable: Boolean,
+
+    // 搜索完成时自动展开结果
+    expandOnSearch: Boolean,
+
+    // 搜索完成自动选中所有结果,当且仅当 checkable===true 时生效
+    checkOnSearch: Boolean,
+
+    // 搜索完成自动select所有结果
+    selectedOnSearch: Boolean,
+
+    // 树数据
+    treeData: {
+        type: Array as PropType<TreeDataItem[]>
+    },
+
+    value: {
+        type: [Object, Array] as PropType<KeyType[] | CheckKeys>
+    },
+
+    title: {
+        type: String,
+        default: '',
+    },
+
+    toolbar: Boolean,
+    search: Boolean,
+
+}
+
+export const searchProps = {
+    title: {
+        type: String,
+        default: '',
+    },
+    toolbar: {
+        type: Boolean,
+        default: false,
+    },
+    checkable: {
+        type: Boolean,
+        default: false,
+    },
+    search: {
+        type: Boolean,
+        default: false,
+    },
+    searchText: {
+        type: String,
+        default: '',
+    },
+    checkAll: {
+        type: Function,
+        default: undefined,
+    },
+    expandAll: {
+        type: Function,
+        default: undefined,
+    },
+}

package/src/components/tree/src/type/tree.ts

@@ -0,0 +1,105 @@
+import { Recordable } from "@dt-frames/core";
+import { Fn } from "@vueuse/core"
+import { TreeDataItem } from "ant-design-vue/lib/tree"
+
+
+export enum ToolbarEnum {
+    SELECT_ALL,
+    UN_SELECT_ALL,
+    EXPAND_ALL,
+    UN_EXPAND_ALL,
+    CHECK_STRICTLY,
+    CHECK_UN_STRICTLY,
+}
+
+export type KeyType = string | number
+
+export type CheckKeys =
+  | KeyType[]
+  | { 
+        checked: string[] | number[]; 
+        halfChecked: string[] | number[] 
+    }
+
+export interface TreeState {
+    expandedKeys: KeyType[]
+    selectedKeys: KeyType[]
+    checkedKeys: CheckKeys
+    checkStrictly: boolean
+}
+
+export interface FieldNames {
+    children?: string
+    title?: string
+    key?: string
+}
+
+export interface TreeItem extends TreeDataItem {
+    icon?: any
+}
+
+export interface CreateContextOptions {
+    event: MouseEvent
+    icon?: string
+    styles?: any
+    items?: ContextMenuItem[]
+}
+
+export interface InsertNodeParams {
+    parentKey: string | null
+    node: TreeDataItem
+    list?: TreeDataItem[]
+    push?: 'push' | 'unshift'
+}
+
+export interface ContextMenuItem {
+    label: string
+    icon?: string
+    hidden?: boolean
+    disabled?: boolean
+    handler?: Fn
+    divider?: boolean
+    children?: ContextMenuItem[]
+}
+
+export interface TreeActionItem {
+    render: (record: Recordable) => any
+    show?: boolean | ((record: Recordable) => boolean)
+}
+
+export interface InsertNodeParams {
+    parentKey: string | null
+    node: TreeDataItem
+    list?: TreeDataItem[]
+    push?: 'push' | 'unshift'
+}
+
+export interface TreeHelperConfig {
+    id: string;
+    children: string;
+    pid: string;
+}
+
+export interface TreeActionType {
+    checkAll: (checkAll: boolean) => void
+    expandAll: (expandAll: boolean) => void
+    setExpandedKeys: (keys: KeyType[]) => void
+    getExpandedKeys: () => KeyType[]
+    setSelectedKeys: (keys: KeyType[]) => void
+    getSelectedKeys: () => KeyType[]
+    setCheckedKeys: (keys: CheckKeys) => void
+    getCheckedKeys: () => CheckKeys
+    filterByLevel: (level: number) => void
+    insertNodeByKey: (opt: InsertNodeParams) => void
+    insertNodesByKey: (opt: InsertNodeParams) => void
+    deleteNodeByKey: (key: string) => void
+    updateNodeByKey: (key: string, node: Omit<TreeDataItem, 'key'>) => void
+    setSearchValue: (value: string) => void
+    getSearchValue: () => string
+    onStrictlyChange: ( strictly: boolean ) => void
+    getSelectedNode: (
+        key: KeyType,
+        treeList?: TreeItem[],
+        selectNode?: TreeItem | null,
+    ) => TreeItem | null
+}

package/src/components/tree/src/utils/tree.ts

@@ -0,0 +1,73 @@
+import { TreeHelperConfig } from "../type/tree"
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树数据
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export function eachTree(treeDatas: any[], callBack: Function, parentNode = {}) {
+    treeDatas.forEach( el => {
+        const newNode = callBack(el, parentNode) || el
+
+        if (el.children) {
+            eachTree( el.children, callBack, newNode )
+        }
+    } )
+}
+
+
+// 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+export function forEach<T = any>(
+    tree: T[],
+    func: (n: T) => any,
+    config: Partial<TreeHelperConfig> = {},
+): void {
+    const list: any[] = [...tree]
+    const { children = 'children' } = config
+
+    for (let i = 0; i < list.length; i++) {
+        if (func(list[i])) {
+            return
+        }
+        children && list[i][children] && list.splice(i + 1, 0, ...list[i][children])
+    }
+}
+
+export function filter<T = any>(
+    tree: T[],
+    func: (n: T) => boolean,
+    config: Partial<TreeHelperConfig> = {},
+): T[] {
+    // 获取配置
+    const children = config.children as string || 'children';
+  
+    function listFilter(list: T[]) {
+        return list
+            .map((node: any) => ({ ...node }))
+            .filter((node) => {
+
+                // 递归调用 对含有children项  进行再次调用自身函数 listFilter
+                node[children] = node[children] && listFilter(node[children]);
+
+                // 执行传入的回调 func 进行过滤
+                return func(node) || (node[children] && node[children].length);
+            });
+    }
+  
+    return listFilter(tree);
+}
+
+export function treeToList<T = any>(tree: any, config: Partial<TreeHelperConfig> = {}): T {
+    const { children = 'children' } = config
+
+    const result: any = [...tree]
+
+    for (let i = 0; i < result.length; i++) {
+        if (!result[i][children!]) continue
+        result.splice(i + 1, 0, ...result[i][children!])
+    }
+
+    return result
+}
+  

package/src/components/upload/index.less

@@ -0,0 +1,43 @@
+.dt-upload-wrap{
+    height: 350px;
+    padding: 10px 20px;
+    display: flex;
+    flex-direction: column;
+
+    .ant-table-wrapper{
+        flex: 1;
+        .ant-table-body{
+            border-bottom: 1px solid #e7e7e7;
+        }
+    }
+}
+
+.file-header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    &>div{
+        display: flex;
+        flex-direction: row;
+        button{
+            margin-right: 10px;
+        }
+    }
+}
+
+.file-type-tips{
+    line-height: 24px;
+    padding: 5px 10px;
+    font-size: 12px;
+    display: flex;
+    margin: 10px 0;
+    border: 1px dashed @primary-color;
+    cursor: inherit;
+    span i{
+        color: @primary-color;
+        margin-right: 7px;
+    }
+    i{
+        color: #666;
+    }
+}

package/src/components/upload/index.ts

@@ -0,0 +1,7 @@
+import DtUploadModal from './src/index.vue'
+import DtUpload from './src/upload.vue'
+
+export {
+    DtUploadModal,
+    DtUpload
+}

package/src/components/upload/src/helper.ts

@@ -0,0 +1,32 @@
+import { computed, Ref, unref } from "vue"
+
+export function useHelpers(
+    acceptRef: Ref<string[]>, 
+    helpTextRef: Ref<string>, 
+    maxNumberRef: Ref<number>, 
+    maxSizeRef: Ref<number>
+) {
+    // 文件类型
+    const getAccept = computed(() => {
+        const accept = unref(acceptRef);
+        if (accept && accept.length > 0) {
+            return accept;
+        }
+        return [];
+    })
+
+    const getStringAccept = computed(() => {
+        return unref(getAccept)
+            .map((item) => {
+                if (item.indexOf('/') > 0 || item.startsWith('.')) {
+                    return item
+                }
+                return `.${item}`
+            })
+            .join(',')
+    })
+
+    return {
+        getStringAccept
+    }
+}

package/src/components/upload/src/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <DtModal
+        @save="handleSave()"
+        @register="register"
+    >
+        <div class="dt-upload-wrap">
+            <DtUpload ref="uploadRef" :defaultFiles="defaultFiles">
+                111
+            </DtUpload>
+        </div>
+    </DtModal>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    import { DtModal, useModal } from '../../modal'
+    import DtUpload from './upload.vue'
+
+    const uploadRef = ref(null)
+    const emites = defineEmits(['register'])
+
+    // 注册弹框
+    const [register] = useModal({
+        width: '700px',
+        title: '文件上传',
+        maskClosable: false,
+    })
+
+    const defaultFiles = [
+        { fileName: '叮咚发票667.09.pdf', fileId: '1' }
+    ]
+
+    // 保存
+    function handleSave() {
+        console.log(uploadRef.value.allFilesRef)
+        alert("s-s-s-")
+    }
+</script>

package/src/components/upload/src/props.ts

@@ -0,0 +1,48 @@
+import { Fn } from "@vueuse/core"
+import { PropType } from "vue"
+
+export type FileType = {
+    fileName: String
+    [key: string]: any
+}
+
+export const basicUploadProps = {
+    // 是否显示模板下载
+    showTemplateDownload: {
+        type: Boolean,
+        default: false,
+    },
+    // 模板下载
+    templateDownload: {
+        type: Function as PropType<Fn>,
+        default: () => {}
+    },
+    helpText: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    // 是否支持批量上传
+    multiple: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    // 文件支持的类型
+    accept: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+    },
+    // 文件最大多少MB
+    maxSize: {
+        type: Number as PropType<number>,
+        default: 2,
+    },
+    // 最大数量的文件，Infinity不限制
+    maxNumber: {
+        type: Number as PropType<number>,
+        default: Infinity,
+    },
+    defaultFiles: {
+        type: Array as PropType<FileType[]>,
+        default: []
+    }
+}

package/src/components/upload/src/upload.vue

@@ -0,0 +1,166 @@
+<template>
+    <div class="file-header">
+        <div>
+            <Upload
+                :accept="getStringAccept"
+                :multiple="multiple"
+                :before-upload="beforeUpload"
+                :show-upload-list="false"
+            >
+                <Button type="primary">
+                    <span v-icon="'ic:baseline-file-upload'"></span>
+                    文件上传
+                </Button>
+            </Upload>
+            <Button type="primary" v-if="showTemplateDownload" @click="templateDownload">
+                <span v-icon="'ic:baseline-file-download'"></span>
+                模板下载
+            </Button>
+        </div>
+        <slot></slot>
+    </div>
+
+    <div class="file-type-tips ant-alert-info">
+        <span v-icon="'ant-design:info-circle-outlined'"></span>
+        <i>请上传pptx、doc、jpg、jpeg、png、bmp、gif、xls、xlsx、txt、rar、zip、7z、tar、gz格式文件</i>
+    </div>
+    
+    <DtTable @register="registerTable"></DtTable>
+
+    <Image
+        :width="200"
+        :style="{ display: 'none' }"
+        :preview="{
+            visible: imgVisable,
+            onVisibleChange: setImgVisible,
+        }"
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+    ></Image>
+
+</template>
+
+<script lang="ts" setup>
+    import { h, ref, toRefs, watchEffect } from 'vue'
+    import { Button, Upload, Image } from 'ant-design-vue'
+    import { DtTable, useTable } from '../../table'
+    import { basicUploadProps } from './props'
+    import { useHelpers } from './helper'
+    import { useMessage } from '@dt-frames/core'
+    import * as SparkMD5 from 'spark-md5'
+
+
+    const { message } = useMessage()
+    
+    const filesRef = ref([])
+    const historyFilesRef = ref([])
+    const allFilesRef = ref([])
+
+    // 控制图片预览显示隐藏
+    const imgVisable = ref( false )
+    const setImgVisible = (value) => imgVisable.value = value
+
+    const props = defineProps( basicUploadProps )
+
+    const { accept, helpText, maxNumber, maxSize } = toRefs(props)
+    const { getStringAccept } = useHelpers( accept, helpText, maxNumber, maxSize )
+
+
+    const [registerTable, { }] = useTable({
+        tableSetting: false,
+        pagination: false,
+        dataSource: allFilesRef,
+        columns: [
+            { title: '文件名称', dataIndex: 'fileName' },
+            { title: '上传状态', dataIndex: 'fileStatue', render(row) {
+                return h('span', {
+                    style: `color: ${ row.status === 0 ? 'orange' : 'green' }`,
+                }, row.fileStatue)
+            } },
+        ],
+        operations: {
+            expand: true,
+            btns: [
+                { title: '预览', icon: 'ic:baseline-remove-red-eye',
+                    ifShow(row) {
+                        const supportFileTypes = ['pdf', 'jpg', 'jpeg', 'png', 'bmp', 'gif']
+                        return supportFileTypes.includes( row.fileName.split('.').pop() )
+                    },
+                    action: () => {
+                        setImgVisible(true)
+                    }
+                },
+                { title: '编辑', icon: 'mdi:text-box-edit-outline' },
+                { title: '删除', icon: 'mdi:delete-outline' }
+            ]
+        }
+    })
+
+
+    watchEffect(() => {
+        historyFilesRef.value = props.defaultFiles.map(file => {
+            return {
+                ...file,
+                fileName: file.fileName,
+                status: 0,
+                fileStatue: '历史上传'
+            }
+        })
+
+        allFilesRef.value = [...historyFilesRef.value, ...filesRef.value]
+    })
+    
+
+    function beforeUpload(file: File) {
+        const { maxSize } = props
+        
+        if( maxSize && file.size / 1024 / 1024 >= maxSize ) {
+            message.error(`只能上传不超过${ maxSize }MB的文件!`)
+            return false
+        }
+
+        addFile( file )
+
+        return false
+    }
+
+    // 添加文件
+    function addFile(file: File) {
+        let blobSlice = File.prototype.slice || (File.prototype as any).mozSlice || (File.prototype as any).webkitSlice
+        let chunkSize = 2097152,
+            chunks = Math.ceil(file.size / chunkSize),
+            currentChunk = 0,
+            spark = new SparkMD5.ArrayBuffer(),
+            fileReader = new FileReader()
+
+        fileReader.onload = function (e) {
+            spark.append(e.target['result']);
+            currentChunk++;
+
+            if (currentChunk < chunks) {
+                loadNext();
+            } else {
+                filesRef.value.push({
+                    fileName: file.name,
+                    fileId: spark.end(),
+                    file,
+                    status: 1,
+                    fileStatue: '待上传'
+                })
+            }
+        }
+
+        function loadNext() {
+            var start = currentChunk * chunkSize,
+                end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
+            
+            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
+        }
+
+        loadNext()
+    }
+
+
+    defineExpose({
+        allFilesRef
+    })
+</script>

package/src/theme/header/helper/menu-tree.ts

@@ -13,7 +13,7 @@ function deleteChildrenProp( menu: any ) {
 
 // 获取当前路由的面包屑
 export function getBreadCrumb(path: string, menus?: Menus[]) {
-    const _menus = menus || DtCache.getLocal(CacheKey.MENUS) || []
+    const _menus = menus || DtCache.getLocal(CacheKey.MENUS)?.children || []
 
     let routes: Menus[] = []
 
@@ -58,7 +58,7 @@ export function getFilterMenu( filter: string = '', flag: boolean = false) {
         } )
     }
 
-    getTargetMenus( DtCache.getLocal(CacheKey.MENUS) );
+    getTargetMenus( DtCache.getLocal(CacheKey.MENUS)?.children );
 
     return _menus;
 }

package/src/theme/header/index.less

@@ -417,7 +417,7 @@
     margin-bottom: 20px;
 
     .select-item{
-        width: 130px;
+        width: 130px !important;
     }
 }
 

package/src/theme/sider/helper/split-menu.ts

@@ -67,7 +67,7 @@ export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
 
     async function getMenus() {
         if (unref(normalType)) {
-            menusRef.value = DtCache.getLocal(CacheKey.MENUS)
+            menusRef.value = DtCache.getLocal(CacheKey.MENUS)?.children
             return;
         }
 
@@ -85,7 +85,7 @@ export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
 }
 
 
-async function getMenus() { return DtCache.getLocal(CacheKey.MENUS) }
+async function getMenus() { return DtCache.getLocal(CacheKey.MENUS)?.children }
 
 function getFirstMenuPath(item: Menus) {
     let isFind = false, path = ''

package/es/components/dialog/index.d.ts

@@ -1,2 +0,0 @@
-import { useDialog } from './src/hooks/useDialog';
-export { useDialog };