Merge branch 'main' of http://192.168.1.22:3000/zcy/canneng-admin
This commit is contained in:
33
src/api/user-boot/function.ts
Normal file
33
src/api/user-boot/function.ts
Normal file
@@ -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',
|
||||
})
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 () =>
|
||||
|
||||
@@ -89,8 +89,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, inject, computed } from 'vue'
|
||||
import type { ElTable, TableInstance } from 'element-plus'
|
||||
import { ref, nextTick, inject, computed, onMounted } from 'vue'
|
||||
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 })
|
||||
|
||||
@@ -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
|
||||
|
||||
122
src/views/auth/menu/api.vue
Normal file
122
src/views/auth/menu/api.vue
Normal file
@@ -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>
|
||||
@@ -1,101 +1,38 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Plus" type="primary" @click="addMenu">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<popupForm ref="popupRef"></popupForm>
|
||||
<div class='default-main' style='display: flex' v-loading='loading'>
|
||||
<Menu style='width: 500px' @init='init' @select='select' :menu-data='menuData' />
|
||||
<Api style='width: calc(100% - 500px)' @init='init' :id='selectedId' />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import popupForm from './popupForm.vue'
|
||||
import { useNavTabs } from '@/stores/navTabs'
|
||||
import { delMenu } from '@/api/systerm'
|
||||
<script setup lang='ts'>
|
||||
import { functionTree } from '@/api/user-boot/function'
|
||||
import Menu from './menu.vue'
|
||||
import Api from './api.vue'
|
||||
import { provide, reactive, ref } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'auth/menu'
|
||||
})
|
||||
const tableRef = ref()
|
||||
const popupRef = ref()
|
||||
const navTabs = useNavTabs()
|
||||
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-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)=>{
|
||||
const menuData = ref<any[]>([])
|
||||
const selectedId = ref('')
|
||||
const loading = ref(true)
|
||||
const select = (id: string) => {
|
||||
selectedId.value = id
|
||||
}
|
||||
const filterData = (arr: any[]) => {
|
||||
return arr.filter((item: any) => {
|
||||
if (item.children.length) {
|
||||
item.children = filterData(item.children)
|
||||
}
|
||||
return item.type != 1
|
||||
return item.type === 0
|
||||
})
|
||||
}
|
||||
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 init = () => {
|
||||
loading.value = true
|
||||
functionTree().then(res => {
|
||||
menuData.value = filterData(res.data)
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
|
||||
160
src/views/auth/menu/menu.vue
Normal file
160
src/views/auth/menu/menu.vue
Normal file
@@ -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>
|
||||
103
src/views/auth/menu/popupApi.vue
Normal file
103
src/views/auth/menu/popupApi.vue
Normal file
@@ -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>
|
||||
@@ -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,13 +77,6 @@ const title = ref('新增菜单')
|
||||
const open = (text: string, data?: anyObj) => {
|
||||
console.log(data)
|
||||
title.value = text
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
form.path = data.routePath
|
||||
form.name = data.title
|
||||
} else {
|
||||
// 重置表单
|
||||
for (let key in form) {
|
||||
form[key] = ''
|
||||
@@ -83,6 +84,13 @@ const open = (text: string, data?: anyObj) => {
|
||||
form.pid = '0'
|
||||
form.sort = 0
|
||||
form.type = 0
|
||||
|
||||
if (data) {
|
||||
for (let key in form) {
|
||||
form[key] = data[key] || ''
|
||||
}
|
||||
form.path = data.routePath || ''
|
||||
form.name = data.title || ''
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
@@ -95,7 +103,7 @@ const submit = async () => {
|
||||
delete obj.id
|
||||
await addMenu(obj)
|
||||
}
|
||||
tableStore.index()
|
||||
emits('init')
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
4
types/table.d.ts
vendored
4
types/table.d.ts
vendored
@@ -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[][]
|
||||
|
||||
Reference in New Issue
Block a user