@ithinkdt/ui 4.0.0-23 → 4.0.0-31

package/locale.d.ts

@@ -62,6 +62,9 @@ export interface UILocale {
             resetText: string
             cancelText: string
             selectFileText: string
+            validate: {
+                fileErrorMessage: string
+            }
         }
         filter: {
             submitText: string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ithinkdt/ui",
-  "version": "4.0.0-23",
+  "version": "4.0.0-31",
   "type": "module",
   "license": "MIT",
   "description": "iThinkDT UI",
@@ -63,7 +63,7 @@
     "sortablejs": "^1.15.6",
     "@types/sortablejs": "^1.15.8",
     "nanoid": "^5.1.6",
-    "@ithinkdt/common": "^4.0.0-12"
+    "@ithinkdt/common": "^4.0.0-30"
   },
   "peerDependencies": {
     "@ithinkdt/page": ">=4.0",
@@ -82,13 +82,13 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue-jsx": "^5.1.1",
-    "ithinkdt-ui": "^1.7.3",
+    "ithinkdt-ui": "^1.8.0",
     "typescript": "~5.9.3",
     "unocss": ">=66.5.4",
-    "vite": "npm:rolldown-vite@^7.1.17",
+    "vite": "npm:rolldown-vite@^7.1.19",
     "vue": "^3.5.22",
-    "vue-router": "^4.6.2",
-    "@ithinkdt/page": "^4.0.0-16"
+    "vue-router": "^4.6.3",
+    "@ithinkdt/page": "^4.0.0-31"
   },
   "scripts": {
     "release": "pnpm publish --no-git-checks"

package/src/components/Checkboxes.jsx

@@ -3,7 +3,7 @@ import { computed, defineComponent, ref, watch } from 'vue'
 
 import { useI18n } from '../use-i18n.js'
 
-export const NCheckboxes = defineComponent({
+export const NCheckboxes = /* @__PURE__ */ defineComponent({
     name: 'Checkboxes',
     inheritAttrs: false,
     props: {

package/src/components/DataTable.jsx

@@ -1,12 +1,12 @@
 import { toReactive, unrefElement, until } from '@vueuse/core'
-import { NButton, NDataTable, NFlex, NIcon, NPerformantEllipsis, NTooltip } from 'ithinkdt-ui'
+import { NButton, NDataTable, NFlex, NIcon, NPerformantEllipsis, NTooltip, dataTableProps } from 'ithinkdt-ui'
 import { Sortable } from 'sortablejs'
 import { computed, defineComponent, inject, mergeProps, nextTick, ref, shallowRef, toValue, useTemplateRef, watch, withDirectives } from 'vue'
 
 import { PAGE_INJECTION } from '@ithinkdt/page'
 
 import { vTooltip } from '../directives/index.js'
-import { useClsPrefix } from '../use-style.js'
+import useStyle, { c, cB, cE, useClsPrefix } from '../use-style.js'
 
 import { IHelp } from './assets.jsx'
 
@@ -124,16 +124,20 @@ export const DataTable = /* @__PURE__ */ defineComponent({
         selectedKeys: {
             type: Array,
         },
+        highlight: {
+            type: [Boolean, String, Number, Object],
+            default: true,
+        },
+        rowClassName: dataTableProps.rowClassName,
+        rowProps: dataTableProps.rowProps,
     },
-    emits: {
-        sort: () => true,
-        select: () => true,
-    },
+    emits: ['sort', 'select', 'custom', 'highlight'],
     setup(props, { slots, emit, expose }) {
         const { keyField } = inject(PAGE_INJECTION)
 
         const clsPrefix = useClsPrefix()
-        const cls = `${clsPrefix.value}-data-table`
+        const cls = `${clsPrefix.value}-datatable`
+        useStyle('-datatable', style, clsPrefix)
 
         const tableRef = useTemplateRef('table-ref')
 
@@ -165,7 +169,7 @@ export const DataTable = /* @__PURE__ */ defineComponent({
                 exposed.value.scrollToView = (key) => {
                     const index = props.data.findIndex(row => rowKey.value(row) === key)
                     if (index === -1) return
-                    const row = tableRef.value.$el.querySelector(`.${cls}-row-marker:nth-child(${index + 1})`)
+                    const row = tableRef.value.$el.querySelector(`.${cls}__row-marker:nth-child(${index + 1})`)
                     tableRef.value.scrollTo({
                         top: row.offsetTop,
                         behavior: 'smooth',
@@ -184,10 +188,33 @@ export const DataTable = /* @__PURE__ */ defineComponent({
             columns.value = _map(props.columns, width)
         }, { immediate: true, deep: 1 })
 
+        const highlightKey = ref()
+        watch(() => props.highlight, (val) => {
+            highlightKey.value = typeof val === 'boolean' ? null : (val ?? null)
+        }, { immediate: true })
         const rowClassName = computed(() => {
             return (row, i) => {
-                const p = props.rowClassName?.(row, i) || ''
-                return p + ` ${cls}-row-marker`
+                return [
+                    props.rowClassName?.(row, i) || '',
+                    `${cls}__row-marker`,
+                    (highlightKey.value != null && rowKey.value(row) === highlightKey.value) ? `${cls}__row-highlight` : '',
+                ].join(' ')
+            }
+        })
+        const rowProps = computed(() => {
+            return (row, i) => {
+                const props2 = props.rowProps?.(row, i)
+                return {
+                    ...props2,
+                    onClick: (e) => {
+                        const key = rowKey.value(row)
+                        if (props.highlight === true) {
+                            highlightKey.value = key
+                        }
+                        emit('highlight', key)
+                        props2?.onClick?.(e)
+                    },
+                }
             }
         })
 
@@ -207,6 +234,13 @@ export const DataTable = /* @__PURE__ */ defineComponent({
             emit('select', keys)
         }
 
+        const onColumnResize = (resizedWidth, limitedWidth, column) => {
+            emit('custom', {
+                key: column.key,
+                width: resizedWidth,
+            })
+        }
+
         return () => (
             <NDataTable
                 class={cls}
@@ -217,9 +251,11 @@ export const DataTable = /* @__PURE__ */ defineComponent({
                 ref="table-ref"
                 scrollX={width.value}
                 rowClassName={rowClassName.value}
+                rowProps={rowProps.value}
                 checkedRowKeys={props.selectedKeys}
                 onUpdateSorter={onUpdateSorter}
                 onUpdateCheckedRowKeys={onUpdateCheckedRowKeys}
+                onUnstableColumnResize={onColumnResize}
             >
                 {slots}
             </NDataTable>
@@ -227,6 +263,17 @@ export const DataTable = /* @__PURE__ */ defineComponent({
     },
 })
 
+const style = /* @__PURE__ */ cB(
+    'datatable',
+    [
+        cE('row-highlight', [
+            c('& > td', {
+                backgroundColor: 'var(--n-tr-highlight-color, var(--n-merged-border-color)) !important',
+            }),
+        ]),
+    ],
+)
+
 export function useDataTableDrag(
     tableRef,
     { data, onSort, ...options }) {

package/src/components.d.ts

@@ -149,6 +149,7 @@ export type DataTableProps<Data extends {}, KeyField extends keyof Data>
         data?: Data[] | undefined
         keyField?: KeyField | undefined
         selectedKeys?: Data[KeyField][] | undefined
+        highlight?: boolean | Data[KeyField] | undefined
         sorter?: SortParams<Data> | undefined
         onSort?: MaybeArray<(param: SortParams<Data>) => void> | undefined
         onSelect?: MaybeArray<(param: NonNullable<Data[KeyField]>[]) => void> | undefined
@@ -157,6 +158,8 @@ export type DataTableProps<Data extends {}, KeyField extends keyof Data>
 export type DataTableEmits<Data extends {}, KeyField extends keyof Data> = {
     (e: 'sort', param: SortParams<Data>): void
     (e: 'select', param: Data[KeyField][]): void
+    (e: 'highlight', rowKey: Data[KeyField]): void
+    (e: 'custom', params: { key: string, width: number }): void
 }
 
 export type DataTableInst<Data extends {}, KeyField extends keyof Data> = NDataTableInst & {
@@ -182,7 +185,7 @@ export declare function useDataTableDrag<T>(
     { data, onSort, ...options }: {
         data: MaybeRef<T[]>
         onSort: (info: { from: number, to: number }) => void
-    } & Omit<Sortable.Options, 'onSort'>
+    } & Omit<Sortable.Options, 'onSort'>,
 ): void
 
 export type DataPaginationProps = (PageParams | { page: PageParams }) & {
@@ -302,7 +305,7 @@ export declare function DataLocaleInput(
 export declare function useLocaleEdit(
     title: VNodeChild | (() => VNodeChild),
     onSubmit: (data: Record<string, string | undefined>) => void,
-    defaultRows?: MaybeRef<number | undefined>
+    defaultRows?: MaybeRef<number | undefined>,
 ): {
     open(this: void, data: MaybePromise<Record<string, string | undefined>>, readonly?: boolean): PromiseLike<Record<string, string | undefined>>
     setSupports(this: void, supports: { label: string, value: string, required?: boolean }[]): void

package/src/page.d.ts

@@ -1,44 +1,46 @@
 import {
-    CheckboxProps, DatePickerProps, DatePickerSlots,
+    CheckboxProps,
+    DatePickerProps, DatePickerSlots,
     DrawerContentProps, DrawerProps,
     InputNumberProps, InputNumberSlots, InputProps, InputSlots,
     ModalOptions,
     SelectGroupOption, SelectOption, SelectProps, SelectSlots,
-    UploadFileInfo,
+    UploadFileInfo, UploadProps,
 } from 'ithinkdt-ui'
-import { MaybeRef, VNode, VNodeProps } from 'vue'
+import { MaybeRef, VNode } from 'vue'
 
+import { PublicProps } from '@ithinkdt/common'
 import { DictItem, DictTypeKey } from '@ithinkdt/common/dict'
 import { PageOptions } from '@ithinkdt/page'
 
 import { CheckboxesProps, RadiosProps, UserDeptProps, UserGroupOption } from './components'
 
-type DeepMaybeRef<T extends {}> = {
+type ShallowMaybeRef<T extends {}> = {
     [Key in (keyof T)]: MaybeRef<T[Key]>
 }
 
 declare module '@ithinkdt/page' {
     interface FormComponentPresets {
         input: {
-            props?: DeepMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
-            slots?: InputSlots
+            inputProps?: ShallowMaybeRef<Omit<InputProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            inputSlots?: InputSlots
         }
         number: {
-            props?: DeepMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
-            slots?: InputNumberSlots
+            numberProps?: ShallowMaybeRef<Omit<InputNumberProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            numberSlots?: InputNumberSlots
         }
         select: {
-            props?: DeepMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & VNodeProps
+            selectProps?: ShallowMaybeRef<Omit<SelectProps, 'options' | 'value' | 'onUpdate:value' | 'disabled'> & PublicProps
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | (SelectOption | SelectGroupOption)[] | undefined
             }>
-            slots?: SelectSlots
+            selectSlots?: SelectSlots
         }
 
         checkbox: {
-            props?: DeepMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & VNodeProps
-            slots?: {
+            checkboxProps?: ShallowMaybeRef<Omit<CheckboxProps, 'checked' | 'onUpdate:checked' | 'disabled'>> & PublicProps
+            checkboxSlots?: {
                 default?: (() => VNode[]) | undefined
                 checked?: (() => VNode[]) | undefined
                 unchecked?: (() => VNode[]) | undefined
@@ -46,45 +48,59 @@ declare module '@ithinkdt/page' {
         }
 
         checkboxes: {
-            props?: DeepMaybeRef<Omit<CheckboxesProps, 'disabled'> & VNodeProps
+            checkboxesProps?: ShallowMaybeRef<Omit<CheckboxesProps, 'disabled'> & PublicProps
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | undefined
             }>
-            slots?: { }
+            checkboxesSlots?: { }
         }
 
         radios: {
-            props?: DeepMaybeRef<Omit<RadiosProps, 'disabled'> & VNodeProps
+            radiosProps?: ShallowMaybeRef<Omit<RadiosProps, 'disabled'> & PublicProps
             & {
                 dictType?: DictTypeKey | undefined
                 options?: DictItem[] | undefined
             }>
-            slots?: { }
+            radiosSlots?: { }
         }
 
         datepicker: {
-            props?: DeepMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & VNodeProps
-            slots?: DatePickerSlots
+            datepickerProps?: ShallowMaybeRef<Omit<DatePickerProps, 'value' | 'onUpdate:value' | 'disabled'>> & PublicProps
+            datepickerSlots?: DatePickerSlots
         }
 
         file: {
-            props?: DeepMaybeRef<{
+            fileProps?: ShallowMaybeRef<{
                 type?: 'file' | 'image' | undefined
                 multiple?: boolean | undefined
                 max?: number | undefined
                 accept?: string | undefined
                 maxSize?: number | undefined
-            } & VNodeProps>
-            slots?: {
+                onBeforeUpload?: UploadProps['onBeforeUpload']
+            } & PublicProps>
+            fileSlots?: {
+                default?: (() => VNode[]) | undefined
+            }
+        }
+        upload: {
+            uploadProps?: ShallowMaybeRef<{
+                type?: 'file' | 'image' | undefined
+                multiple?: boolean | undefined
+                max?: number | undefined
+                accept?: string | undefined
+                maxSize?: number | undefined
+                onBeforeUpload?: UploadProps['onBeforeUpload']
+            } & PublicProps>
+            uploadSlots?: {
                 default?: (() => VNode[]) | undefined
             }
         }
 
         user: {
-            props?: DeepMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
-            | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & VNodeProps
-            slots?: {}
+            uploadProps?: ShallowMaybeRef<Omit<UserDeptProps<boolean>, 'modelValue' | 'onUpdate:modelValue' | 'disabled'
+            | 'users' | 'groups' | 'depts' | 'getUsersByGroup' | 'getUsersByDept'>> & PublicProps
+            uploadSlots?: {}
         }
     }
 
@@ -128,9 +144,9 @@ declare module '@ithinkdt/page' {
     }
 
     type ModalOptionsKey = 'type' | keyof import('@ithinkdt/page').ModalOptions
-    interface ModalDrawerOptions extends DeepMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, DeepMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
+    interface ModalDrawerOptions extends ShallowMaybeRef<Omit<DrawerContentProps, ModalOptionsKey>>, ShallowMaybeRef<Omit<DrawerProps, ModalOptionsKey>> { }
 
-    interface ModalDialogOptions extends DeepMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
+    interface ModalDialogOptions extends ShallowMaybeRef<Omit<ModalOptions, ModalOptionsKey>> {}
 }
 
 export declare function createPageFormHelper(options?: {
@@ -142,6 +158,7 @@ export declare function createPageFormHelper(options?: {
     uploadFile?: (file: File, options?: {
         onProgress?: ((percent: number) => void) | undefined
     }) => Promise<string>
+    getFileInfos?: (files: string[]) => Promise<UploadFileInfo[]>
 }): PageOptions['getFormItemRenderer']
 export declare function createPageTableHelper(options?: {
     getUsersByUsername?: (usernames: string[]) => Promise<{ username: string, nickname: string }[]>

package/src/page.jsx

@@ -1,10 +1,10 @@
+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,
+    NInputNumber, NModal, NScrollbar, NSelect, NText, NUpload, useMessage,
 } from 'ithinkdt-ui'
-import { defineComponent, h, mergeProps, unref } from 'vue'
+import { computed, defineComponent, h, mergeProps, shallowRef, unref } from 'vue'
 
 import { useDict, useDictMap } from '@ithinkdt/common/dict'
 
@@ -14,64 +14,68 @@ import { useI18n } from './use-i18n.js'
 const mapProps = (props) => {
     return Object.fromEntries(Object.entries(props || {}).map(([prop, value]) => [prop, unref(value)]))
 }
-export function createPageFormHelper({
-    getUserGroups, getUsersByGroup, getUsersByDept, getUsersByUsername, uploadFile,
-}) {
-    const SimpleUpload = defineComponent({
-        name: 'SimpleUpload',
-        props: {
-            type: { type: String, default: 'file' }, // file | image
-            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] },
-        },
-        setup(props, { slots }) {
-            const { t } = useI18n()
 
-            const message = useMessage()
-            const customRequest = computed(() => props.customRequest || (
-                async ({ file, onProgress, onFinish, onError }) => {
-                    uploadFile(file, percent => onProgress({ percent }))
-                        .then((id) => {
-                            file.file.fileId = id
-                            onFinish()
-                        }).catch((error) => {
-                            message.success(error.message)
-                            onError(error)
-                        })
-                }
-            ))
-            return () => {
-                const { type, onUpdateFileList, ...props0 } = props
-                return (
-                    <NUpload
-                        {...props0}
-                        onFinish={({ file, event }) => {
-                            props0.onFinish?.({ file, event })
-                            return {
-                                ...file,
-                                id: file.file.fileId,
-                            }
-                        }}
-                        customRequest={customRequest.value}
-                        listType={type === 'image' ? 'image-card' : 'text'}
-                        accept={props0.accept ?? type === 'image' ? 'image/*' : undefined}
-                        onUpdate:fileList={onUpdateFileList}
-                    >
-                        {{
-                            default: () => <NButton disabled={props.disabled}>{t('common.page.form.selectFileText')}</NButton>,
-                            ...slots,
-                        }}
-                    </NUpload>
-                )
+const SimpleUpload = /* @__PURE__ */ defineComponent({
+    name: 'SimpleUpload',
+    props: {
+        type: { type: String, default: 'file' }, // file | image
+        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 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())
+            },
+        })
+        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={onUpdateFileList}
+                >
+                    {{
+                        default: () => <NButton disabled={props.disabled}>{t('common.page.form.selectFileText')}</NButton>,
+                        ...slots,
+                    }}
+                </NUpload>
+            )
+        }
+    },
+})
 
+export function createPageFormHelper({
+    getUserGroups, getUsersByGroup, getUsersByDept, getUsersByUsername, uploadFile, getFileInfos,
+}) {
     return {
         input: () => (
             { slots, props },
@@ -298,9 +302,10 @@ export function createPageFormHelper({
             ) => {
                 props = mapProps(props)
                 if (readonly) {
-                    if (modelValue.length === 0) return
+                    console.warn(`[file] 原则上此组建不应该显示在详情中`)
+                    if (fileList.value.length === 0) return
                     return (
-                        <NFlex gap="8" wrap>
+                        <NFlex gap="8" vertical>
                             {modelValue.map(it => (
                                 <a
                                     key={it.id}
@@ -318,11 +323,97 @@ export function createPageFormHelper({
                 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?.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 (