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

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)
})

70
src/views/Authorization/Test/Test.vue
View File

@@ -1,70 +0,0 @@
<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { ref, unref } from 'vue'
import { ElButton, ElDivider, ElRow, ElCol } from 'element-plus'
import { hasPermi } from '@/components/Permission'
const permission = ref('add')
setTimeout(() => {
permission.value = 'view'
}, 3000)
</script>
<template>
<ContentWrap>
<ElDivider>组件方式判断（已经全局注册，支持动态修改）</ElDivider>
<ElRow :gutter="20">
<ElCol :span="8">
新增权限：
<Permission permission="add">
<ElButton type="primary"> Add </ElButton>
</Permission>
</ElCol>
<ElCol :span="8">
删除权限：
<Permission permission="delete">
<ElButton type="danger"> Delete </ElButton>
</Permission>
</ElCol>
<ElCol :span="8">
3秒后切换查看权限：
<Permission :permission="permission">
<ElButton type="primary"> View </ElButton>
</Permission>
</ElCol>
</ElRow>
<ElDivider>指令方式判断（已经全局注册，不支持动态修改）</ElDivider>
<ElRow :gutter="20">
<ElCol :span="8">
新增权限：
<ElButton v-hasPermi="'add'" type="primary"> Add </ElButton>
</ElCol>
<ElCol :span="8">
删除权限：
<ElButton v-hasPermi="'delete'" type="danger"> Delete </ElButton>
</ElCol>
<ElCol :span="8">
3秒后切换查看权限（无法动态修改）：
<ElButton v-hasPermi="permission" type="primary"> View </ElButton>
</ElCol>
</ElRow>
<ElDivider>函数方式判断</ElDivider>
<ElRow :gutter="20">
<ElCol :span="8">
新增权限：
<ElButton v-if="hasPermi('add')" type="primary"> Add </ElButton>
</ElCol>
<ElCol :span="8">
删除权限：
<ElButton v-if="hasPermi('delete')" type="danger"> Delete </ElButton>
</ElCol>
<ElCol :span="8">
3秒后切换查看权限：
<ElButton v-if="hasPermi(unref(permission))" type="primary"> View </ElButton>
</ElCol>
</ElRow>
</ContentWrap>
</template>

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="{