前端eslint调整
This commit is contained in:
piexlMax
@@ -1,18 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="gva-search-box">
|
||||
<el-form ref="searchForm" :inline="true" :model="searchInfo">
|
||||
<el-form
|
||||
ref="searchForm"
|
||||
:inline="true"
|
||||
:model="searchInfo"
|
||||
>
|
||||
<el-form-item label="路径">
|
||||
<el-input v-model="searchInfo.path" placeholder="路径" />
|
||||
<el-input
|
||||
v-model="searchInfo.path"
|
||||
placeholder="路径"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="searchInfo.description" placeholder="描述" />
|
||||
<el-input
|
||||
v-model="searchInfo.description"
|
||||
placeholder="描述"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="API组">
|
||||
<el-input v-model="searchInfo.apiGroup" placeholder="api组" />
|
||||
<el-input
|
||||
v-model="searchInfo.apiGroup"
|
||||
placeholder="api组"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求">
|
||||
<el-select v-model="searchInfo.method" clearable placeholder="请选择">
|
||||
<el-select
|
||||
v-model="searchInfo.method"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in methodOptions"
|
||||
:key="item.value"
|
||||
@@ -22,46 +39,123 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="refresh" @click="onReset">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="search"
|
||||
@click="onSubmit"
|
||||
>查询</el-button>
|
||||
<el-button
|
||||
icon="refresh"
|
||||
@click="onReset"
|
||||
>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
|
||||
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
|
||||
<el-popover v-model="deleteVisible" placement="top" width="160">
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onDelete">确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button icon="delete" :disabled="!apis.length" @click="deleteVisible = true">删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-popover v-model="freshVisible" placement="top" width="160">
|
||||
<p>确定要刷新Casbin缓存吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" link @click="freshVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onFresh">确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button icon="Refresh" @click="freshVisible = true">刷新缓存</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<div class="gva-btn-list">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="openDialog('addApi')"
|
||||
>新增</el-button>
|
||||
<el-icon
|
||||
class="cursor-pointer"
|
||||
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"
|
||||
><VideoCameraFilled /></el-icon>
|
||||
<el-popover
|
||||
v-model="deleteVisible"
|
||||
placement="top"
|
||||
width="160"
|
||||
>
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="deleteVisible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onDelete"
|
||||
>确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button
|
||||
icon="delete"
|
||||
:disabled="!apis.length"
|
||||
@click="deleteVisible = true"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
v-model="freshVisible"
|
||||
placement="top"
|
||||
width="160"
|
||||
>
|
||||
<p>确定要刷新Casbin缓存吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="freshVisible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onFresh"
|
||||
>确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button
|
||||
icon="Refresh"
|
||||
@click="freshVisible = true"
|
||||
>刷新缓存</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@sort-change="sortChange"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column align="left" label="id" min-width="60" prop="ID" sortable="custom" />
|
||||
<el-table-column align="left" label="API路径" min-width="150" prop="path" sortable="custom" />
|
||||
<el-table-column align="left" label="API分组" min-width="150" prop="apiGroup" sortable="custom" />
|
||||
<el-table-column align="left" label="API简介" min-width="150" prop="description" sortable="custom" />
|
||||
<el-table-column align="left" label="请求" min-width="150" prop="method" sortable="custom">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="id"
|
||||
min-width="60"
|
||||
prop="ID"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API路径"
|
||||
min-width="150"
|
||||
prop="path"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API分组"
|
||||
min-width="150"
|
||||
prop="apiGroup"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="API简介"
|
||||
min-width="150"
|
||||
prop="description"
|
||||
sortable="custom"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求"
|
||||
min-width="150"
|
||||
prop="method"
|
||||
sortable="custom"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
{{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
|
||||
@@ -69,7 +163,12 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" fixed="right" label="操作" width="200">
|
||||
<el-table-column
|
||||
align="left"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="200"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="edit"
|
||||
@@ -102,14 +201,36 @@
|
||||
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
|
||||
<el-dialog
|
||||
v-model="dialogFormVisible"
|
||||
:before-close="closeDialog"
|
||||
:title="dialogTitle"
|
||||
>
|
||||
<warning-bar title="新增API，需要在角色管理内配置权限才可使用" />
|
||||
<el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="路径" prop="path">
|
||||
<el-input v-model="form.path" autocomplete="off" />
|
||||
<el-form
|
||||
ref="apiForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="路径"
|
||||
prop="path"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.path"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求" prop="method">
|
||||
<el-select v-model="form.method" placeholder="请选择" style="width:100%">
|
||||
<el-form-item
|
||||
label="请求"
|
||||
prop="method"
|
||||
>
|
||||
<el-select
|
||||
v-model="form.method"
|
||||
placeholder="请选择"
|
||||
style="width:100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in methodOptions"
|
||||
:key="item.value"
|
||||
@@ -118,29 +239,38 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="api分组" prop="apiGroup">
|
||||
<el-input v-model="form.apiGroup" autocomplete="off" />
|
||||
<el-form-item
|
||||
label="api分组"
|
||||
prop="apiGroup"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.apiGroup"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="api简介" prop="description">
|
||||
<el-input v-model="form.description" autocomplete="off" />
|
||||
<el-form-item
|
||||
label="api简介"
|
||||
prop="description"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Api',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
getApiById,
|
||||
@@ -155,9 +285,13 @@ import { toSQLLine } from '@/utils/stringFun'
|
||||
import WarningBar from '@/components/warningBar/warningBar.vue'
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {VideoCameraFilled} from "@element-plus/icons-vue";
|
||||
import { VideoCameraFilled } from '@element-plus/icons-vue'
|
||||
import { toDoc } from '@/utils/doc'
|
||||
|
||||
defineOptions({
|
||||
name: 'Api',
|
||||
})
|
||||
|
||||
const methodFilter = (value) => {
|
||||
const target = methodOptions.value.filter(item => item.value === value)[0]
|
||||
return target && `${target.label}`
|
||||
|
||||
@@ -3,8 +3,15 @@
|
||||
<warning-bar title="注：右上角头像下拉可切换角色" />
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-button type="primary" icon="plus" @click="addAuthority(0)">新增角色</el-button>
|
||||
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=8&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="addAuthority(0)"
|
||||
>新增角色</el-button>
|
||||
<el-icon
|
||||
class="cursor-pointer"
|
||||
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=8&vd_source=f2640257c21e3b547a790461ed94875e')"
|
||||
><VideoCameraFilled /></el-icon>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
@@ -12,9 +19,22 @@
|
||||
row-key="authorityId"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column label="角色ID" min-width="180" prop="authorityId" />
|
||||
<el-table-column align="left" label="角色名称" min-width="180" prop="authorityName" />
|
||||
<el-table-column align="left" label="操作" width="460">
|
||||
<el-table-column
|
||||
label="角色ID"
|
||||
min-width="180"
|
||||
prop="authorityId"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="角色名称"
|
||||
min-width="180"
|
||||
prop="authorityName"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="操作"
|
||||
width="460"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
icon="setting"
|
||||
@@ -56,9 +76,20 @@
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 新增角色弹窗 -->
|
||||
<el-dialog v-model="dialogFormVisible" :title="dialogTitle">
|
||||
<el-form ref="authorityForm" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="父级角色" prop="parentId">
|
||||
<el-dialog
|
||||
v-model="dialogFormVisible"
|
||||
:title="dialogTitle"
|
||||
>
|
||||
<el-form
|
||||
ref="authorityForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
label="父级角色"
|
||||
prop="parentId"
|
||||
>
|
||||
<el-cascader
|
||||
v-model="form.parentId"
|
||||
style="width:100%"
|
||||
@@ -69,31 +100,71 @@
|
||||
filterable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色ID" prop="authorityId">
|
||||
<el-input v-model="form.authorityId" :disabled="dialogType==='edit'" autocomplete="off" maxlength="15" />
|
||||
<el-form-item
|
||||
label="角色ID"
|
||||
prop="authorityId"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.authorityId"
|
||||
:disabled="dialogType==='edit'"
|
||||
autocomplete="off"
|
||||
maxlength="15"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色姓名" prop="authorityName">
|
||||
<el-input v-model="form.authorityName" autocomplete="off" />
|
||||
<el-form-item
|
||||
label="角色姓名"
|
||||
prop="authorityName"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.authorityName"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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>
|
||||
|
||||
<el-drawer v-if="drawer" v-model="drawer" custom-class="auth-drawer" :with-header="false" size="40%" title="角色配置">
|
||||
<el-tabs :before-leave="autoEnter" type="border-card">
|
||||
<el-drawer
|
||||
v-if="drawer"
|
||||
v-model="drawer"
|
||||
custom-class="auth-drawer"
|
||||
:with-header="false"
|
||||
size="40%"
|
||||
title="角色配置"
|
||||
>
|
||||
<el-tabs
|
||||
:before-leave="autoEnter"
|
||||
type="border-card"
|
||||
>
|
||||
<el-tab-pane label="角色菜单">
|
||||
<Menus ref="menus" :row="activeRow" @changeRow="changeRow" />
|
||||
<Menus
|
||||
ref="menus"
|
||||
:row="activeRow"
|
||||
@changeRow="changeRow"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="角色api">
|
||||
<Apis ref="apis" :row="activeRow" @changeRow="changeRow" />
|
||||
<Apis
|
||||
ref="apis"
|
||||
:row="activeRow"
|
||||
@changeRow="changeRow"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="资源权限">
|
||||
<Datas ref="datas" :authority="tableData" :row="activeRow" @changeRow="changeRow" />
|
||||
<Datas
|
||||
ref="datas"
|
||||
:authority="tableData"
|
||||
:row="activeRow"
|
||||
@changeRow="changeRow"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-drawer>
|
||||
@@ -116,8 +187,12 @@ import WarningBar from '@/components/warningBar/warningBar.vue'
|
||||
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {toDoc} from "@/utils/doc";
|
||||
import {VideoCameraFilled} from "@element-plus/icons-vue";
|
||||
import { toDoc } from '@/utils/doc'
|
||||
import { VideoCameraFilled } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Authority'
|
||||
})
|
||||
|
||||
const mustUint = (rule, value, callback) => {
|
||||
if (!/^[0-9]*[1-9][0-9]*$/.test(value)) {
|
||||
@@ -376,13 +451,6 @@ const editAuthority = (row) => {
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Authority'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.authority {
|
||||
.el-input-number {
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sticky top-0.5 z-10 bg-white">
|
||||
<el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
|
||||
<el-button class="float-right" type="primary" @click="authApiEnter">确 定</el-button>
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
class="w-3/5"
|
||||
placeholder="筛选"
|
||||
/>
|
||||
<el-button
|
||||
class="float-right"
|
||||
type="primary"
|
||||
@click="authApiEnter"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
<div class="tree-content">
|
||||
<el-tree
|
||||
@@ -20,17 +28,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Apis',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { getAllApis } from '@/api/api'
|
||||
import { UpdateCasbin, getPolicyPathByAuthorityId } from '@/api/casbin'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'Apis',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
default: function() {
|
||||
@@ -134,4 +142,3 @@ watch(filterText, (val) => {
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -1,31 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<warning-bar title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）。此功能不建议使用，建议使用插件市场【组织管理功能（点击前往）】来管理资源权限。" href="https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=36" />
|
||||
<warning-bar
|
||||
title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）。此功能不建议使用，建议使用插件市场【组织管理功能（点击前往）】来管理资源权限。"
|
||||
href="https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=36"
|
||||
/>
|
||||
<div class="sticky top-0.5 z-10 bg-white my-4">
|
||||
<el-button class="float-left" type="primary" @click="all">全选</el-button>
|
||||
<el-button class="float-left" type="primary" @click="self">本角色</el-button>
|
||||
<el-button class="float-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
|
||||
<el-button class="float-right" type="primary" @click="authDataEnter">确 定</el-button>
|
||||
<el-button
|
||||
class="float-left"
|
||||
type="primary"
|
||||
@click="all"
|
||||
>全选</el-button>
|
||||
<el-button
|
||||
class="float-left"
|
||||
type="primary"
|
||||
@click="self"
|
||||
>本角色</el-button>
|
||||
<el-button
|
||||
class="float-left"
|
||||
type="primary"
|
||||
@click="selfAndChildren"
|
||||
>本角色及子角色</el-button>
|
||||
<el-button
|
||||
class="float-right"
|
||||
type="primary"
|
||||
@click="authDataEnter"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
<div class="clear-both pt-4">
|
||||
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
|
||||
<el-checkbox v-for="(item,key) in authoritys" :key="key" :label="item">{{ item.authorityName }}</el-checkbox>
|
||||
<el-checkbox-group
|
||||
v-model="dataAuthorityId"
|
||||
@change="selectAuthority"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="(item,key) in authoritys"
|
||||
:key="key"
|
||||
:label="item"
|
||||
>{{ item.authorityName }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Datas'
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { setDataAuthority } from '@/api/authority'
|
||||
import WarningBar from '@/components/warningBar/warningBar.vue'
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'Datas'
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
default: function() {
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="sticky top-0.5 z-10 bg-white">
|
||||
<el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
|
||||
<el-button class="float-right" type="primary" @click="relation">确 定</el-button>
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
class="w-3/5"
|
||||
placeholder="筛选"
|
||||
/>
|
||||
<el-button
|
||||
class="float-right"
|
||||
type="primary"
|
||||
@click="relation"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
<div class="tree-content clear-both">
|
||||
<el-tree
|
||||
@@ -46,21 +54,37 @@
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<el-dialog v-model="btnVisible" title="分配按钮" destroy-on-close>
|
||||
<el-dialog
|
||||
v-model="btnVisible"
|
||||
title="分配按钮"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-table
|
||||
ref="btnTableRef"
|
||||
:data="btnData"
|
||||
row-key="ID"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column label="按钮名称" prop="name" />
|
||||
<el-table-column label="按钮备注" prop="desc" />
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
label="按钮名称"
|
||||
prop="name"
|
||||
/>
|
||||
<el-table-column
|
||||
label="按钮备注"
|
||||
prop="desc"
|
||||
/>
|
||||
</el-table>
|
||||
<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>
|
||||
@@ -76,6 +100,10 @@ import { getAuthorityBtnApi, setAuthorityBtnApi } from '@/api/authorityBtn'
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'Menus'
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
default: function() {
|
||||
@@ -208,13 +236,6 @@ watch(filterText, (val) => {
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Menus'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-tree-node{
|
||||
span+span{
|
||||
|
||||
@@ -4,21 +4,48 @@
|
||||
title="获取字典且缓存方法已在前端utils/dictionary 已经封装完成 不必自己书写 使用方法查看文件内注释"
|
||||
/>
|
||||
<div class="gva-search-box">
|
||||
<el-form :inline="true" :model="searchInfo">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="searchInfo"
|
||||
>
|
||||
<el-form-item label="字典名（中）">
|
||||
<el-input v-model="searchInfo.name" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.name"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典名（英）">
|
||||
<el-input v-model="searchInfo.type" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.type"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="searchInfo.status" clear placeholder="请选择">
|
||||
<el-option key="true" label="是" value="true" />
|
||||
<el-option key="false" label="否" value="false" />
|
||||
<el-form-item
|
||||
label="状态"
|
||||
prop="status"
|
||||
>
|
||||
<el-select
|
||||
v-model="searchInfo.status"
|
||||
clear
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
key="true"
|
||||
label="是"
|
||||
value="true"
|
||||
/>
|
||||
<el-option
|
||||
key="false"
|
||||
label="否"
|
||||
value="false"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="searchInfo.desc" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.desc"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
@@ -43,7 +70,10 @@
|
||||
icon="plus"
|
||||
@click="openDialog"
|
||||
>新增</el-button>
|
||||
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=12&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
|
||||
<el-icon
|
||||
class="cursor-pointer"
|
||||
@click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=12&vd_source=f2640257c21e3b547a790461ed94875e')"
|
||||
><VideoCameraFilled /></el-icon>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
@@ -52,8 +82,15 @@
|
||||
tooltip-effect="dark"
|
||||
row-key="ID"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column align="left" label="日期" width="180">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="日期"
|
||||
width="180"
|
||||
>
|
||||
<template #default="scope">{{
|
||||
formatDate(scope.row.CreatedAt)
|
||||
}}</template>
|
||||
@@ -73,15 +110,28 @@
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<el-table-column align="left" label="状态" prop="status" width="120">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="状态"
|
||||
prop="status"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">{{
|
||||
formatBoolean(scope.row.status)
|
||||
}}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" label="描述" prop="desc" width="280" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="描述"
|
||||
prop="desc"
|
||||
width="280"
|
||||
/>
|
||||
|
||||
<el-table-column align="left" label="操作">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
|
||||
@@ -154,7 +204,10 @@
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
>
|
||||
<el-form-item label="字典名（中）" prop="name">
|
||||
<el-form-item
|
||||
label="字典名（中）"
|
||||
prop="name"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入字典名（中）"
|
||||
@@ -162,7 +215,10 @@
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典名（英）" prop="type">
|
||||
<el-form-item
|
||||
label="字典名（英）"
|
||||
prop="type"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.type"
|
||||
placeholder="请输入字典名（英）"
|
||||
@@ -170,14 +226,21 @@
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status" required>
|
||||
<el-form-item
|
||||
label="状态"
|
||||
prop="status"
|
||||
required
|
||||
>
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
active-text="开启"
|
||||
inactive-text="停用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="desc">
|
||||
<el-form-item
|
||||
label="描述"
|
||||
prop="desc"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.desc"
|
||||
placeholder="请输入描述"
|
||||
@@ -200,12 +263,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SysDictionary',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
createSysDictionary,
|
||||
@@ -219,8 +276,12 @@ import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { formatBoolean, formatDate } from '@/utils/format'
|
||||
import {toDoc} from "@/utils/doc";
|
||||
import {VideoCameraFilled} from "@element-plus/icons-vue";
|
||||
import { toDoc } from '@/utils/doc'
|
||||
import { VideoCameraFilled } from '@element-plus/icons-vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'SysDictionary',
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
@@ -1,28 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="gva-search-box">
|
||||
<el-form :inline="true" :model="searchInfo">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="searchInfo"
|
||||
>
|
||||
<el-form-item label="展示值">
|
||||
<el-input v-model="searchInfo.label" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.label"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典值">
|
||||
<el-input-number v-model="searchInfo.value" placeholder="搜索条件" min="-2147483648" max="2147483647"/>
|
||||
<el-input-number
|
||||
v-model="searchInfo.value"
|
||||
placeholder="搜索条件"
|
||||
min="-2147483648"
|
||||
max="2147483647"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="status">
|
||||
<el-select v-model="searchInfo.status" placeholder="请选择">
|
||||
<el-option key="true" label="是" value="true" />
|
||||
<el-option key="false" label="否" value="false" />
|
||||
<el-form-item
|
||||
label="启用状态"
|
||||
prop="status"
|
||||
>
|
||||
<el-select
|
||||
v-model="searchInfo.status"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
key="true"
|
||||
label="是"
|
||||
value="true"
|
||||
/>
|
||||
<el-option
|
||||
key="false"
|
||||
label="否"
|
||||
value="false"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="refresh" @click="onReset">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="search"
|
||||
@click="onSubmit"
|
||||
>查询</el-button>
|
||||
<el-button
|
||||
icon="refresh"
|
||||
@click="onReset"
|
||||
>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-button type="primary" icon="plus" @click="openDialog">新增字典项</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="openDialog"
|
||||
>新增字典项</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
@@ -31,34 +67,90 @@
|
||||
tooltip-effect="dark"
|
||||
row-key="ID"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column align="left" label="日期" width="180">
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="日期"
|
||||
width="180"
|
||||
>
|
||||
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" label="展示值" prop="label" width="120" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="展示值"
|
||||
prop="label"
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<el-table-column align="left" label="字典值" prop="value" width="120" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="字典值"
|
||||
prop="value"
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<el-table-column align="left" label="扩展值" prop="extend" width="120" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="扩展值"
|
||||
prop="extend"
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<el-table-column align="left" label="启用状态" prop="status" width="120">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="启用状态"
|
||||
prop="status"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="left" label="排序标记" prop="sort" width="120" />
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="排序标记"
|
||||
prop="sort"
|
||||
width="120"
|
||||
/>
|
||||
|
||||
<el-table-column align="left" label="操作">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
|
||||
<el-popover v-model="scope.row.visible" placement="top" width="160">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="edit"
|
||||
@click="updateSysDictionaryDetailFunc(scope.row)"
|
||||
>变更</el-button>
|
||||
<el-popover
|
||||
v-model="scope.row.visible"
|
||||
placement="top"
|
||||
width="160"
|
||||
>
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="deleteSysDictionaryDetailFunc(scope.row)">确定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="scope.row.visible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="deleteSysDictionaryDetailFunc(scope.row)"
|
||||
>确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button type="primary" link icon="delete" @click="scope.row.visible = true">删除</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="delete"
|
||||
@click="scope.row.visible = true"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
@@ -78,9 +170,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="type==='create'?'添加字典项':'修改字典项'">
|
||||
<el-form ref="dialogForm" :model="formData" :rules="rules" label-width="110px">
|
||||
<el-form-item label="展示值" prop="label">
|
||||
<el-dialog
|
||||
v-model="dialogFormVisible"
|
||||
:before-close="closeDialog"
|
||||
:title="type==='create'?'添加字典项':'修改字典项'"
|
||||
>
|
||||
<el-form
|
||||
ref="dialogForm"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="110px"
|
||||
>
|
||||
<el-form-item
|
||||
label="展示值"
|
||||
prop="label"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.label"
|
||||
placeholder="请输入展示值"
|
||||
@@ -88,7 +192,10 @@
|
||||
:style="{width: '100%'}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="字典值" prop="value">
|
||||
<el-form-item
|
||||
label="字典值"
|
||||
prop="value"
|
||||
>
|
||||
<el-input-number
|
||||
v-model.number="formData.value"
|
||||
step-strictly
|
||||
@@ -100,36 +207,51 @@
|
||||
max="2147483647"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="扩展值" prop="extend">
|
||||
<el-form-item
|
||||
label="扩展值"
|
||||
prop="extend"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.extend"
|
||||
placeholder="请输入扩展值"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
v-model="formData.extend"
|
||||
placeholder="请输入扩展值"
|
||||
clearable
|
||||
:style="{width: '100%'}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用状态" prop="status" required>
|
||||
<el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
|
||||
<el-form-item
|
||||
label="启用状态"
|
||||
prop="status"
|
||||
required
|
||||
>
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
active-text="开启"
|
||||
inactive-text="停用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序标记" prop="sort">
|
||||
<el-input-number v-model.number="formData.sort" placeholder="排序标记" />
|
||||
<el-form-item
|
||||
label="排序标记"
|
||||
prop="sort"
|
||||
>
|
||||
<el-input-number
|
||||
v-model.number="formData.sort"
|
||||
placeholder="排序标记"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SysDictionaryDetail'
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
@@ -145,6 +267,10 @@ import { ElMessage } from 'element-plus'
|
||||
import { formatBoolean, formatDate } from '@/utils/format'
|
||||
const route = useRoute()
|
||||
|
||||
defineOptions({
|
||||
name: 'SysDictionaryDetail'
|
||||
})
|
||||
|
||||
onBeforeRouteUpdate((to) => {
|
||||
if (to.name === 'dictionaryDetail') {
|
||||
searchInfo.value.sysDictionaryID = to.params.id
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition mode="out-in" name="el-fade-in-linear">
|
||||
<transition
|
||||
mode="out-in"
|
||||
name="el-fade-in-linear"
|
||||
>
|
||||
<keep-alive :include="routerStore.keepAliveRouters">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
@@ -10,12 +13,11 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SuperAdmin'
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import { useRouterStore } from '@/pinia/modules/router'
|
||||
const routerStore = useRouterStore()
|
||||
|
||||
defineOptions({
|
||||
name: 'SuperAdmin'
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,11 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<span class="gva-icon" style="position: absolute; z-index: 9999; padding: 3px 10px 0; ">
|
||||
<span
|
||||
class="gva-icon"
|
||||
style="position: absolute; z-index: 9999; padding: 3px 10px 0; "
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="metaData.icon" />
|
||||
</el-icon>
|
||||
</span>
|
||||
<el-select v-model="metaData.icon" style="width:100%" clearable filterable class="gva-select" placeholder="请选择">
|
||||
<el-select
|
||||
v-model="metaData.icon"
|
||||
style="width:100%"
|
||||
clearable
|
||||
filterable
|
||||
class="gva-select"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.key"
|
||||
@@ -13,7 +23,11 @@
|
||||
:label="item.key"
|
||||
:value="item.key"
|
||||
>
|
||||
<span class="gva-icon" style=" padding: 3px 0 0; " :class="item.label">
|
||||
<span
|
||||
class="gva-icon"
|
||||
style=" padding: 3px 0 0; "
|
||||
:class="item.label"
|
||||
>
|
||||
<el-icon>
|
||||
<component :is="item.label" />
|
||||
</el-icon>
|
||||
@@ -27,6 +41,10 @@
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Icon',
|
||||
})
|
||||
|
||||
const props = defineProps({
|
||||
meta: {
|
||||
default: function() {
|
||||
@@ -1165,12 +1183,6 @@ if (!metaData.value.icon) {
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Icon',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.gva-icon {
|
||||
color: rgb(132, 146, 166);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,33 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="gva-search-box">
|
||||
<el-form :inline="true" :model="searchInfo">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="searchInfo"
|
||||
>
|
||||
<el-form-item label="请求方法">
|
||||
<el-input v-model="searchInfo.method" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.method"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求路径">
|
||||
<el-input v-model="searchInfo.path" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.path"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结果状态码">
|
||||
<el-input v-model="searchInfo.status" placeholder="搜索条件" />
|
||||
<el-input
|
||||
v-model="searchInfo.status"
|
||||
placeholder="搜索条件"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
|
||||
<el-button icon="refresh" @click="onReset">重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="search"
|
||||
@click="onSubmit"
|
||||
>查询</el-button>
|
||||
<el-button
|
||||
icon="refresh"
|
||||
@click="onReset"
|
||||
>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
|
||||
<el-popover v-model="deleteVisible" placement="top" width="160">
|
||||
<el-popover
|
||||
v-model="deleteVisible"
|
||||
placement="top"
|
||||
width="160"
|
||||
>
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="onDelete">确定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="deleteVisible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onDelete"
|
||||
>确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="deleteVisible = true">删除</el-button>
|
||||
<el-button
|
||||
icon="delete"
|
||||
style="margin-left: 10px;"
|
||||
:disabled="!multipleSelection.length"
|
||||
@click="deleteVisible = true"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
@@ -39,29 +74,70 @@
|
||||
row-key="ID"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column align="left" type="selection" width="55" />
|
||||
<el-table-column align="left" label="操作人" width="140">
|
||||
<el-table-column
|
||||
align="left"
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="操作人"
|
||||
width="140"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.user.userName }}({{ scope.row.user.nickName }})</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="日期" width="180">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="日期"
|
||||
width="180"
|
||||
>
|
||||
<template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="状态码" prop="status" width="120">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="状态码"
|
||||
prop="status"
|
||||
width="120"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<el-tag type="success">{{ scope.row.status }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="请求IP" prop="ip" width="120" />
|
||||
<el-table-column align="left" label="请求方法" prop="method" width="120" />
|
||||
<el-table-column align="left" label="请求路径" prop="path" width="240" />
|
||||
<el-table-column align="left" label="请求" prop="path" width="80">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求IP"
|
||||
prop="ip"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求方法"
|
||||
prop="method"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求路径"
|
||||
prop="path"
|
||||
width="240"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="请求"
|
||||
prop="path"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<el-popover v-if="scope.row.body" placement="left-start" trigger="click">
|
||||
<el-popover
|
||||
v-if="scope.row.body"
|
||||
placement="left-start"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="popover-box">
|
||||
<pre>{{ fmtBody(scope.row.body) }}</pre>
|
||||
</div>
|
||||
@@ -74,10 +150,19 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="响应" prop="path" width="80">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="响应"
|
||||
prop="path"
|
||||
width="80"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<el-popover v-if="scope.row.resp" placement="left-start" trigger="click">
|
||||
<el-popover
|
||||
v-if="scope.row.resp"
|
||||
placement="left-start"
|
||||
trigger="click"
|
||||
>
|
||||
<div class="popover-box">
|
||||
<pre>{{ fmtBody(scope.row.resp) }}</pre>
|
||||
</div>
|
||||
@@ -89,16 +174,35 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="操作">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-popover v-model="scope.row.visible" placement="top" width="160">
|
||||
<el-popover
|
||||
v-model="scope.row.visible"
|
||||
placement="top"
|
||||
width="160"
|
||||
>
|
||||
<p>确定要删除吗？</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="deleteSysOperationRecordFunc(scope.row)">确定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="scope.row.visible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="deleteSysOperationRecordFunc(scope.row)"
|
||||
>确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button icon="delete" type="primary" link @click="scope.row.visible = true">删除</el-button>
|
||||
<el-button
|
||||
icon="delete"
|
||||
type="primary"
|
||||
link
|
||||
@click="scope.row.visible = true"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
</template>
|
||||
@@ -129,6 +233,10 @@ import { formatDate } from '@/utils/format'
|
||||
import { ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'SysOperationRecord'
|
||||
})
|
||||
|
||||
const page = ref(1)
|
||||
const total = ref(0)
|
||||
const pageSize = ref(10)
|
||||
@@ -223,13 +331,6 @@ const fmtBody = (value) => {
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'SysOperationRecord'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.table-expand {
|
||||
padding-left: 60px;
|
||||
|
||||
@@ -3,23 +3,63 @@
|
||||
<warning-bar title="注：右上角头像下拉可切换角色" />
|
||||
<div class="gva-table-box">
|
||||
<div class="gva-btn-list">
|
||||
<el-button type="primary" icon="plus" @click="addUser">新增用户</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="plus"
|
||||
@click="addUser"
|
||||
>新增用户</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
row-key="ID"
|
||||
>
|
||||
<el-table-column align="left" label="头像" min-width="75">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="头像"
|
||||
min-width="75"
|
||||
>
|
||||
<template #default="scope">
|
||||
<CustomPic style="margin-top:8px" :pic-src="scope.row.headerImg" />
|
||||
<CustomPic
|
||||
style="margin-top:8px"
|
||||
:pic-src="scope.row.headerImg"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="ID" min-width="50" prop="ID" />
|
||||
<el-table-column align="left" label="用户名" min-width="150" prop="userName" />
|
||||
<el-table-column align="left" label="昵称" min-width="150" prop="nickName" />
|
||||
<el-table-column align="left" label="手机号" min-width="180" prop="phone" />
|
||||
<el-table-column align="left" label="邮箱" min-width="180" prop="email" />
|
||||
<el-table-column align="left" label="用户角色" min-width="200">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="ID"
|
||||
min-width="50"
|
||||
prop="ID"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="用户名"
|
||||
min-width="150"
|
||||
prop="userName"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="昵称"
|
||||
min-width="150"
|
||||
prop="nickName"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="手机号"
|
||||
min-width="180"
|
||||
prop="phone"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="邮箱"
|
||||
min-width="180"
|
||||
prop="email"
|
||||
/>
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="用户角色"
|
||||
min-width="200"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-cascader
|
||||
v-model="scope.row.authorityIds"
|
||||
@@ -33,7 +73,11 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="left" label="启用" min-width="150">
|
||||
<el-table-column
|
||||
align="left"
|
||||
label="启用"
|
||||
min-width="150"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.enable"
|
||||
@@ -45,20 +89,49 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" min-width="250" fixed="right">
|
||||
<el-table-column
|
||||
label="操作"
|
||||
min-width="250"
|
||||
fixed="right"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-popover v-model="scope.row.visible" placement="top" width="160">
|
||||
<el-popover
|
||||
v-model="scope.row.visible"
|
||||
placement="top"
|
||||
width="160"
|
||||
>
|
||||
<p>确定要删除此用户吗</p>
|
||||
<div style="text-align: right; margin-top: 8px;">
|
||||
<el-button type="primary" link @click="scope.row.visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="deleteUserFunc(scope.row)">确定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="scope.row.visible = false"
|
||||
>取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="deleteUserFunc(scope.row)"
|
||||
>确定</el-button>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button type="primary" link icon="delete">删除</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="delete"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-popover>
|
||||
<el-button type="primary" link icon="edit" @click="openEdit(scope.row)">编辑</el-button>
|
||||
<el-button type="primary" link icon="magic-stick" @click="resetPasswordFunc(scope.row)">重置密码</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="edit"
|
||||
@click="openEdit(scope.row)"
|
||||
>编辑</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
icon="magic-stick"
|
||||
@click="resetPasswordFunc(scope.row)"
|
||||
>重置密码</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
@@ -83,23 +156,48 @@
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div style="height:60vh;overflow:auto;padding:0 12px;">
|
||||
<el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
|
||||
<el-form-item v-if="dialogFlag === 'add'" label="用户名" prop="userName">
|
||||
<el-form
|
||||
ref="userForm"
|
||||
:rules="rules"
|
||||
:model="userInfo"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item
|
||||
v-if="dialogFlag === 'add'"
|
||||
label="用户名"
|
||||
prop="userName"
|
||||
>
|
||||
<el-input v-model="userInfo.userName" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dialogFlag === 'add'" label="密码" prop="password">
|
||||
<el-form-item
|
||||
v-if="dialogFlag === 'add'"
|
||||
label="密码"
|
||||
prop="password"
|
||||
>
|
||||
<el-input v-model="userInfo.password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="昵称" prop="nickName">
|
||||
<el-form-item
|
||||
label="昵称"
|
||||
prop="nickName"
|
||||
>
|
||||
<el-input v-model="userInfo.nickName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-form-item
|
||||
label="手机号"
|
||||
prop="phone"
|
||||
>
|
||||
<el-input v-model="userInfo.phone" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-form-item
|
||||
label="邮箱"
|
||||
prop="email"
|
||||
>
|
||||
<el-input v-model="userInfo.email" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户角色" prop="authorityId">
|
||||
<el-form-item
|
||||
label="用户角色"
|
||||
prop="authorityId"
|
||||
>
|
||||
<el-cascader
|
||||
v-model="userInfo.authorityIds"
|
||||
style="width:100%"
|
||||
@@ -109,7 +207,10 @@
|
||||
:clearable="false"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="启用" prop="disabled">
|
||||
<el-form-item
|
||||
label="启用"
|
||||
prop="disabled"
|
||||
>
|
||||
<el-switch
|
||||
v-model="userInfo.enable"
|
||||
inline-prompt
|
||||
@@ -117,10 +218,24 @@
|
||||
:inactive-value="2"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="头像" label-width="80px">
|
||||
<div style="display:inline-block" @click="openHeaderChange">
|
||||
<img v-if="userInfo.headerImg" alt="头像" class="header-img-box" :src="(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg">
|
||||
<div v-else class="header-img-box">从媒体库选择</div>
|
||||
<el-form-item
|
||||
label="头像"
|
||||
label-width="80px"
|
||||
>
|
||||
<div
|
||||
style="display:inline-block"
|
||||
@click="openHeaderChange"
|
||||
>
|
||||
<img
|
||||
v-if="userInfo.headerImg"
|
||||
alt="头像"
|
||||
class="header-img-box"
|
||||
:src="(userInfo.headerImg && userInfo.headerImg.slice(0, 4) !== 'http')?path+userInfo.headerImg:userInfo.headerImg"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="header-img-box"
|
||||
>从媒体库选择</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
@@ -131,19 +246,21 @@
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeAddUserDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="enterAddUserDialog">确 定</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="enterAddUserDialog"
|
||||
>确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<ChooseImg ref="chooseImg" :target="userInfo" :target-key="`headerImg`" />
|
||||
<ChooseImg
|
||||
ref="chooseImg"
|
||||
:target="userInfo"
|
||||
:target-key="`headerImg`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'User',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -162,6 +279,11 @@ import { setUserInfo, resetPassword } from '@/api/user.js'
|
||||
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'User',
|
||||
})
|
||||
|
||||
const path = ref(import.meta.env.VITE_BASE_API + '/')
|
||||
// 初始化相关
|
||||
const setAuthorityOptions = (AuthorityData, optionsData) => {
|
||||
|
||||
Reference in New Issue
Block a user