lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 完善demo

Browse Source
This commit is contained in:
kailong321200875
2023-10-14 10:43:04 +08:00
parent be73f4da3e
commit 2c4ff7d190
11 changed files with 383 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Descriptions/src/Descriptions.vue
View File

@@ -159,6 +159,12 @@ export default defineComponent({
}
:deep(.@{prefix-cls}-label) {
width: 150px;
width: 150px !important;
}
// .@{prefix-cls}-content {
// :deep(.@{elNamespace}-descriptions__cell) {
// width: 0;
// }
// }
</style>

23
src/hooks/web/useForm.ts
View File

@@ -2,6 +2,7 @@ import type { Form, FormExpose } from '@/components/Form'
import type { ElForm, ElFormItem } from 'element-plus'
import { ref, unref, nextTick } from 'vue'
import { FormSchema, FormSetProps, FormProps } from '@/components/Form'
import { isEmptyVal, isObject } from '@/utils/is'
export const useForm = () => {
// From实例
@@ -83,9 +84,27 @@ export const useForm = () => {
* @description 获取表单数据
* @returns form data
*/
getFormData: async <T = Recordable>(): Promise<T> => {
getFormData: async <T = Recordable>(filterEmptyVal = true): Promise<T> => {
const form = await getForm()
return form?.formModel as T
const model = form?.formModel as any
if (filterEmptyVal) {
// 使用reduce过滤空值，并返回一个新对象
return Object.keys(model).reduce((prev, next) => {
const value = model[next]
if (!isEmptyVal(value)) {
if (isObject(value)) {
if (Object.keys(value).length > 0) {
prev[next] = value
}
} else {
prev[next] = value
}
}
return prev
}, {}) as T
} else {
return model as T
}
},
/**

18
src/router/index.ts
View File

@@ -374,6 +374,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
meta: {
title: t('router.request')
}
},
{
path: 'test',
component: () => import('@/views/Function/Test.vue'),
name: 'Test',
meta: {
title: t('router.permission'),
permission: ['add', 'edit', 'delete']
}
}
]
},
@@ -644,15 +653,6 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
meta: {
title: t('router.role')
}
},
{
path: 'test',
component: () => import('@/views/Authorization/Test/Test.vue'),
name: 'Test',
meta: {
title: t('router.permission'),
permission: ['add', 'edit', 'delete']
}
}
]
}

27
src/views/Authorization/Menu/Menu.vue
View File

@@ -10,6 +10,7 @@ import { Search } from '@/components/Search'
import { FormSchema } from '@/components/Form'
import { ContentWrap } from '@/components/ContentWrap'
import Write from './components/Write.vue'
import Detail from './components/Detail.vue'
import { Dialog } from '@/components/Dialog'
const { t } = useI18n()
@@ -54,16 +55,16 @@ const tableColumns = reactive<TableColumn[]>([
}
}
},
{
field: 'meta.permission',
label: t('menu.permission'),
slots: {
default: (data: any) => {
const permission = data.row.meta.permission
return permission ? <>{permission.join(', ')}</> : null
}
}
},
// {
// field: 'meta.permission',
// label: t('menu.permission'),
// slots: {
// default: (data: any) => {
// const permission = data.row.meta.permission
// return permission ? <>{permission.join(', ')}</> : null
// }
// }
// },
{
field: 'component',
label: t('menu.component'),
@@ -105,6 +106,9 @@ const tableColumns = reactive<TableColumn[]>([
<ElButton type="primary" onClick={() => action(row, 'edit')}>
{t('exampleDemo.edit')}
</ElButton>
<ElButton type="success" onClick={() => action(row, 'detail')}>
{t('exampleDemo.detail')}
</ElButton>
<ElButton type="danger">{t('exampleDemo.del')}</ElButton>
</>
)
@@ -154,6 +158,7 @@ const AddAction = () => {
const save = async () => {
const write = unref(writeRef)
const formData = await write?.submit()
console.log(formData)
if (formData) {
saveLoading.value = true
setTimeout(() => {
@@ -183,6 +188,8 @@ const save = async () => {
<Dialog v-model="dialogVisible" :title="dialogTitle">
<Write v-if="actionType !== 'detail'" ref="writeRef" :current-row="currentRow" />
<Detail v-if="actionType === 'detail'" :current-row="currentRow" />
<template #footer>
<ElButton v-if="actionType !== 'detail'" type="primary" :loading="saveLoading" @click="save">
{{ t('exampleDemo.save') }}

155
src/views/Authorization/Menu/components/Detail.vue Normal file
View File

@@ -0,0 +1,155 @@
<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { Icon } from '@/components/Icon'
import { ElTag } from 'element-plus'
defineProps({
currentRow: {
type: Object as PropType<any>,
default: () => undefined
}
})
const renderTag = (enable?: boolean) => {
return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
}
const detailSchema = ref<DescriptionsSchema[]>([
{
field: 'type',
label: '菜单类型',
span: 24,
slots: {
default: (data) => {
const type = data.type
return <>{type === 1 ? '菜单' : '目录'}</>
}
}
},
{
field: 'parentName',
label: '父级菜单'
},
{
field: 'meta.title',
label: '菜单名称'
},
{
field: 'component',
label: '组件',
slots: {
default: (data) => {
const component = data.component
return <>{component === '#' ? '顶级目录' : component === '##' ? '子目录' : component}</>
}
}
},
{
field: 'name',
label: '组件名称'
},
{
field: 'meta.icon',
label: '图标',
slots: {
default: (data) => {
const icon = data.icon
if (icon) {
return (
<>
<Icon icon={icon} />
</>
)
} else {
return null
}
}
}
},
{
field: 'path',
label: '路径'
},
{
field: 'meta.activeMenu',
label: '高亮菜单'
},
{
field: 'menuState',
label: '菜单状态',
slots: {
default: (data) => {
return renderTag(data.menuState)
}
}
},
{
field: 'meta.hidden',
label: '是否隐藏',
slots: {
default: (data) => {
return renderTag(data.enableHidden)
}
}
},
{
field: 'meta.alwaysShow',
label: '是否一直显示',
slots: {
default: (data) => {
return renderTag(data.enableDisplay)
}
}
},
{
field: 'meta.noCache',
label: '是否清除缓存',
slots: {
default: (data) => {
return renderTag(data.enableCleanCache)
}
}
},
{
field: 'meta.breadcrumb',
label: '是否显示面包屑',
slots: {
default: (data) => {
return renderTag(data.enableShowCrumb)
}
}
},
{
field: 'meta.affix',
label: '是否固定标签页',
slots: {
default: (data) => {
return renderTag(data.enablePinnedTab)
}
}
},
{
field: 'meta.noTagsView',
label: '是否隐藏标签页',
slots: {
default: (data) => {
return renderTag(data.enableHiddenTab)
}
}
},
{
field: 'meta.canTo',
label: '是否可跳转',
slots: {
default: (data) => {
return renderTag(data.enableSkip)
}
}
}
])
</script>
<template>
<Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>

162
src/views/Authorization/Menu/components/Write.vue
View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { useI18n } from '@/hooks/web/useI18n'
import { getMenuListApi } from '@/api/menu'
import { ElTag, ElButton } from 'element-plus'
const { t } = useI18n()
@@ -17,6 +19,102 @@ const props = defineProps({
})
const formSchema = reactive<FormSchema[]>([
{
field: 'type',
label: '菜单类型',
component: 'RadioButton',
value: 0,
colProps: {
span: 24
},
componentProps: {
options: [
{
label: '目录',
value: 0
},
{
label: '菜单',
value: 1
}
],
on: {
change: async (val: number) => {
const formData = await getFormData()
if (val === 1) {
setSchema([
{
field: 'component',
path: 'componentProps.disabled',
value: false
}
])
setValues({
component: ''
})
} else {
setSchema([
{
field: 'component',
path: 'componentProps.disabled',
value: true
}
])
if (formData.parentId === void 0) {
setValues({
component: '#'
})
} else {
setValues({
component: '##'
})
}
}
}
}
}
},
{
field: 'parentId',
label: '父级菜单',
component: 'TreeSelect',
componentProps: {
nodeKey: 'id',
props: {
label: 'title',
value: 'id',
children: 'children'
},
highlightCurrent: true,
expandOnClickNode: false,
checkStrictly: true,
checkOnClickNode: true,
clearable: true,
on: {
change: async (val: number) => {
const formData = await getFormData()
if (val && formData.type === 0) {
setValues({
component: '##'
})
} else if (!val && formData.type === 0) {
setValues({
component: '#'
})
} else if (formData.type === 1) {
setValues({
component: ''
})
}
}
}
},
optionApi: async () => {
const res = await getMenuListApi()
return res.data.list || []
}
},
{
field: 'meta.title',
label: t('menu.menuName'),
@@ -24,8 +122,13 @@ const formSchema = reactive<FormSchema[]>([
},
{
field: 'component',
label: t('menu.component'),
component: 'Input'
label: '组件',
component: 'Input',
value: '#',
componentProps: {
disabled: true,
placeholder: '#为顶级目录，##为子目录'
}
},
{
field: 'name',
@@ -42,6 +145,11 @@ const formSchema = reactive<FormSchema[]>([
label: t('menu.path'),
component: 'Input'
},
{
field: 'meta.activeMenu',
label: t('menu.activeMenu'),
component: 'Input'
},
{
field: 'status',
label: t('menu.status'),
@@ -60,29 +168,31 @@ const formSchema = reactive<FormSchema[]>([
}
},
{
field: 'meta.activeMenu',
label: t('menu.activeMenu'),
component: 'Input'
},
{
field: 'permission',
field: 'permissionList',
label: t('menu.permission'),
component: 'CheckboxGroup',
componentProps: {
options: [
{
label: 'add',
value: 'add'
},
{
label: 'edit',
value: 'edit'
},
{
label: 'delete',
value: 'delete'
}
]
colProps: {
span: 24
},
formItemProps: {
slots: {
default: () => (
<>
<ElTag class="mx-1" closable disableTransitions={false}>
新增
</ElTag>
<ElTag class="mx-1" closable disableTransitions={false}>
编辑
</ElTag>
<ElTag class="mx-1" closable disableTransitions={false}>
删除
</ElTag>
<ElButton type="primary" size="small" onClick={() => console.log('添加权限')}>
添加权限
</ElButton>
</>
)
}
}
},
{
@@ -116,7 +226,7 @@ const formSchema = reactive<FormSchema[]>([
component: 'Switch'
},
{
field: 'canTo',
field: 'meta.canTo',
label: t('menu.canTo'),
component: 'Switch'
}
@@ -129,7 +239,7 @@ const rules = reactive({
})
const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods
const { setValues, getFormData, getElFormExpose, setSchema } = formMethods
const submit = async () => {
const elForm = await getElFormExpose()

6
src/views/Authorization/Role/components/Write.vue
View File

@@ -68,6 +68,7 @@ const formSchema = ref<FormSchema[]>([
show-checkbox
node-key="id"
highlight-current
check-strictly
expand-on-click-node={false}
data={treeData.value}
onNode-click={nodeClick}
@@ -153,10 +154,7 @@ const submit = async () => {
})
if (valid) {
const formData = await getFormData()
const checkedKeys = [
...(unref(treeRef)?.getCheckedKeys() || []),
...(unref(treeRef)?.getHalfCheckedKeys() || [])
]
const checkedKeys = unref(treeRef)?.getCheckedKeys() || []
const data = filter(unref(treeData), (item: any) => {
return checkedKeys.includes(item.id)
})

16
src/views/Authorization/User/User.vue
View File

@@ -81,11 +81,12 @@ const crudSchemas = reactive<CrudSchema[]>([
field: 'department.id',
label: t('userDemo.department'),
detail: {
slots: {
default: (data: DepartmentUserItem) => {
return <>{data.department.departmentName}</>
}
}
hidden: true
// slots: {
// default: (data: DepartmentUserItem) => {
// return <>{data.department.departmentName}</>
// }
// }
},
search: {
hidden: true
@@ -104,7 +105,7 @@ const crudSchemas = reactive<CrudSchema[]>([
}
},
table: {
type: 'index'
hidden: true
}
},
{
@@ -202,7 +203,7 @@ watch(
)
const currentChange = (data: DepartmentItem) => {
if (data.children) return
// if (data.children) return
currentNodeKey.value = data.id
currentPage.value = 1
getList()
@@ -290,6 +291,7 @@ const save = async () => {
ref="treeEl"
:data="departmentList"
default-expand-all
:expand-on-click-node="false"
node-key="id"
:current-node-key="currentNodeKey"
:props="{

0
src/views/Authorization/Test/Test.vue → src/views/Function/Test.vue
View File