kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: 完善demo

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
mock/menu/index.ts
View File

@ -24,6 +24,7 @@ export default [
name: 'Dashboard',
status: Mock.Random.integer(0, 1),
id: 1,
title: '首页',
meta: {
title: '首页',
icon: 'ant-design:dashboard-filled',
@ -36,6 +37,7 @@ export default [
name: 'Analysis',
status: Mock.Random.integer(0, 1),
id: 2,
title: '分析页',
meta: {
title: '分析页',
noCache: true
@ -47,6 +49,7 @@ export default [
name: 'Workplace',
status: Mock.Random.integer(0, 1),
id: 3,
title: '工作台',
meta: {
title: '工作台',
noCache: true
@ -57,6 +60,7 @@ export default [
{
path: '/external-link',
component: '#',
title: '文档',
meta: {
title: '文档',
icon: 'clarity:document-solid'
@ -70,6 +74,7 @@ export default [
name: 'DocumentLink',
status: Mock.Random.integer(0, 1),
id: 5,
title: '文档',
meta: {
title: '文档'
}
@ -83,6 +88,7 @@ export default [
name: 'Level',
status: Mock.Random.integer(0, 1),
id: 6,
title: '菜单',
meta: {
title: '菜单',
icon: 'carbon:skill-level-advanced'
@ -95,6 +101,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 7,
redirect: '/level/menu1/menu1-1/menu1-1-1',
title: '菜单1',
meta: {
title: '菜单1'
},
@ -106,6 +113,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 8,
redirect: '/level/menu1/menu1-1/menu1-1-1',
title: '菜单1-1',
meta: {
title: '菜单1-1',
alwaysShow: true
@ -118,6 +126,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 9,
permission: ['edit', 'add', 'delete'],
title: '菜单1-1-1',
meta: {
title: '菜单1-1-1'
}
@ -131,6 +140,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 10,
permission: ['edit', 'add', 'delete'],
title: '菜单1-2',
meta: {
title: '菜单1-2'
}
@ -144,6 +154,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 11,
permission: ['edit', 'add', 'delete'],
title: '菜单2',
meta: {
title: '菜单2'
}
@ -157,6 +168,7 @@ export default [
name: 'Example',
status: Mock.Random.integer(0, 1),
id: 12,
title: '综合示例',
meta: {
title: '综合示例',
icon: 'ep:management',
@ -169,6 +181,7 @@ export default [
name: 'ExampleDialog',
status: Mock.Random.integer(0, 1),
id: 13,
title: '综合示例-弹窗',
permission: ['edit', 'add', 'delete'],
meta: {
title: '综合示例-弹窗',
@ -182,6 +195,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 14,
permission: ['edit', 'add', 'delete'],
title: '综合示例-页面',
meta: {
title: '综合示例-页面',
permission: ['edit', 'add']
@ -194,6 +208,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 15,
permission: ['edit', 'add', 'delete'],
title: '综合示例-新增',
meta: {
title: '综合示例-新增',
noTagsView: true,
@ -211,6 +226,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 16,
permission: ['edit', 'add', 'delete'],
title: '综合示例-编辑',
meta: {
title: '综合示例-编辑',
noTagsView: true,
@ -228,6 +244,7 @@ export default [
status: Mock.Random.integer(0, 1),
id: 17,
permission: ['edit', 'add', 'delete'],
title: '综合示例-详情',
meta: {
title: '综合示例-详情',
noTagsView: true,

19
mock/role/index.ts
View File

@ -332,6 +332,15 @@ const adminList = [
meta: {
title: 'router.request'
}
},
{
path: 'test',
component: () => 'views/Function/Test',
name: 'Test',
meta: {
title: 'router.permission',
permission: ['add', 'edit', 'delete']
}
}
]
},
@ -602,14 +611,6 @@ const adminList = [
meta: {
title: 'router.role'
}
},
{
path: 'test',
component: 'views/Authorization/Test/Test',
name: 'Test',
meta: {
title: 'router.permission'
}
}
]
}
@ -654,6 +655,7 @@ const testList: string[] = [
'/function/multiple-tabs',
'/function/multiple-tabs-demo/:id',
'/function/request',
'/function/test',
'/hooks',
'/hooks/useWatermark',
'/hooks/useTagsView',
@ -678,7 +680,6 @@ const testList: string[] = [
'/authorization/user',
'/authorization/role',
'/authorization/menu',
'/authorization/test',
'/error',
'/error/404-demo',
'/error/403-demo',

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