@ithinkdt/naive/src/frame/module/curd.js

iThinkDT Naive UI

import { computed, ref, unref, reactive, h } from 'vue'

import { asyncComputed, syncRef } from '@vueuse/core'
import { NDynamicInput, NSelect, NTag } from 'ithinkdt-ui'

import { useI18n, lang, useCurd, useCoreCtx, useDict, useDictMap } from '@ithinkdt/core'

export function useModuleCurd(save, del, { lcSelectable, width, height, apps, getPages, forms, colls, loader }) {
    const { getIcon } = useCoreCtx()

    const { t, $t } = useI18n()

    const curdType = ref('add')

    const moduleTypes = useDict('sys-module-types')
    const moduleTypeMap = useDictMap('sys-module-types')

    return useCurd({
        curd: { save, delete: del },
        width: computed(() => unref(width) || 508),
        contentStyle: reactive({
            minHeight: computed(() => {
                let h = unref(height) || 584
                h = typeof h === 'number' ? h + 'px' : h
                return `calc(${h} - ${curdType.value === 'add' ? '0px' : '58px'})`
            }),
        }),
        items: ({ fi, model, type, ...params }) => {
            syncRef(curdType, type, { direction: 'rtl' })

            const pages = asyncComputed(
                () => (lcSelectable.value ? unref(getPages)?.(model.remote || model.appCode) : []),
                [],
            )

            const items = [
                fi('type', 'radios', {
                    label: $t('sys.module.type'),
                    hidden: computed(() => type.value !== 'add'),
                    props: {
                        type: 'button',
                        options: computed(() =>
                            lcSelectable.value ? moduleTypes : moduleTypes.filter((t) => t.value !== 'lowcode'),
                        ),
                    },
                }),
                fi(
                    'type',
                    ({ value }) => {
                        return h(
                            NTag,
                            {
                                type: value === 'action' ? 'warning' : value === 'external' ? 'info' : 'primary',
                            },
                            moduleTypeMap.get(value)?.label,
                        )
                    },
                    {
                        label: $t('sys.module.type'),
                        hidden: computed(() => type.value === 'add'),
                    },
                ),

                fi('remote', 'select', {
                    label: $t('sys.module.remote'),
                    required: true,
                    hidden: computed(
                        () => model.type !== 'federate' && (!lcSelectable.value || model.type !== 'lowcode'),
                    ),
                    props: {
                        options: apps,
                        onUpdateValue() {
                            // eslint-disable-next-line unicorn/no-null
                            model.lcKey = null
                        },
                    },
                }),
                fi(
                    'lcKey',
                    ({ value, 'onUpdate:value': onUpdateValue }) => {
                        return lcSelectable.value
                            ? h(NSelect, {
                                  options: pages.value,
                                  value,
                                  onUpdateValue,
                              })
                            : h(NTag, { type: 'primary' }, pages.value.find((p) => p.value === value)?.label)
                    },
                    {
                        label: $t('sys.module.lcKey'),
                        required: true,
                        hidden: computed(() => model.type !== 'lowcode'),
                    },
                ),
                fi('path', 'input', {
                    label: (locale) =>
                        model.type === 'action' ? (locale === lang.zhCN ? '标识' : 'Mark') : t('sys.module.path'),

                    required: computed(() => ['federate', 'lowcode'].includes(model.type)),
                    props: {
                        onUpdateValue(v) {
                            if (model.type !== 'module') {
                                return
                            }
                            if (v?.[0] === '/') {
                                v = v.slice(1)
                            }
                            if (v?.at(-1) === '/') {
                                v = v.slice(0, -1)
                            }
                            v = v?.trim()
                            model.actionPathPrefix = `${model.appCode?.toLowerCase()}${v ? ':' + v.replaceAll('/', '-') : ''}:`
                        },
                    },
                }),
                fi('label', 'input', {
                    label: $t('sys.module.label'),
                    required: true,
                }),

                fi('sort', 'number|0', {
                    label: $t('sys.module.sort'),
                }),
                fi('icon', 'icon', {
                    label: $t('sys.module.icon'),
                    hidden: computed(() => model.type === 'action'),
                    props: {
                        accept: '.svg',
                        colls,
                        loader,
                    },
                    transform(v) {
                        return typeof v === 'string' ? getIcon(v) : v
                    },
                }),
                fi('hidden', 'checkbox', {
                    label: $t('sys.module.hidden'),
                    hidden: computed(() => model.type === 'action'),
                }),
                fi('resources', NDynamicInput, {
                    label: $t('sys.module.resources'),
                    hidden: computed(() => model.type === 'external'),
                }),
                fi('presetActions', 'checkboxs|sys-module-action-presets', {
                    label: (locale) => (locale === lang.zhCN ? '预设权限' : 'Preset Action'),
                    hidden: computed(() => type.value !== 'add' || !['module', 'federate'].includes(model.type)),
                }),
                fi('actionPathPrefix', 'input', {
                    label: (locale) => (locale === lang.zhCN ? '预设前缀' : 'Preset Prefix'),
                    hidden: computed(
                        () =>
                            type.value !== 'add' ||
                            !['module', 'federate'].includes(model.type) ||
                            !model.presetActions?.length,
                    ),
                }),
                fi('actionApiPrefix', 'input', {
                    label: (locale) => (locale === lang.zhCN ? '预设API前缀' : 'Preset API Prefix'),
                    hidden: computed(
                        () =>
                            type.value !== 'add' ||
                            !['module', 'federate'].includes(model.type) ||
                            !model.presetActions?.length,
                    ),
                }),
            ]
            return computed(() => {
                forms = unref(forms)
                return forms
                    ? Array.isArray(forms)
                        ? [...items, ...forms]
                        : forms({ fi, model, type, ...params, items })
                    : items
            })
        },
    })
}