修改后台图标样式以及添加管理员审核功能-liyuchen

This commit is contained in:
李宇辰 2023-04-12 09:23:29 +08:00
parent 9a70fb21dd
commit 23d5ec5f50
13 changed files with 568 additions and 77 deletions

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="VoRDM"/>
<meta name="description" content="VoRDM"/>
<link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/src/assets/vordm-mini.png" />
<title>VoRDM Admin</title>
</head>
<body>

View File

@ -0,0 +1,44 @@
import request, {moduleName} from '/@/utils/request';
/**
* 查询管理员用户分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getAdminManagerPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/adminManager/pages',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 新增管理员
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const auditData = (data) => {
return request({
url: '/api/' + moduleName + '/adminManager/audit',
method: 'post',
data: data
});
};
export const remove = (ids) => {
return request({
url: '/api/' + moduleName + '/administrator/delete',
method: 'delete',
params: {
ids,
}
})
}

View File

@ -0,0 +1,44 @@
import request, {moduleName} from '/@/utils/request';
/**
* 查询管理员用户分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getAdminPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/administrator/pages',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 新增管理员
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const addAdmin = (data) => {
return request({
url: '/api/' + moduleName + '/administrator/add',
method: 'post',
data: data
});
};
export const remove = (ids) => {
return request({
url: '/api/' + moduleName + '/administrator/delete',
method: 'delete',
params: {
ids,
}
})
}

BIN
src/assets/vordm-mini.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
src/assets/vordm.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

View File

@ -1,10 +1,10 @@
<template>
<div class="layout-logo" v-if="setShowLogo" @click="onThemeConfigChange">
<img :src="logoMini" class="layout-logo-medium-img" />
<span>{{ themeConfig.globalTitle }}</span>
<img :src="Vordm" class="layout-logo-medium-img" />
<!-- <span>{{ themeConfig.globalTitle }}</span>-->
</div>
<div class="layout-logo-size" v-else @click="onThemeConfigChange">
<img :src="logoMini" class="layout-logo-size-img" />
<img :src="VordmMini" class="layout-logo-size-img" />
</div>
</template>
@ -13,6 +13,8 @@ import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import logoMini from '/@/assets/logo-mini.svg';
import Vordm from '/@/assets/vordm.png';
import VordmMini from '/@/assets/vordm-mini.png'
//
const storesThemeConfig = useThemeConfig();
@ -32,17 +34,18 @@ const onThemeConfigChange = () => {
<style scoped lang="scss">
.layout-logo {
width: 220px;
width: 100px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
color: var(--el-color-primary);
font-size: 16px;
margin-left: 50px;
/*justify-content: center;*/
/*box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;*/
/*color: var(--el-color-primary);*/
/*font-size: 16px;*/
cursor: pointer;
animation: logoAnimation 0.3s ease-in-out;
span {
/* span {
white-space: nowrap;
display: inline-block;
}
@ -54,7 +57,7 @@ const onThemeConfigChange = () => {
&-medium-img {
width: 20px;
margin-right: 5px;
}
}*/
}
.layout-logo-size {
width: 100%;

View File

@ -6,6 +6,7 @@
:collapse="state.isCollapse"
:unique-opened="getThemeConfig.isUniqueOpened"
:collapse-transition="false"
active-text-color="white"
>
<template v-for="val in menuLists">
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">

View File

@ -40,7 +40,7 @@ export const dynamicRoutes = [
isAffix: true,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'iconfont icon-shouye',
icon: 'iconfont icon-shouye',
zh: '控制台',
},
},
@ -57,7 +57,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin'],
// icon: 'iconfont icon-xitongshezhi',
icon: 'iconfont icon-xitongshezhi',
zh: '响应管理',
},
children: [
@ -73,7 +73,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin'],
// icon: 'iconfont icon-caidan',
icon: 'iconfont icon-caidan',
zh: '用户响应管理',
},
},
@ -89,7 +89,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin'],
// icon: 'ele-ColdDrink',
icon: 'ele-ColdDrink',
zh: '管理员管理',
},
},
@ -105,7 +105,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'iconfont icon-icon-',
icon: 'iconfont icon-icon-',
zh: '数据上传管理',
},
},
@ -124,7 +124,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'iconfont icon-xitongshezhi',
icon: 'iconfont icon-xitongshezhi',
zh: '数据服务',
},
children: [
@ -140,7 +140,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'iconfont icon-caidan',
icon: 'iconfont icon-caidan',
zh: '多媒体数据',
},
},
@ -156,7 +156,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'ele-ColdDrink',
icon: 'ele-ColdDrink',
zh: '遥感数据',
},
},
@ -172,7 +172,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'ele-ColdDrink',
icon: 'ele-ColdDrink',
zh: '其他数据服务',
},
},
@ -191,7 +191,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'iconfont icon-xitongshezhi',
icon: 'iconfont icon-xitongshezhi',
zh: '系统管理',
},
children: [
@ -207,7 +207,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'iconfont icon-caidan',
icon: 'iconfont icon-caidan',
zh: '普通管理员管理',
},
},
@ -223,7 +223,7 @@ export const dynamicRoutes = [
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
// icon: 'ele-SetUp',
icon: 'ele-SetUp',
},
},
],

View File

@ -24,7 +24,7 @@ export const useThemeConfig = defineStore('themeConfig', {
* 全局主题
*/
// 默认 primary 主题颜色
primary: '#409eff',
primary: '#0b7cc3',
// 是否开启深色模式
isIsDark: false,
@ -42,7 +42,7 @@ export const useThemeConfig = defineStore('themeConfig', {
* 菜单设置
*/
// 默认菜单导航背景颜色
menuBar: '#545c64',
menuBar: '#0b7cc3',
// 默认菜单导航字体颜色
menuBarColor: '#eaeaea',
// 默认菜单高亮背景色

View File

@ -0,0 +1,116 @@
<template>
<el-dialog title="add administrator" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="90px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="name" prop="name">
<el-input v-model="state.ruleForm.name" placeholder="please enter name" clearable style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="email" prop="email">
<el-input v-model="state.ruleForm.email" placeholder="please enter email" clearable style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="account" prop="account">
<el-input v-model="state.ruleForm.account" placeholder="please enter account" clearable style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="phone" prop="phone">
<el-input v-model="state.ruleForm.phone" placeholder="please enter phone" clearable style="width: 300px"></el-input>
</el-form-item>
<el-form-item label="organization" prop="organization">
<el-input v-model="state.ruleForm.organization" placeholder="please enter phone" clearable style="width: 300px"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">cancel</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="state.isLoading">add</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {addAdmin} from '/@/api/response/administrator.js';
import {ElMessage} from "element-plus";
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: []
})
//
const rules = reactive({
name: [
{required: true, message: 'please enter name', trigger: 'blur'}
],
email: [
{required: true, message: 'please enter email', trigger: 'blur'}
],
account: [
{required: true, message: 'please enter account', trigger: 'blur'}
],
phone: [
{required: true, message: 'please enter phone', trigger: 'blur'}
],
organization: [
{required: true, message: 'please enter organization', trigger: 'blur'}
]
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = () => {
state.isShowDialog = true;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
addAdmin(state.ruleForm).then(res => {
ElMessage.success("Add successfully");
emit('callback');
}).catch(err => {
ElMessage.error("Add failure");
}).finally(()=>{
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -1,25 +1,41 @@
<template>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
<el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
clearable></el-input>
<el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon>
<ele-Search/>
</el-icon>
search
</el-button>
<el-button size="default" type="success" class="ml10" @click="addUser">
<el-icon>
<ele-FolderAdd/>
</el-icon>
add
</el-button>
</div>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="userName"
<el-table-column prop="name"
label="User name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Email"
<el-table-column prop="email"
label="Email"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization"
<el-table-column prop="organization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Contact details"
<el-table-column prop="phone"
label="Contact details"
show-overflow-tooltip></el-table-column>
<el-table-column prop="vordmId"
<!-- <el-table-column prop="vordmId"
label="VoRDM ID"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterType"
@ -30,29 +46,15 @@
show-overflow-tooltip></el-table-column>
<el-table-column prop="Remark"
label="Remark"
show-overflow-tooltip></el-table-column>
show-overflow-tooltip></el-table-column>-->
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip></el-table-column>
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
>删除</el-button
>
</template>
</el-table-column> -->
show-overflow-tooltip>
<template #default="scope">
<!-- <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>-->
<el-button link type="primary" size="small" @click="deleteUser(scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
@ -66,6 +68,7 @@
:total="state.tableData.total">
</el-pagination>
</div>
<AddAdministrator ref="administratorRef" @callback="getTableData"/>
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
</div>
@ -73,9 +76,10 @@
<script lang="ts" setup name="systemRole">
import type { TabsPaneContext } from 'element-plus';
import AddAdministrator from './component/addAdministrator.vue';
import {getAdminPage,remove} from '/@/api/response/administrator.js';
const activeName = ref('first');
const administratorRef = ref();
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event);
};
@ -90,6 +94,7 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
//
const roleDialogRef = ref();
const state = reactive({
searchName:'',
tableData: {
data: [],
total: 0,
@ -104,41 +109,36 @@ const state = reactive({
//
const getTableData = () => {
state.tableData.loading = true;
const data = [];
for (let i = 0; i < 10; i++) {
data.push({
roleName: i === 0 ? '超级管理员' : '主要管理员',
roleSign: i === 0 ? 'admin' : 'chief',
describe: `测试角色${i + 1}`,
sort: i,
status: true,
createTime: new Date().toLocaleString(),
});
}
state.tableData.data = data;
state.tableData.total = state.tableData.data.length;
getAdminPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"name_like":state.searchName}).then(res=>{
console.log("分页数据",res);
state.tableData.data = res.records;
state.tableData.total = res.total;
})
setTimeout(() => {
state.tableData.loading = false;
}, 500);
};
//
const onOpenAddRole = (type) => {
roleDialogRef.value.openDialog(type);
const addUser = () => {
administratorRef.value.openDialog();
};
//
const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row);
};
//
const onRowDel = (row) => {
ElMessageBox.confirm(`此操作将永久删除角色名称:“${row.roleName}”,是否继续?`, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
const deleteUser = (row) => {
ElMessageBox.confirm(`This operation will delete the user${row.name}Whether to continue?`, 'tip', {
confirmButtonText: 'confirm',
cancelButtonText: 'cancel',
type: 'warning',
})
.then(() => {
getTableData();
ElMessage.success('删除成功');
remove(row.id).then(res=>{
getTableData();
ElMessage.success('Deleted successfully');
})
})
.catch(() => {});
};

View File

@ -0,0 +1,100 @@
<template>
<el-dialog title="audit" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="pass or not" prop="status">
<el-radio-group v-model="state.ruleForm.status">
<el-radio :label="1">pass</el-radio>
<el-radio :label="2">no pass</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">cancel</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="state.isLoading">confirm</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {addAdmin} from '/@/api/response/administrator.js';
import {auditData} from '/@/api/response/adminManager.js';
import {ElMessage} from "element-plus";
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: [],
data:[],
})
//
const rules = reactive({
status: [
{required: true, message: 'please check pass or not', trigger: 'change'}
]
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = (row) => {
console.log(row);
state.isShowDialog = true;
state.data = row;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
state.data.map(item=>item.status = state.ruleForm.status);
auditData(state.data).then(res => {
ElMessage.success("Audit successfully");
emit('callback');
}).catch(err => {
}).finally(()=>{
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -1,5 +1,188 @@
<template>
<div>
<h3>普通管理员注册审核管理</h3>
<div class="system-role-container layout-padding">
<div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
<el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
clearable></el-input>
<el-button size="default" type="primary" class="ml10" @click="getTableData">
<el-icon>
<ele-Search/>
</el-icon>
search
</el-button>
<!-- <el-button size="default" type="success" class="ml10" @click="addUser">
<el-icon>
<ele-FolderAdd/>
</el-icon>
add
</el-button>-->
</div>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="disasterType"
label="DisasterType"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterCountry"
label="DisasterCountry"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterKeyword"
label="DisasterKeyword"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterLevel"
label="DisasterLevel"
show-overflow-tooltip></el-table-column>
<el-table-column prop="disasterTime"
label="DisasterTime"
show-overflow-tooltip></el-table-column>
<el-table-column prop="managerName"
label="ManagerName"
show-overflow-tooltip></el-table-column>
<el-table-column prop="sponsorOrganization"
label="SponsorOrganization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip>
<template #default="scope">
<!-- <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>-->
<el-button link type="primary" size="small" @click="auditManager(scope.row)">Audit</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange"
class="mt15"
:pager-count="5"
:page-sizes="[10, 20, 30]"
v-model:current-page="state.tableData.param.pageNum"
background
v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total">
</el-pagination>
</div>
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
<Audit ref="auditRef" @callback="getTableData"/>
</div>
</template>
</template>
<script lang="ts" setup name="systemRole">
import type { TabsPaneContext } from 'element-plus';
import {getAdminManagerPage,auditData} from '/@/api/response/adminManager.js';
import Audit from './component/audit.vue';
const activeName = ref('first');
const auditRef = ref();
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event);
};
//
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
//
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
//
const roleDialogRef = ref();
const state = reactive({
searchName:'',
tableData: {
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
},
});
//
const auditManager = (row) => {
auditRef.value.openDialog([{...row}]);
/*ElMessageBox.confirm(`This operation will audit the disaster data${row.disasterType}Whether to continue?`, 'tip', {
confirmButtonText: 'confirm',
cancelButtonText: 'cancel',
type: 'warning',
})
.then(() => {
auditData({"disasterId":row.disasterId,"managerId":row.managerId}).then(res=>{
getTableData();
ElMessage.success('Deleted successfully');
})
})
.catch(() => {});*/
}
//
const getTableData = () => {
state.tableData.loading = true;
getAdminManagerPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{}).then(res=>{
console.log("分页数据",res);
state.tableData.data = res.records;
state.tableData.total = res.total;
})
setTimeout(() => {
state.tableData.loading = false;
}, 500);
};
//
const addUser = () => {
administratorRef.value.openDialog();
};
//
const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row);
};
//
const deleteUser = (row) => {
ElMessageBox.confirm(`This operation will delete the user${row.name}Whether to continue?`, 'tip', {
confirmButtonText: 'confirm',
cancelButtonText: 'cancel',
type: 'warning',
})
.then(() => {
remove(row.id).then(res=>{
getTableData();
ElMessage.success('Deleted successfully');
})
})
.catch(() => {});
};
//
const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val;
getTableData();
};
//
const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val;
getTableData();
};
//
onMounted(() => {
getTableData();
});
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.system-role-container {
.system-role-padding {
padding: 15px;
.el-table {
flex: 1;
}
}
}
</style>