菜单管理

src/api/user-boot/function.ts

@@ -0,0 +1,33 @@
+import createAxios from '@/utils/request'
+
+export const functionTree = () => {
+    return createAxios({
+        url: '/user-boot/function/functionTree'
+    })
+}
+
+// 新增菜单接口
+export function add(data: anyObj) {
+    return createAxios({
+        url: '/user-boot/function/add',
+        method: 'post',
+        data: data
+    })
+}
+
+// 修改菜单接口
+export function update(data: anyObj) {
+    return createAxios({
+        url: '/user-boot/function/update',
+        method: 'put',
+        data: data
+    })
+}
+
+// 删除菜单接口
+export function deleteMenu(id: string) {
+    return createAxios({
+        url: '/user-boot/function/delete?id=' + id,
+        method: 'delete',
+    })
+}

src/components/baInput/components/baUpload.vue

@@ -1,430 +0,0 @@
-<template>
-    <div class="w100">
-        <el-upload
-            ref="upload"
-            class="ba-upload"
-            :class="type"
-            v-model:file-list="state.fileList"
-            :auto-upload="false"
-            @change="onElChange"
-            @remove="onElRemove"
-            @preview="onElPreview"
-            @exceed="onElExceed"
-            v-bind="state.attr"
-            :key="state.key"
-        >
-            <!-- 插槽支持，不加 if 时 el-upload 样式会错乱 -->
-            <template v-if="slots.default" #default><slot name="default"></slot></template>
-            <template v-else #default>
-                <template v-if="type == 'image' || type == 'images'">
-                    <div v-if="!hideSelectFile" @click.stop="state.selectFile.show = true" class="ba-upload-select-image">
-                        {{ $t('utils.choice') }}
-                    </div>
-                    <Icon class="ba-upload-icon" name="el-icon-Plus" size="30" color="#c0c4cc" />
-                </template>
-                <template v-else>
-                    <el-button v-blur type="primary">
-                        <Icon name="el-icon-Plus" color="#ffffff" />
-                        <span>{{ $t('Upload') }}</span>
-                    </el-button>
-                    <el-button v-blur v-if="!hideSelectFile" @click.stop="state.selectFile.show = true" type="success">
-                        <Icon name="fa fa-th-list" size="14px" color="#ffffff" />
-                        <span class="ml-6">{{ $t('utils.choice') }}</span>
-                    </el-button>
-                </template>
-            </template>
-            <template v-if="slots.trigger" #trigger><slot name="trigger"></slot></template>
-            <template v-if="slots.tip" #tip><slot name="tip"></slot></template>
-            <template v-if="slots.file" #file><slot name="file"></slot></template>
-        </el-upload>
-        <el-dialog v-model="state.preview.show" class="ba-upload-preview">
-            <div class="ba-upload-preview-scroll ba-scroll-style">
-                <img :src="state.preview.url" class="ba-upload-preview-img" alt="" />
-            </div>
-        </el-dialog>
-        <SelectFile v-model="state.selectFile.show" v-bind="state.selectFile" @choice="onChoice" />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, watch, useSlots, nextTick } from 'vue'
-import { genFileId } from 'element-plus'
-import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile, UploadFiles } from 'element-plus'
-import { stringToArray } from '@/components/baInput/helper'
-import { fullUrl, arrayFullUrl, getFileNameFromPath, getArrayKey } from '@/utils/common'
-import { fileUpload } from '@/api/common'
-import SelectFile from '@/components/baInput/components/selectFile.vue'
-import { uuid } from '@/utils/random'
-import { cloneDeep, isEmpty } from 'lodash-es'
-import type { AxiosProgressEvent } from 'axios'
-import Sortable from 'sortablejs'
-
-type Writeable<T> = { -readonly [P in keyof T]: T[P] }
-interface Props {
-    type: 'image' | 'images' | 'file' | 'files'
-    // 上传请求时的额外携带数据
-    data?: anyObj
-    modelValue: string | string[]
-    // 返回绝对路径
-    returnFullUrl?: boolean
-    // 隐藏附件选择器
-    hideSelectFile?: boolean
-    // 可自定义el-upload的其他属性
-    attr?: Partial<Writeable<UploadProps>>
-    // 强制上传到本地存储
-    forceLocal?: boolean
-}
-interface UploadFileExt extends UploadUserFile {
-    serverUrl?: string
-}
-interface UploadProgressEvent extends AxiosProgressEvent {
-    percent: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    type: 'image',
-    data: () => {
-        return {}
-    },
-    modelValue: () => [],
-    returnFullUrl: false,
-    hideSelectFile: false,
-    attr: () => {
-        return {}
-    },
-    forceLocal: false,
-})
-
-const emits = defineEmits<{
-    (e: 'update:modelValue', value: string | string[]): void
-}>()
-
-const slots = useSlots()
-const upload = ref<UploadInstance>()
-const state: {
-    key: string
-    // 返回值类型，通过v-model类型动态计算
-    defaultReturnType: 'string' | 'array'
-    // 预览弹窗
-    preview: {
-        show: boolean
-        url: string
-    }
-    // 文件列表
-    fileList: UploadFileExt[]
-    // el-upload的属性对象
-    attr: Partial<UploadProps>
-    // 正在上传的文件数量
-    uploading: number
-    // 显示选择文件窗口
-    selectFile: {
-        show: boolean
-        type?: 'image' | 'file'
-        limit?: number
-        returnFullUrl: boolean
-    }
-    events: anyObj
-} = reactive({
-    key: uuid(),
-    defaultReturnType: 'string',
-    preview: {
-        show: false,
-        url: '',
-    },
-    fileList: [],
-    attr: {},
-    uploading: 0,
-    selectFile: {
-        show: false,
-        type: 'file',
-        returnFullUrl: props.returnFullUrl,
-    },
-    events: [],
-})
-
-const onElChange = (file: UploadFileExt, files: UploadFiles) => {
-    // 将 file 换为 files 中的对象，以便修改属性等操作
-    const fileIndex = getArrayKey(files, 'uid', file.uid!)
-    if (!fileIndex) return
-    file = files[fileIndex] as UploadFileExt
-    if (!file || !file.raw) return
-    if (typeof state.events['beforeUpload'] == 'function' && state.events['beforeUpload'](file) === false) return
-    let fd = new FormData()
-    fd.append('file', file.raw)
-    fd = formDataAppend(fd)
-    state.uploading++
-    fileUpload(fd, { uuid: uuid() }, props.forceLocal, {
-        onUploadProgress: (evt: AxiosProgressEvent) => {
-            const progressEvt = evt as UploadProgressEvent
-            if (evt.total && evt.total > 0) {
-                progressEvt.percent = (evt.loaded / evt.total) * 100
-                file.status = 'uploading'
-                file.percentage = Math.round(progressEvt.percent)
-                typeof state.events['onProgress'] == 'function' && state.events['onProgress'](progressEvt, file, files)
-            }
-        },
-    })
-        .then((res) => {
-            if (res.code == 1) {
-                file.serverUrl = res.data.file.url
-                file.status = 'success'
-                emits('update:modelValue', getAllUrls())
-                typeof state.events['onSuccess'] == 'function' && state.events['onSuccess'](res, file, files)
-            } else {
-                file.status = 'fail'
-                files.splice(fileIndex, 1)
-                typeof state.events['onError'] == 'function' && state.events['onError'](res, file, files)
-            }
-        })
-        .catch((res) => {
-            file.status = 'fail'
-            files.splice(fileIndex, 1)
-            typeof state.events['onError'] == 'function' && state.events['onError'](res, file, files)
-        })
-        .finally(() => {
-            state.uploading--
-            onChange(file, files)
-        })
-}
-
-const onElRemove = (file: UploadUserFile, files: UploadFiles) => {
-    typeof state.events['onRemove'] == 'function' && state.events['onRemove'](file, files)
-    onChange(file, files)
-    emits('update:modelValue', getAllUrls())
-}
-
-const onElPreview = (file: UploadFileExt) => {
-    typeof state.events['onPreview'] == 'function' && state.events['onPreview'](file)
-    if (!file || !file.url) {
-        return
-    }
-    if (props.type == 'file' || props.type == 'files') {
-        window.open(fullUrl(file.url))
-        return
-    }
-    state.preview.show = true
-    state.preview.url = file.url
-}
-
-const onElExceed = (files: UploadUserFile[]) => {
-    const file = files[0] as UploadRawFile
-    file.uid = genFileId()
-    upload.value!.handleStart(file)
-    typeof state.events['onExceed'] == 'function' && state.events['onExceed'](file, files)
-}
-
-const onChoice = (files: string[]) => {
-    let oldValArr = getAllUrls('array') as string[]
-    files = oldValArr.concat(files)
-    init(files)
-    emits('update:modelValue', getAllUrls())
-    onChange(files, state.fileList)
-    state.selectFile.show = false
-}
-
-/**
- * 初始化文件/图片的排序功能
- */
-const initSort = () => {
-    nextTick(() => {
-        let uploadListEl = upload.value?.$el.querySelector('.el-upload-list')
-        let uploadItemEl = uploadListEl.getElementsByClassName('el-upload-list__item')
-        if (uploadItemEl.length >= 2) {
-            Sortable.create(uploadListEl, {
-                animation: 200,
-                draggable: '.el-upload-list__item',
-                onEnd: (evt: Sortable.SortableEvent) => {
-                    if (evt.oldIndex != evt.newIndex) {
-                        state.fileList[evt.newIndex!] = [
-                            state.fileList[evt.oldIndex!],
-                            (state.fileList[evt.oldIndex!] = state.fileList[evt.newIndex!]),
-                        ][0]
-                        emits('update:modelValue', getAllUrls())
-                    }
-                },
-            })
-        }
-    })
-}
-
-onMounted(() => {
-    if (props.type == 'image' || props.type == 'file') {
-        state.attr = { ...state.attr, limit: 1 }
-    } else {
-        state.attr = { ...state.attr, multiple: true }
-    }
-
-    if (props.type == 'image' || props.type == 'images') {
-        state.selectFile.type = 'image'
-        state.attr = { ...state.attr, accept: 'image/*', listType: 'picture-card' }
-    }
-
-    const addProps: anyObj = {}
-    const evtArr = ['onPreview', 'onRemove', 'onSuccess', 'onError', 'onChange', 'onExceed', 'beforeUpload', 'onProgress']
-    for (const key in props.attr) {
-        if (evtArr.includes(key)) {
-            state.events[key] = props.attr[key as keyof typeof props.attr]
-        } else {
-            addProps[key] = props.attr[key as keyof typeof props.attr]
-        }
-    }
-
-    state.attr = { ...state.attr, ...addProps }
-    if (state.attr.limit) state.selectFile.limit = state.attr.limit
-
-    init(props.modelValue)
-
-    initSort()
-})
-
-watch(
-    () => props.modelValue,
-    (newVal) => {
-        if (state.uploading > 0) return
-        if (newVal === undefined || newVal === null) {
-            return init('')
-        }
-        let newValArr = arrayFullUrl(stringToArray(cloneDeep(newVal)))
-        let oldValArr = arrayFullUrl(getAllUrls('array'))
-        if (newValArr.sort().toString() != oldValArr.sort().toString()) {
-            init(newVal)
-        }
-    }
-)
-
-const limitExceed = () => {
-    if (state.attr.limit && state.fileList.length > state.attr.limit) {
-        state.fileList = state.fileList.slice(state.fileList.length - state.attr.limit)
-        return true
-    }
-    return false
-}
-
-const init = (modelValue: string | string[]) => {
-    let urls = stringToArray(modelValue as string)
-    state.fileList = []
-    state.defaultReturnType = typeof modelValue === 'string' || props.type == 'file' || props.type == 'image' ? 'string' : 'array'
-
-    for (const key in urls) {
-        state.fileList.push({
-            name: getFileNameFromPath(urls[key]),
-            url: fullUrl(urls[key]),
-            serverUrl: urls[key],
-        })
-    }
-
-    // 超出过滤 || 确定返回的URL完整
-    if (limitExceed() || props.returnFullUrl) {
-        emits('update:modelValue', getAllUrls())
-    }
-    state.key = uuid()
-}
-
-// 获取当前所有图片路径的列表
-const getAllUrls = (returnType: string = state.defaultReturnType) => {
-    limitExceed()
-    let urlList = []
-    for (const key in state.fileList) {
-        if (state.fileList[key].serverUrl) urlList.push(state.fileList[key].serverUrl)
-    }
-    if (props.returnFullUrl) urlList = arrayFullUrl(urlList as string[])
-    return returnType === 'string' ? urlList.join(',') : (urlList as string[])
-}
-
-const formDataAppend = (fd: FormData) => {
-    if (props.data && !isEmpty(props.data)) {
-        for (const key in props.data) {
-            fd.append(key, props.data[key])
-        }
-    }
-    return fd
-}
-
-const onChange = (file: string | string[] | UploadFileExt, files: UploadFileExt[]) => {
-    initSort()
-    typeof state.events['onChange'] == 'function' && state.events['onChange'](file, files)
-}
-
-const getUploadRef = () => {
-    return upload.value
-}
-
-const showSelectFile = () => {
-    state.selectFile.show = true
-}
-
-defineExpose({
-    getUploadRef,
-    showSelectFile,
-})
-</script>
-
-<style scoped lang="scss">
-.ba-upload-select-image {
-    position: absolute;
-    top: 0px;
-    border: 1px dashed var(--el-border-color);
-    border-top: 1px dashed transparent;
-    width: var(--el-upload-picture-card-size);
-    height: 30px;
-    line-height: 30px;
-    border-radius: 6px;
-    border-bottom-right-radius: 20px;
-    border-bottom-left-radius: 20px;
-    text-align: center;
-    font-size: var(--el-font-size-extra-small);
-    color: var(--el-text-color-regular);
-    &:hover {
-        color: var(--el-color-primary);
-        border: 1px dashed var(--el-color-primary);
-        border-top: 1px dashed var(--el-color-primary);
-    }
-}
-.ba-upload :deep(.el-upload:hover .ba-upload-icon) {
-    color: var(--el-color-primary) !important;
-}
-:deep(.ba-upload-preview) .el-dialog__body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    height: auto;
-}
-.ba-upload-preview-scroll {
-    max-height: 70vh;
-    overflow: auto;
-}
-.ba-upload-preview-img {
-    max-width: 100%;
-    max-height: 100%;
-}
-:deep(.el-dialog__headerbtn) {
-    top: 2px;
-    width: 37px;
-    height: 37px;
-}
-.ba-upload.image :deep(.el-upload--picture-card),
-.ba-upload.images :deep(.el-upload--picture-card) {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-.ba-upload.file :deep(.el-upload-list),
-.ba-upload.files :deep(.el-upload-list) {
-    margin-left: -10px;
-}
-.ba-upload.files,
-.ba-upload.images {
-    :deep(.el-upload-list__item) {
-        user-select: none;
-        .el-upload-list__item-actions,
-        .el-upload-list__item-name {
-            cursor: move;
-        }
-    }
-}
-.ml-6 {
-    margin-left: 6px;
-}
-</style>

src/components/baInput/components/selectFile.vue

@@ -1,244 +0,0 @@
-<template>
-    <div>
-        <el-dialog
-            @close="emits('update:modelValue', false)"
-            width="60%"
-            :model-value="modelValue"
-            class="ba-upload-select-dialog"
-            :title="t('utils.Select File')"
-            :append-to-body="true"
-            :destroy-on-close="true"
-            top="4vh"
-        >
-            <TableHeader
-                :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
-                :quick-search-placeholder="t('Quick search placeholder', { fields: t('utils.Original name') })"
-            >
-                <el-tooltip :content="t('utils.choice')" placement="top">
-                    <el-button
-                        @click="onChoice"
-                        :disabled="baTable.table.selection!.length > 0 ? false : true"
-                        v-blur
-                        class="table-header-operate"
-                        type="primary"
-                    >
-                        <Icon name="fa fa-check" />
-                        <span class="table-header-operate-text">{{ t('utils.choice') }}</span>
-                    </el-button>
-                </el-tooltip>
-                <div class="ml-10" v-if="limit !== 0">
-                    {{ t('utils.You can also select') }}
-                    <span class="selection-count">{{ limit - baTable.table.selection!.length }}</span>
-                    {{ t('utils.items') }}
-                </div>
-            </TableHeader>
-
-            <Table ref="tableRef" @selection-change="onSelectionChange" />
-        </el-dialog>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, provide, watch, nextTick } from 'vue'
-import { useI18n } from 'vue-i18n'
-import Table from '@/components/table/index.vue'
-import TableHeader from '@/components/table/header/index.vue'
-import baTableClass from '@/utils/baTable'
-import { previewRenderFormatter } from '@/views/backend/routine/attachment'
-import { baTableApi } from '@/api/common'
-
-interface Props {
-    type?: 'image' | 'file'
-    limit?: number
-    modelValue: boolean
-    returnFullUrl?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    type: 'file',
-    limit: 0,
-    modelValue: false,
-    returnFullUrl: false,
-})
-
-const emits = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void
-    (e: 'choice', value: string[]): void
-}>()
-
-const tableRef = ref()
-const { t } = useI18n()
-const state = reactive({
-    ready: false,
-    tableSelectable: true,
-})
-
-const optBtn: OptButton[] = [
-    {
-        render: 'tipButton',
-        name: 'choice',
-        text: t('utils.choice'),
-        type: 'primary',
-        icon: 'fa fa-check',
-        class: 'table-row-choice',
-        disabledTip: false,
-        click: (row: TableRow) => {
-            const elTableRef = tableRef.value.getRef()
-            elTableRef.clearSelection()
-            emits('choice', props.returnFullUrl ? [row.full_url] : [row.url])
-        },
-    },
-]
-const baTable = new baTableClass(new baTableApi('/admin/routine.Attachment/'), {
-    column: [
-        {
-            type: 'selection',
-            selectable: (row: TableRow) => {
-                if (props.limit == 0) return true
-                if (baTable.table.selection) {
-                    for (const key in baTable.table.selection) {
-                        if (row.id == baTable.table.selection[key].id) {
-                            return true
-                        }
-                    }
-                }
-                return state.tableSelectable
-            },
-            align: 'center',
-            operator: false,
-        },
-        { label: t('Id'), prop: 'id', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query'), width: 70 },
-        { label: t('utils.Breakdown'), prop: 'topic', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
-        {
-            label: t('utils.preview'),
-            prop: 'suffix',
-            align: 'center',
-            renderFormatter: previewRenderFormatter,
-            render: 'image',
-            operator: false,
-        },
-        {
-            label: t('utils.type'),
-            prop: 'mimetype',
-            align: 'center',
-            operator: 'LIKE',
-            showOverflowTooltip: true,
-            operatorPlaceholder: t('Fuzzy query'),
-        },
-        {
-            label: t('utils.size'),
-            prop: 'size',
-            align: 'center',
-            formatter: (row: TableRow, column: TableColumn, cellValue: string) => {
-                var size = parseFloat(cellValue)
-                var i = Math.floor(Math.log(size) / Math.log(1024))
-                return parseInt((size / Math.pow(1024, i)).toFixed(i < 2 ? 0 : 2)) * 1 + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i]
-            },
-            operator: 'RANGE',
-            sortable: 'custom',
-            operatorPlaceholder: 'bytes',
-        },
-        {
-            label: t('utils.Last upload time'),
-            prop: 'last_upload_time',
-            align: 'center',
-            render: 'datetime',
-            operator: 'RANGE',
-            width: 160,
-            sortable: 'custom',
-        },
-        {
-            show: false,
-            label: t('utils.Upload (Reference) times'),
-            prop: 'quote',
-            align: 'center',
-            width: 150,
-            operator: 'RANGE',
-            sortable: 'custom',
-        },
-        {
-            label: t('utils.Original name'),
-            prop: 'name',
-            align: 'center',
-            showOverflowTooltip: true,
-            operator: 'LIKE',
-            operatorPlaceholder: t('Fuzzy query'),
-        },
-        {
-            label: t('Operate'),
-            align: 'center',
-            width: '100',
-            render: 'buttons',
-            buttons: optBtn,
-            operator: false,
-        },
-    ],
-    defaultOrder: { prop: 'last_upload_time', order: 'desc' },
-})
-
-provide('baTable', baTable)
-
-const getIndex = () => {
-    if (props.type == 'image') {
-        baTable.table.filter!.search = [{ field: 'mimetype', val: 'image', operator: 'LIKE' }]
-    }
-    baTable.table.ref = tableRef.value
-    baTable.table.filter!.limit = 8
-    baTable.getIndex()?.then(() => {
-        baTable.initSort()
-    })
-    state.ready = true
-}
-
-const onChoice = () => {
-    if (baTable.table.selection?.length) {
-        let files: string[] = []
-        for (const key in baTable.table.selection) {
-            files.push(props.returnFullUrl ? baTable.table.selection[key].full_url : baTable.table.selection[key].url)
-        }
-        emits('choice', files)
-        const elTableRef = tableRef.value.getRef()
-        elTableRef.clearSelection()
-    }
-}
-
-const onSelectionChange = (selection: TableRow[]) => {
-    if (props.limit == 0) return
-    if (selection.length > props.limit) {
-        const elTableRef = tableRef.value.getRef()
-        elTableRef.toggleRowSelection(selection[selection.length - 1], false)
-    }
-    state.tableSelectable = !(selection.length >= props.limit)
-}
-
-onMounted(() => {
-    baTable.mount()
-})
-
-watch(
-    () => props.modelValue,
-    (newVal) => {
-        if (newVal && !state.ready) {
-            nextTick(() => {
-                getIndex()
-            })
-        }
-    }
-)
-</script>
-
-<style>
-.ba-upload-select-dialog .el-dialog__body {
-    padding: 10px 20px;
-}
-.table-header-operate-text {
-    margin-left: 6px;
-}
-.ml-10 {
-    margin-left: 10px;
-}
-.selection-count {
-    color: var(--el-color-primary);
-    font-weight: bold;
-}
-</style>

src/components/baInput/index.vue

@@ -7,7 +7,6 @@ import Array from '@/components/baInput/components/array.vue'
 import RemoteSelect from '@/components/baInput/components/remoteSelect.vue'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import Editor from '@/components/baInput/components/editor.vue'
-import BaUpload from '@/components/baInput/components/baUpload.vue'
 import { getArea } from '@/api/common'
 
 export default defineComponent({
@@ -162,21 +161,6 @@ export default defineComponent({
                     'onUpdate:modelValue': onValueUpdate,
                 })
         }
-        // upload
-        const upload = () => {
-            return () =>
-                createVNode(BaUpload, {
-                    type: props.type,
-                    data: props.attr ? props.attr.data : {},
-                    modelValue: props.modelValue,
-                    'onUpdate:modelValue': onValueUpdate,
-                    returnFullUrl: props.attr ? props.attr.returnFullUrl || props.attr['return-full-url'] : false,
-                    hideSelectFile: props.attr ? props.attr.hideSelectFile || props.attr['hide-select-file'] : false,
-                    attr: props.attr,
-                    forceLocal: props.attr ? props.attr.forceLocal || props.attr['force-local'] : false,
-                })
-        }
-
         // remoteSelect remoteSelects
         const remoteSelect = () => {
             return () =>

src/components/table/index.vue

@@ -89,8 +89,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, inject, computed } from 'vue'
+import { ref, nextTick, inject, computed, onMounted } from 'vue'
-import type { ElTable, TableInstance } from 'element-plus'
+import type { ElTable } from 'element-plus'
+import { VxeTableInstance } from 'vxe-table'
 import FieldRender from '@/components/table/fieldRender/index.vue'
 import Column from '@/components/table/column/index.vue'
 import { useConfig } from '@/stores/config'
@@ -98,7 +99,7 @@ import type TableStoreClass from '@/utils/tableStore'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 
 const config = useConfig()
-const tableRef = ref<TableInstance>()
+const tableRef = ref<VxeTableInstance>()
 const tableStore = inject('tableStore') as TableStoreClass
 
 interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
@@ -108,6 +109,9 @@ interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>>
 const props = withDefaults(defineProps<Props>(), {
     isGroup: false
 })
+onMounted(() => {
+    tableStore.table.ref = tableRef.value as VxeTableInstance
+})
 console.log(props)
 const onTableSizeChange = (val: number) => {
     tableStore.onTableAction('page-size-change', { size: val })

src/utils/tableStore.ts

@@ -49,7 +49,7 @@ export default class TableStore {
         this.isWebPaging = options.isWebPaging || false
         this.method = options.method || 'GET'
         this.table.column = options.column
-        this.showPage = options.showPage === false ? false : true
+        this.showPage = options.showPage !== false
         this.table.publicHeight = options.publicHeight || 0
         this.table.resetCallback = options.resetCallback || null
         this.table.loadCallback = options.loadCallback || null

src/views/auth/menu/api.vue

@@ -0,0 +1,122 @@
+<template>
+    <div>
+        <div class="menu-index-header">
+            <div style="flex: 1; font-weight: 700">接口权限列表</div>
+            <el-input
+                v-model="tableStore.table.params.searchValue"
+                style="width: 240px"
+                placeholder="请输入菜单名称"
+                class="ml10"
+                clearable
+                @input="search"
+            />
+            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10" :disabled="!props.id">新增</el-button>
+        </div>
+        <Table ref="tableRef" />
+        <popupApi ref="popupRef" @init="tableStore.index()"></popupApi>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, Ref, inject, provide, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import popupApi from './popupApi.vue'
+import { deleteMenu } from '@/api/user-boot/function'
+
+defineOptions({
+    name: 'auth/menu/api'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
+const props = defineProps({
+    id: {
+        type: String,
+        default: ''
+    }
+})
+const tableRef = ref()
+const popupRef = ref()
+const apiList = ref([])
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/user-boot/function/getButtonById',
+    column: [
+        { title: '普通接口/接口名称', field: 'name' },
+        { title: '接口类型', field: 'type' },
+        { title: 'URL接口路径', field: 'path' },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑接口权限', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除接口',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该菜单吗？'
+                    },
+                    click: row => {
+                        deleteMenu(row.id).then(() => {
+                            tableStore.index()
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        apiList.value = tableStore.table.data
+        search()
+    }
+})
+tableStore.table.loading = false
+watch(
+    () => props.id,
+    () => {
+        tableStore.table.params.id = props.id
+        tableStore.index()
+    }
+)
+provide('tableStore', tableStore)
+
+const addMenu = () => {
+    console.log(popupRef)
+    popupRef.value.open('新增接口权限', {
+        pid: props.id
+    })
+}
+const search = () => {
+    tableStore.table.data = apiList.value.filter(
+        (item: any) =>
+            !tableStore.table.params.searchValue ||
+            item.name.indexOf(tableStore.table.params.searchValue) !== -1 ||
+            item.path.indexOf(tableStore.table.params.searchValue) !== -1
+    )
+}
+</script>
+<style lang="scss">
+.menu-index-header {
+    display: flex;
+    padding: 13px 15px;
+    align-items: center;
+}
+</style>

src/views/auth/menu/index.vue

@@ -1,101 +1,38 @@
 <template>
-    <div class="default-main">
+    <div class='default-main' style='display: flex' v-loading='loading'>
-        <TableHeader>
+        <Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
-            <template v-slot:operation>
+        <Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
-                <el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
-            </template>
-        </TableHeader>
-        <Table ref="tableRef" />
-        <popupForm ref="popupRef"></popupForm>
     </div>
 </template>
-<script setup lang="ts">
+<script setup lang='ts'>
-import { Plus } from '@element-plus/icons-vue'
+import { functionTree } from '@/api/user-boot/function'
-import { ref, onMounted, provide } from 'vue'
+import Menu from './menu.vue'
-import TableStore from '@/utils/tableStore'
+import Api from './api.vue'
-import Table from '@/components/table/index.vue'
+import { provide, reactive, ref } from 'vue'
-import TableHeader from '@/components/table/header/index.vue'
-import popupForm from './popupForm.vue'
-import { useNavTabs } from '@/stores/navTabs'
-import {  delMenu } from '@/api/systerm'
 
 defineOptions({
     name: 'auth/menu'
 })
-const tableRef = ref()
+const menuData = ref<any[]>([])
-const popupRef = ref()
+const selectedId = ref('')
-const navTabs = useNavTabs()
+const loading = ref(true)
-const tableStore = new TableStore({
+const select = (id: string) => {
-    showPage: false,
+    selectedId.value = id
-    url: '/user-boot/function/functionTree',
-    column: [
-        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
-        {
-            title: '图标',
-            field: 'icon',
-            align: 'center',
-            width: '60',
-            render: 'icon'
-        },
-        {
-            title: '操作',
-            align: 'center',
-            width: '130',
-            render: 'buttons',
-            buttons: [
-                {
-                    name: 'edit',
-                    title: '编辑',
-                    type: 'primary',
-                    icon: 'el-icon-EditPen',
-                    render: 'tipButton',
-                    click: row => {
-                        popupRef.value.open('编辑菜单', row)
-                    }
-                },
-                {
-                    name: 'del',
-                    title: '删除',
-                    type: 'danger',
-                    icon: 'el-icon-Delete',
-                    render: 'confirmButton',
-                    popconfirm: {
-                        confirmButtonText: '确认',
-                        cancelButtonText: '取消',
-                        confirmButtonType: 'danger',
-                        title: '确定删除该菜单吗？'
-                    },
-                    click: row => {
-                        delMenu(row.id).then(() => {
-                            tableStore.index()
-                        })
-                    }
-                }
-            ]
-        }
-    ],
-    loadCallback:()=>{
-        // 过滤数组中type等于1的数据，children下钻
-        const filterData = (arr:any[])=>{
-            return  arr.filter((item:any)=>{
-                if (item.children.length) {
-                    item.children = filterData(item.children)
-                }
-                return item.type != 1
-            })
-        }
-        tableStore.table.data = filterData(tableStore.table.data)
-    }
-})
-provide('tableStore', tableStore)
-
-onMounted(() => {
-    tableStore.table.ref = tableRef.value
-    tableStore.index()
-    tableStore.table.loading = false
-})
-const addMenu = () => {
-    console.log(popupRef)
-    popupRef.value.open('新增菜单')
 }
+const filterData = (arr: any[]) => {
+    return arr.filter((item: any) => {
+        if (item.children.length) {
+            item.children = filterData(item.children)
+        }
+        return item.type === 0
+    })
+}
+const init = () => {
+    loading.value = true
+    functionTree().then(res => {
+        menuData.value = filterData(res.data)
+        loading.value = false
+    })
+}
+init()
 </script>

src/views/auth/menu/menu.vue

@@ -0,0 +1,160 @@
+<template>
+    <div>
+        <div class="menu-index-header">
+            <div style="flex: 1; font-weight: 700">菜单列表</div>
+            <el-input
+                v-model="tableStore.table.params.searchValue"
+                style="width: 240px"
+                placeholder="请输入菜单名称"
+                class="ml10"
+                clearable
+                @input="search"
+            />
+            <el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
+        </div>
+        <Table
+            :tree-config="{ reserve: true, expandAll: !!tableStore.table.params.searchValue }"
+            @currentChange="currentChange"
+        />
+        <popupMenu ref="popupRef" @init="emits('init')"></popupMenu>
+    </div>
+</template>
+<script setup lang="ts">
+import { Plus } from '@element-plus/icons-vue'
+import { ref, nextTick, inject, provide, watch } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import popupMenu from './popupMenu.vue'
+import { delMenu } from '@/api/systerm'
+
+defineOptions({
+    name: 'auth/menu/menu'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+    (e: 'select', row: any): void
+}>()
+const props = withDefaults(
+    defineProps<{
+        menuData: treeData[]
+    }>(),
+    {
+        menuData: () => {
+            return []
+        }
+    }
+)
+const popupRef = ref()
+const tableStore = new TableStore({
+    showPage: false,
+    url: '/user-boot/function/functionTree',
+    column: [
+        { title: '菜单名称', field: 'title', align: 'left', treeNode: true },
+        {
+            title: '图标',
+            field: 'icon',
+            align: 'center',
+            width: '60',
+            render: 'icon'
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '130',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '新增菜单',
+                    type: 'primary',
+                    icon: 'el-icon-Plus',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('新增菜单', { pid: row.id })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '编辑菜单',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'tipButton',
+                    click: row => {
+                        popupRef.value.open('编辑菜单', row)
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除菜单',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'confirmButton',
+                    popconfirm: {
+                        confirmButtonText: '确认',
+                        cancelButtonText: '取消',
+                        confirmButtonType: 'danger',
+                        title: '确定删除该菜单吗？'
+                    },
+                    click: row => {
+                        delMenu(row.id).then(() => {
+                            emits('init')
+                        })
+                    }
+                }
+            ]
+        }
+    ]
+})
+tableStore.table.loading = false
+watch(
+    () => props.menuData,
+    () => {
+        search()
+    }
+)
+provide('tableStore', tableStore)
+
+const addMenu = () => {
+    console.log(popupRef)
+    popupRef.value.open('新增菜单')
+}
+const currentChange = (newValue: any) => {
+    emits('select', newValue.row.id)
+}
+const search = () => {
+    tableStore.table.data = filterData(JSON.parse(JSON.stringify(props.menuData)))
+    if (tableStore.table.params.searchValue) {
+        nextTick(() => {
+            tableStore.table.ref?.setAllTreeExpand(true)
+        })
+    } else {
+        nextTick(() => {
+            tableStore.table.ref?.setAllTreeExpand(false)
+        })
+    }
+}
+
+// 过滤
+const filterData = (arr: treeData[]): treeData[] => {
+    if (!tableStore.table.params.searchValue) {
+        return arr
+    }
+    return arr.filter((item: treeData) => {
+        if (item.title.includes(tableStore.table.params.searchValue)) {
+            return true
+        } else if (item.children?.length > 0) {
+            item.children = filterData(item.children)
+            return item.children.length > 0
+        } else {
+            return false
+        }
+    })
+}
+</script>
+<style lang="scss">
+.menu-index-header {
+    display: flex;
+    padding: 13px 15px;
+    align-items: center;
+}
+</style>

src/views/auth/menu/popupApi.vue

@@ -0,0 +1,103 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :mode="form" :inline="false" :model="form" label-width="120px" :rules="rules">
+                <el-form-item prop="name" label="接口/按钮名称">
+                    <el-input v-model="form.name" placeholder="请输入接口名称" />
+                </el-form-item>
+                <el-form-item prop="code" label="接口/按钮标识">
+                    <el-input v-model="form.code" placeholder="请输入英文接口标识" />
+                </el-form-item>
+                <el-form-item prop="path" label="接口路径">
+                    <el-input v-model="form.path" placeholder="请输入接口路径" />
+                </el-form-item>
+                <el-form-item prop="type" label="接口类型">
+                    <el-radio-group v-model="form.type">
+                        <el-radio :label="1">普通接口</el-radio>
+                        <el-radio :label="2">公用接口</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item prop="sort" label="排序">
+                    <el-input-number v-model="form.sort" :min="0" />
+                </el-form-item>
+                <el-form-item prop="remark" label="接口/按钮描述">
+                    <el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { update, add } from '@/api/user-boot/function'
+
+defineOptions({
+    name: 'auth/menu/popupApi'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
+const form: any = reactive({
+    id: '',
+    pid: '0',
+    code: '',
+    name: '',
+    path: '',
+    type: 1,
+    sort: '',
+    remark: ''
+})
+const rules = {
+    code: [
+        { required: true, message: '标识不能为空', trigger: 'blur' },
+        {
+            pattern: /^[a-zA-Z_]{1}[a-zA-Z0-9_]{2,15}$/,
+            message: '请输入至少3-20位英文',
+            min: 3,
+            max: 20,
+            trigger: 'blur'
+        }
+    ],
+    name: [{ required: true, message: '请输入接口名称', trigger: 'blur' }],
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+    path: [{ required: true, message: '请输入接口路径', trigger: 'blur' }]
+}
+const dialogVisible = ref(false)
+const title = ref('新增菜单')
+const open = (text: string, data: anyObj) => {
+    title.value = text
+    // 重置表单
+    for (let key in form) {
+        form[key] = ''
+    }
+    form.type = 1
+    form.pid = data.pid
+    if (data.id) {
+        for (let key in form) {
+            form[key] = data[key] || ''
+        }
+    }
+    dialogVisible.value = true
+}
+const submit = async () => {
+    if (form.id) {
+        await update(form)
+    } else {
+        let obj = JSON.parse(JSON.stringify(form))
+        delete obj.id
+        await add(obj)
+    }
+    emits('init')
+    dialogVisible.value = false
+}
+
+defineExpose({ open })
+</script>

src/views/auth/menu/popupMenu.vue

@@ -46,10 +46,18 @@ import TableStore from '@/utils/tableStore'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import { updateMenu, addMenu } from '@/api/systerm'
 
+defineOptions({
+    name: 'auth/menu/popupMenu'
+})
+const emits = defineEmits<{
+    (e: 'init'): void
+}>()
 const tableStore = inject('tableStore') as TableStore
 const cascaderProps = {
     label: 'title',
-    value: 'id'
+    value: 'id',
+    checkStrictly: true,
+    emitPath: false
 }
 const form: any = reactive({
     code: '',
@@ -69,20 +77,20 @@ const title = ref('新增菜单')
 const open = (text: string, data?: anyObj) => {
     console.log(data)
     title.value = text
+    // 重置表单
+    for (let key in form) {
+        form[key] = ''
+    }
+    form.pid = '0'
+    form.sort = 0
+    form.type = 0
+
     if (data) {
         for (let key in form) {
-            form[key] = data[key]
+            form[key] = data[key] || ''
         }
-        form.path = data.routePath
+        form.path = data.routePath || ''
-        form.name = data.title
+        form.name = data.title || ''
-    } else {
-        // 重置表单
-        for (let key in form) {
-            form[key] = ''
-        }
-        form.pid = '0'
-        form.sort = 0
-        form.type = 0
     }
     dialogVisible.value = true
 }
@@ -95,9 +103,9 @@ const submit = async () => {
         delete obj.id
         await addMenu(obj)
     }
-    tableStore.index()
+    emits('init')
     dialogVisible.value = false
 }
 
 defineExpose({ open })
-</script>
+</script>

types/table.d.ts

@@ -1,12 +1,12 @@
 import Table from '@/components/table/index.vue'
 import { Component } from 'vue'
-import type { VxeColumnProps } from 'vxe-table'
+import type { VxeColumnProps, VxeTableInstance } from 'vxe-table'
 import type { PopconfirmProps, ButtonType, ButtonProps } from 'element-plus'
 import { Mutable } from 'element-plus/es/utils'
 
 declare global {
     interface CnTable {
-        ref: typeof Table | null
+        ref: VxeTableInstance | null
         data: TableRow[] | any
         // 前端分页数据
         webPagingData: TableRow[][]