@dt-frames/ui 1.0.12 → 1.0.16

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

@@ -1,133 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,43 +0,0 @@
-.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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,38 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-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

@@ -1,166 +0,0 @@
-<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/directives/icon.ts

@@ -1,36 +0,0 @@
-/**
- * 字体图标指令，目前支持awesome、ant-design以及assets/icons/下的svg图标
- * 使用方法: <span v-icon="'fa fa-user'" :color="'red'" :fontSize="12"></span>
- * 
- * 动态设置ant-design 图标
- * https://blog.csdn.net/weixin_45803990/article/details/116270387
- */
-import { DirectiveBinding, h, render, VNode } from "vue";
-import { Nullable } from '@dt-frames/core'
-import { DtIcon } from "../components";
-
-
-function setIconHTML( el: Element, binding: any, props: any ) {
-    const value = binding.value;
-    if (!value) return;
-
-    let vm: Nullable<VNode> = null;
-
-    vm = h(DtIcon, {
-        iconClass: value,
-        size: props?.size,
-        color: props?.color || null,
-        style: {
-            display: 'block'
-        }
-    });
-
-    if( vm ) {
-        render(vm, document.createElement('div'));
-        el.appendChild(vm.el as HTMLElement);
-    }
- }
- 
-export const iconMounted = (el: Element, binding: DirectiveBinding<any>, props: any) => {
-    setIconHTML(el, binding, props.props);
-};