优化分类、布局、标签、通知、多数据源、定时任务

This commit is contained in:
zjl 2024-12-13 10:17:55 +08:00
parent 06f2d71325
commit 030cd1b4d7
12 changed files with 137 additions and 42 deletions

View File

@ -5,6 +5,7 @@ export const columns = [
{ {
title: '分类名称', title: '分类名称',
key: 'name', key: 'name',
align: 'left',
width: 200, width: 200,
}, },
{ {
@ -15,7 +16,7 @@ export const columns = [
{ {
title: '分类备注', title: '分类备注',
key: 'note', key: 'note',
width: 100, width: 200,
}, },
{ {
title: '创建人', title: '创建人',

View File

@ -14,8 +14,12 @@
label-placement="left" label-placement="left"
label-width="85px" label-width="85px"
> >
<n-form-item label="描述" path="description"> <n-form-item label="位置描述" path="description">
<n-input type="textarea" v-model:value="formData.description" placeholder="请输入描述" /> <n-input
type="textarea"
v-model:value="formData.description"
placeholder="请输入位置描述"
/>
</n-form-item> </n-form-item>
<n-form-item <n-form-item
label="位置编号" label="位置编号"

View File

@ -76,7 +76,6 @@
const editVisible = ref(false); const editVisible = ref(false);
const layoutId = ref(0); const layoutId = ref(0);
const rowKeys = ref([]); const rowKeys = ref([]);
const showModal = ref(false);
/** /**
* 定义查询参数 * 定义查询参数

View File

@ -38,19 +38,19 @@
/> />
</n-form-item> </n-form-item>
<n-form-item <n-form-item
label="推荐文章" label="推荐内容"
path="typeId" path="typeId"
:rule="{ :rule="{
key: 'typeId', key: 'typeId',
type: 'number', type: 'number',
required: true, required: true,
message: '请选择推荐文章', message: '请选择推荐内容',
trigger: 'blur', trigger: 'blur',
}" }"
> >
<n-input <n-input
v-model:value="formData.typeText" v-model:value="formData.typeText"
placeholder="请选择推荐文章" placeholder="请选择推荐内容"
@click="getLayoutItem" @click="getLayoutItem"
/> />
</n-form-item> </n-form-item>

View File

@ -15,12 +15,12 @@ export const columns2 = [
fixed: 'left', fixed: 'left',
}, },
{ {
title: '标题', title: '通知标题',
key: 'title', key: 'title',
width: 200, width: 200,
}, },
{ {
title: '类型', title: '通知类型',
key: 'type', key: 'type',
width: 100, width: 100,
render(record) { render(record) {
@ -36,7 +36,7 @@ export const columns2 = [
}, },
}, },
{ {
title: '状态', title: '通知状态',
key: 'status', key: 'status',
render(record) { render(record) {
return h( return h(

View File

@ -16,7 +16,7 @@ export const columns = [
{ {
title: '标签名称', title: '标签名称',
key: 'name', key: 'name',
width: 100, width: 200,
}, },
{ {
title: '排序', title: '排序',

View File

@ -9,17 +9,17 @@ export const columns = [
{ {
title: '字典名称', title: '字典名称',
key: 'name', key: 'name',
width: 100, width: 150,
}, },
{ {
title: '字典编码', title: '字典编码',
key: 'dictCode', key: 'dictCode',
width: 100, width: 150,
}, },
{ {
title: '字典项值', title: '字典项值',
key: 'value', key: 'value',
width: 100, width: 150,
}, },
{ {
title: '排序', title: '排序',

View File

@ -1,5 +1,6 @@
import { h } from 'vue'; import { h } from 'vue';
import { NTag } from 'naive-ui'; import { NImage, NTag } from 'naive-ui';
export const columns = [ export const columns = [
{ {
type: 'selection', type: 'selection',
@ -13,12 +14,25 @@ export const columns = [
width: 50, width: 50,
}, },
{ {
title: '标题', title: '通知标题',
key: 'title', key: 'title',
width: 250, width: 250,
}, },
{ {
title: '类型', title: '通知封面',
key: 'cover',
width: 100,
render(record) {
return h(NImage, {
width: 48,
src: record.cover,
shape: 'square',
fit: 'fill',
});
},
},
{
title: '通知类型',
key: 'type', key: 'type',
width: 100, width: 100,
render(record) { render(record) {
@ -34,7 +48,7 @@ export const columns = [
}, },
}, },
{ {
title: '状态', title: '通知状态',
key: 'status', key: 'status',
width: 100, width: 100,
render(record) { render(record) {

View File

@ -74,7 +74,7 @@ export const columns = [
{ {
title: '备注', title: '备注',
key: 'note', key: 'note',
width: 100, width: 200,
}, },
{ {
title: '创建人', title: '创建人',

View File

@ -9,27 +9,38 @@ export const columns = [
{ {
title: 'ID', title: 'ID',
key: 'id', key: 'id',
fixed: 'left',
width: 100, width: 100,
}, },
{ {
title: '任务名称', title: '任务名称',
key: 'jobName', key: 'jobName',
width: 200,
}, },
{ {
title: '任务组名', title: '任务组名',
key: 'jobGroup', key: 'jobGroup',
width: 100,
}, },
{ {
title: '任务触发器', title: '任务触发器',
key: 'jobTrigger', key: 'jobTrigger',
width: 200,
}, },
{ {
title: '任务信息', title: '任务日志信息',
key: 'jobMessage', key: 'jobMessage',
width: 300,
},
{
title: '执行表达式',
key: 'cronExpression',
width: 150,
}, },
{ {
title: '执行状态', title: '执行状态',
key: 'status', key: 'status',
width: 100,
render(record) { render(record) {
let typeText = ''; let typeText = '';
switch (record.status) { switch (record.status) {
@ -52,7 +63,23 @@ export const columns = [
}, },
}, },
{ {
title: '执行时间', title: '任务开始时间',
key: 'startTime', key: 'startTime',
width: 180,
},
{
title: '任务结束时间',
key: 'endTime',
width: 180,
},
{
title: '任务执行时间',
key: 'createTime',
width: 180,
},
{
title: '任务执行耗时',
key: 'consumeTime',
width: 120,
}, },
]; ];

View File

@ -1,16 +1,28 @@
<template> <template>
<basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal"> <basicModal @register="modalRegister" ref="modalRef" class="basicModal basicFormModal">
<template #default> <template #default>
<n-descriptions :column="2" bordered label-placement="left" :labelStyle="{ width: '130px' }"> <n-descriptions :column="2" bordered label-placement="left" :labelStyle="{ width: '150px' }">
<n-descriptions-item label="任务名称:">{{ formData.jobName }}</n-descriptions-item> <n-descriptions-item label="任务名称:">{{ formData.jobName }}</n-descriptions-item>
<n-descriptions-item label="任务组名:">{{ formData.jobGroup }}</n-descriptions-item> <n-descriptions-item label="任务组名:">{{ formData.jobGroup }}</n-descriptions-item>
<n-descriptions-item label="任务触发器:">{{ formData.jobTrigger }}</n-descriptions-item> <n-descriptions-item label="任务触发器:">{{ formData.jobTrigger }}</n-descriptions-item>
<n-descriptions-item label="任务信息:">{{ formData.jobMessage }}</n-descriptions-item> <n-descriptions-item label="任务日志信息:">{{ formData.jobMessage }}</n-descriptions-item>
<n-descriptions-item label="cron执行表达式:">{{ <n-descriptions-item label="任务执行表达式:">{{
formData.cronExpression formData.cronExpression
}}</n-descriptions-item> }}</n-descriptions-item>
<n-descriptions-item label="任务请求状态">
<n-tag :type="formData.status ? 'danger' : 'success'">{{
formData.status ? '异常' : '正常'
}}</n-tag>
</n-descriptions-item>
<n-descriptions-item label="任务开始时间:">{{ formData.startTime }}</n-descriptions-item> <n-descriptions-item label="任务开始时间:">{{ formData.startTime }}</n-descriptions-item>
<n-descriptions-item label="任务结束时间:">{{ formData.endTime }}</n-descriptions-item> <n-descriptions-item label="任务结束时间:">{{ formData.endTime }}</n-descriptions-item>
<n-descriptions-item label="任务执行时间:">{{ formData.createTime }}</n-descriptions-item>
<n-descriptions-item label="任务执行耗时:"
>{{ formData.consumeTime }}ms</n-descriptions-item
>
<n-descriptions-item label="执行异常信息:" :span="3">{{
formData.exceptionInfo
}}</n-descriptions-item>
</n-descriptions> </n-descriptions>
</template> </template>
<template #action> <template #action>
@ -32,14 +44,21 @@
jobGroup: '', jobGroup: '',
jobTrigger: '', jobTrigger: '',
jobMessage: '', jobMessage: '',
status: '',
cronExpression: '', cronExpression: '',
startTime: '', startTime: '',
endTime: '', endTime: '',
createTime: '',
consumeTime: '',
exceptionInfo: '',
}); });
/**
* 定义模态
*/
const [modalRegister, { openModal, setSubLoading }] = useModal({ const [modalRegister, { openModal, setSubLoading }] = useModal({
title: '日志详情', title: '日志详情',
width: 800, width: 850,
}); });
const emit = defineEmits(['update:visible']); const emit = defineEmits(['update:visible']);
@ -87,7 +106,10 @@
setFormData(); setFormData();
} }
}); });
//
/**
* 定义函数
*/
defineExpose({ defineExpose({
openModal, openModal,
}); });

View File

@ -58,12 +58,13 @@
import { getJobLogList, jobLogDelete, jobLogBatchDelete } from '@/api/monitor/job'; import { getJobLogList, jobLogDelete, jobLogBatchDelete } from '@/api/monitor/job';
import { columns } from './columns'; import { columns } from './columns';
import { PlusOutlined, DeleteOutlined, EyeOutlined } from '@vicons/antd'; import { PlusOutlined, DeleteOutlined, EyeOutlined } from '@vicons/antd';
import CreateModal from './CreateModal.vue';
import editDialog from './edit.vue'; import editDialog from './edit.vue';
import { basicModal, useModal } from '@/components/Modal';
import { schemas } from './querySchemas'; import { schemas } from './querySchemas';
import { renderIcon } from '@/utils'; import { renderIcon } from '@/utils';
/**
* 定义参数
*/
const message = useMessage(); const message = useMessage();
const dialog = useDialog(); const dialog = useDialog();
const basicTableRef = ref(); const basicTableRef = ref();
@ -72,14 +73,16 @@
const logId = ref(0); const logId = ref(0);
const size = document.body.clientWidth - 500; const size = document.body.clientWidth - 500;
const rowKeys = ref([]); const rowKeys = ref([]);
const exportLoading = ref(false);
const showModal = ref(false);
const formParams = reactive({
name: '',
dbType: '',
});
const emit = defineEmits(['update:visible']); const emit = defineEmits(['update:visible']);
/**
* 定义查询参数
*/
const formParams = reactive({
jobName: '',
status: '',
});
/** /**
* 定义接收的参数 * 定义接收的参数
*/ */
@ -95,6 +98,10 @@
default: 0, default: 0,
}, },
}); });
/**
* 定义操作栏
*/
const actionColumn = reactive({ const actionColumn = reactive({
width: 200, width: 200,
title: '操作', title: '操作',
@ -109,7 +116,7 @@
label: '详情', label: '详情',
icon: renderIcon(EyeOutlined), icon: renderIcon(EyeOutlined),
type: 'info', type: 'info',
onClick: handleEdit.bind(null, record), onClick: handleDetail.bind(null, record),
}, },
{ {
label: '删除', label: '删除',
@ -122,24 +129,36 @@
}, },
}); });
function addTable() { /**
showModal.value = true; * 加载数据列表
} * @param res 参数
*/
const loadDataTable = async (res) => { const loadDataTable = async (res) => {
rowKeys.value = []; rowKeys.value = [];
const result = await getJobLogList({ ...formParams, jobId: props.jobId, ...res }); const result = await getJobLogList({ ...formParams, jobId: props.jobId, ...res });
return result; return result;
}; };
/**
* 数据行选中事件
* @param keys 参数
*/
function onCheckedRow(keys) { function onCheckedRow(keys) {
rowKeys.value = keys; rowKeys.value = keys;
} }
/**
* 刷新数据列表
* @param noRefresh 参数
*/
function reloadTable(noRefresh = '') { function reloadTable(noRefresh = '') {
basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 }); basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
} }
/**
* 执行提交表单
* @param values 参数
*/
function handleSubmit(values: Recordable) { function handleSubmit(values: Recordable) {
for (const key in formParams) { for (const key in formParams) {
formParams[key] = ''; formParams[key] = '';
@ -150,6 +169,10 @@
reloadTable(); reloadTable();
} }
/**
* 执行重置
* @param values 参数
*/
function handleReset(values: Recordable) { function handleReset(values: Recordable) {
for (const key in formParams) { for (const key in formParams) {
formParams[key] = ''; formParams[key] = '';
@ -160,6 +183,9 @@
reloadTable(); reloadTable();
} }
/**
* 执行注册
*/
const [register, {}] = useForm({ const [register, {}] = useForm({
gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' }, gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
labelWidth: 110, labelWidth: 110,
@ -168,15 +194,17 @@
const handleClose = () => { const handleClose = () => {
emit('update:visible', false); emit('update:visible', false);
}; };
/** /**
* 执行编辑 * 执行查看详情
*/ */
async function handleEdit(record: Recordable) { async function handleDetail(record: Recordable) {
logId.value = record.id; logId.value = record.id;
editVisible.value = true; editVisible.value = true;
await nextTick(); await nextTick();
createModalRef.value.openModal(); createModalRef.value.openModal();
} }
/** /**
* 执行删除 * 执行删除
* @param id 参数 * @param id 参数