perf: style

pull/2/head
xingyu 2022-11-24 17:05:24 +08:00
parent e187e7a016
commit 585a576327
2 changed files with 99 additions and 130 deletions

View File

@ -168,7 +168,7 @@ watch(
<ElPagination <ElPagination
small small
:total="copyIconList[currentActiveType].length" :total="copyIconList[currentActiveType].length as unknown as number"
:page-size="pageSize" :page-size="pageSize"
:current-page="currentPage" :current-page="currentPage"
background background

View File

@ -98,134 +98,104 @@
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
<el-form <el-form ref="formRef" :model="menuForm" :rules="rules" label-width="auto" label-position="top">
ref="formRef" <el-form-item label="上级菜单">
:model="menuForm" <el-tree-select
:rules="rules" node-key="id"
:inline="true" v-model="menuForm.parentId"
label-width="120px" :props="menuProps"
label-position="right" :data="menuOptions"
> :default-expanded-keys="[0]"
<el-row :gutter="24"> check-strictly
<el-col :span="24"> />
<el-form-item label="上级菜单"> </el-form-item>
<el-tree-select <el-form-item label="菜单名称" prop="name" span="12">
node-key="id" <el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable />
v-model="menuForm.parentId" </el-form-item>
:props="menuProps" <el-form-item label="菜单类型" prop="type">
:data="menuOptions" <el-radio-group v-model="menuForm.type">
:default-expanded-keys="[0]" <el-radio-button
check-strictly v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="menuForm.type !== 3">
<el-form-item label="菜单图标">
<IconSelect v-model="menuForm.icon" clearable />
</el-form-item>
<el-form-item label="路由地址" prop="path">
<template #label>
<Tooltip
titel="路由地址"
message="访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头"
/> />
</el-form-item> </template>
</el-col> <el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable />
<el-col :span="12"> </el-form-item>
<el-form-item label="菜单类型" prop="type"> </template>
<el-radio-group v-model="menuForm.type"> <template v-if="menuForm.type === 2">
<el-radio-button <el-form-item label="路由地址" prop="component">
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE)" <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
:key="dict.value" </el-form-item>
:label="dict.value" </template>
> <template v-if="menuForm.type !== 1">
{{ dict.label }} <el-form-item label="权限标识" prop="permission">
</el-radio-button> <template #label>
</el-radio-group> <Tooltip
</el-form-item> titel="权限标识"
</el-col> message="Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)"
<el-col :span="12"> />
<el-form-item label="菜单名称" prop="name"> </template>
<el-input v-model="menuForm.name" placeholder="请输入菜单名称" clearable /> <el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable />
</el-form-item> </el-form-item>
</el-col> </template>
<template v-if="menuForm.type !== 3"> <el-form-item label="显示排序" prop="sort">
<el-col :span="12"> <el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable />
<el-form-item label="菜单图标"> </el-form-item>
<IconSelect v-model="menuForm.icon" clearable /> <el-form-item label="菜单状态" prop="status">
</el-form-item> <el-radio-group v-model="menuForm.status">
</el-col> <el-radio
<el-col :span="12"> border
<el-form-item label="路由地址" prop="path"> v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
<template #label> :key="dict.value"
<Tooltip :label="dict.value"
titel="路由地址" >
message="访问的路由地址,如:`user`。如需外网地址时,则以 `http(s)://` 开头" {{ dict.label }}
/> </el-radio>
</template> </el-radio-group>
<el-input v-model="menuForm.path" placeholder="请输入路由地址" clearable /> </el-form-item>
</el-form-item> <template v-if="menuForm.type !== 3">
</el-col> <el-form-item label="显示状态" prop="status">
</template> <template #label>
<template v-if="menuForm.type === 2"> <Tooltip
<el-col :span="12"> titel="显示状态"
<el-form-item label="路由地址" prop="component"> message="选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
<el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable /> />
</el-form-item> </template>
</el-col> <el-radio-group v-model="menuForm.visible">
</template> <el-radio border key="true" :label="true">显示</el-radio>
<template v-if="menuForm.type !== 1"> <el-radio border key="false" :label="false">隐藏</el-radio>
<el-col :span="12"> </el-radio-group>
<el-form-item label="权限标识" prop="permission"> </el-form-item>
<template #label> </template>
<Tooltip <template v-if="menuForm.type === 2">
titel="权限标识" <el-form-item label="缓存状态" prop="keepAlive">
message="Controller 方法上的权限字符,如:@PreAuthorize(`@ss.hasPermission('system:user:list')`)" <template #label>
/> <Tooltip
</template> titel="缓存状态"
<el-input v-model="menuForm.permission" placeholder="请输入权限标识" clearable /> message="选择缓存时,则会被 `keep-alive` 缓存,需要匹配组件的 `name` 和路由地址保持一致"
</el-form-item> />
</el-col> </template>
</template> <el-radio-group v-model="menuForm.keepAlive">
<el-col :span="12"> <el-radio border key="true" :label="true">缓存</el-radio>
<el-form-item label="显示排序" prop="sort"> <el-radio border key="false" :label="false">不缓存</el-radio>
<el-input-number v-model="menuForm.sort" controls-position="right" :min="0" clearable /> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </template>
<el-col :span="12">
<el-form-item label="菜单状态" prop="status">
<el-radio-group v-model="menuForm.status">
<el-radio-button
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
<template v-if="menuForm.type !== 3">
<el-col :span="12">
<el-form-item label="显示状态" prop="status">
<template #label>
<Tooltip
titel="显示状态"
message="选择隐藏时,路由将不会出现在侧边栏,但仍然可以访问"
/>
</template>
<el-radio-group v-model="menuForm.visible">
<el-radio-button key="true" :label="true">显示</el-radio-button>
<el-radio-button key="false" :label="false">隐藏</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</template>
<template v-if="menuForm.type === 2">
<el-col :span="12">
<el-form-item label="缓存状态" prop="keepAlive">
<template #label>
<Tooltip
titel="缓存状态"
message="选择缓存时,则会被 `keep-alive` 缓存,需要匹配组件的 `name` 和路由地址保持一致"
/>
</template>
<el-radio-group v-model="menuForm.keepAlive">
<el-radio-button key="true" :label="true">缓存</el-radio-button>
<el-radio-button key="false" :label="false">不缓存</el-radio-button>
</el-radio-group>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<!-- 按钮保存 --> <!-- 按钮保存 -->
@ -247,8 +217,6 @@ import { onMounted, reactive, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage' import { useMessage } from '@/hooks/web/useMessage'
import { import {
ElRow,
ElCol,
ElForm, ElForm,
ElFormItem, ElFormItem,
ElInput, ElInput,
@ -256,6 +224,7 @@ import {
ElSelect, ElSelect,
ElTreeSelect, ElTreeSelect,
ElOption, ElOption,
ElRadio,
ElRadioGroup, ElRadioGroup,
ElRadioButton, ElRadioButton,
FormInstance FormInstance