@ithinkdt/ui 4.0.0-38 → 4.0.0-400

package/src/page.jsx

@@ -1,740 +0,0 @@
-import { until } from '@vueuse/core'
-import { format } from 'date-fns'
-import {
-    NButton, NCheckbox, NColorPicker, NDatePicker, NDrawer, NDrawerContent, NFlex, NInput,
-    NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload, useMessage,
-} from 'ithinkdt-ui'
-import { useFormItem } from 'ithinkdt-ui/es/_mixins'
-import { computed, defineComponent, h, mergeProps, ref, shallowRef, unref } from 'vue'
-
-import { useDict, useDictMap } from '@ithinkdt/common/dict'
-
-import { DataForm, DtDeptRender, DtUserDept, DtUserRender, NCheckboxes, NRadios } from './components'
-import { useI18n } from './use-i18n.js'
-
-const mapProps = (props) => {
-    return Object.fromEntries(Object.entries(props || {}).map(([prop, value]) => [prop, unref(value)]))
-}
-
-const SimpleUpload = /* @__PURE__ */ defineComponent({
-    name: 'SimpleUpload',
-    props: {
-        type: { type: String, default: 'file' }, // file | image
-        size: { type: String, default: 'medium' },
-        multiple: { type: Boolean, default: false },
-        max: { type: Number, default: undefined },
-        accept: { type: String, default: undefined },
-        maxSize: { type: Number, default: undefined }, // MB
-        disabled: { type: Boolean, default: undefined },
-        fileList: { type: Array, default: () => [] },
-        onUpdateFileList: { type: [Array, Function] },
-        uploadFile: { type: Function },
-    },
-    setup(props, { slots, expose }) {
-        const { t } = useI18n()
-        SimpleUpload.t = t
-
-        const formItem = useFormItem(props)
-
-        const message = useMessage()
-        const customRequest = computed(() => props.customRequest || (
-            ({ file, onProgress, onFinish, onError }) => {
-                props.uploadFile(file.file, percent => onProgress({ percent }))
-                    .then((id) => {
-                        file.file.fileId = id
-                        onFinish()
-                    }).catch((error) => {
-                        message.error(error.message)
-                        onError(error)
-                    })
-            }
-        ))
-
-        const inst = ref()
-        expose({
-            submit() {
-                return until(inst).toBeTruthy().then(inst => inst.submit())
-            },
-        })
-
-        const onUpdate = (fileList) => {
-            props.onUpdateFileList?.(fileList)
-            nextTick(() => formItem.nTriggerFormChange())
-        }
-        return () => {
-            const { type, onUpdateFileList, ...props0 } = props
-            return (
-                <NUpload
-                    {...props0}
-                    ref={inst}
-                    customRequest={customRequest.value}
-                    listType={type === 'image' ? 'image-card' : 'text'}
-                    accept={props0.accept ?? type === 'image' ? 'image/*' : undefined}
-                    onUpdate:fileList={onUpdate}
-                >
-                    {{
-                        default: () => (
-                            <NButton disabled={formItem.mergedDisabledRef.value} size={formItem.mergedSizeRef.value}>
-                                {
-                                    t('common.page.form.selectFileText')
-                                }
-                            </NButton>
-                        ),
-                        ...slots,
-                    }}
-                </NUpload>
-            )
-        }
-    },
-})
-
-export function createPageFormHelper({
-    getUserGroups, getUsersByGroup, getUsersByDept, getUsersByUsername, uploadFile, getFileInfos,
-}) {
-    return {
-        input: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            if (readonly) return <NText depth={2} style="line-height: 1.25">{modelValue ?? ''}</NText>
-
-            props = mapProps(props)
-            return h(NInput, {
-                'clearable': true,
-                ...props,
-                ...params,
-                'value': modelValue,
-                'onUpdate:value': onUpdateValue,
-            }, slots)
-        },
-        number: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            if (readonly) return <NText depth={2} style="line-height: 1.25">{modelValue ?? ''}</NText>
-            props = mapProps(props)
-            return h(NInputNumber, {
-                'clearable': true,
-                ...props,
-                ...params,
-                'value': modelValue,
-                'onUpdate:value': onUpdateValue,
-            }, slots)
-        },
-        select: () => {
-            let dictType0, options0
-            return (
-                { slots, props: props0 },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                const { dictType, options, ...props } = mapProps(props0)
-                if (options) {
-                    options0 = options
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!options0 && dictType0) {
-                            options0 = useDict(dictType0)
-                        }
-                    }
-                }
-                if (readonly) {
-                    if (props.multiple) {
-                        const items = modelValue?.map(it => options0?.find(it2 => it2[props.valueField || 'value'] === it)) ?? []
-                        return (
-                            <NText depth={2} style="line-height: 1.25">
-                                {
-                                    items.map((it, i, arr) => {
-                                        const vn = it ? (props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? '') : (modelValue[i] ?? '')
-                                        return (
-                                            <span key={it[props.valueField || 'value']}>
-                                                {vn}
-                                                {i < arr.length - 1 ? ', ' : ''}
-                                            </span>
-                                        )
-                                    })
-                                }
-                            </NText>
-                        )
-                    } else {
-                        const it = options0?.find(item => item[props.valueField || 'value'] === modelValue)
-                        return <NText depth={2} style="line-height: 1.25">{it ? (props.renderLabel ? props.renderLabel(it) ?? '' : it[props.labelField || 'label'] ?? '') : (modelValue ?? '')}</NText>
-                    }
-                }
-
-                return h(NSelect, {
-                    'clearable': true,
-                    'loading': options0?.loading,
-                    ...props,
-                    'options': unref(options0),
-                    ...params,
-                    'value': modelValue,
-                    'onUpdate:value': onUpdateValue,
-                }, slots)
-            }
-        },
-        checkbox: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            props = mapProps(props)
-            if (readonly) {
-                let content
-                if (modelValue === (props.checkedValue ?? true)) {
-                    content = slots?.checked
-                        ? slots.checked()
-                        : <NCheckbox checked />
-                } else {
-                    content = slots?.unchecked ? slots.unchecked() : <NCheckbox disabled />
-                }
-                return <NText depth={2} style="line-height: 1.25">{content}</NText>
-            }
-
-            return h(NCheckbox, {
-                ...props,
-                ...params,
-                'checked': modelValue,
-                'onUpdate:checked': onUpdateValue,
-            }, slots)
-        },
-        checkboxes: () => {
-            let dictType0, options0
-            return (
-                { props: props0 },
-                { modelValue, required, readonly, ...params },
-            ) => {
-                const { dictType, options, ...props } = mapProps(props0)
-                if (options) {
-                    options0 = options
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!options0 && dictType0) {
-                            options0 = useDict(dictType0)
-                        }
-                    }
-                }
-                if (readonly) {
-                    const items = modelValue?.map(it => options0?.find(it2 => it2[props.valueField || 'value'] === it)) ?? []
-                    return (
-                        <NText depth={2} style="line-height: 2.4">
-                            {
-                                items.map((it, i, arr) => {
-                                    const vn = it ? (it[props.labelField ?? 'label'] ?? '') : (modelValue[i] ?? '')
-                                    return (
-                                        <span key={it[props.valueField ?? 'value']}>
-                                            {vn}
-                                            {i < arr.length - 1 ? ', ' : ''}
-                                        </span>
-                                    )
-                                })
-                            }
-                        </NText>
-                    )
-                }
-
-                return h(NCheckboxes,
-                    {
-                        ...props,
-                        ...params,
-                        options: options0,
-                        modelValue,
-                    },
-                )
-            }
-        },
-        radios: () => {
-            let dictType0, options0
-            return (
-                { props: props0 },
-                { modelValue, required, readonly, ...params },
-            ) => {
-                const { dictType, options, ...props } = mapProps(props0)
-                if (options) {
-                    options0 = options
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!options0 && dictType0) {
-                            options0 = useDict(dictType0)
-                        }
-                    }
-                }
-
-                if (readonly) {
-                    const it = options0?.find(item => item[props.valueField ?? 'value'] === modelValue)
-                    return <NText depth={2} style="line-height: 1.25">{it ? (it[props.labelField ?? 'label'] ?? '') : (modelValue ?? '')}</NText>
-                }
-
-                return h(
-                    NRadios,
-                    {
-                        ...props,
-                        ...params,
-                        options: options0,
-                        modelValue,
-                    },
-                )
-            }
-        },
-        datepicker: () => (
-            { slots, props },
-            { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-        ) => {
-            const { type = 'date', format: formatter = type.startsWith('datetime') ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd', ...props2 } = mapProps(props)
-            if (readonly) {
-                if (type.endsWith('range')) {
-                    return (
-                        <NText depth={2} style="line-height: 1.25">
-                            {modelValue
-                                ? `${modelValue[0] ? format(modelValue[0], formatter) : ''
-                                } ~ ${modelValue[1] ? format(modelValue[1], formatter) : ''}`
-                                : ''}
-                        </NText>
-                    )
-                }
-                return (
-                    <NText depth={2} style="line-height: 1.25">
-                        {modelValue ? format(modelValue, formatter) : ''}
-                    </NText>
-                )
-            }
-
-            return h(NDatePicker, {
-                'clearable': true,
-                ...props2,
-                ...params,
-                type,
-                'format': formatter,
-                'value': modelValue,
-                'onUpdate:value': onUpdateValue,
-            }, slots)
-        },
-        file: () => {
-            return (
-                { slots, props },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                props = mapProps(props)
-                if (readonly) {
-                    console.warn(`[file] 原则上此组建不应该显示在详情中`)
-                    if (fileList.value.length === 0) return
-                    return (
-                        <NFlex gap="8" vertical>
-                            {modelValue.map(it => (
-                                <a
-                                    key={it.id}
-                                    href={it.url}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    style="max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
-                                >
-                                    {it.name}
-                                </a>
-                            ))}
-                        </NFlex>
-                    )
-                }
-                return h(SimpleUpload, {
-                    ...props,
-                    ...params,
-                    defaultUpload: false,
-                    uploadFile,
-                    fileList: modelValue,
-                    onUpdateFileList: onUpdateValue,
-                }, slots)
-            }
-        },
-        upload: () => {
-            let lastModelValue = null
-            const idMap = new Map()
-            const fileMap = new Map()
-            const fileList = shallowRef([])
-            let key = 0
-
-            const update = (ids) => {
-                const key0 = ++key
-                fileList.value = ids.map(id => fileMap.get(id)).filter(Boolean)
-                const ids0 = ids.filter(id => !fileMap.has(id))
-                Promise.resolve(ids0.length > 0 ? getFileInfos(ids0) : [])
-                    .then((res) => {
-                        if (key0 !== key) return
-                        fileList.value = ids.map(id => fileMap.get(id) || res.find(it => it.id === id))
-                        fileMap.clear()
-                        for (const it of fileList.value) {
-                            fileMap.set(it.id, it)
-                        }
-                    })
-            }
-
-            let inst
-            const renderer = (
-                { slots, props },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                const props0 = mapProps(props)
-                inst = (props0.ref ??= shallowRef())
-                if (lastModelValue !== modelValue) {
-                    lastModelValue = modelValue
-                    update(modelValue?.split(',') ?? [])
-                }
-                if (readonly) {
-                    if (fileList.value.length === 0) return
-                    return (
-                        <NFlex gap="8" vertical>
-                            {fileList.value.map(it => (
-                                <a
-                                    key={it.id}
-                                    href={it.url}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    title={it.name}
-                                    style="max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
-                                >
-                                    {it.name}
-                                </a>
-                            ))}
-                        </NFlex>
-                    )
-                }
-                return h(SimpleUpload, {
-                    ...props0,
-                    ...params,
-                    uploadFile,
-                    fileList: fileList.value,
-                    onUpdateFileList: (fileList0 = []) => {
-                        fileMap.clear()
-                        for (const f of fileList0) {
-                            if (f.file.fileId) {
-                                idMap.set(f.id, f.file.fileId)
-                            }
-
-                            if (f.file.fileId) fileMap.set(f.file.fileId, f)
-                            else fileMap.set(f.id, f)
-                        }
-                        fileList.value = fileList0
-                        const ids = fileList.value.map(f => idMap.get(f.id) || f.id).join(',') || null
-                        onUpdateValue(ids)
-                    },
-                }, slots)
-            }
-            return {
-                renderer,
-                beforeSubmit: async () => {
-                    await inst?.value?.submit()
-                    await until(fileList).toMatch(list => list.every(file => !['pending', 'uploading'].includes(file.status)))
-                    if (fileList.value.some(file => file.status === 'error')) {
-                        return SimpleUpload.t('common.page.form.validate.fileErrorMessage')
-                    }
-                },
-            }
-        },
-        user: () => {
-            let users, groups, depts
-            return (
-                { slots, props: props0 },
-                { modelValue, 'onUpdate:modelValue': onUpdateValue, required, readonly, ...params },
-            ) => {
-                const props = mapProps(props0)
-                if (!users) {
-                    users = shallowRef([])
-                    getUsersByUsername().then((res) => {
-                        users.value = res
-                    })
-                    getUserGroups().then((res) => {
-                        groups.value = res
-                    })
-                    getDeptsByCode().then((res) => {
-                        depts.value = res
-                    })
-                }
-                if (readonly) {
-                    return <DtUserRender value={modelValue} multiple={props.multiple} getUsersByUsername={getUsersByUsername} />
-                }
-
-                return h(DtUserDept, {
-                    'type': 'user',
-                    'users': users.value,
-                    'depts': depts.value,
-                    'groups': groups.value,
-                    getUsersByDept,
-                    getUsersByGroup,
-                    ...props,
-                    ...params,
-                    modelValue,
-                    'onUpdate:modelValue': onUpdateValue,
-                }, slots)
-            }
-        },
-    }
-}
-
-export function createPageTableHelper({ getDeptsByCode, getUsersByUsername, getFileInfos, previewFileUrl }) {
-    const getFormatter = (defaultFormatter) => {
-        return () => (value, record, index, params) => {
-            if (value === undefined || value === null) return
-            return format(value, params.formatter ?? defaultFormatter)
-        }
-    }
-
-    const IDot = (props = {}) => (
-        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32" {...props}>
-            {/* Icon from Carbon by IBM - undefined */}
-            <circle cx="16" cy="16" r="8" fill="currentColor" />
-        </svg>
-    )
-
-    return {
-        date: getFormatter('yyyy-MM-dd'),
-        datetime: getFormatter('yyyy-MM-dd HH:mm:ss'),
-        dict: () => {
-            let dictType0, options0, optionMap
-            return (value, record, index, params) => {
-                if (value === undefined || value === null) return
-                const { dictType, options, multiple, statusMap } = mapProps(params)
-                if (options) {
-                    if (options0 !== options) {
-                        options0 = options
-                        optionMap = new Map(options.map(op => [op[params.valueField || 'value'], op]))
-                    }
-                } else {
-                    if (dictType0 !== dictType) {
-                        dictType0 = dictType
-                        if (!optionMap && dictType0) {
-                            optionMap = useDictMap(dictType0)
-                        }
-                    }
-                }
-                if (!multiple) {
-                    value = value.toString()
-                    if (statusMap && value in statusMap) {
-                        let status = statusMap[value] ?? 'default'
-                        if (['primary', 'success', 'warning', 'danger'].includes(status)) {
-                            status = `var(--color-${status})`
-                        }
-                        return (
-                            <span style="position: relative; padding-left: 1.25em">
-                                <IDot style={`color: ${status}; position: absolute;left: 0; top: 1.5px`} />
-                                <span>{optionMap.get(value?.toString())?.[params.labelField || 'label'] ?? ''}</span>
-                            </span>
-                        )
-                    }
-                    return optionMap.get(value)?.[params.labelField || 'label'] ?? ''
-                }
-                return value?.map(it => optionMap.get(it.toString())?.[params.labelField || 'label']) ?? ''
-            }
-        },
-        number: () => {
-            return (value, record, index, params) => {
-                if (value === undefined || value === null) return
-                if (params.percent) {
-                    value = Number(value) * 100
-                }
-                switch ('number') {
-                    case typeof params.fixed: {
-                        value = value.toFixed(params.fixed)
-                        break
-                    }
-                    case typeof params.round: {
-                        value = value.toFixed(params.round).replace(/0+$/, '')
-                        break
-                    }
-                    case typeof params.precision: {
-                        value = value.toPrecision(params.precision)
-                        break
-                    }
-                }
-                return params?.separator ? Number(value).toLocaleString() : value
-            }
-        },
-        email: () => {
-            return (value) => {
-                return <a href={`mailto:${value}`}>{value}</a>
-            }
-        },
-        url: () => {
-            return (value) => {
-                return <a href={value}>{value}</a>
-            }
-        },
-        color: () => {
-            return (value) => {
-                return <NColorPicker value={value} disabled size="small" />
-            }
-        },
-        image: () => {
-            return (value, record, index, params) => {
-                if (!value) return
-                const urls = (Array.isArray(value) ? value : (params?.multiple ? value.split(',') : [value]))
-                    .map(id => previewFileUrl(id))
-                return (
-                    <NFlex gap="8" wrap>
-                        {urls.map(url => (
-                            <img key={url} src={url} style="max-height: 32px; max-width: 100px; object-fit: contain" />
-                        ))}
-                    </NFlex>
-                )
-            }
-        },
-        file: () => {
-            const key = nanoid()
-            return (value, record, index, params) => {
-                if (!value) return
-                record.__file_urls ??= {}
-                if (!record.__file_urls[key]) {
-                    getFileInfos(Array.isArray(value) ? value : (params?.multiple ? value.split(',') : [value]))
-                        .then((infos) => {
-                            record.__file_urls[key] = infos
-                        })
-                }
-                const infos = record.__file_urls[key] || []
-
-                return (
-                    <NFlex gap="8" wrap>
-                        {infos.map(it => (
-                            <a
-                                key={it.id}
-                                href={it.url}
-                                target="_blank"
-                                rel="noreferrer"
-                                style="max-width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block"
-                            >
-                                {it.name}
-                            </a>
-                        ))}
-                    </NFlex>
-                )
-            }
-        },
-        dept: () => {
-            return (value, record, index, params) => {
-                if (!value) return
-                return <DtDeptRender value={value} multiple={params?.multiple} getDeptsByCode={getDeptsByCode} />
-            }
-        },
-        user: () => {
-            return (value, record, index, params) => {
-                if (!value) return
-                return <DtUserRender value={value} multiple={params?.multiple} getUsersByUsername={getUsersByUsername} />
-            }
-        },
-    }
-}
-
-export function createFormHelper() {
-    return () => ({ items, model, handleSubmit, reset, validation, readonly, inModal, showColon }) => {
-        return (
-            <DataForm
-                readonly={readonly}
-                model={model}
-                items={items}
-                validation={validation}
-                showColon={unref(showColon) ?? true}
-                showAction={false}
-                onSubmit={handleSubmit}
-                onRest={reset}
-                style={inModal ? 'padding-right: 2rem; padding-top: 1rem' : undefined}
-            />
-        )
-    }
-}
-
-export function createModalHelper() {
-    const formatLength = (length) => {
-        if (typeof length === 'number') {
-            return `${length}px`
-        }
-        return length
-    }
-    const contentStyle0 = {
-        maxHeight: 'calc(100vh - 130px)',
-        display: 'flex',
-        flexDirection: 'column',
-    }
-
-    const segmented = { content: true }
-    return () => ({
-        type = 'dialog', visible, title, content, footer, placement, resizable, draggable, closeOnEsc, closable,
-        showMask, maskClosable, width, height, style, onClose, onCancel, onConfirm, onAfterClose, onAfterOpen,
-        confirmText, confirmDisabled, confirmLoading, cancelText, cancelDisabled, cancelLoading, nativeScrollbar, ...options
-    }) => {
-        const footer0 = footer
-            ? () => footer
-            : footer === null
-                ? null
-                : () => (
-                        <NFlex justify="end" gap="16">
-                            {cancelText === null ? undefined : <NButton onClick={onCancel} disabled={cancelDisabled} loading={cancelLoading} style="min-width: 60px">{cancelText}</NButton>}
-                            {confirmText === null ? undefined : <NButton type="primary" onClick={onConfirm} disabled={confirmDisabled} loading={confirmLoading} style="min-width: 60px">{confirmText}</NButton>}
-                        </NFlex>
-                    )
-        if (type === 'dialog') {
-            const { style: style0 } = mergeProps(
-                { style: { width: formatLength(width ?? 520), height: formatLength(height) } },
-                { style },
-            )
-            return (
-                <NModal
-                    show={visible}
-                    preset="card"
-                    title={() => title}
-                    maskClosable={maskClosable ?? false}
-                    closeOnEsc={closeOnEsc}
-                    closable={closable}
-                    onClose={onClose}
-                    segmented={segmented}
-                    size="small"
-                    onAfterEnter={onAfterOpen}
-                    onAfterLeave={onAfterClose}
-                    onUpdateShow={onClose}
-                    draggable={draggable ?? true}
-                    style={style0}
-                    contentStyle={contentStyle0}
-                    {...options}
-                >
-                    {{
-                        default: () => (
-                            <NScrollbar abstract style="display: flex; flex-direction: column">
-                                {content}
-                            </NScrollbar>
-                        ),
-                        action: footer0,
-                    }}
-                </NModal>
-            )
-        }
-
-        const { bodyContentClass, bodyContentStyle, ...options2 } = options
-        return (
-            <NDrawer
-                show={visible}
-                trapFocus={false}
-                closeOnEsc={closeOnEsc}
-                showMask={showMask}
-                maskClosable={maskClosable}
-                resizable={resizable}
-                placement={placement}
-                width={width ?? 440}
-                height={height}
-                onUpdateShow={onClose}
-                onAfterEnter={onAfterOpen}
-                onAfterLeave={onAfterClose}
-                style={style}
-                {...options2}
-            >
-                <NDrawerContent
-                    closable={closable}
-                    nativeScrollbar={nativeScrollbar ?? false}
-                    bodyContentClass={bodyContentClass}
-                    bodyContentStyle={bodyContentStyle}
-                >
-                    {{
-                        default: () => content,
-                        header: () => title,
-                        footer: footer0,
-                    }}
-                </NDrawerContent>
-            </NDrawer>
-        )
-    }
-}