coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

user表role改为role_id；后台管理用户增删改查封装成component

Browse Source
This commit is contained in:
小墨
2023-03-28 22:13:59 +08:00
parent 880e4f8941
commit cf962a92da
33 changed files with 865 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/components.d.ts vendored
View File

@@ -51,6 +51,7 @@ declare module '@vue/runtime-core' {
ElTree: typeof import('element-plus/es')['ElTree']
ElUpload: typeof import('element-plus/es')['ElUpload']
Header: typeof import('./src/components/header.vue')['default']
ManageList: typeof import('./src/components/manage-list.vue')['default']
Popover: typeof import('./src/components/popover.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

22
frontend/src/api/user.js
View File

@@ -12,6 +12,26 @@ export function userLogin({ username, password }) {
params: {
"username": username,
"password": password,
}
},
});
};
/**
* 用户退出登录
* @returns
*/
export function userLogout() {
return null;
};
/**
* 获取用户列表
* @returns
*/
export function getUserList(params) {
return send_request({
url: '/user/manage/getUserList',
method: 'GET',
params: params,
});
};

6
frontend/src/components/header.vue
View File

@@ -52,6 +52,7 @@ import { ElMessage } from 'element-plus';
import send_request from '../utils/send_request';
import imgurl from '../assets/img/img.jpg';
import settings from '../utils/settings';
import * as userApi from '../api/user';
const username: string | null = localStorage.getItem('ms_username');
const message: number = 2;
@@ -74,10 +75,7 @@ const router = useRouter();
const handleCommand = (command: string) => {
if (command == 'loginout') {
// 发送退出登录请求
send_request({
url: 'v1/user/logout',
method: "POST",
} as any);
userApi.userLogout()
// 关闭全部标签 (销毁页面对象)
const tags = useTagsStore();
tags.clearTags();

305
frontend/src/components/manage-list.vue Normal file
View File

@@ -0,0 +1,305 @@
<template>
<div class="manage-list-container">
<div v-if="tableData">
<!-- 筛选 -->
<div class="handle-box">
<template v-for="field in searchFields">
<el-input v-if="field.searchType == 'input'" v-model="query[field.field]"
@keyup.enter.native="handleSearch" :placeholder="field.placeholder"
class="handle-input mr10"></el-input>
<el-select v-else-if="field.searchType == 'select'" v-model="query[field.field]" @change="handleSearch"
:placeholder="field.placeholder" class="handle-select mr10">
<el-option key="" :label="'全部' + field.placeholder" value=""></el-option>
<el-option v-for="optKey in Object.keys(field.options)" :key="optKey" :label="field.options[optKey]" :value="optKey"></el-option>
</el-select>
<template v-else>{{ field }}</template>
</template>
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
<el-button type="primary" :icon="Plus" @click="handleNew" v-permiss="props.editPermiss">新增</el-button>
</div>
<div>
{{ query }}
</div>
<!-- 表格 -->
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column v-for="field in tableFields" :prop="field.prop" :label="field.label"
align="center"></el-table-column>
<el-table-column label="操作" width="220" align="center">
<template #default="scope">
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
v-permiss="props.editPermiss">
编辑
</el-button>
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
v-permiss="props.editPermiss">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
</div>
</div>
<div v-else style="padding-top: 11vh;">
<el-empty description="暂无数据" />
</div>
<!-- 新增 / 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.roleName" placeholder="角色类型" class="handle-select mr10">
<el-option key="1" label="管理员" value="管理员"></el-option>
<el-option key="2" label="普通用户" value="普通用户"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.telephone"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import send_request from '../utils/send_request';
const props = defineProps({
// 获取列表 接口函数
'getListFunc': {
type: Function,
required: true,
},
// 修改、删除权限
'editPermiss': {
type: String,
required: true,
}
})
// 筛选列
const searchFields: any = ref([]);
const query = reactive({
pageIndex: 1,
pageSize: 10
// 其他筛选条件
});
// 表格数据
const tableData: any = ref(null);
// 表格列
const tableFields: any = ref([]);
// 总页数
const pageTotal = ref(0);
// 新增/编辑 弹窗列
const dialogFields: any = ref([]);
// 新增/编辑 弹窗
const editVisible = ref(false);
let form = reactive({} as any);
let idx: number = -1;
// 获取表格数据
const getData = async () => {
props.getListFunc(query).then((data: any) => {
console.log(data)
// 深拷贝一份
let _tableData = JSON.parse(JSON.stringify(data.list));
// 字段映射
let fieldsMapper = data.fieldMapper;
if (fieldsMapper) {
// 对于每一个需要映射的字段
for (let m of fieldsMapper) {
// console.log("mapper", m)
_tableData = _tableData.map((row: any) => {
let oldValue = row[m.key]
let newValue = m.mapper[oldValue]
row[m.value] = newValue
return row
})
}
}
// 表格列
tableFields.value = data.columns
.map((field: any) => {
return { prop: field.prop, label: field.label }
});
// 表格数据
tableData.value = _tableData;
// 总页数
pageTotal.value = data.total;
// 筛选字段
searchFields.value = data.columns
.filter((field: any) => field.canSearch)
.map((field: any) => {
let f: any = {
placeholder: field.label,
field: field.field,
searchType: field.searchType,
}
switch (field.searchType) {
case 'select':
f.options = fieldsMapper.find((field: any) => field.key == f.field).mapper
break;
default:
break;
}
return f
});
console.log("searchFields", searchFields.value);
// 新增/修改弹窗列
dialogFields.value = data.columns
.map((field: any) => {
if (typeof (query[field.field]) === "undefined") {
query[field.field] = ''
}
let f: any = {
label: field.label,
field: field.field,
editType: field.editType,
}
return f
});
console.log("dialogFields", dialogFields.value);
// 拼装 新增/修改弹窗 字段
// form =
})
};
// 查询按钮
const handleSearch = () => {
query.pageIndex = 1;
getData();
};
// 分页导航
const handlePageChange = (val: number) => {
query.pageIndex = val;
getData();
};
// 删除操作
const handleDelete = (index: number, row: any) => {
idx = index;
// 二次确认删除
ElMessageBox.confirm('确定要删除吗？', '提示', { type: 'warning' })
.then(async () => {
await send_request('v1/user/delete', "POST", {
userId: row.id
}, (data: any) => {
// console.log("delete index", index);
// console.log(data);
if (data) {
ElMessage.success('删除成功');
tableData.value.splice(idx, 1);
}
});
})
.catch(() => { });
};
// 点击进入编辑框
const handleEdit = (index: number, row: any) => {
idx = index;
form.id = row.id;
form.username = row.username;
form.roleName = row.roleName;
form.roleId = row.roleId;
form.telephone = row.telephone;
editVisible.value = true;
};
// 编辑保存到数据库
const saveEdit = async () => {
editVisible.value = false;
await send_request('v1/user/edit', "POST", {
id: form.id,
username: form.username,
roleId: form.roleId,
roleName: form.roleName,
telephone: form.telephone
}, (data: any) => {
if (data) {
ElMessage.success('修改成功');
tableData.value[idx].username = form.username;
tableData.value[idx].roleName = form.roleName;
tableData.value[idx].telephone = form.telephone;
}
});
};
const handleNew = () => {
editVisible.value = true;
ElMessage.success(`修改第 ${idx + 1} 行成功`);
tableData.value[idx].username = form.username;
tableData.value[idx].roleName = form.roleName;
tableData.value[idx].telephone = form.telephone;
};
// 网页加载完成后加载数据
onMounted(() => {
getData();
});
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
line-height: 2.5em;
}
.handle-select {
width: 150px;
}
.handle-input {
width: 150px;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #F56C6C;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
</style>

5
frontend/src/main.ts
View File

@@ -20,8 +20,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
const permiss = usePermissStore();
app.directive('permiss', { // 元素级权限控制
mounted(el, binding) {
const role = localStorage.getItem('ms_role_id');
if (!permiss[role as string] || !permiss[role as string].includes(binding.value as string)) {
const roleId = localStorage.getItem('ms_role_id');
const currentUserPermiss = permiss[roleId as string];
if (!currentUserPermiss || !currentUserPermiss.includes(binding.value as string)) {
el['hidden'] = true;
}
},

4
frontend/src/router/index.ts
View File

@@ -199,9 +199,9 @@ const router = createRouter({
router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | ${settings.siteTitle}`;
const username = localStorage.getItem('ms_username');
const role = localStorage.getItem('ms_role_id');
const roleId = localStorage.getItem('ms_role_id');
const permiss = usePermissStore();
const currentUserPermiss = permiss[role as string];
const currentUserPermiss = permiss[roleId as string];
// console.log("currentUserPermiss", currentUserPermiss)
if (!username && to.path !== '/login') {
next({

2
frontend/src/views/login.vue
View File

@@ -121,7 +121,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
localStorage.setItem('ms_username', data.userInfo?.username);
localStorage.setItem('ms_realname', data.userInfo?.realname);
localStorage.setItem('ms_user_id', data.userInfo?.id);
localStorage.setItem('ms_role_id', data.userInfo?.role);
localStorage.setItem('ms_role_id', data.userInfo?.roleId);
let targetRoute: any = router.currentRoute?.value?.query?.redirectTo
if (targetRoute && !targetRoute.includes('/login')) {

220
frontend/src/views/privilege-user-setting.vue
View File

@@ -1,221 +1,11 @@
<template>
<div>
<div class="container">
<!-- 筛选 -->
<div class="handle-box">
<!-- <el-select v-model="query.address" placeholder="角色类型" class="handle-select mr10">
<el-option key="1" label="管理员" value="管理员"></el-option>
<el-option key="2" label="普通用户" value="普通用户"></el-option>
</el-select> -->
<!-- <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button> -->
<el-button type="primary" :icon="Plus" @click="handleNew">新增用户</el-button>
</div>
<!-- 表格 -->
<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
<el-table-column prop="username" label="用户名" align="center"></el-table-column>
<el-table-column prop="roleName" label="角色" align="center"></el-table-column>
<el-table-column prop="telephone" label="电话" align="center"></el-table-column>
<el-table-column prop="roleId" label="" align="center" v-if="false"></el-table-column>
<el-table-column label="操作" width="220" align="center">
<template #default="scope">
<el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)"
v-permiss="'user-setting'">
编辑
</el-button>
<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)"
v-permiss="'user-setting'">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination">
<el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
</div>
</div>
<!-- 编辑弹出框 -->
<el-dialog title="编辑" v-model="editVisible" width="30%">
<el-form label-width="70px">
<el-form-item label="用户名">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="角色">
<el-select v-model="form.roleName" placeholder="角色类型" class="handle-select mr10">
<el-option key="1" label="管理员" value="管理员"></el-option>
<el-option key="2" label="普通用户" value="普通用户"></el-option>
</el-select>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="form.telephone"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
<div class="container">
<manageList :get-list-func="userApi.getUserList" editPermiss="privilege-user-setting" />
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElLoading } from 'element-plus';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue';
import send_request from '../utils/send_request';
const query = reactive({
id: 0,
address: '',
name: '',
roleId: 0,
pageIndex: 1,
pageSize: 5
});
const tableData: any = ref([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = async () => {
const loading = ElLoading.service({
lock: true,
text: '请稍候',
background: 'rgba(0, 0, 0, 0.7)',
});
await send_request('v1/user/list', "GET", {
page: query.pageIndex,
pageSize: query.pageSize
}, (data: any) => {
console.log(data)
tableData.value = data.list;
pageTotal.value = data.total;
});
loading.close();
};
getData();
// 查询操作
const handleSearch = () => {
query.pageIndex = 1;
getData();
};
// 分页导航
const handlePageChange = (val: number) => {
query.pageIndex = val;
getData();
};
// 删除操作
const handleDelete = (index: number, row: any) => {
idx = index;
// 二次确认删除
ElMessageBox.confirm('确定要删除吗？', '提示', {
type: 'warning'
})
.then(async () => {
await send_request('v1/user/delete', "POST", {
userId: row.id
}, (data: any) => {
// console.log("delete index", index);
// console.log(data);
if (data) {
ElMessage.success('删除成功');
tableData.value.splice(idx, 1);
}
});
})
.catch(() => { });
};
// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
id: 0,
username: '',
roleId: 0,
roleName: '',
telephone: ''
});
let idx: number = -1;
// 点击进入编辑框
const handleEdit = (index: number, row: any) => {
idx = index;
form.id = row.id;
form.username = row.username;
form.roleName = row.roleName;
form.roleId = row.roleId;
form.telephone = row.telephone;
editVisible.value = true;
};
// 编辑保存到数据库
const saveEdit = async () => {
editVisible.value = false;
await send_request('v1/user/edit', "POST", {
id: form.id,
username: form.username,
roleId: form.roleId,
roleName: form.roleName,
telephone: form.telephone
}, (data: any) => {
if (data) {
ElMessage.success('修改成功');
tableData.value[idx].username = form.username;
tableData.value[idx].roleName = form.roleName;
tableData.value[idx].telephone = form.telephone;
}
});
};
const handleNew = () => {
editVisible.value = true;
ElMessage.success(`修改第 ${idx + 1} 行成功`);
tableData.value[idx].username = form.username;
tableData.value[idx].roleName = form.roleName;
tableData.value[idx].telephone = form.telephone;
};
import manageList from '../components/manage-list.vue';
import * as userApi from '../api/user';
</script>
<style scoped>
.handle-box {
margin-bottom: 20px;
}
.handle-select {
width: 120px;
}
.handle-input {
width: 300px;
}
.table {
width: 100%;
font-size: 14px;
}
.red {
color: #F56C6C;
}
.mr10 {
margin-right: 10px;
}
.table-td-thumb {
display: block;
margin: auto;
width: 40px;
height: 40px;
}
</style>