auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

completepage: 🍻 消息类型CURD完成,修改部分错误内容

This commit is contained in:
bunny 2024-10-30 15:14:39 +08:00
parent 7bfcf190f7
commit 0815f37732
11 changed files with 522 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/api/v1/messageType.ts Normal file
View File

@ -0,0 +1,27 @@
import { http } from '@/api/service/request';
import type { BaseResult, ResultTable } from '@/api/service/types';
/** 系统消息类型---获取系统消息类型列表 */
export const fetchGetMessageTypeList = (data: any) => {
return http.request<BaseResult<ResultTable>>('get', `messageType/getMessageTypeList/${data.currentPage}/${data.pageSize}`, { params: data });
};
/** 系统消息类型---获取系统消息类型列表 */
export const fetchGetAllMessageTypes = () => {
return http.request<BaseResult<ResultTable>>('get', '/messageType/noManage/getAllMessageTypes');
};
/** 系统消息类型---添加系统消息类型 */
export const fetchAddMessageType = (data: any) => {
return http.request<BaseResult<object>>('post', 'messageType/addMessageType', { data });
};
/** 系统消息类型---更新系统消息类型 */
export const fetchUpdateMessageType = (data: any) => {
return http.request<BaseResult<object>>('put', 'messageType/updateMessageType', { data });
};
/** 系统消息类型---删除系统消息类型 */
export const fetchDeleteMessageType = (data: any) => {
return http.request<BaseResult<object>>('delete', 'messageType/deleteMessageType', { data });
};

18
src/enums/baseConstant.ts
View File

@ -8,30 +8,30 @@ export const isDefaultOptions = [
{ value: false, label: '否' },
];
/**
* * 是否显示
*/
/** 是否显示 */
export const isDefaultVisibleOptions = [
{ value: true, label: '显示' },
{ value: false, label: '不显示' },
];
/**
* * 性别
*/
/** 性别 */
export const sexConstant = [
{ value: 1, label: '男' },
{ value: 0, label: '女' },
];
/**
* * 默认状态
*/
/** 默认状态 */
export const userStatus = [
{ value: 0, label: '启用' },
{ value: 1, label: '禁用' },
];
/** 是否启用状态 */
export const enabledOrNotStatus = [
{ value: true, label: '启用' },
{ value: false, label: '禁用' },
];
/**
* * 分页默认数组个数
*/

73
src/store/message/messageType.ts Normal file
View File

@ -0,0 +1,73 @@
import { defineStore } from 'pinia';
import { fetchAddMessageType, fetchDeleteMessageType, fetchGetMessageTypeList, fetchUpdateMessageType } from '@/api/v1/messageType';
import { pageSizes } from '@/enums/baseConstant';
import { storeMessage } from '@/utils/message';
import { storePagination } from '@/store/useStorePagination';
/**
* 系统消息类型 Store
*/
export const useMessageTypeStore = defineStore('messageTypeStore', {
state() {
return {
// 系统消息类型列表
datalist: [],
// 查询表单
form: {
// 1:启用 0:禁用
status: undefined,
// 消息名称
messageName: undefined,
// 消息类型
messageType: undefined,
// 消息备注
summary: undefined,
},
// 分页查询结果
pagination: {
currentPage: 1,
pageSize: 150,
total: 100,
pageSizes,
},
// 加载
loading: false,
};
},
getters: {},
actions: {
/** 获取系统消息类型 */
async getMessageTypeList() {
// 整理请求参数
const data = { ...this.pagination, ...this.form };
delete data.pageSizes;
delete data.total;
delete data.background;
// 获取系统消息类型列表
const result = await fetchGetMessageTypeList(data);
// 公共页面函数hook
const pagination = storePagination.bind(this);
return pagination(result);
},
/** 添加系统消息类型 */
async addMessageType(data: any) {
const result = await fetchAddMessageType(data);
return storeMessage(result);
},
/** 修改系统消息类型 */
async updateMessageType(data: any) {
const result = await fetchUpdateMessageType(data);
return storeMessage(result);
},
/** 删除系统消息类型 */
async deleteMessageType(data: any) {
const result = await fetchDeleteMessageType(data);
return storeMessage(result);
},
},
});

5
src/views/message/messageEditing/index.vue Normal file
View File

@ -0,0 +1,5 @@
<script lang="ts" setup></script>
<template>
<h1>消息编辑页面</h1>
</template>

152
src/views/message/messageType/index.vue Normal file
View File

@ -0,0 +1,152 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { columns } from '@/views/message/messageType/utils/columns';
import PureTableBar from '@/components/TableBar/src/bar';
import AddFill from '@iconify-icons/ri/add-circle-line';
import PureTable from '@pureadmin/table';
import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/message/messageType/utils/hooks';
import Delete from '@iconify-icons/ep/delete';
import EditPen from '@iconify-icons/ep/edit-pen';
import Refresh from '@iconify-icons/ep/refresh';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
import { $t } from '@/plugins/i18n';
import { useMessageTypeStore } from '@/store/message/messageType';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { FormInstance } from 'element-plus';
import { enabledOrNotStatus } from '@/enums/baseConstant';
import { usePublicHooks } from '@/views/hooks';
const tableRef = ref();
const formRef = ref();
const messageTypeStore = useMessageTypeStore();
// 用户是否停用样式
const { switchStyle } = usePublicHooks();
/** 当前页改变时 */
const onCurrentPageChange = async (value: number) => {
messageTypeStore.pagination.currentPage = value;
await onSearch();
};
/**
* * 当分页发生变化
* @param value
*/
const onPageSizeChange = async (value: number) => {
messageTypeStore.pagination.pageSize = value;
await onSearch();
};
/**
* * 选择多行
* @param rows
*/
const onSelectionChange = (rows: Array<any>) => {
deleteIds.value = rows.map((row: any) => row.id);
};
/**
* 重置表单
* @param formEl
*/
const resetForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
formEl.resetFields();
await onSearch();
};
onMounted(() => {
onSearch();
});
</script>
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="messageTypeStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<!-- 消息名称 -->
<el-form-item :label="$t('messageName')" prop="messageName">
<el-input v-model="messageTypeStore.form.messageName" :placeholder="`${$t('input')}${$t('messageName')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 消息类型 -->
<el-form-item :label="$t('messageType')" prop="messageType">
<el-input v-model="messageTypeStore.form.messageType" :placeholder="`${$t('input')}${$t('messageType')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 消息备注 -->
<el-form-item :label="$t('summary')" prop="summary">
<el-input v-model="messageTypeStore.form.summary" :placeholder="`${$t('input')}${$t('summary')}`" class="!w-[180px]" clearable />
</el-form-item>
<!-- 是否启用 -->
<el-form-item :label="$t('status')" prop="status">
<el-select v-model="messageTypeStore.form.status" :placeholder="`${$t('select')}${$t('status')}`" class="!w-[180px]" clearable filterable>
<el-option v-for="(item, index) in enabledOrNotStatus" :key="index" :label="item.label" :navigationBar="false" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="messageTypeStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
</el-form-item>
</el-form>
<PureTableBar :columns="columns" title="系统消息类型" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('addNew') }}</el-button>
<!-- 批量删除按钮 -->
<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
{{ $t('delete_batches') }}
</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
:adaptiveConfig="{ offsetBottom: 96 }"
:columns="dynamicColumns"
:data="messageTypeStore.datalist"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
:loading="messageTypeStore.loading"
:pagination="messageTypeStore.pagination"
:size="size"
adaptive
align-whole="center"
border
highlight-current-row
row-key="id"
showOverflowTooltip
table-layout="auto"
@page-size-change="onPageSizeChange"
@selection-change="onSelectionChange"
@page-current-change="onCurrentPageChange"
>
<template #status="{ row }">
<el-switch v-model="row.status" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" disabled inline-prompt />
</template>
<template #createUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
</template>
<template #updateUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
</template>
<template #operation="{ row }">
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('addNew') }} </el-button>
<el-popconfirm :title="`${$t('delete')}${row.messageName}?`" @confirm="onDelete(row)">
<template #reference>
<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
{{ $t('delete') }}
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>

52
src/views/message/messageType/message-type-dialog.vue Normal file
View File

@ -0,0 +1,52 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/message/messageType/utils/columns';
import { FormProps } from '@/views/message/messageType/utils/types';
import { $t } from '@/plugins/i18n';
import { usePublicHooks } from '@/views/hooks';
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
// 是否启用
status: true,
// 消息名称
messageName: undefined,
// 消息类型
messageType: undefined,
// 消息备注
summary: undefined,
}),
});
const formRef = ref<FormInstance>();
const form = ref(props.formInline);
// 用户是否停用样式
const { switchStyle } = usePublicHooks();
defineExpose({ formRef });
</script>
<template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<!-- 消息类型 -->
<el-form-item :label="$t('messageType')" prop="messageType">
<el-input v-model="form.messageType" :placeholder="$t('input') + $t('messageType')" autocomplete="off" type="text" />
</el-form-item>
<!-- 消息名称 -->
<el-form-item :label="$t('messageName')" prop="messageName">
<el-input v-model="form.messageName" :placeholder="$t('input') + $t('messageName')" autocomplete="off" type="text" />
</el-form-item>
<!-- 消息备注 -->
<el-form-item :label="$t('summary')" prop="summary">
<el-input v-model="form.summary" :placeholder="$t('input') + $t('summary')" autocomplete="off" maxlength="300" show-word-limit type="textarea" />
</el-form-item>
<!-- 是否启用 -->
<el-form-item :label="$t('status')" prop="status">
<el-switch v-model="form.status" :active-text="$t('enable')" :active-value="true" :inactive-text="$t('disable')" :inactive-value="false" :style="switchStyle" inline-prompt />
</el-form-item>
</el-form>
</template>

37
src/views/message/messageType/utils/columns.tsx Normal file
View File

@ -0,0 +1,37 @@
import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
import type { FormRules } from 'element-plus';
// 表格列
export const columns: TableColumnList = [
{ type: 'selection', align: 'left' },
{ type: 'index', index: (index: number) => index + 1, label: '序号', width: 60 },
// 是否启用
{ label: $t('status'), prop: 'status', slot: 'status' },
// 消息名称
{ label: $t('messageName'), prop: 'messageName' },
// 消息类型
{ label: $t('messageType'), prop: 'messageType' },
// 消息备注
{ label: $t('summary'), prop: 'summary' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];
// 添加规则
export const rules = reactive<FormRules>({
// 消息名称
messageName: [{ required: true, message: `${$t('input')}${$t('messageName')}`, trigger: 'blur' }],
// 消息类型
messageType: [
{
required: true,
message: `${$t('input')}${$t('messageType')}`,
trigger: 'blur',
},
{ pattern: /^[a-z]+$/i, message: `${$t('inputRuleMustBeEnglish')}`, trigger: ['blur', 'change'] },
],
});

133
src/views/message/messageType/utils/hooks.ts Normal file
View File

@ -0,0 +1,133 @@
import { addDialog } from '@/components/BaseDialog/index';
import MessageTypeDialog from '@/views/message/messageType/message-type-dialog.vue';
import { useMessageTypeStore } from '@/store/message/messageType';
import { h, ref } from 'vue';
import { message, messageBox } from '@/utils/message';
import type { FormItemProps } from '@/views/message/messageType/utils/types';
import { $t } from '@/plugins/i18n';
import DeleteBatchDialog from '@/components/Table/DeleteBatchDialog.vue';
export const formRef = ref();
// 删除ids
export const deleteIds = ref([]);
const messageTypeStore = useMessageTypeStore();
/** 搜索初始化系统消息类型 */
export async function onSearch() {
messageTypeStore.loading = true;
await messageTypeStore.getMessageTypeList();
messageTypeStore.loading = false;
}
/** 添加系统消息类型 */
export function onAdd() {
addDialog({
title: `${$t('addNew')}${$t('messageType')}`,
width: '30%',
props: {
formInline: {
status: true,
messageName: undefined,
messageType: undefined,
summary: undefined,
},
},
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(MessageTypeDialog, { ref: formRef }),
beforeSure: (done, { options }) => {
const form = options.props.formInline as FormItemProps;
formRef.value.formRef.validate(async (valid: any) => {
if (!valid) return;
const result = await messageTypeStore.addMessageType(form);
if (!result) return;
done();
await onSearch();
});
},
});
}
/**
* * 更新系统消息类型
* @param row
*/
export function onUpdate(row: any) {
addDialog({
title: `${$t('modify')}${$t('messageType')}`,
width: '30%',
props: {
formInline: {
status: row.status,
messageName: row.messageName,
messageType: row.messageType,
summary: row.summary,
},
},
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(MessageTypeDialog, { ref: formRef }),
beforeSure: (done, { options }) => {
const form = options.props.formInline as FormItemProps;
formRef.value.formRef.validate(async (valid: any) => {
if (!valid) return;
const result = await messageTypeStore.updateMessageType({ ...form, id: row.id });
if (!result) return;
done();
await onSearch();
});
},
});
}
/** 删除系统消息类型 */
export const onDelete = async (row: any) => {
const id = row.id;
// 是否确认删除
const result = await messageBox({
title: $t('confirmDelete'),
showMessage: false,
confirmMessage: undefined,
cancelMessage: $t('cancel_delete'),
});
if (!result) return;
// 删除数据
await messageTypeStore.deleteMessageType([id]);
await onSearch();
};
/** 批量删除 */
export const onDeleteBatch = async () => {
const ids = deleteIds.value;
const formDeletedBatchRef = ref();
addDialog({
title: $t('deleteBatchTip'),
width: '30%',
props: { formInline: { confirmText: '' } },
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(DeleteBatchDialog, { ref: formDeletedBatchRef }),
beforeSure: (done, { options }) => {
formDeletedBatchRef.value.formDeletedBatchRef.validate(async (valid: any) => {
if (!valid) return;
const text = options.props.formInline.confirmText.toLowerCase();
if (text === 'yes' || text === 'y') {
// 删除数据
await messageTypeStore.deleteMessageType(ids);
await onSearch();
done();
} else message($t('deleteBatchTip'), { type: 'warning' });
});
},
});
};

16
src/views/message/messageType/utils/types.ts Normal file
View File

@ -0,0 +1,16 @@
// 添加或者修改表单元素
export interface FormItemProps {
// 1:启用 0:禁用
status: boolean;
// 消息名称
messageName: string;
// 消息类型
messageType: string;
// 消息备注
summary: string;
}
// 添加或修改表单Props
export interface FormProps {
formInline: FormItemProps;
}

14
src/views/monitor/server/component/system-cpu.vue
View File

@ -15,6 +15,8 @@ const myChart = ref<any>();
// 初始化ECharts
const seriesData = ref([]);
const xSeriesData = ref([]);
// 数据显示长度
const dateDisplayLength = ref(20);
const option = reactive<UtilsEChartsOption>({
tooltip: {
@ -46,9 +48,11 @@ const option = reactive<UtilsEChartsOption>({
type: 'line',
areaStyle: {},
animationDelay: function (idx) {
return idx * 10; // 设置动画延迟时间
// 设置动画延迟时间
return idx * 10;
},
animationDuration: 1000, // 设置动画持续时间
// 设置动画持续时间
animationDuration: 1000,
},
],
animationDuration: 666,
@ -60,9 +64,9 @@ const option = reactive<UtilsEChartsOption>({
/** 初始化数据 */
const onSearch = async () => {
// 保留数组中的最新10条数据
if (seriesData.value.length > 5) {
seriesData.value = seriesData.value.slice(-5);
xSeriesData.value = xSeriesData.value.slice(-5);
if (seriesData.value.length > dateDisplayLength.value) {
seriesData.value = seriesData.value.slice(-dateDisplayLength.value);
xSeriesData.value = xSeriesData.value.slice(-dateDisplayLength.value);
}
// 获取数据

14
src/views/monitor/server/component/system-jvm-cpu.vue
View File

@ -15,6 +15,8 @@ const myChart = ref<any>();
// 初始化ECharts
const seriesData = ref([]);
const xSeriesData = ref([]);
// 数据显示长度
const dateDisplayLength = ref(20);
const option = reactive<UtilsEChartsOption>({
tooltip: {
@ -45,9 +47,11 @@ const option = reactive<UtilsEChartsOption>({
type: 'line',
areaStyle: {},
animationDelay: function (idx) {
return idx * 10; // 设置动画延迟时间
// 设置动画延迟时间
return idx * 10;
},
animationDuration: 1000, // 设置动画持续时间
// 设置动画持续时间
animationDuration: 1000,
},
],
animationDuration: 666,
@ -59,9 +63,9 @@ const option = reactive<UtilsEChartsOption>({
/** 初始化数据 */
const onSearch = async () => {
// 保留数组中的最新10条数据
if (seriesData.value.length > 5) {
seriesData.value = seriesData.value.slice(-5);
xSeriesData.value = xSeriesData.value.slice(-5);
if (seriesData.value.length > dateDisplayLength.value) {
seriesData.value = seriesData.value.slice(-dateDisplayLength.value);
xSeriesData.value = xSeriesData.value.slice(-dateDisplayLength.value);
}
// 获取数据