ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://192.168.1.22:3000/frontend/pqs-9100_client

Browse Source 
# Conflicts:
#	frontend/src/views/authority/role/index.vue
This commit is contained in:
GYYM
2024-10-21 15:38:08 +08:00
parent c5359b1ce7 96cd44f79f
commit 2ef86fa383
21 changed files with 1009 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/.env
View File

@@ -9,3 +9,6 @@ VITE_OPEN=true
# 打包后是否生成包分析文件
VITE_REPORT=false
# 浏览器是否显示vue的告警信息
VUE_APP_SILENCE_WARNINGS=true

24
frontend/src/api/resource/interface/index.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { DefineComponent } from "vue";
import type { DatetimeFormatProps } from "vue-i18n";
// 菜单管理模块
export namespace Resource {
// 菜单列表
export interface ResResourceList {
id: string;//资源表Id
name: string;//名称
path:string;//路径
sort:number;//排序
type:string;//资源类型
remark:string;//资源描述
route_Name:string;//路由名称
create_Time:string;//创建时间
update_Time:string;//更新时间
children?: ResResourceList[];
}
export interface ResType {
userLabel: string;
userValue: number;
}
}

249
frontend/src/api/resource/resourceData.ts Normal file
View File

@@ -0,0 +1,249 @@
import { HomeFilled, Operation } from "@element-plus/icons-vue"
import type { Resource } from "./interface"
const resourcedata = ref<Resource.ResResourceList[]>([
{
'id': '1',
'name': '检测计划',
'path':'/plan/planList/index',
'sort':1,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '2',
'name': '台账管理',
'path':'/plan/planList/index',
'sort':2,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '21',
'name': '检测脚本',
'path':'/plan/planList/index',
'sort':21,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '22',
'name': '被检设备',
'path':'/plan/planList/index',
'sort':22,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '23',
'name': '误差体系',
'path':'/plan/planList/index',
'sort':23,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},{
'id': '24',
'name': '检测源',
'path':'/plan/planList/index',
'sort':24,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
{
'id': '3',
'name': '权限管理',
'path':'/plan/planList/index',
'sort':3,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '31',
'name': '用户管理',
'path':'/plan/planList/index',
'sort':31,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '32',
'name': '角色管理',
'path':'/plan/planList/index',
'sort':32,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '33',
'name': '菜单管理',
'path':'/plan/planList/index',
'sort':33,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
{
'id': '4',
'name': '系统配置',
'path':'/plan/planList/index',
'sort':4,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '41',
'name': '通用配置',
'path':'/plan/planList/index',
'sort':41,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '42',
'name': '数据字典',
'path':'/plan/planList/index',
'sort':42,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '43',
'name': '报告模版',
'path':'/plan/planList/index',
'sort':43,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},{
'id': '44',
'name': '版本注册',
'path':'/plan/planList/index',
'sort':44,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
{
'id': '5',
'name': '日志管理',
'path':'/plan/planList/index',
'sort':5,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '6',
'name': '统计分析',
'path':'/plan/planList/index',
'sort':6,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '7',
'name': '示例',
'path':'/plan/planList/index',
'sort':7,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '71',
'name': '普通表格',
'path':'/plan/planList/index',
'sort':71,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '72',
'name': '表格树',
'path':'/plan/planList/index',
'sort':72,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
])
export default resourcedata

22
frontend/src/api/system/dictData.ts
View File

@@ -43,6 +43,28 @@ const dictData: Dict[] = [
},
],
},
{
id: "3",
code: 'type',
label: '资源类型',
children: [
{
id: "1",
label: '菜单',
code: 1,
},
{
id: "2",
label: '按钮',
code: 2,
},
{
id: "3",
label: '公共资源',
code: 3,
},
],
},
]
export default dictData

3
frontend/src/api/user/interface/index.ts
View File

@@ -65,4 +65,5 @@ export namespace User {
name: string;
children?: ResDepartment[];
}
}
}

6
frontend/src/api/user/user.ts
View File

@@ -2,6 +2,7 @@ import { ResPage } from '@/api/interface'
import { User } from './interface'
import { ADMIN as rePrefix } from '@/api/config/serviceName'
import http from '@/api'
import type { Resource } from '../resource/interface'
/**
* @name 用户管理模块
@@ -56,6 +57,11 @@ export const getUserStatus = () => {
return http.get<User.ResStatus[]>(`${rePrefix}/user/status`)
}
// 获取用户状态字典
export const getResourceType = () => {
return http.get<Resource.ResType[]>(`${rePrefix}/user/status`)
}
// 获取用户性别字典
export const getUserGender = () => {
return http.get<User.ResGender[]>(`${rePrefix}/user/gender`)

82
frontend/src/components/ResourceDialog/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" width="500">
<el-form :model="formData" :rules="rules">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" />
</el-form-item>
<el-form-item label="菜单路径" prop="path">
<el-input v-model="formData.path" />
</el-form-item>
<el-form-item label="菜单排序" prop="sort">
<el-input-number v-model="formData.sort" />
</el-form-item>
<el-form-item label="菜单类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择资源类型">
<el-option label="菜单" value="菜单" />
<el-option label="按钮" value="按钮" />
<el-option label="公共资源" value="公共资源" />
</el-select>
</el-form-item>
<el-form-item label="菜单描述" prop="remark">
<el-input v-model="formData.remark" :rows="2" type="textarea"/>
</el-form-item>
<el-form-item label="路由名称" prop="route_Name">
<el-input v-model="formData.route_Name" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, reactive,watch } from 'vue';
import { type Resource } from '@/api/resource/interface'
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id:string;
name: string;
path: string;
sort: number;
type: string;
remark: string;
route_Name: string;
};
}>();
const rules = {
name :[
{require:true,trigger:"blur",message:"请填写菜单名称"}
]
}
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
</script>

32
frontend/src/hooks/useAuthButtons.ts
View File

@@ -1,22 +1,22 @@
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/modules/auth'
/**
* @description 页面按钮权限
* */
export const useAuthButtons = () => {
const route = useRoute();
const authStore = useAuthStore();
const authButtons = authStore.authButtonListGet[route.name as string] || [];
const route = useRoute()
const authStore = useAuthStore()
const authButtons = authStore.authButtonListGet[route.name as string] || []
const BUTTONS = computed(() => {
let currentPageAuthButton: { [key: string]: boolean } = {}
authButtons.forEach(item => (currentPageAuthButton[item] = true))
// currentPageAuthButton.status = true
return currentPageAuthButton
})
const BUTTONS = computed(() => {
let currentPageAuthButton: { [key: string]: boolean } = {};
authButtons.forEach(item => (currentPageAuthButton[item] = true));
return currentPageAuthButton;
});
return {
BUTTONS
};
};
return {
BUTTONS,
}
}

2
frontend/src/layouts/LayoutTransverse/index.vue
View File

@@ -9,7 +9,7 @@
src="@/assets/images/cn_pms9100_logo.png"
alt="logo"
/>
<span class="logo-text">{{ title }}</span>
<span class="logo-text">{{ title }} </span>
</div>
<el-menu v-if="showMenuFlag" trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
<!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->

2
frontend/src/layouts/components/Header/components/Avatar.vue
View File

@@ -2,7 +2,7 @@
<el-dropdown trigger="click">
<div class="userInfo">
<div class="icon">
<Icon><Avatar /></Icon>
<Avatar />
</div>
<div class="username">
{{ username }}

71
frontend/src/main.ts
View File

@@ -1,63 +1,70 @@
import { createApp } from "vue";
import App from "./App.vue";
import { createApp } from 'vue'
import App from './App.vue'
// reset style sheet
import "@/styles/reset.scss";
import '@/styles/reset.scss'
// CSS common style sheet
import "@/styles/common.scss";
import '@/styles/common.scss'
// iconfont css
import "@/assets/iconfont/iconfont.scss";
import '@/assets/iconfont/iconfont.scss'
// font css
import "@/assets/fonts/font.scss";
import '@/assets/fonts/font.scss'
// element css
import "element-plus/dist/index.css";
import 'element-plus/dist/index.css'
// element dark css
import "element-plus/theme-chalk/dark/css-vars.css";
import 'element-plus/theme-chalk/dark/css-vars.css'
// custom element dark css
import "@/styles/element-dark.scss";
import '@/styles/element-dark.scss'
// custom element css
import "@/styles/element.scss";
import '@/styles/element.scss'
// svg icons
import "virtual:svg-icons-register";
import 'virtual:svg-icons-register'
// element plus
import ElementPlus from "element-plus";
import ElementPlus from 'element-plus'
// element icons
import * as Icons from "@element-plus/icons-vue";
import * as Icons from '@element-plus/icons-vue'
// custom directives
import directives from "@/directives/index";
import directives from '@/directives/index'
// vue Router
import router from "@/routers";
import router from '@/routers'
// vue i18n
import I18n from "@/languages/index";
import I18n from '@/languages/index'
// pinia store
import pinia from "@/stores";
import pinia from '@/stores'
// errorHandler
import errorHandler from "@/utils/errorHandler";
import errorHandler from '@/utils/errorHandler'
import registerGlobComp from '@/components'
const app = createApp(App);
app.config.errorHandler = errorHandler;
const app = createApp(App)
// 自定义警告处理程序，忽略所有警告
app.config.warnHandler = () => {
}
// if (import.meta.env.VUE_APP_SILENCE_WARNINGS === true) {
// }
app.config.errorHandler = errorHandler
// register the element Icons component
Object.keys(Icons).forEach(key => {
app.component(key, Icons[key as keyof typeof Icons]);
});
app.component(key, Icons[key as keyof typeof Icons])
})
const setupAll = async () => {
app
.use(ElementPlus)
.use(directives)
.use(router) // 使用路由
.use(I18n)
.use(pinia)
.use(registerGlobComp) // 使用全局自定义组件
app
.use(ElementPlus)
.use(directives)
.use(router) // 使用路由
.use(I18n)
.use(pinia)
.use(registerGlobComp) // 使用全局自定义组件
//待路由初始化完毕后，挂载app
await router.isReady()
//待路由初始化完毕后，挂载app
await router.isReady()
}
//挂载app
setupAll().then(() => {
app.mount('#app')
app.mount('#app')
})

114
frontend/src/styles/element.scss
View File

@@ -11,6 +11,7 @@
/* 当前页面最大化 css */
.main-maximize {
.aside-split,
.el-aside,
.el-header,
@@ -23,12 +24,10 @@
/* mask image */
.mask-image {
padding-right: 50px;
mask-image: linear-gradient(
90deg,
#000000 0%,
#000000 calc(100% - 50px),
transparent
);
mask-image: linear-gradient(90deg,
#000000 0%,
#000000 calc(100% - 50px),
transparent);
}
/* custom card */
@@ -51,6 +50,7 @@
border-radius: 0;
box-shadow: none;
}
.table-search {
padding: 18px 0 0 !important;
margin-bottom: 0 !important;
@@ -63,18 +63,22 @@
flex-direction: column;
align-items: center;
height: 100%;
.text {
margin: 20px 0 30px;
font-size: 23px;
font-weight: bold;
color: var(--el-text-color-regular);
}
.el-descriptions {
width: 100%;
padding: 40px 0 0;
.el-descriptions__title {
font-size: 18px;
}
.el-descriptions__label {
width: 200px;
}
@@ -84,6 +88,7 @@
/* main-box (树形表格 treeFilter 页面会使用，左右布局 flex) */
.main-box {
display: flex;
.table-box {
// 这里减去的 230px 是 treeFilter 组件宽度
width: calc(100% - 230px);
@@ -103,8 +108,9 @@
.table-search {
padding: 18px 18px 0;
margin-bottom: 10px;
.el-form {
.el-form-item__content > * {
.el-form-item__content>* {
width: 100%;
}
@@ -113,6 +119,7 @@
padding: 0 10px;
}
}
.operation {
display: flex;
align-items: center;
@@ -126,9 +133,11 @@
.header-button-lf {
float: left;
}
.header-button-ri {
float: right;
}
.el-button {
margin-bottom: 15px;
}
@@ -144,6 +153,7 @@
table {
width: 100%;
}
.el-table__header th,
.el-table-fixed-column--left th,
.el-table-fixed-column--right th {
@@ -161,8 +171,10 @@
// height: 45px;
height: 40px;
font-size: 14px;
.move {
cursor: move;
.el-icon {
cursor: move;
}
@@ -170,7 +182,7 @@
}
// 设置 el-table 中 header 文字不换行，并省略
.el-table__header .el-table__cell > .cell {
.el-table__header .el-table__cell>.cell {
// white-space: nowrap;
white-space: wrap;
}
@@ -181,6 +193,7 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.table-empty {
line-height: 30px;
}
@@ -208,16 +221,19 @@
height: 40px !important;
font-size: 14px !important;
}
.el-table__row {
height: 40px !important;
font-size: 13px !important;
}
}
.el-table--large {
.el-table__header th {
height: 50px !important;
font-size: 16px !important;
}
.el-table__row {
height: 50px !important;
font-size: 15px !important;
@@ -230,12 +246,14 @@
padding: 16px 20px;
margin-bottom: 0;
border-bottom: 1px solid var(--el-border-color-lighter);
span {
font-size: 17px;
line-height: 17px;
color: var(--el-text-color-primary) !important;
}
}
.el-drawer__footer {
border-top: 1px solid var(--el-border-color-lighter);
}
@@ -244,15 +262,19 @@
.el-select {
width: 100%;
}
.el-select-dropdown__item:hover {
background: red !important;
}
// drawer-form 中存在两列 form-item 样式
.drawer-multiColumn-form {
display: flex;
flex-wrap: wrap;
.el-form-item {
width: 47%;
&:nth-child(2n-1) {
margin-right: 5%;
}
@@ -275,19 +297,22 @@
//全局dialog修改
.el-dialog {
padding: 0px !important;
border: 2px solid #3665a0;
border: 0 solid #3665a0;
.el-dialog__header {
background: var(--el-color-primary);
padding: 15px;
padding: 10px;
margin-right: 0px;
// font-family:;
.el-dialog__headerbtn {
top: 5px;
.el-icon {
color: var(--el-color-white);
}
}
.el-dialog__headerbtn:hover {
.el-icon {
color: #409eff;
@@ -302,9 +327,11 @@
margin-left: 10px !important;
}
}
.el-dialog__body {
height: 200px;
max-height: 60vh;
// height: 200px;
// max-height: 60vh;
min-height: 200px;
overflow-y: auto;
padding: 10px 15px;
@@ -312,6 +339,7 @@
.el-form {
.el-form-item {
margin-bottom: 20px;
.el-select,
.el-input,
.el-date-picker {
@@ -321,37 +349,56 @@
}
}
}
.el-dialog__footer {
padding: 15px;
padding: 8px 10px;
box-shadow: var(--el-box-shadow);
border-top: 1px solid #cccccc;
width: 100%;
bottom: 0;
}
.el-button {
font-size: 12px ;
padding: 5px 11px;
height: 24px;
}
.el-button + .el-button {
margin-left: 10px;
}
}
}
//全局el-form-item间距
.el-form-item {
margin-right: 10px !important;
margin-bottom: 20px !important;
}
.el-tree-node__content:hover {
// background-color: var(--el-color-primary) !important;
// color: #fff;
}
.el-tree-node is-expanded is-current is-focusable is-checked{
.el-tree-node is-expanded is-current is-focusable is-checked {
background-color: var(--el-color-primary) !important;
color: #fff;
}
.el-table__body-wrapper,
.el-scrollbar {
/* scroll bar */
z-index: 2001;
&::-webkit-scrollbar {
width: 8px !important;
height: 200px !important;
// background-color: var(--el-color-primary);
z-index: 3001;
}
/* 滚动条实际可拖动部分的颜色 */
::-webkit-scrollbar-thumb {
width: 8px;
@@ -367,6 +414,7 @@
/* ---el-table滚动条公共样式--- */
.el-scrollbar {
// 横向滚动条
.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
opacity: 1; // 默认滚动条自带透明度
@@ -375,6 +423,7 @@
background-color: var(--el-color-primary); // 滑块背景色
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
}
// 纵向滚动条
.el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
opacity: 1;
@@ -384,3 +433,38 @@
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
}
.dialog-small{
.el-dialog__body{
max-height: 240px;
}
}
.dialog-middle{
.el-dialog__body{
max-height: 400px;
}
}
.dialog-big{
.el-dialog__body{
max-height: 620px;
}
}
.form-two {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
display: flex;
width: 48%;
.el-form-item__content {
flex: 1;
.el-select,
.el-cascader,
.el-input__inner,
.el-date-editor {
width: 100%;
}
}
}
}

1
frontend/src/types/env.d.ts vendored
View File

@@ -16,6 +16,7 @@ declare type Recordable<T = any> = Record<string, T>;
declare interface ViteEnv {
VITE_USER_NODE_ENV: 'development' | 'production' | 'test';
VITE_GLOB_APP_TITLE: string;
VUE_APP_SILENCE_WARNINGS: boolean;
VITE_PORT: number;
VITE_OPEN: boolean;
VITE_REPORT: boolean;

6
frontend/src/utils/dict.ts
View File

@@ -15,3 +15,9 @@ export const userStatus = [
{ label: "启用", value: 1, tagType: "success" },
{ label: "禁用", value: 0, tagType: "danger" }
];
export const resourceType = [
{ label: "菜单", value: 1 },
{ label: "按钮", value: 2 },
{ label: "公共资源", value: 3 }
];

18
frontend/src/utils/elementBind.ts Normal file
View File

@@ -0,0 +1,18 @@
export const dialogSmall = {
width:'400px',
closeOnClickModal:false,
draggable:true,
class:'dialog-small'
}
export const dialogMiddle = {
width:'800px',
closeOnClickModal:false,
draggable:true,
class:'dialog-middle'
}
export const dialogBig = {
width:'1200px',
closeOnClickModal:false,
draggable:true,
class:'dialog-big'
}

216
frontend/src/views/authority/resource/index.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='resourceData'
@selection-change="handleSelectionChange"
type="selection"
>
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增菜单</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length' @click="handleDelList"
>
批量删除菜单
</el-button>
</template>
<template>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteResource(scope.row)">删除</el-button>
</template>
</ProTable>
<!-- 新增/编辑资源对话框 -->
<ResourceDialog
:visible="dialogFormVisible"
:dialogTitle="dialogTitle"
:formData="dialogForm"
@update:visible="dialogFormVisible = $event"
@submit="submitForm"
/>
</div>
</template>
<script setup lang='tsx' name='useProTable'>
import { defineComponent,ref ,reactive} from 'vue'
import { type Resource } from '@/api/resource/interface'
import ProTable from '@/components/ProTable/index.vue'
import ResourceDialog from '@/components/ResourceDialog/index.vue'; // 导入子组件
import {Operation, CirclePlus, Delete, EditPen, Download, Upload, View, Refresh} from '@element-plus/icons-vue'
import resourceDataList from '@/api/resource/resourceData'
import { useDictStore } from '@/stores/modules/dict'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
let multipleSelection = ref<string[]>([]);
const resourceData = resourceDataList
const dialogFormVisible = ref(false)
const isEditMode = ref(false);
const dialogTitle = ref('新增菜单')
const dialogForm = ref<Resource.ResResourceList>({
id: '',
name: '',
path: '',
sort: 0,
type: '',
remark: '',
route_Name: '',
create_Time: '' ,
update_Time: '' ,
children:[],
});
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 表格配置项
const columns = reactive<ColumnProps<Resource.ResResourceList>[]>([
{ type: 'selection', fixed: 'left', width: 50 },
{
prop: 'name',
label: '名称',
width: 120,
search: { el: 'input', tooltip: '我是搜索提示' },
},
{
prop: 'path',
label: '路径',
width: 180,
},
{
prop: 'sort',
label: '排序',
search: {
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小排序' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大排序' />
</div>
)
},
},
},
{
prop: 'type',
label: '资源类型',
// 字典数据（本地数据）
//enum: dictStore.getDictData('type'),
search: { el: 'select', props: { filterable: true } },
//fieldNames: { label: 'label', value: 'resourceType' },
},
{
prop: 'route_Name',
label: '路由名称',
search: { el: 'input' },
},
{
prop: 'create_Time',
label: '创建时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
defaultValue: ['2024-11-12', '2024-12-12'],}
},
{
prop: 'update_Time',
label: '更新时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
defaultValue: ['2024-11-12', '2024-12-12'],}
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])
// 打开 drawer(新增、查看、编辑)
// 打开新增对话框
const openAddDialog = () => {
dialogForm.value = {
id: '',
name: '',
path: '',
sort: 0,
type: '',
remark: '',
route_Name: '',
create_Time: '' ,
update_Time: '' ,
children: [],
};
isEditMode.value = true;
dialogTitle.value = '新增菜单';
dialogFormVisible.value = true; // 打开对话框
};
// 提交表单
const submitForm = () => {
if (isEditMode.value) {
const index = resourceData.value.findIndex((resource: { id: string }) => resource.id === dialogForm.value.id);
if (index !== -1) {
dialogForm.value.update_Time = formatDate(Date.now()); // 更新为当前时间
resourceData.value[index] = { ...dialogForm.value }; // 更新资源
}
} else {
resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
}
dialogFormVisible.value = false; // 关闭对话框
};
// 打开编辑对话框
const openEditDialog = (resource: Resource.ResResourceList) => {
dialogForm.value = { ...resource }; // 复制资源数据以便编辑
isEditMode.value = true; // 设置为编辑模式
dialogTitle.value = '编辑资源';
dialogFormVisible.value = true; // 显示对话框
};
//选中
// 处理选择变化
const handleSelectionChange = (selection:Resource.ResResourceList[]) => {
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
};
//批量删除
const handleDelList =()=>{
resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
multipleSelection.value = []; // Clear selected rows
ElMessage.success("批量删除成功");
}
// 删除资源
const deleteResource = (params: Resource.ResResourceList) => {
ElMessageBox.confirm(
`是否删除【${params.name}】菜单？`, // 使用模板字符串来插值
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
resourceData.value = resourceData.value.filter(item => item.id !== params.id); // 过滤掉被删除的资源
ElMessage({
type: 'success',
message: `删除${params.name}成功!`
})
})
};
const formatDate = (timestamp: string|number|Date) => {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

45
frontend/src/views/authority/role/index.vue
View File

@@ -16,14 +16,15 @@
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
<el-button type='primary' link :icon='Share' @click="openDrawer('设置权限', scope.row)">设置权限</el-button>
</template>
</ProTable>
</div>
<roleUnit
:dialogVisible = roleUnitVisible
:title = roleUnitTitle
@@ -37,7 +38,7 @@
@update:visible="permissionUnitVisible = $event"
/>
</template>
<script setup lang='tsx' name='useRole'>
import { Role } from '@/api/role/interface'
import { useHandleData } from '@/hooks/useHandleData'
@@ -48,10 +49,11 @@
import permissionUnit from './components/permissionUnit.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import roleDataList from '@/api/role/roleData'
import { useDictStore } from '@/stores/modules/dict'
import {
import {
getRoleList,
addRole,
BatchAddRole,
@@ -60,6 +62,7 @@
changeRoleStatus,
exportRoleInfo,
getRoleDepartment,
getRoleStatus,
} from '@/api/role/role'
@@ -75,15 +78,15 @@
}
const dictStore = useDictStore()
const roleData = roleDataList
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
@@ -92,7 +95,7 @@
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
@@ -102,10 +105,10 @@
delete newParams.createTime
return getRoleList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<Role.ResRoleList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
@@ -118,15 +121,18 @@
},
{
prop: 'id',
label: '编码',
search: { el: 'input' },
minWidth: 180,
},
{
prop: 'status',
label: '状态',
enum: dictStore.getDictData('status'),
search: { el: 'tree-select', props: { filterable: true } },
minWidth: 100,
fieldNames: { label: 'label', value: 'code' },
render: scope => {
@@ -142,22 +148,21 @@
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
// 删除角色信息
const deleteAccount = async (params: Role.ResRoleList) => {
await useHandleData(deleteRole, { id: [params.id] }, `删除【${params.rolename}】角色`)
proTable.value?.getTableList()
}
// 批量删除角色信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteRole, { id }, '删除所选角色信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 切换角色状态
// 切换角色状态
const changeStatus = async (row: Role.ResRoleList) => {
await useHandleData(changeRoleStatus, {
id: row.id,
@@ -165,14 +170,14 @@
}, `切换【${row.rolename}】角色状态`)
proTable.value?.getTableList()
}
// 导出角色列表
const downloadFile = async () => {
ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportRoleInfo, '角色列表', proTable.value?.searchParam),
)
}
// 批量添加角色
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
@@ -184,10 +189,9 @@
}
dialogRef.value?.acceptParams(params)
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Role.ResRoleList> = {}) => {
if(title === "新增" || title === '编辑' )
{
roleUnitVisible.value = true
@@ -214,6 +218,5 @@
}
}
}
</script>

80
frontend/src/views/demo/proTable/doubleColumn.vue Normal file
View File

@@ -0,0 +1,80 @@
<!--双列-->
<template>
<el-dialog v-model='dialogVisible' :title='title' v-bind='dialogMiddle'>
<el-scrollbar>
<el-form :inline="false" label-width="auto" ref="formRef" class='form-two'>
<el-form-item label="姓名" prop="username" >
<el-input
></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input
></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="id">
<el-input
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
></el-input>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<el-input
></el-input>
</el-form-item>
<el-form-item label="手机" prop="phone">
<el-input
></el-input>
</el-form-item>
<el-form-item label="来源" prop="source">
<el-input
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='confirmForm()'>确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogMiddle } from '@/utils/elementBind'
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
const close = () => {
dialogVisible.value = false
}
const confirmForm = () => {
ElMessage.info('业务数据提交')
}
defineExpose({ open })
</script>
<style>
</style>

94
frontend/src/views/demo/proTable/index.vue
View File

@@ -1,9 +1,9 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='userData'
ref='proTable'
:columns='columns'
:data='userData'
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
@@ -17,19 +17,20 @@
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button v-if='scope.row.status === 1' type='primary' link :icon='View'
<el-button type='primary' link :icon='View'
@click="openDrawer('查看', scope.row)">查看
</el-button>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
<single-column ref='singleColumn' />
<double-column ref='doubleColumn' />
</template>
<script setup lang='tsx' name='useProTable'>
import { ref ,reactive} from 'vue'
import { User } from '@/api/user/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
@@ -40,9 +41,9 @@ import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import userDataList from '@/api/user/userData'
import { useDictStore } from '@/stores/modules/dict'
import SingleColumn from '@/views/demo/proTable/singleColumn.vue'
import DoubleColumn from '@/views/demo/proTable/doubleColumn.vue'
const dictStore = useDictStore()
import {
getUserList,
deleteUser,
@@ -52,15 +53,14 @@ import {
BatchAddUser,
getUserStatus,
} from '@/api/user/user'
import { ElMessageBox } from 'element-plus'
const userData = userDataList
const singleColumn = ref()
const doubleColumn = ref()
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
@@ -69,7 +69,6 @@ const dataCallback = (data: any) => {
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
@@ -79,18 +78,17 @@ const getTableList = (params: any) => {
delete newParams.createTime
return getUserList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'username',
label: '用户姓名',
search: { el: 'input', tooltip: '我是搜索提示' },
label: '姓名',
width: 120,
search: { el: 'input'},
},
{
prop: 'gender',
@@ -107,39 +105,39 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
</div>
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小年龄' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大年龄' />
</div>
)
},
},
},
{ prop: 'idCard', label: '身份证号', search: { el: 'input' } },
{ prop: 'email', label: '邮箱' },
{ prop: 'address', label: '居住地址' },
{ prop: 'address', label: '居住地址', width: 120 },
{
prop: 'status',
label: '用户状态',
label: '状态',
enum: dictStore.getDictData('status'),
search: { el: 'tree-select', props: { filterable: true } },
fieldNames: { label: 'userLabel', value: 'userStatus' },
render: scope => {
return (
<>
{BUTTONS.value.status ? (
<el-switch
model-value={scope.row.status}
active-text={scope.row.status ? '启用' : '禁用'}
active-value={1}
inactive-value={0}
onClick={() => changeStatus(scope.row)}
/>
) : (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)}
</>
<>
{BUTTONS.value.status ? (
<el-switch
model-value={scope.row.status}
active-text={scope.row.status ? '启用' : '禁用'}
active-value={1}
inactive-value={0}
onClick={() => changeStatus(scope.row)}
/>
) : (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)}
</>
)
},
},
@@ -150,32 +148,29 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
defaultValue: ['2024-11-12', '2024-12-12'],
},
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
proTable.value?.getTableList()
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
proTable.value?.getTableList()
// await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
// proTable.value?.getTableList()
doubleColumn.value.open("双列弹出框")
}
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
await useHandleData(changeUserStatus, {
@@ -184,14 +179,12 @@ const changeStatus = async (row: User.ResUserList) => {
}, `切换【${row.username}】用户状态`)
proTable.value?.getTableList()
}
// 导出用户列表
const downloadFile = async () => {
ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
)
}
// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
@@ -203,11 +196,8 @@ const batchAdd = () => {
}
dialogRef.value?.acceptParams(params)
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
singleColumn.value.open("单列弹出框")
}
</script>
</script>

70
frontend/src/views/demo/proTable/singleColumn.vue Normal file
View File

@@ -0,0 +1,70 @@
<!--单列-->
<template>
<el-dialog v-model='dialogVisible' :title='title' v-bind='dialogSmall'>
<el-scrollbar>
<el-form :inline="false" label-width="auto" ref="formRef">
<el-form-item label="姓名" prop="username">
<el-input
></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-input
></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input
></el-input>
</el-form-item>
<el-form-item label="身份证号" prop="id">
<el-input
></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input
></el-input>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<el-input
></el-input>
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<div class='dialog-footer'>
<el-button @click='close()'>取消</el-button>
<el-button type='primary' @click='confirmForm()'>确定</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang='ts'>
import { dialogSmall } from '@/utils/elementBind'
const dialogVisible = ref(false)
const title = ref('单列弹出框')
const open = (textTitle: string) => {
dialogVisible.value = true
title.value = textTitle
}
const close = () => {
dialogVisible.value = false
}
const confirmForm = () => {
ElMessage.info('业务数据提交')
}
defineExpose({ open })
</script>
<style>
</style>