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

前端eslint调整

Browse Source
This commit is contained in:
piexlMax
2023-09-14 18:47:47 +08:00
parent 636204bbaf
commit a4f86354d3
64 changed files with 3302 additions and 1096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,21 +2,49 @@
<div>
<div class="gva-table-box">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT/?p=4&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
<el-button
type="primary"
icon="plus"
@click="addMenu('0')"
>新增根菜单</el-button>
<el-icon
class="cursor-pointer"
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT/?p=4&vd_source=f2640257c21e3b547a790461ed94875e')"
><VideoCameraFilled /></el-icon>
</div>
<!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
<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="展示名称" min-width="120" prop="authorityName">
<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="展示名称"
min-width="120"
prop="authorityName"
>
<template #default="scope">
<span>{{ scope.row.meta.title }}</span>
</template>
</el-table-column>
<el-table-column align="left" label="图标" min-width="140" prop="authorityName">
<el-table-column
align="left"
label="图标"
min-width="140"
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>
@@ -24,17 +52,54 @@
</div>
</template>
</el-table-column>
<el-table-column align="left" label="路由Name" show-overflow-tooltip min-width="160" prop="name" />
<el-table-column align="left" label="路由Path" show-overflow-tooltip min-width="160" prop="path" />
<el-table-column align="left" label="是否隐藏" min-width="100" prop="hidden">
<el-table-column
align="left"
label="路由Name"
show-overflow-tooltip
min-width="160"
prop="name"
/>
<el-table-column
align="left"
label="路由Path"
show-overflow-tooltip
min-width="160"
prop="path"
/>
<el-table-column
align="left"
label="是否隐藏"
min-width="100"
prop="hidden"
>
<template #default="scope">
<span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
</template>
</el-table-column>
<el-table-column align="left" label="父节点" min-width="90" prop="parentId" />
<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"
label="父节点"
min-width="90"
prop="parentId"
/>
<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"
>
<template #default="scope">
<el-button
type="primary"
@@ -59,7 +124,11 @@
</el-table-column>
</el-table>
</div>
<el-dialog v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle">
<el-dialog
v-model="dialogFormVisible"
:before-close="handleClose"
:title="dialogTitle"
>
<warning-bar title="新增菜单，需要在角色管理内配置权限才可使用" />
<el-form
v-if="dialogFormVisible"
@@ -70,7 +139,11 @@
label-position="top"
label-width="85px"
>
<el-form-item label="路由Name" prop="path" style="width:30%">
<el-form-item
label="路由Name"
prop="path"
style="width:30%"
>
<el-input
v-model="form.name"
autocomplete="off"
@@ -78,11 +151,17 @@
@change="changeName"
/>
</el-form-item>
<el-form-item prop="path" style="width:30%">
<el-form-item
prop="path"
style="width:30%"
>
<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
v-model="checkFlag"
style="margin-left:12px;height: auto"
>添加参数</el-checkbox>
</span>
</template>
@@ -93,13 +172,28 @@
placeholder="建议只在后方拼接参数"
/>
</el-form-item>
<el-form-item label="是否隐藏" style="width:30%">
<el-select v-model="form.hidden" placeholder="是否在列表隐藏">
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
<el-form-item
label="是否隐藏"
style="width:30%"
>
<el-select
v-model="form.hidden"
placeholder="是否在列表隐藏"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
</el-select>
</el-form-item>
<el-form-item label="父节点ID" style="width:30%">
<el-form-item
label="父节点ID"
style="width:30%"
>
<el-cascader
v-model="form.parentId"
style="width:100%"
@@ -110,55 +204,141 @@
filterable
/>
</el-form-item>
<el-form-item label="文件路径" prop="component" style="width:60%">
<el-input v-model="form.component" autocomplete="off" placeholder="页面:view/xxx/xx.vue 插件:plugin/xx/xx.vue" @blur="fmtComponent" />
<span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单，请创建router-view二级路由页面或者</span><el-button style="margin-top:4px" @click="form.component = 'view/routerHolder.vue'">点我设置</el-button>
<el-form-item
label="文件路径"
prop="component"
style="width:60%"
>
<el-input
v-model="form.component"
autocomplete="off"
placeholder="页面:view/xxx/xx.vue 插件:plugin/xx/xx.vue"
@blur="fmtComponent"
/>
<span style="font-size:12px;margin-right:12px;">如果菜单包含子菜单，请创建router-view二级路由页面或者</span><el-button
style="margin-top:4px"
@click="form.component = 'view/routerHolder.vue'"
>点我设置</el-button>
</el-form-item>
<el-form-item label="展示名称" prop="meta.title" style="width:30%">
<el-input v-model="form.meta.title" autocomplete="off" />
<el-form-item
label="展示名称"
prop="meta.title"
style="width:30%"
>
<el-input
v-model="form.meta.title"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="图标" prop="meta.icon" style="width:30%">
<icon :meta="form.meta" style="width:100%" />
<el-form-item
label="图标"
prop="meta.icon"
style="width:30%"
>
<icon
:meta="form.meta"
style="width:100%"
/>
</el-form-item>
<el-form-item label="排序标记" prop="sort" style="width:30%">
<el-input v-model.number="form.sort" autocomplete="off" />
<el-form-item
label="排序标记"
prop="sort"
style="width:30%"
>
<el-input
v-model.number="form.sort"
autocomplete="off"
/>
</el-form-item>
<el-form-item prop="meta.activeName" style="width:30%">
<el-form-item
prop="meta.activeName"
style="width:30%"
>
<template #label>
<div>
<span> 高亮菜单 </span>
<el-tooltip content="注：当到达此路由时候，指定左侧菜单指定name会处于活跃状态（亮起），可为空，为空则为本路由Name。" placement="top" effect="light">
<el-tooltip
content="注：当到达此路由时候，指定左侧菜单指定name会处于活跃状态（亮起），可为空，为空则为本路由Name。"
placement="top"
effect="light"
>
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</div>
</template>
<el-input v-model="form.meta.activeName" :placeholder="form.name" autocomplete="off" />
<el-input
v-model="form.meta.activeName"
:placeholder="form.name"
autocomplete="off"
/>
</el-form-item>
<el-form-item label="KeepAlive" prop="meta.keepAlive" style="width:30%">
<el-select v-model="form.meta.keepAlive" style="width:100%" placeholder="是否keepAlive缓存页面">
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
<el-form-item
label="KeepAlive"
prop="meta.keepAlive"
style="width:30%"
>
<el-select
v-model="form.meta.keepAlive"
style="width:100%"
placeholder="是否keepAlive缓存页面"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
</el-select>
</el-form-item>
<el-form-item label="CloseTab" prop="meta.closeTab" style="width:30%">
<el-select v-model="form.meta.closeTab" style="width:100%" placeholder="是否自动关闭tab">
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
<el-form-item
label="CloseTab"
prop="meta.closeTab"
style="width:30%"
>
<el-select
v-model="form.meta.closeTab"
style="width:100%"
placeholder="是否自动关闭tab"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
</el-select>
</el-form-item>
<el-form-item style="width:30%">
<template #label>
<div>
<span> 是否为基础页面 </span>
<el-tooltip content="此项选择为是，则不会展示左侧菜单以及顶部信息。" placement="top" effect="light">
<el-tooltip
content="此项选择为是，则不会展示左侧菜单以及顶部信息。"
placement="top"
effect="light"
>
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</div>
</template>
<el-select v-model="form.meta.defaultMenu" style="width:100%" placeholder="是否为基础页面">
<el-option :value="false" label="否" />
<el-option :value="true" label="是" />
<el-select
v-model="form.meta.defaultMenu"
style="width:100%"
placeholder="是否为基础页面"
>
<el-option
:value="false"
label="否"
/>
<el-option
:value="true"
label="是"
/>
</el-select>
</el-form-item>
</el-form>
@@ -169,25 +349,56 @@
icon="edit"
@click="addParameter(form)"
>新增菜单参数</el-button>
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=9&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
<el-icon
class="cursor-pointer"
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=9&vd_source=f2640257c21e3b547a790461ed94875e')"
><VideoCameraFilled /></el-icon>
</div>
<el-table :data="form.parameters" style="width: 100%;margin-top: 12px;">
<el-table-column align="left" prop="type" label="参数类型" width="180">
<el-table
:data="form.parameters"
style="width: 100%;margin-top: 12px;"
>
<el-table-column
align="left"
prop="type"
label="参数类型"
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" />
@@ -210,25 +421,43 @@
<div class="flex items-center gap-2 mt-3">
<el-button
type="primary"
icon="edit"
@click="addBtn(form)"
type="primary"
icon="edit"
@click="addBtn(form)"
>新增可控按钮
</el-button>
<el-icon class="cursor-pointer" @click="toDoc('https://www.gin-vue-admin.com/guide/web/button-auth.html')"><QuestionFilled /></el-icon>
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=11&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
<el-icon
class="cursor-pointer"
@click="toDoc('https://www.gin-vue-admin.com/guide/web/button-auth.html')"
><QuestionFilled /></el-icon>
<el-icon
class="cursor-pointer"
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=11&vd_source=f2640257c21e3b547a790461ed94875e')"
><VideoCameraFilled /></el-icon>
</div>
<el-table :data="form.menuBtn" style="width: 100%;margin-top: 12px;">
<el-table-column align="left" prop="name" label="按钮名称" width="180">
<el-table
:data="form.menuBtn"
style="width: 100%;margin-top: 12px;"
>
<el-table-column
align="left"
prop="name"
label="按钮名称"
width="180"
>
<template #default="scope">
<div>
<el-input v-model="scope.row.name" />
</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" />
@@ -252,7 +481,10 @@
<template #footer>
<div class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="enterDialog">确 定</el-button>
<el-button
type="primary"
@click="enterDialog"
>确 定</el-button>
</div>
</template>
</el-dialog>
@@ -272,10 +504,14 @@ 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, VideoCameraFilled} from "@element-plus/icons-vue";
import { QuestionFilled, VideoCameraFilled } from '@element-plus/icons-vue'
import { toDoc } from '@/utils/doc'
defineOptions({
name: 'Menus',
})
const rules = reactive({
path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
component: [
@@ -517,12 +753,6 @@ const editMenu = async(id) => {
</script>
<script>
export default {
name: 'Menus',
}
</script>
<style scoped lang="scss">
.warning {
color: #dc143c;