estel/gva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 使用prettierrc对代码进行格式化

Browse Source
This commit is contained in:
piexlMax(奇淼
2024-11-09 10:32:26 +08:00
parent 87a4ce17e1
commit 7d9af64f6d
139 changed files with 12685 additions and 12664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

694
web/src/view/superAdmin/menu/menu.vue
View File

@@ -2,26 +2,14 @@
<div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button
type="primary"
icon="plus"
@click="addMenu(0)"
>
<el-button type="primary" icon="plus" @click="addMenu(0)">
新增根菜单
</el-button>
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<el-table
:data="tableData"
row-key="ID"
>
<el-table-column
align="left"
label="ID"
min-width="100"
prop="ID"
/>
<el-table :data="tableData" row-key="ID">
<el-table-column align="left" label="ID" min-width="100" prop="ID" />
<el-table-column
align="left"
label="展示名称"
@@ -39,10 +27,7 @@
prop="authorityName"
>
<template #default="scope">
<div
v-if="scope.row.meta.icon"
class="icon-column"
>
<div v-if="scope.row.meta.icon" class="icon-column">
<el-icon>
<component :is="scope.row.meta.icon" />
</el-icon>
@@ -71,7 +56,7 @@
prop="hidden"
>
<template #default="scope">
<span>{{ scope.row.hidden ? "隐藏" : "显示" }}</span>
<span>{{ scope.row.hidden ? '隐藏' : '显示' }}</span>
</template>
</el-table-column>
<el-table-column
@@ -80,24 +65,14 @@
min-width="90"
prop="parentId"
/>
<el-table-column
align="left"
label="排序"
min-width="70"
prop="sort"
/>
<el-table-column align="left" label="排序" min-width="70" prop="sort" />
<el-table-column
align="left"
label="文件路径"
min-width="360"
prop="component"
/>
<el-table-column
align="left"
fixed="right"
label="操作"
width="300"
>
<el-table-column align="left" fixed="right" label="操作" width="300">
<template #default="scope">
<el-button
type="primary"
@@ -137,15 +112,8 @@
<div class="flex justify-between items-center">
<span class="text-lg">{{ dialogTitle }}</span>
<div>
<el-button @click="closeDialog">
取 消
</el-button>
<el-button
type="primary"
@click="enterDialog"
>
确 定
</el-button>
<el-button @click="closeDialog"> 取 消 </el-button>
<el-button type="primary" @click="enterDialog"> 确 定 </el-button>
</div>
</div>
</template>
@@ -161,12 +129,14 @@
>
<el-row class="w-full">
<el-col :span="16">
<el-form-item
label="文件路径"
prop="component"
>
<components-cascader :component="form.component" @change="fmtComponent" />
<span style="font-size: 12px; margin-right: 12px">如果菜单包含子菜单，请创建router-view二级路由页面或者</span>
<el-form-item label="文件路径" prop="component">
<components-cascader
:component="form.component"
@change="fmtComponent"
/>
<span style="font-size: 12px; margin-right: 12px"
>如果菜单包含子菜单，请创建router-view二级路由页面或者</span
>
<el-button
style="margin-top: 4px"
@click="form.component = 'view/routerHolder.vue'"
@@ -176,23 +146,14 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="展示名称"
prop="meta.title"
>
<el-input
v-model="form.meta.title"
autocomplete="off"
/>
<el-form-item label="展示名称" prop="meta.title">
<el-input v-model="form.meta.title" autocomplete="off" />
</el-form-item>
</el-col>
</el-row>
<el-row class="w-full">
<el-col :span="8">
<el-form-item
label="路由Name"
prop="path"
>
<el-form-item label="路由Name" prop="path">
<el-input
v-model="form.name"
autocomplete="off"
@@ -202,16 +163,15 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="path"
>
<el-form-item prop="path">
<template #label>
<span style="display: inline-flex; align-items: center">
<span>路由Path</span>
<el-checkbox
v-model="checkFlag"
style="margin-left: 12px; height: auto"
>添加参数</el-checkbox>
>添加参数</el-checkbox
>
</span>
</template>
@@ -224,31 +184,21 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="是否隐藏"
>
<el-form-item label="是否隐藏">
<el-select
v-model="form.hidden"
style="width: 100%"
placeholder="是否在列表隐藏"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row class="w-full">
<el-col :span="8">
<el-form-item
label="父节点ID"
>
<el-form-item label="父节点ID">
<el-cascader
v-model="form.parentId"
style="width: 100%"
@@ -259,7 +209,7 @@
label: 'title',
value: 'ID',
disabled: 'disabled',
emitPath: false,
emitPath: false
}"
:show-all-levels="false"
filterable
@@ -267,32 +217,19 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="图标"
prop="meta.icon"
>
<icon
v-model="form.meta.icon"
/>
<el-form-item label="图标" prop="meta.icon">
<icon v-model="form.meta.icon" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="排序标记"
prop="sort"
>
<el-input
v-model.number="form.sort"
autocomplete="off"
/>
<el-form-item label="排序标记" prop="sort">
<el-input v-model.number="form.sort" autocomplete="off" />
</el-form-item>
</el-col>
</el-row>
<el-row class="w-full">
<el-col :span="8">
<el-form-item
prop="meta.activeName"
>
<el-form-item prop="meta.activeName">
<template #label>
<div>
<span> 高亮菜单 </span>
@@ -313,44 +250,26 @@
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="KeepAlive"
prop="meta.keepAlive"
>
<el-form-item label="KeepAlive" prop="meta.keepAlive">
<el-select
v-model="form.meta.keepAlive"
style="width: 100%"
placeholder="是否keepAlive缓存页面"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
label="CloseTab"
prop="meta.closeTab"
>
<el-form-item label="CloseTab" prop="meta.closeTab">
<el-select
v-model="form.meta.closeTab"
style="width: 100%"
placeholder="是否自动关闭tab"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
</el-select>
</el-form-item>
</el-col>
@@ -376,14 +295,8 @@
style="width: 100%"
placeholder="是否为基础页面"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
</el-select>
</el-form-item>
</el-col>
@@ -391,18 +304,11 @@
</el-form>
<div>
<div class="flex items-center gap-2">
<el-button
type="primary"
icon="edit"
@click="addParameter(form)"
>
<el-button type="primary" icon="edit" @click="addParameter(form)">
新增菜单参数
</el-button>
</div>
<el-table
:data="form.parameters"
style="width: 100%; margin-top: 12px"
>
<el-table :data="form.parameters" style="width: 100%; margin-top: 12px">
<el-table-column
align="left"
prop="type"
@@ -410,40 +316,20 @@
width="180"
>
<template #default="scope">
<el-select
v-model="scope.row.type"
placeholder="请选择"
>
<el-option
key="query"
value="query"
label="query"
/>
<el-option
key="params"
value="params"
label="params"
/>
<el-select v-model="scope.row.type" placeholder="请选择">
<el-option key="query" value="query" label="query" />
<el-option key="params" value="params" label="params" />
</el-select>
</template>
</el-table-column>
<el-table-column
align="left"
prop="key"
label="参数key"
width="180"
>
<el-table-column align="left" prop="key" label="参数key" width="180">
<template #default="scope">
<div>
<el-input v-model="scope.row.key" />
</div>
</template>
</el-table-column>
<el-table-column
align="left"
prop="value"
label="参数值"
>
<el-table-column align="left" prop="value" label="参数值">
<template #default="scope">
<div>
<el-input v-model="scope.row.value" />
@@ -466,11 +352,7 @@
</el-table>
<div class="flex items-center gap-2 mt-3">
<el-button
type="primary"
icon="edit"
@click="addBtn(form)"
>
<el-button type="primary" icon="edit" @click="addBtn(form)">
新增可控按钮
</el-button>
<el-icon
@@ -483,10 +365,7 @@
</el-icon>
</div>
<el-table
:data="form.menuBtn"
style="width: 100%; margin-top: 12px"
>
<el-table :data="form.menuBtn" style="width: 100%; margin-top: 12px">
<el-table-column
align="left"
prop="name"
@@ -499,12 +378,7 @@
</div>
</template>
</el-table-column>
<el-table-column
align="left"
prop="name"
label="备注"
width="180"
>
<el-table-column align="left" prop="name" label="备注" width="180">
<template #default="scope">
<div>
<el-input v-model="scope.row.desc" />
@@ -531,152 +405,95 @@
</template>
<script setup>
import {
updateBaseMenu,
getMenuList,
addBaseMenu,
deleteBaseMenu,
getBaseMenuById,
} from '@/api/menu'
import icon from '@/view/superAdmin/menu/icon.vue'
import WarningBar from '@/components/warningBar/warningBar.vue'
import { canRemoveAuthorityBtnApi } from '@/api/authorityBtn'
import {reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { toDoc } from '@/utils/doc'
import {toLowerCase} from "@/utils/stringFun";
import ComponentsCascader from "@/view/superAdmin/menu/components/components-cascader.vue";
import {
updateBaseMenu,
getMenuList,
addBaseMenu,
deleteBaseMenu,
getBaseMenuById
} from '@/api/menu'
import icon from '@/view/superAdmin/menu/icon.vue'
import WarningBar from '@/components/warningBar/warningBar.vue'
import { canRemoveAuthorityBtnApi } from '@/api/authorityBtn'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'
import { toDoc } from '@/utils/doc'
import { toLowerCase } from '@/utils/stringFun'
import ComponentsCascader from '@/view/superAdmin/menu/components/components-cascader.vue'
import pathInfo from "@/pathInfo.json";
import pathInfo from '@/pathInfo.json'
defineOptions({
name: 'Menus',
})
const rules = reactive({
path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
'meta.title': [
{ required: true, message: '请输入菜单展示名称', trigger: 'blur' },
],
})
const tableData = ref([])
// 查询
const getTableData = async() => {
const table = await getMenuList()
if (table.code === 0) {
tableData.value = table.data
}
}
getTableData()
// 新增参数
const addParameter = (form) => {
if (!form.parameters) {
form.parameters = []
}
form.parameters.push({
type: 'query',
key: '',
value: '',
defineOptions({
name: 'Menus'
})
}
const fmtComponent = (component) => {
form.value.component = component.replace(/\\/g, '/')
form.value.name = toLowerCase(pathInfo["/src/"+component])
form.value.path = form.value.name
}
// 删除参数
const deleteParameter = (parameters, index) => {
parameters.splice(index, 1)
}
// 新增可控按钮
const addBtn = (form) => {
if (!form.menuBtn) {
form.menuBtn = []
}
form.menuBtn.push({
name: '',
desc: '',
const rules = reactive({
path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
'meta.title': [
{ required: true, message: '请输入菜单展示名称', trigger: 'blur' }
]
})
}
// 删除可控按钮
const deleteBtn = async(btns, index) => {
const btn = btns[index]
if (btn.ID === 0) {
btns.splice(index, 1)
return
const tableData = ref([])
// 查询
const getTableData = async () => {
const table = await getMenuList()
if (table.code === 0) {
tableData.value = table.data
}
}
const res = await canRemoveAuthorityBtnApi({ id: btn.ID })
if (res.code === 0) {
btns.splice(index, 1)
}
}
const form = ref({
ID: 0,
path: '',
name: '',
hidden: false,
parentId: 0,
component: '',
meta: {
activeName: '',
title: '',
icon: '',
defaultMenu: false,
closeTab: false,
keepAlive: false,
},
parameters: [],
menuBtn: [],
})
const changeName = () => {
form.value.path = form.value.name
}
getTableData()
const handleClose = (done) => {
initForm()
done()
}
// 删除菜单
const deleteMenu = (ID) => {
ElMessageBox.confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async() => {
const res = await deleteBaseMenu({ ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!',
})
getTableData()
}
// 新增参数
const addParameter = (form) => {
if (!form.parameters) {
form.parameters = []
}
form.parameters.push({
type: 'query',
key: '',
value: ''
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除',
})
}
const fmtComponent = (component) => {
form.value.component = component.replace(/\\/g, '/')
form.value.name = toLowerCase(pathInfo['/src/' + component])
form.value.path = form.value.name
}
// 删除参数
const deleteParameter = (parameters, index) => {
parameters.splice(index, 1)
}
// 新增可控按钮
const addBtn = (form) => {
if (!form.menuBtn) {
form.menuBtn = []
}
form.menuBtn.push({
name: '',
desc: ''
})
}
// 初始化弹窗内表格方法
const menuForm = ref(null)
const checkFlag = ref(false)
const initForm = () => {
checkFlag.value = false
menuForm.value.resetFields()
form.value = {
}
// 删除可控按钮
const deleteBtn = async (btns, index) => {
const btn = btns[index]
if (btn.ID === 0) {
btns.splice(index, 1)
return
}
const res = await canRemoveAuthorityBtnApi({ id: btn.ID })
if (res.code === 0) {
btns.splice(index, 1)
}
}
const form = ref({
ID: 0,
path: '',
name: '',
@@ -684,116 +501,177 @@ const initForm = () => {
parentId: 0,
component: '',
meta: {
activeName: '',
title: '',
icon: '',
defaultMenu: false,
closeTab: false,
keepAlive: false,
keepAlive: false
},
}
}
// 关闭弹窗
const dialogFormVisible = ref(false)
const closeDialog = () => {
initForm()
dialogFormVisible.value = false
}
// 添加menu
const enterDialog = async() => {
menuForm.value.validate(async(valid) => {
if (valid) {
let res
if (isEdit.value) {
res = await updateBaseMenu(form.value)
} else {
res = await addBaseMenu(form.value)
}
if (res.code === 0) {
ElMessage({
type: 'success',
message: isEdit.value ? '编辑成功' : '添加成功!',
})
getTableData()
}
initForm()
dialogFormVisible.value = false
}
parameters: [],
menuBtn: []
})
}
const changeName = () => {
form.value.path = form.value.name
}
const menuOption = ref([
{
ID: '0',
title: '根菜单',
},
])
const setOptions = () => {
menuOption.value = [
{
const handleClose = (done) => {
initForm()
done()
}
// 删除菜单
const deleteMenu = (ID) => {
ElMessageBox.confirm(
'此操作将永久删除所有角色下该菜单, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(async () => {
const res = await deleteBaseMenu({ ID })
if (res.code === 0) {
ElMessage({
type: 'success',
message: '删除成功!'
})
getTableData()
}
})
.catch(() => {
ElMessage({
type: 'info',
message: '已取消删除'
})
})
}
// 初始化弹窗内表格方法
const menuForm = ref(null)
const checkFlag = ref(false)
const initForm = () => {
checkFlag.value = false
menuForm.value.resetFields()
form.value = {
ID: 0,
title: '根目录',
},
]
setMenuOptions(tableData.value, menuOption.value, false)
}
const setMenuOptions = (menuData, optionsData, disabled) => {
menuData &&
menuData.forEach((item) => {
if (item.children && item.children.length) {
const option = {
title: item.meta.title,
ID: item.ID,
disabled: disabled || item.ID === form.value.ID,
children: [],
path: '',
name: '',
hidden: false,
parentId: 0,
component: '',
meta: {
title: '',
icon: '',
defaultMenu: false,
closeTab: false,
keepAlive: false
}
}
}
// 关闭弹窗
const dialogFormVisible = ref(false)
const closeDialog = () => {
initForm()
dialogFormVisible.value = false
}
// 添加menu
const enterDialog = async () => {
menuForm.value.validate(async (valid) => {
if (valid) {
let res
if (isEdit.value) {
res = await updateBaseMenu(form.value)
} else {
res = await addBaseMenu(form.value)
}
setMenuOptions(
item.children,
option.children,
disabled || item.ID === form.value.ID
)
optionsData.push(option)
} else {
const option = {
title: item.meta.title,
ID: item.ID,
disabled: disabled || item.ID === form.value.ID,
if (res.code === 0) {
ElMessage({
type: 'success',
message: isEdit.value ? '编辑成功' : '添加成功!'
})
getTableData()
}
optionsData.push(option)
initForm()
dialogFormVisible.value = false
}
})
}
}
// 添加菜单方法，id为 0则为添加根菜单
const isEdit = ref(false)
const dialogTitle = ref('新增菜单')
const addMenu = (id) => {
dialogTitle.value = '新增菜单'
form.value.parentId = id
isEdit.value = false
setOptions()
dialogFormVisible.value = true
}
// 修改菜单方法
const editMenu = async(id) => {
dialogTitle.value = '编辑菜单'
const res = await getBaseMenuById({ id })
form.value = res.data.menu
isEdit.value = true
setOptions()
dialogFormVisible.value = true
}
const menuOption = ref([
{
ID: '0',
title: '根菜单'
}
])
const setOptions = () => {
menuOption.value = [
{
ID: 0,
title: '根目录'
}
]
setMenuOptions(tableData.value, menuOption.value, false)
}
const setMenuOptions = (menuData, optionsData, disabled) => {
menuData &&
menuData.forEach((item) => {
if (item.children && item.children.length) {
const option = {
title: item.meta.title,
ID: item.ID,
disabled: disabled || item.ID === form.value.ID,
children: []
}
setMenuOptions(
item.children,
option.children,
disabled || item.ID === form.value.ID
)
optionsData.push(option)
} else {
const option = {
title: item.meta.title,
ID: item.ID,
disabled: disabled || item.ID === form.value.ID
}
optionsData.push(option)
}
})
}
// 添加菜单方法，id为 0则为添加根菜单
const isEdit = ref(false)
const dialogTitle = ref('新增菜单')
const addMenu = (id) => {
dialogTitle.value = '新增菜单'
form.value.parentId = id
isEdit.value = false
setOptions()
dialogFormVisible.value = true
}
// 修改菜单方法
const editMenu = async (id) => {
dialogTitle.value = '编辑菜单'
const res = await getBaseMenuById({ id })
form.value = res.data.menu
isEdit.value = true
setOptions()
dialogFormVisible.value = true
}
</script>
<style scoped lang="scss">
.warning {
color: #dc143c;
}
.icon-column {
display: flex;
align-items: center;
.el-icon {
margin-right: 8px;
.warning {
color: #dc143c;
}
.icon-column {
display: flex;
align-items: center;
.el-icon {
margin-right: 8px;
}
}
}
</style>