mirror of
https://github.com/1024-lab/smart-admin.git
synced 2026-06-08 14:56:09 +00:00
v3.9.0【优化】typescript版本;【优化】App端消息;【优化】弹出层z-index;
This commit is contained in:
zhuoda
@@ -0,0 +1,39 @@
|
||||
import { defineAsyncComponent, markRaw } from 'vue';
|
||||
|
||||
/**
|
||||
* 菜单展示
|
||||
* defineAsyncComponent 异步组件
|
||||
* markRaw 将一个Vue组件对象转换为响应式对象时，可能会导致不必要的性能开销。使用markRaw方法将组件对象标记为非响应式对象
|
||||
*/
|
||||
export const ACCOUNT_MENU = {
|
||||
CENTER: {
|
||||
menuId: 'center',
|
||||
menuName: '个人中心',
|
||||
components: markRaw(defineAsyncComponent(() => import('./components/center/index.vue'))),
|
||||
},
|
||||
PASSWORD: {
|
||||
menuId: 'password',
|
||||
menuName: '修改密码',
|
||||
components: markRaw(defineAsyncComponent(() => import('./components/password/index.vue'))),
|
||||
},
|
||||
MESSAGE: {
|
||||
menuId: 'message',
|
||||
menuName: '我的消息',
|
||||
components: markRaw(defineAsyncComponent(() => import('./components/message/index.vue'))),
|
||||
},
|
||||
NOTICE: {
|
||||
menuId: 'notice',
|
||||
menuName: '通知公告',
|
||||
components: markRaw(defineAsyncComponent(() => import('./components/notice/index.vue'))),
|
||||
},
|
||||
LOGIN_LOG: {
|
||||
menuId: 'login-log',
|
||||
menuName: '登录日志',
|
||||
components: markRaw(defineAsyncComponent(() => import('./components/login-log/index.vue'))),
|
||||
},
|
||||
OPERATE_LOG: {
|
||||
menuId: 'operate-log',
|
||||
menuName: '操作日志',
|
||||
components: markRaw(defineAsyncComponent(() => import('./components/operate-log/index.vue'))),
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div class="center-container">
|
||||
<!-- 页面标题-->
|
||||
<div class="header-title">个人中心</div>
|
||||
|
||||
<!-- 内容区域-->
|
||||
<div class="center-form-area">
|
||||
<a-row>
|
||||
<a-col flex="350px">
|
||||
<a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
|
||||
<a-form-item label="登录账号" name="loginName">
|
||||
<a-input class="form-item" v-model:value.trim="form.loginName" placeholder="请输入登录账号" disabled />
|
||||
</a-form-item>
|
||||
<a-form-item label="员工名称" name="actualName">
|
||||
<a-input class="form-item" v-model:value.trim="form.actualName" placeholder="请输入员工名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="性别" name="gender">
|
||||
<smart-enum-select class="form-item" v-model:value="form.gender" placeholder="请选择性别" enum-name="GENDER_ENUM" />
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input class="form-item" v-model:value.trim="form.phone" placeholder="请输入手机号码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门" name="departmentId">
|
||||
<DepartmentTreeSelect class="form-item" ref="departmentTreeSelect" width="100%" :init="false" v-model:value="form.departmentId" />
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="remark">
|
||||
<a-textarea class="form-item" v-model:value="form.remark" placeholder="请输入备注" :rows="4" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-button type="primary" @click="onSubmit">更新个人信息</a-button>
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-form style="padding-left: 80px" layout="vertical">
|
||||
<a-form-item label="头像" name="avatar">
|
||||
<br />
|
||||
<a-upload
|
||||
name="avatar"
|
||||
list-type="picture-card"
|
||||
class="avatar-uploader"
|
||||
:show-upload-list="false"
|
||||
:headers="{ 'x-access-token': useUserStore().getToken }"
|
||||
:customRequest="customRequest"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<div v-if="avatarUrl" class="avatar-container">
|
||||
<img :src="avatarUrl" class="avatar-image" alt="avatar" />
|
||||
<div class="overlay">
|
||||
<span>更新头像</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<loading-outlined v-if="updateAvatarLoading" />
|
||||
<plus-outlined v-else />
|
||||
<div class="ant-upload-text">上传头像</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { regular } from '/@/constants/regular-const.js';
|
||||
import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue';
|
||||
import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
|
||||
import { loginApi } from '/@/api/system/login-api.js';
|
||||
import { useUserStore } from '/@/store/modules/system/user.js';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { smartSentry } from '/@/lib/smart-sentry.js';
|
||||
import { employeeApi } from '/@/api/system/employee-api';
|
||||
import { SmartLoading } from '/@/components/framework/smart-loading/index.js';
|
||||
import { fileApi } from '/@/api/support/file-api.js';
|
||||
import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const.js';
|
||||
|
||||
// 组件ref
|
||||
const formRef = ref();
|
||||
|
||||
const formDefault = {
|
||||
// 员工ID
|
||||
employeeId: undefined,
|
||||
// 头像
|
||||
avatar: undefined,
|
||||
// 登录账号
|
||||
loginName: '',
|
||||
// 员工名称
|
||||
actualName: '',
|
||||
// 性别
|
||||
gender: undefined,
|
||||
// 手机号码
|
||||
phone: '',
|
||||
// 部门id
|
||||
departmentId: undefined,
|
||||
// 是否启用
|
||||
disabledFlag: undefined,
|
||||
// 邮箱
|
||||
email: undefined,
|
||||
// 备注
|
||||
remark: '',
|
||||
};
|
||||
let form = reactive({ ...formDefault });
|
||||
const rules = {
|
||||
actualName: [
|
||||
{ required: true, message: '姓名不能为空' },
|
||||
{ max: 30, message: '姓名不能大于30个字符', trigger: 'blur' },
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '手机号不能为空' },
|
||||
{ pattern: regular.phone, message: '请输入正确的手机号码', trigger: 'blur' },
|
||||
],
|
||||
gender: [{ required: true, message: '性别不能为空' }],
|
||||
departmentId: [{ required: true, message: '部门不能为空' }],
|
||||
};
|
||||
// 头像地址
|
||||
let avatarUrl = ref();
|
||||
|
||||
// 查询登录信息
|
||||
async function getLoginInfo() {
|
||||
try {
|
||||
//获取登录用户信息
|
||||
const res = await loginApi.getLoginInfo();
|
||||
let data = res.data;
|
||||
//更新用户信息到pinia
|
||||
useUserStore().setUserLoginInfo(data);
|
||||
// 当前form展示
|
||||
form.employeeId = data.employeeId;
|
||||
form.loginName = data.loginName;
|
||||
form.actualName = data.actualName;
|
||||
form.email = data.email;
|
||||
form.gender = data.gender;
|
||||
form.phone = data.phone;
|
||||
form.departmentId = data.departmentId;
|
||||
form.disabledFlag = data.disabledFlag;
|
||||
form.remark = data.remark;
|
||||
// 头像展示
|
||||
avatarUrl.value = data.avatar;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
}
|
||||
}
|
||||
|
||||
// 头像上传
|
||||
const accept = ref('.jpg,.jpeg,.png,.gif');
|
||||
const maxSize = ref(10);
|
||||
const folder = ref(FILE_FOLDER_TYPE_ENUM.COMMON.value);
|
||||
let updateAvatarLoading = ref(false);
|
||||
function beforeUpload(file, files) {
|
||||
const suffixIndex = file.name.lastIndexOf('.');
|
||||
const fileSuffix = file.name.substring(suffixIndex <= -1 ? 0 : suffixIndex);
|
||||
if (accept.value.indexOf(fileSuffix) === -1) {
|
||||
message.error(`只支持上传 ${accept.value.replaceAll(',', ' ')} 格式的文件`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const isLimitSize = file.size / 1024 / 1024 < maxSize.value;
|
||||
if (!isLimitSize) {
|
||||
message.error(`单个文件大小必须小于 ${maxSize.value} Mb`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
async function customRequest(options) {
|
||||
updateAvatarLoading.value = true;
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('file', options.file);
|
||||
let res = await fileApi.uploadFile(formData, folder.value);
|
||||
let file = res.data;
|
||||
avatarUrl.value = file.fileUrl;
|
||||
// 更新头像
|
||||
let updateAvatarForm = { avatar: file.fileKey };
|
||||
await employeeApi.updateAvatar(updateAvatarForm);
|
||||
message.success('更新成功');
|
||||
// 重新获取详情，刷新整体缓存
|
||||
await getLoginInfo();
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
updateAvatarLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 更新员工信息
|
||||
async function updateEmployee() {
|
||||
SmartLoading.show();
|
||||
try {
|
||||
await employeeApi.updateByLogin(form);
|
||||
message.success('更新成功');
|
||||
// 重新获取详情，刷新整体缓存
|
||||
await getLoginInfo();
|
||||
} catch (error) {
|
||||
smartSentry.captureError(error);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
}
|
||||
|
||||
// 表单提交
|
||||
function onSubmit() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
updateEmployee();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('error', error);
|
||||
message.error('参数验证错误，请仔细填写表单数据!');
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getLoginInfo();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.center-container {
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.center-form-area {
|
||||
margin-top: 20px;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
opacity: 1; /* 鼠标悬停时显示蒙版 */
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
:deep(.ant-upload) {
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card i {
|
||||
font-size: 32px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-upload-select-picture-card .ant-upload-text {
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<!--
|
||||
* 登录、登出 日志
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-06-02 20:23:08
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
-->
|
||||
<template>
|
||||
<a-form class="smart-query-form" ref="queryFormRef">
|
||||
<a-row class="smart-query-form-row">
|
||||
<a-form-item label="时间" class="smart-query-form-item">
|
||||
<a-range-picker @change="changeCreateDate" v-model:value="createDateRange" :presets="defaultChooseTimeRange" style="width: 240px" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="smart-query-form-item smart-margin-left10">
|
||||
<a-button-group>
|
||||
<a-button type="primary" @click="onSearch">
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetQuery">
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</a-form-item>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-table size="small" :dataSource="tableData" :columns="columns" bordered rowKey="loginLogId" :pagination="false" :loading="tableLoading">
|
||||
<template #bodyCell="{ text, record, column }">
|
||||
<template v-if="column.dataIndex === 'loginResult'">
|
||||
<template v-if="text === LOGIN_RESULT_ENUM.LOGIN_SUCCESS.value">
|
||||
<a-tag color="success">登录成功</a-tag>
|
||||
</template>
|
||||
<template v-if="text === LOGIN_RESULT_ENUM.LOGIN_FAIL.value">
|
||||
<a-tag color="error">登录失败</a-tag>
|
||||
</template>
|
||||
<template v-if="text === LOGIN_RESULT_ENUM.LOGIN_OUT.value">
|
||||
<a-tag color="processing">退出登录</a-tag>
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'userAgent'">
|
||||
<div>{{ record.browser }} / {{ record.os }} / {{ record.device }}</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div class="smart-query-table-page">
|
||||
<a-pagination
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
show-less-items
|
||||
:pageSizeOptions="PAGE_SIZE_OPTIONS"
|
||||
:defaultPageSize="queryForm.pageSize"
|
||||
v-model:current="queryForm.pageNum"
|
||||
v-model:pageSize="queryForm.pageSize"
|
||||
:total="total"
|
||||
@change="ajaxQuery"
|
||||
@showSizeChange="ajaxQuery"
|
||||
:show-total="(total) => `共${total}条`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
|
||||
import { defaultTimeRanges } from '/@/lib/default-time-ranges';
|
||||
import uaparser from 'ua-parser-js';
|
||||
import { LOGIN_RESULT_ENUM } from '/@/constants/support/login-log-const';
|
||||
import { loginLogApi } from '/@/api/support/login-log-api';
|
||||
import { smartSentry } from '/@/lib/smart-sentry';
|
||||
import { calcTableHeight } from '/@/lib/table-auto-height';
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '登录方式',
|
||||
dataIndex: 'remark',
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: '登录设备',
|
||||
dataIndex: 'userAgent',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'IP地区',
|
||||
dataIndex: 'loginIpRegion',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'IP',
|
||||
dataIndex: 'loginIp',
|
||||
ellipsis: true,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '结果',
|
||||
dataIndex: 'loginResult',
|
||||
ellipsis: true,
|
||||
width: 90,
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFormState = {
|
||||
userName: '',
|
||||
ip: '',
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
const queryForm = reactive({ ...queryFormState });
|
||||
const createDateRange = ref([]);
|
||||
const defaultChooseTimeRange = defaultTimeRanges;
|
||||
// 时间变动
|
||||
function changeCreateDate(dates, dateStrings) {
|
||||
queryForm.startDate = dateStrings[0];
|
||||
queryForm.endDate = dateStrings[1];
|
||||
}
|
||||
|
||||
const tableLoading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const total = ref(0);
|
||||
|
||||
function resetQuery() {
|
||||
Object.assign(queryForm, queryFormState);
|
||||
createDateRange.value = [];
|
||||
ajaxQuery();
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
queryForm.pageNum = 1;
|
||||
ajaxQuery();
|
||||
}
|
||||
|
||||
async function ajaxQuery() {
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let responseModel = await loginLogApi.queryListLogin(queryForm);
|
||||
|
||||
for (const e of responseModel.data.list) {
|
||||
if (!e.userAgent) {
|
||||
continue;
|
||||
}
|
||||
let ua = uaparser(e.userAgent);
|
||||
e.browser = ua.browser.name;
|
||||
e.os = ua.os.name;
|
||||
e.device = ua.device.vendor ? ua.device.vendor + ua.device.model : '';
|
||||
}
|
||||
|
||||
const list = responseModel.data.list;
|
||||
total.value = responseModel.data.total;
|
||||
tableData.value = list;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------- 表格自适应高度 --------------------
|
||||
const scrollY = ref(100);
|
||||
const queryFormRef = ref();
|
||||
|
||||
function autoCalcTableHeight() {
|
||||
calcTableHeight(scrollY, [queryFormRef], 10);
|
||||
}
|
||||
|
||||
window.addEventListener('resize', autoCalcTableHeight);
|
||||
|
||||
onMounted(() => {
|
||||
ajaxQuery();
|
||||
autoCalcTableHeight();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', autoCalcTableHeight);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<a-drawer v-model:open="showFlag" :width="800" title="消息内容" placement="right" :destroyOnClose="true">
|
||||
<a-descriptions bordered :column="2" size="small">
|
||||
<a-descriptions-item :labelStyle="{ width: '80px' }" :span="1" label="类型"
|
||||
>{{ $smartEnumPlugin.getDescByValue('MESSAGE_TYPE_ENUM', messageDetail.messageType) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item :labelStyle="{ width: '120px' }" :span="1" label="发送时间">{{ messageDetail.createTime }}</a-descriptions-item>
|
||||
<a-descriptions-item :labelStyle="{ width: '80px' }" :span="2" label="标题">{{ messageDetail.title }}</a-descriptions-item>
|
||||
<a-descriptions-item :labelStyle="{ width: '80px' }" :span="2" label="内容">
|
||||
<pre>{{ messageDetail.content }}</pre>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-drawer>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { messageApi } from '/@/api/support/message-api.js';
|
||||
import { useUserStore } from '/@/store/modules/system/user.js';
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const messageDetail = reactive({
|
||||
messageType: '',
|
||||
title: '',
|
||||
content: '',
|
||||
createTime: '',
|
||||
});
|
||||
|
||||
const showFlag = ref(false);
|
||||
|
||||
function show(data) {
|
||||
Object.assign(messageDetail, data);
|
||||
showFlag.value = true;
|
||||
read(data);
|
||||
}
|
||||
|
||||
async function read(message) {
|
||||
if (!message.readFlag) {
|
||||
await messageApi.updateReadFlag(message.messageId);
|
||||
await useUserStore().queryUnreadMessageCount();
|
||||
emit('refresh');
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ show });
|
||||
</script>
|
||||
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<a-form class="smart-query-form">
|
||||
<a-row class="smart-query-form-row">
|
||||
<a-form-item label="关键字" class="smart-query-form-item">
|
||||
<a-input style="width: 300px" v-model:value.trim="queryForm.searchWord" placeholder="标题/内容" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="类型" class="smart-query-form-item">
|
||||
<smart-enum-select style="width: 150px" v-model:value="queryForm.messageType" placeholder="消息类型" enum-name="MESSAGE_TYPE_ENUM" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="消息时间" class="smart-query-form-item">
|
||||
<a-space direction="vertical" :size="12">
|
||||
<a-range-picker v-model:value="searchDate" @change="dateChange" style="width: 220px" />
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="已读" class="smart-query-form-item">
|
||||
<a-radio-group v-model:value="queryForm.readFlag" @change="quickQuery">
|
||||
<a-radio-button :value="null">全部</a-radio-button>
|
||||
<a-radio-button :value="false">未读</a-radio-button>
|
||||
<a-radio-button :value="true">已读</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="smart-query-form-item smart-margin-left10">
|
||||
<a-button-group>
|
||||
<a-button type="primary" @click="quickQuery">
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetQuery">
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</a-form-item>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-table size="small" :dataSource="tableData" :columns="columns" rowKey="messageId" :pagination="false" bordered>
|
||||
<template #bodyCell="{ text, record, column }">
|
||||
<template v-if="column.dataIndex === 'messageType'">
|
||||
<span>{{ $smartEnumPlugin.getDescByValue('MESSAGE_TYPE_ENUM', text) }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'readFlag'">
|
||||
<span v-show="record.readFlag">已读</span>
|
||||
<span v-show="!record.readFlag" style="color: red">未读</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'title'">
|
||||
<span v-show="record.readFlag">
|
||||
<a @click="toDetail(record)" style="color: #8c8c8c"
|
||||
>【{{ $smartEnumPlugin.getDescByValue('MESSAGE_TYPE_ENUM', record.messageType) }}】{{ text }}</a
|
||||
>
|
||||
</span>
|
||||
<span v-show="!record.readFlag">
|
||||
<a @click="toDetail(record)">【{{ $smartEnumPlugin.getDescByValue('MESSAGE_TYPE_ENUM', record.messageType) }}】{{ text }} </a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div class="smart-query-table-page">
|
||||
<a-pagination
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
show-less-items
|
||||
:pageSizeOptions="PAGE_SIZE_OPTIONS"
|
||||
:defaultPageSize="queryForm.pageSize"
|
||||
v-model:current="queryForm.pageNum"
|
||||
v-model:pageSize="queryForm.pageSize"
|
||||
:total="total"
|
||||
@change="ajaxQuery"
|
||||
@showSizeChange="ajaxQuery"
|
||||
:show-total="(total) => `共${total}条`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<MessageDetail ref="messageDetailRef" @refresh="ajaxQuery" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import { messageApi } from '/@/api/support/message-api';
|
||||
import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
|
||||
import SmartEnumSelect from '/@/components/framework/smart-enum-select//index.vue';
|
||||
import { smartSentry } from '/@/lib/smart-sentry.js';
|
||||
import MessageDetail from './components/message-detail.vue';
|
||||
|
||||
const columns = reactive([
|
||||
{
|
||||
title: '消息',
|
||||
dataIndex: 'title',
|
||||
},
|
||||
{
|
||||
title: '已读',
|
||||
width: 80,
|
||||
dataIndex: 'readFlag',
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 180,
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFormState = {
|
||||
searchWord: '',
|
||||
messageType: null,
|
||||
dataId: null,
|
||||
readFlag: null,
|
||||
endDate: null,
|
||||
startDate: null,
|
||||
pageNum: 1,
|
||||
pageSize: PAGE_SIZE,
|
||||
searchCount: true,
|
||||
receiverType: null,
|
||||
receiverId: null,
|
||||
};
|
||||
const queryForm = reactive({ ...queryFormState });
|
||||
const tableLoading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const total = ref(0);
|
||||
|
||||
// 日期选择
|
||||
let searchDate = ref();
|
||||
|
||||
function dateChange(dates, dateStrings) {
|
||||
queryForm.startDate = dateStrings[0];
|
||||
queryForm.endDate = dateStrings[1];
|
||||
}
|
||||
|
||||
function resetQuery() {
|
||||
searchDate.value = [];
|
||||
Object.assign(queryForm, queryFormState);
|
||||
ajaxQuery();
|
||||
}
|
||||
|
||||
function quickQuery() {
|
||||
queryForm.pageNum = 1;
|
||||
ajaxQuery();
|
||||
}
|
||||
|
||||
// 查询
|
||||
async function ajaxQuery() {
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let responseModel = await messageApi.queryMessage(queryForm);
|
||||
const list = responseModel.data.list;
|
||||
total.value = responseModel.data.total;
|
||||
tableData.value = list;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// -------------------- 详情 -----------------------------------
|
||||
|
||||
const messageDetailRef = ref();
|
||||
|
||||
function toDetail(message) {
|
||||
messageDetailRef.value.show(message);
|
||||
}
|
||||
|
||||
onMounted(ajaxQuery);
|
||||
</script>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<NoticeEmployeeList />
|
||||
</template>
|
||||
<script setup>
|
||||
import NoticeEmployeeList from '/@/views/business/oa/notice/notice-employee-list.vue';
|
||||
</script>
|
||||
@@ -0,0 +1,193 @@
|
||||
<!--
|
||||
* 操作记录 列表
|
||||
*
|
||||
* @Author: 1024创新实验室-主任：卓大
|
||||
* @Date: 2022-06-02 20:23:08
|
||||
* @Wechat: zhuda1024
|
||||
* @Email: lab1024@163.com
|
||||
* @Copyright 1024创新实验室 （ https://1024lab.net ），Since 2012
|
||||
-->
|
||||
<template>
|
||||
<a-form class="smart-query-form">
|
||||
<a-row class="smart-query-form-row">
|
||||
<a-form-item label="请求时间" class="smart-query-form-item">
|
||||
<a-range-picker @change="changeCreateDate" v-model:value="createDateRange" :presets="defaultChooseTimeRange" style="width: 240px" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="快速筛选" class="smart-query-form-item">
|
||||
<a-radio-group v-model:value="queryForm.successFlag" @change="onSearch">
|
||||
<a-radio-button :value="undefined">全部</a-radio-button>
|
||||
<a-radio-button :value="true">成功</a-radio-button>
|
||||
<a-radio-button :value="false">失败</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="smart-query-form-item smart-margin-left10">
|
||||
<a-button-group>
|
||||
<a-button type="primary" @click="ajaxQuery">
|
||||
<template #icon>
|
||||
<ReloadOutlined />
|
||||
</template>
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="resetQuery">
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
重置
|
||||
</a-button>
|
||||
</a-button-group>
|
||||
</a-form-item>
|
||||
</a-row>
|
||||
</a-form>
|
||||
|
||||
<a-table size="small" :loading="tableLoading" :dataSource="tableData" :columns="columns" bordered rowKey="operateLogId" :pagination="false">
|
||||
<template #bodyCell="{ text, record, column }">
|
||||
<template v-if="column.dataIndex === 'successFlag'">
|
||||
<a-tag :color="text ? 'success' : 'error'">{{ text ? '成功' : '失败' }}</a-tag>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'userAgent'">
|
||||
<div>{{ record.browser }} / {{ record.os }} / {{ record.device }}</div>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<div class="smart-table-operate">
|
||||
<a-button @click="showDetail(record.operateLogId)" type="link">详情</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
<div class="smart-query-table-page">
|
||||
<a-pagination
|
||||
showSizeChanger
|
||||
showQuickJumper
|
||||
show-less-items
|
||||
:pageSizeOptions="PAGE_SIZE_OPTIONS"
|
||||
:defaultPageSize="queryForm.pageSize"
|
||||
v-model:current="queryForm.pageNum"
|
||||
v-model:pageSize="queryForm.pageSize"
|
||||
:total="total"
|
||||
@change="ajaxQuery"
|
||||
@showSizeChange="ajaxQuery"
|
||||
:show-total="(total) => `共${total}条`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<OperateLogDetailModal ref="detailModal" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import OperateLogDetailModal from '/@/views/support/operate-log/operate-log-detail-modal.vue';
|
||||
import { operateLogApi } from '/@/api/support/operate-log-api';
|
||||
import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
|
||||
import { defaultTimeRanges } from '/@/lib/default-time-ranges';
|
||||
import uaparser from 'ua-parser-js';
|
||||
import { smartSentry } from '/@/lib/smart-sentry';
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '操作模块',
|
||||
dataIndex: 'module',
|
||||
ellipsis: true,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作内容',
|
||||
dataIndex: 'content',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'IP地区',
|
||||
dataIndex: 'ipRegion',
|
||||
ellipsis: true,
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '客户端',
|
||||
dataIndex: 'userAgent',
|
||||
ellipsis: true,
|
||||
width: 140,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '结果',
|
||||
dataIndex: 'successFlag',
|
||||
width: 60,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: 'right',
|
||||
width: 60,
|
||||
},
|
||||
]);
|
||||
|
||||
const queryFormState = {
|
||||
userName: '',
|
||||
successFlag: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
const queryForm = reactive({ ...queryFormState });
|
||||
const createDateRange = ref([]);
|
||||
const defaultChooseTimeRange = defaultTimeRanges;
|
||||
// 时间变动
|
||||
function changeCreateDate(dates, dateStrings) {
|
||||
queryForm.startDate = dateStrings[0];
|
||||
queryForm.endDate = dateStrings[1];
|
||||
}
|
||||
|
||||
const tableLoading = ref(false);
|
||||
const tableData = ref([]);
|
||||
const total = ref(0);
|
||||
|
||||
function resetQuery() {
|
||||
Object.assign(queryForm, queryFormState);
|
||||
createDateRange.value = [];
|
||||
ajaxQuery();
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
queryForm.pageNum = 1;
|
||||
ajaxQuery();
|
||||
}
|
||||
|
||||
async function ajaxQuery() {
|
||||
try {
|
||||
tableLoading.value = true;
|
||||
let responseModel = await operateLogApi.queryListLogin(queryForm);
|
||||
|
||||
for (const e of responseModel.data.list) {
|
||||
if (!e.userAgent) {
|
||||
continue;
|
||||
}
|
||||
let ua = uaparser(e.userAgent);
|
||||
e.browser = ua.browser.name;
|
||||
e.os = ua.os.name;
|
||||
e.device = ua.device.vendor ? ua.device.vendor + ua.device.model : '';
|
||||
}
|
||||
|
||||
const list = responseModel.data.list;
|
||||
total.value = responseModel.data.total;
|
||||
tableData.value = list;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
tableLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(ajaxQuery);
|
||||
|
||||
// ---------------------- 详情 ----------------------
|
||||
const detailModal = ref();
|
||||
function showDetail(operateLogId) {
|
||||
detailModal.value.show(operateLogId);
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="password-container">
|
||||
<!-- 内容区域-->
|
||||
<div class="password-form-area">
|
||||
<a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
|
||||
<a-form-item label="原密码" name="oldPassword">
|
||||
<a-input-password class="form-item" v-model:value.trim="form.oldPassword" type="password" placeholder="请输入原密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="新密码" name="newPassword" :help="tips">
|
||||
<a-input-password class="form-item" v-model:value.trim="form.newPassword" type="password" placeholder="请输入新密码" />
|
||||
</a-form-item>
|
||||
<a-form-item label="确认密码" name="confirmPwd" :help="tips">
|
||||
<a-input-password class="form-item" v-model:value.trim="form.confirmPwd" type="password" placeholder="请输入确认密码" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<a-button type="primary" style="margin: 20px 0 0 250px" @click="onSubmit">修改密码</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { SmartLoading } from '/@/components/framework/smart-loading/index.js';
|
||||
import { employeeApi } from '/@/api/system/employee-api.js';
|
||||
import { smartSentry } from '/@/lib/smart-sentry.js';
|
||||
|
||||
const emits = defineEmits(['onSuccess']);
|
||||
|
||||
const formRef = ref();
|
||||
const passwordComplexityEnabledTips = '密码长度8-20位，必须包含字母、数字、特殊符号（如：@#$%^&*()_+-=）等三种字符'; //校验规则
|
||||
const passwordTips = '密码长度至少8位';
|
||||
const tips = ref(passwordTips);
|
||||
const reg =
|
||||
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$/;
|
||||
|
||||
// 获取系统的密码复杂度
|
||||
const passwordComplexityEnabledFlag = ref(false);
|
||||
|
||||
async function getPasswordComplexityEnabled() {
|
||||
try {
|
||||
SmartLoading.show();
|
||||
let res = await employeeApi.getPasswordComplexityEnabled();
|
||||
passwordComplexityEnabledFlag.value = res.data;
|
||||
tips.value = passwordComplexityEnabledFlag.value ? passwordComplexityEnabledTips : passwordTips;
|
||||
} catch (e) {
|
||||
smartSentry.captureError(e);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
}
|
||||
onMounted(getPasswordComplexityEnabled);
|
||||
|
||||
const passwordComplexityEnabledRules = {
|
||||
oldPassword: [{ required: true, message: '请输入原密码' }],
|
||||
newPassword: [{ required: true, type: 'string', pattern: reg, message: '密码格式错误' }],
|
||||
confirmPwd: [{ required: true, type: 'string', pattern: reg, message: '请输入确认密码' }],
|
||||
};
|
||||
const commonRules = {
|
||||
oldPassword: [{ required: true, message: '请输入原密码' }],
|
||||
newPassword: [
|
||||
{ required: true, message: '密码格式错误' },
|
||||
{ min: 8, message: '密码长度至少8位' },
|
||||
],
|
||||
confirmPwd: [
|
||||
{ required: true, message: '密码格式错误' },
|
||||
{ min: 8, message: '密码长度至少8位' },
|
||||
],
|
||||
};
|
||||
|
||||
const rules = computed(() => {
|
||||
return passwordComplexityEnabledFlag.value ? passwordComplexityEnabledRules : commonRules;
|
||||
});
|
||||
|
||||
const formDefault = {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
};
|
||||
let form = reactive({
|
||||
...formDefault,
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
if (form.newPassword !== form.confirmPwd) {
|
||||
message.error('新密码与确认密码不一致');
|
||||
return;
|
||||
}
|
||||
SmartLoading.show();
|
||||
try {
|
||||
await employeeApi.updateEmployeePassword(form);
|
||||
message.success('修改成功');
|
||||
|
||||
form.oldPassword = '';
|
||||
form.newPassword = '';
|
||||
form.confirmPwd = '';
|
||||
|
||||
emits('onSuccess');
|
||||
} catch (error) {
|
||||
smartSentry.captureError(error);
|
||||
} finally {
|
||||
SmartLoading.hide();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('error', error);
|
||||
message.error('参数验证错误，请仔细填写表单数据!');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.password-container {
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.password-form-area {
|
||||
margin-top: 30px;
|
||||
|
||||
.form-item {
|
||||
width: 550px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="account-container">
|
||||
<!--菜单列-->
|
||||
<div class="account-menu-list">
|
||||
<a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="selectMenu($event.key)">
|
||||
<a-menu-item v-for="item in menuList" :key="item.menuId">
|
||||
<span v-if="item.menuId === 'message'">
|
||||
{{ item.menuName }}
|
||||
<a-badge :count="unreadMessageCount" style="margin-left: 10px" />
|
||||
</span>
|
||||
<span v-if="item.menuId !== 'message'">{{ item.menuName }} </span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</div>
|
||||
<!--内容区域-->
|
||||
<div class="account-content">
|
||||
<component :is="selectedMenu.components" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import _ from 'lodash';
|
||||
import { ACCOUNT_MENU } from '/@/views/system/account/account-menu.js';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useUserStore } from '/@/store/modules/system/user.js';
|
||||
|
||||
// 菜单展示
|
||||
let menuList = computed(() => {
|
||||
return _.values(ACCOUNT_MENU);
|
||||
});
|
||||
// 选中的菜单
|
||||
let selectedMenu = ref({ menuId: 0 });
|
||||
let selectedKeys = computed(() => {
|
||||
return _.isEmpty(selectedMenu.value) ? [] : [selectedMenu.value.menuId];
|
||||
});
|
||||
|
||||
function selectMenu(menuId) {
|
||||
selectedMenu.value = menuList.value.find((e) => e.menuId === menuId);
|
||||
}
|
||||
|
||||
// ------------------------- 未读消息数量 -------------------------
|
||||
const unreadMessageCount = computed(() => {
|
||||
return useUserStore().unreadMessageCount;
|
||||
});
|
||||
|
||||
// ------------------------- 绑定路由参数 -------------------------
|
||||
const route = useRoute();
|
||||
onMounted(() => {
|
||||
if (_.isEmpty(menuList.value)) {
|
||||
return;
|
||||
}
|
||||
let menuId;
|
||||
if (route.query.menuId) {
|
||||
menuId = route.query.menuId;
|
||||
} else {
|
||||
let firstMenu = menuList.value[0];
|
||||
menuId = firstMenu.menuId;
|
||||
}
|
||||
selectMenu(menuId);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.query,
|
||||
(newQuery, oldQuery) => {
|
||||
let menuId;
|
||||
if (route.query.menuId) {
|
||||
menuId = route.query.menuId;
|
||||
} else {
|
||||
let firstMenu = menuList.value[0];
|
||||
menuId = firstMenu.menuId;
|
||||
}
|
||||
selectMenu(menuId);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.account-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
padding: 20px 0;
|
||||
|
||||
.account-menu-list {
|
||||
width: 180px;
|
||||
height: calc(100% - 100);
|
||||
border-right: solid 1px #efefef;
|
||||
}
|
||||
|
||||
.account-content {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
background: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user