@ithinkdt/ui 4.0.0-19 → 4.0.0-200

package/src/components/UserDept.jsx

@@ -1,643 +0,0 @@
-import {
-    NAvatar, NAvatarGroup, NButton, NCard, NCheckbox, NDropdown, NEmpty, NH4, NIcon,
-    NList, NListItem, NPopover, NRadio, NSelect, NSpin, NTag, NTransfer, NTree, NTreeSelect,
-} from 'ithinkdt-ui'
-import { computed, defineComponent, nextTick, reactive, ref, shallowRef, watch } from 'vue'
-
-import { flattenTree, walkTree } from '@ithinkdt/common'
-
-import { useI18n } from '../use-i18n.js'
-
-import { IAccount, IDept, IGroup, ILeft, IRight } from './assets.jsx'
-
-export const DtUserDept = defineComponent({
-    name: 'UserDept',
-    inheritAttrs: false,
-    props: {
-        users: { type: Array, default: () => [] },
-        groups: { type: Array, default: () => [] },
-        depts: { type: Array, default: () => [] },
-        modelValue: { type: [Array, String], default: undefined },
-        placeholder: { type: String, default: undefined },
-        size: { type: String, default: undefined },
-        type: { type: String, default: 'user' },
-        selectType: { type: String, default: 'dropdown' },
-        max: { type: Number, default: undefined },
-        multiple: { type: Boolean, default: false },
-        defaultExpandAll: { type: Boolean, default: false },
-        filterable: { type: Boolean, default: false },
-        disabled: { type: Boolean, default: undefined },
-        getUsersByGroup: { type: Function, default: () => [] },
-        getUsersByDept: { type: Function, default: () => [] },
-    },
-    emits: ['update:modelValue', 'updateModelValue'],
-    setup(props, { emit, attrs }) {
-        const { t } = useI18n()
-
-        const valueArray = computed(() => {
-            if (props.multiple) {
-                return props.modelValue || []
-            }
-            const value = props.modelValue?.trim()
-            return value ? [value] : []
-        })
-
-        const userMap = new Map()
-        const users2 = computed(() => {
-            userMap.clear()
-            return props.users.map((u) => {
-                u = reactive(u)
-                u.label = u.nickname
-                u.value = u.username
-                u.type = 'user'
-
-                userMap.set(u.username, u)
-                return u
-            })
-        })
-        const deptArray = shallowRef([])
-
-        watch(
-            () => props.depts,
-            (depts) => {
-                walkTree(depts, (d) => {
-                    d.label = d.name
-                    d.value = d.code
-                    d.type = 'dept'
-                    if (!d.children?.length) {
-                        delete d.children
-                    }
-                })
-                deptArray.value = flattenTree(depts)
-            },
-            { immediate: true },
-        )
-        const userArray = computed(() => {
-            return [
-                ...props.depts,
-                ...props.groups.map((g) => {
-                    return { label: g.name, value: g.code, type: 'group' }
-                }),
-                ...users2.value,
-            ]
-        })
-
-        const depth = ref([])
-        const current = ref()
-
-        const loadChildren = async (it) => {
-            const data = await (it.type === 'group' ? props.getUsersByGroup(it.value) : props.getUsersByDept(it.value))
-
-            for (const u of users2.value) {
-                u.disabled = true
-            }
-
-            current.value = [
-                ...(it.type === 'dept' ? it.children ?? [] : []),
-                ...data.map((u) => {
-                    const u2 = userMap.get(u.username)
-                    if (u2) u2.disabled = false
-
-                    return {
-                        ...u,
-                        label: u.nickname,
-                        value: u.username,
-                        type: 'user',
-                    }
-                }),
-            ]
-        }
-
-        const valuesMap = new WeakMap()
-
-        const renderSourceList = (value, onUpdateValue, pattern) => {
-            if (props.type === 'dept') {
-                return (
-                    <NTree
-                        data={props.depts}
-                        keyField="value"
-                        labelField="name"
-                        defaultExpandAll={props.defaultExpandAll}
-                        checkable={props.multiple}
-                        selectable={!props.multiple}
-                        multiple={false}
-                        blockLine
-                        checkOnClick
-                        pattern={pattern}
-                        filter={(pattern, it) => it.label.includes(pattern) || it.value.includes(pattern)}
-                        checkedKeys={props.multiple ? value : undefined}
-                        selectedKeys={props.multiple ? undefined : value}
-                        onUpdateCheckedKeys={(checkedKeys) => {
-                            if (props.max && checkedKeys?.length > props.max) return
-                            onUpdateValue(checkedKeys)
-                        }}
-                        onUpdateSelectedKeys={(selectedKeys) => {
-                            onUpdateValue(selectedKeys)
-                        }}
-                    />
-                )
-            }
-
-            let valueSet = value ? valuesMap.get(value) : new Set()
-            if (value && !valueSet) {
-                valueSet = new Set(value)
-                valuesMap.set(value, valueSet)
-            }
-
-            if (current.value === false) {
-                return <NSpin show />
-            }
-
-            let list = current.value || userArray.value
-
-            pattern = pattern?.trim()
-            if (pattern) {
-                list = list?.filter(it => it.label.includes(pattern) || it.value.includes(pattern))
-            }
-
-            const depths = depth.value
-            return (
-                <>
-                    <div style="margin: 12px 16px; display: flex; justify-content: space-between; align-items: center">
-                        {
-                            depths.length > 0
-                                ? (
-                                        <>
-                                            <span style="display: flex; align-items: center">
-                                                {depths.length >= 2 ? depths.at(-2).label : t('common.all')}
-                                                <span style="padding: 0 4px">
-                                                    <IRight />
-                                                </span>
-                                                {depths.at(-1).label}
-                                            </span>
-                                            <NButton
-                                                text
-                                                type="warning"
-                                                onClick={() => {
-                                                    depths.pop()
-                                                    current.value = depths.length > 0 ? false : undefined
-                                                    if (depths.length > 0) {
-                                                        loadChildren(depths.at(-1))
-                                                    } else {
-                                                        for (const u of users2.value) {
-                                                            u.disabled = false
-                                                        }
-                                                    }
-                                                }}
-                                            >
-                                                <NIcon>
-                                                    <ILeft />
-                                                </NIcon>
-                                                {t('common.back')}
-                                            </NButton>
-                                        </>
-                                    )
-                                : (
-                                        <span>{t('common.all')}</span>
-                                    )
-                        }
-                    </div>
-
-                    {list?.length
-                        ? (
-                                <NList showDivider={false} style="padding: 0 16px">
-                                    {list.map((it) => {
-                                        return (
-                                            <NListItem key={it.type + '_' + it.value} style="padding: 6px 0">
-                                                {it.type === 'user'
-                                                    ? (
-                                                            props.multiple
-                                                                ? (
-                                                                        <NCheckbox
-                                                                            checked={valueSet.has(it.value) || false}
-                                                                            onUpdateChecked={(checked) => {
-                                                                                if (checked && props.max && value.length >= props.max) return
-
-                                                                                const values = [...(value || [])]
-                                                                                if (checked) {
-                                                                                    values.push(it.value)
-                                                                                } else {
-                                                                                    const i = values.indexOf(it.value)
-                                                                                    values.splice(i, 1)
-                                                                                }
-                                                                                onUpdateValue(values)
-                                                                            }}
-                                                                            style="margin-left: 3px"
-                                                                        >
-                                                                            {renderUsers([it], {
-                                                                                max: 1,
-                                                                                size: 24,
-                                                                                placement: 'right',
-                                                                            })}
-                                                                        </NCheckbox>
-                                                                    )
-                                                                : (
-                                                                        <NRadio
-                                                                            checked={valueSet.has(it.value) || false}
-                                                                            onUpdateChecked={(checked) => {
-                                                                                onUpdateValue(checked ? [it.value] : [])
-                                                                            }}
-                                                                            style="margin-left: 3px"
-                                                                        >
-                                                                            {renderUsers([it], {
-                                                                                max: 1,
-                                                                                size: 24,
-                                                                                placement: 'right',
-                                                                            })}
-                                                                        </NRadio>
-                                                                    )
-                                                        )
-                                                    : (
-                                                            <div
-                                                                onClick={() => {
-                                                                    current.value = false
-                                                                    depth.value.push(it)
-                                                                    loadChildren(it)
-                                                                }}
-                                                                style="cursor: pointer; display: flex; align-items: center; gap: 8px"
-                                                            >
-                                                                {it.type === 'dept'
-                                                                    ? (
-                                                                            <NAvatar size={24} style="background-color: red">
-                                                                                <NIcon>
-                                                                                    <IDept />
-                                                                                </NIcon>
-                                                                            </NAvatar>
-                                                                        )
-                                                                    : (
-                                                                            <NAvatar size={24} style="background-color: green">
-                                                                                <NIcon>
-                                                                                    <IGroup />
-                                                                                </NIcon>
-                                                                            </NAvatar>
-                                                                        )}
-                                                                <span style="flex: 1 1 auto">{it.label}</span>
-                                                                <NIcon>
-                                                                    <IRight />
-                                                                </NIcon>
-                                                            </div>
-                                                        )}
-                                            </NListItem>
-                                        )
-                                    })}
-                                </NList>
-                            )
-                        : (
-                                <NEmpty />
-                            )}
-                </>
-            )
-        }
-
-        const renderTargetListEmpty = () => {
-            return <NEmpty description={props.placeholder} />
-        }
-
-        const renderTransfer = (props2, options, value, onUpdateValue, onUpdateValue2) => {
-            return (
-                <NTransfer
-                    {...props2}
-                    key={props.type}
-                    options={options}
-                    renderSourceList={({ onCheck, pattern }) => renderSourceList(value, onCheck, pattern)}
-                    renderTargetList={
-                        props.placeholder?.trim() && !props.modelValue?.length ? renderTargetListEmpty : undefined
-                    }
-                    sourceFilterable={props.filterable}
-                    size={props.size}
-                    disabled={props.disabled || undefined}
-                    value={value}
-                    filter={(pattern, it) => it.label.includes(pattern) || it.value.includes(pattern)}
-                    onUpdate:value={(v) => {
-                        onUpdateValue?.(v)
-                    }}
-                    onUpdateValue={(v) => {
-                        onUpdateValue2?.(v)
-                    }}
-                />
-            )
-        }
-
-        const renderTag = ({ option, handleClose }) => {
-            return (
-                <NTag
-                    type={props.type === 'user' ? 'primary' : 'info'}
-                    closable
-                    onMousedown={e => e.preventDefault()}
-                    onClose={(e) => {
-                        e.stopPropagation()
-                        handleClose()
-                    }}
-                >
-                    {option.label}
-                </NTag>
-            )
-        }
-
-        const emitValue = (v, k = 'updateModelValue') => {
-            if (props.multiple) {
-                emit(k, v)
-            } else {
-                emit(k, v?.[0])
-            }
-        }
-
-        const selectRef = ref()
-        let opened = false
-        const showDialog = () => {
-            if (opened) return
-
-            opened = true
-            const valueRef = shallowRef([...(valueArray.value || [])])
-            $dialog({
-                showIcon: false,
-                title: props.placeholder,
-                style: {
-                    width: '700px',
-                },
-
-                content: () => {
-                    const options = props.type === 'user' ? users2.value : deptArray.value
-                    return (
-                        <div style={{ height: '550px' }}>
-                            {renderTransfer(
-                                { style: { height: '100%' } },
-                                options,
-                                valueRef.value,
-                                v => (valueRef.value = v),
-                            )}
-                        </div>
-                    )
-                },
-
-                onOk() {
-                    emitValue(valueRef.value, 'update:modelValue')
-                    emitValue(valueRef.value, 'updateModelValue')
-                },
-                onAfterLeave() {
-                    nextTick(() => {
-                        selectRef.value?.blur()
-                        opened = false
-                    })
-                },
-            })
-        }
-
-        const selectSlots = {
-            arrow: () => {
-                return <NIcon>{props.type === 'user' ? <IGroup /> : <IDept />}</NIcon>
-            },
-        }
-        return () => {
-            const options = props.type === 'user' ? users2.value : deptArray.value
-
-            if (props.selectType === 'dropdown' && props.type === 'dept') {
-                return (
-                    <NTreeSelect
-                        options={options}
-                        keyField="value"
-                        defaultExpandAll={props.defaultExpandAll}
-                        checkable={props.multiple}
-                        multiple={props.multiple}
-                        filter={(pattern, it) => it.label.includes(pattern) || it.value.includes(pattern)}
-                        value={props.modelValue}
-                        onUpdateValue={(v) => {
-                            if (props.multiple && props.max && v?.length > props.max) return
-                            emit('updateModelValue', v)
-                        }}
-                        onUpdate:value={(v) => {
-                            if (props.multiple && props.max && v?.length > props.max) return
-                            emit('update:modelValue', v)
-                        }}
-                    >
-                        {selectSlots}
-                    </NTreeSelect>
-                )
-            }
-
-            if (props.selectType === 'transfer') {
-                return renderTransfer(
-                    attrs,
-                    options,
-                    valueArray.value,
-                    v => emitValue(v, 'update:modelValue'),
-                    v => emitValue(v, 'updateModelValue'),
-                )
-            }
-
-            const isDropdown = props.selectType === 'dropdown'
-
-            return (
-                <NSelect
-                    {...attrs}
-                    key={props.type}
-                    ref={selectRef}
-                    show={isDropdown ? undefined : false}
-                    filterable={isDropdown ? props.filterable : false}
-                    options={options}
-                    multiple={props.multiple}
-                    size={props.size}
-                    placeholder={props.placeholder}
-                    disabled={props.disabled || undefined}
-                    value={props.modelValue}
-                    renderTag={props.multiple ? renderTag : undefined}
-                    onFocus={isDropdown ? undefined : showDialog}
-                    onUpdateValue={(v) => {
-                        emit('updateModelValue', v)
-                    }}
-                    onUpdate:value={(v) => {
-                        emit('update:modelValue', v)
-                    }}
-                >
-                    {selectSlots}
-                </NSelect>
-            )
-        }
-    },
-})
-
-function renderUser(user, showName, { placement, size }) {
-    const name = user.nickname.split(' ').at(-1)
-    let text = name
-
-    if (/^[\u4E00-\u9FA5]+$/.test(name)) {
-        // 全中文
-        const l = name.length
-        text = l >= 3 ? name.slice(-2) : name
-    } else {
-        if (name.length > 4) {
-            text = (
-                <NIcon>
-                    <IAccount />
-                </NIcon>
-            )
-        }
-    }
-    return (
-        <NPopover key={user.username} raw placement={placement}>
-            {{
-                default: () => {
-                    return (
-                        <NCard style="width: 200px" size="small">
-                            <NH4>{user.nickname}</NH4>
-                            <span>{user.username}</span>
-                        </NCard>
-                    )
-                },
-                trigger: () => {
-                    const avatar = (
-                        <NAvatar
-                            color="var(--color-primary)"
-                            round
-                            size={size}
-                            style={showName ? { position: 'absolute', bottom: -(size - 20) / 2 + 'px' } : ''}
-                        >
-                            {text}
-                        </NAvatar>
-                    )
-                    return showName
-                        ? (
-                                <div
-                                    style={
-                                        showName
-                                            ? {
-                                                    display: 'inline-block',
-                                                    minWidth: size + 'px',
-                                                    height: size + 'px',
-                                                }
-                                            : ''
-                                    }
-                                >
-                                    {avatar}
-
-                                    {showName
-                                        ? (
-                                                <span style={{ marginLeft: size + 6 + 'px' }}>{user.nickname}</span>
-                                            )
-                                        : undefined}
-                                </div>
-                            )
-                        : (
-                                avatar
-                            )
-                },
-            }}
-        </NPopover>
-    )
-}
-
-export function renderUsers(users, options = {}) {
-    options.size ||= 24
-    options.max ||= 4
-    const { max, size } = options
-    if (users.length <= 1) {
-        return <span style="position: relative">{users.map(u => renderUser(u, true, options))}</span>
-    }
-    return (
-        <span style={{ display: 'inline-block', height: size + 'px' }}>
-            <NAvatarGroup options={users} size={size} max={max || 4} style="top: -2px">
-                {{
-                    avatar: ({ option }) => {
-                        return renderUser(option, false, options)
-                    },
-                    rest: ({ options, rest }) => {
-                        return (
-                            <NDropdown
-                                options={options}
-                                keyField="username"
-                                labelField="nickname"
-                                renderOption={({ option }) => renderUser(option, false, options)}
-                            >
-                                <NAvatar>
-                                    +
-                                    {rest}
-                                </NAvatar>
-                            </NDropdown>
-                        )
-                    },
-                }}
-            </NAvatarGroup>
-        </span>
-    )
-}
-
-export const DtDeptRender = /* @__PURE__ */ defineComponent({
-    name: 'DeptRender',
-    props: {
-        value: [String, Array],
-        multiple: Boolean,
-        getDeptsByCode: Function,
-    },
-    setup(props) {
-        const depts = ref([])
-        const map = {}
-        watch([() => props.modelValue, () => props.multiple],
-            ([value, multiple]) => {
-                depts.value = []
-                const deptcodes = value ? (multiple ? (Array.isArray(value) ? value : value.trim() ? value.trim().split(',') : []) : [value]) : []
-
-                const deptcodes1 = []
-                for (const [i, code] of deptcodes.entries()) {
-                    if (!map[code]) {
-                        const d = reactive({ code, name: code })
-                        map[code] = d
-                        deptcodes1.push(code)
-                    }
-
-                    depts.value[i] = map[code]
-                }
-                if (deptcodes1.length > 0) {
-                    props.getDeptsByCode(deptcodes1).then((data) => {
-                        for (const it of data) {
-                            Object.assign(map[it.code], it)
-                        }
-                    })
-                }
-            },
-            { immediate: true },
-        )
-        return () => depts.value.map(dept => <NTag key={dept.code}>{dept.name}</NTag>)
-    },
-})
-
-export const DtUserRender = /* @__PURE__ */ defineComponent({
-    name: 'UserRender',
-    props: {
-        value: [String, Array],
-        multiple: Boolean,
-        max: Number,
-        size: Number,
-        placement: String,
-        getUsersByUsername: Function,
-    },
-    setup(props) {
-        const users = ref([])
-        const map = {}
-        watch([() => props.modelValue, () => props.multiple],
-            ([value, multiple]) => {
-                users.value = []
-                const usernames = value ? (multiple ? (Array.isArray(value) ? value : value.trim() ? value.trim().split(',') : []) : [value]) : []
-
-                const usernames1 = []
-                for (const [i, code] of usernames.entries()) {
-                    if (!map[code]) {
-                        const d = reactive({ code, name: code })
-                        map[code] = d
-                        usernames1.push(code)
-                    }
-
-                    users.value[i] = map[code]
-                }
-                if (usernames1.length > 0) {
-                    props.getUsersByUsername(usernames1).then((data) => {
-                        for (const it of data) {
-                            Object.assign(map[it.code], it)
-                        }
-                    })
-                }
-            },
-            { immediate: true },
-        )
-        return () => renderUsers(users.value, props)
-    },
-})