@ithinkdt/ui 4.0.0-10 → 4.0.0-11

package/src/components/UserDept.jsx

@@ -0,0 +1,643 @@
+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: () => [] },
+        value: { 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.value || []
+            }
+            const value = props.value?.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.value?.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.value}
+                        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.value}
+                    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.value, () => 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.value, () => 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)
+    },
+})