WFC/fe.wfc
2
0
Fork 0
Code Activity

完善任务管理

Browse Source
This commit is contained in:
lai
2024-12-26 16:07:04 +08:00
parent de19d9f400
commit f65cb5058e
11 changed files with 1381 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

383
src/views/manage/task/index.vue
View File

@@ -3,19 +3,18 @@ import { message, Tag } from 'ant-design-vue';
import type { Key } from 'ant-design-vue/es/_util/type';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { SimpleScrollbar } from '~/packages/materials/src';
import taskOperateDrawer from './modules/task-operate-drawer.vue';
import { useI18n } from "vue-i18n";
import { SyncOutlined, SearchOutlined, ProfileOutlined, FormOutlined, DeleteOutlined, RocketOutlined, ContainerOutlined } from '@ant-design/icons-vue';
import { SyncOutlined, SearchOutlined, ProfileOutlined, FormOutlined, DeleteOutlined, RocketOutlined, ContainerOutlined, FieldTimeOutlined, ExportOutlined } from '@ant-design/icons-vue';
import { enableStatusOptions } from '@/constants/business';
import { saveAs } from 'file-saver';
import Form from 'ant-design-vue/es/form/Form';
import Modal from 'ant-design-vue/es/modal/Modal';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const routePath = route.path;
import { useAntdForm, useFormRules } from '@/hooks/common/form';
const { defaultRequiredRule, formRules } = useFormRules();
const rules = {
jonName: defaultRequiredRule,
invokeTarget: defaultRequiredRule,
cronExpression: defaultRequiredRule,
};
const { t } = useI18n();
@@ -44,8 +43,50 @@ let modalState: any = reactive({
},
confirmLoading: false,
openByCron: false,
statusOpt: [
{ label: t('common.normal'), value: '0' },
{ label: t('common.disable'), value: '1' }
],
jobGroup: [
{ label: t('common.default'), value: "DEFAULT" },
{ label: t('common.system'), value: "SYSTEM" }
],
sysJobSaveLog: [
{ label: t('common.record'), value: "0" },
{ label: t('common.noRecord'), value: "1" }
]
});
/**对话框内表单属性和校验规则 */
const modalStateFrom = Form.useForm(
modalState.from,
reactive({
jobName: [
{
required: true,
min: 2,
max: 50,
message: t('page.manage.task.jobNamePlease'),
},
],
invokeTarget: [
{
required: true,
min: 2,
max: 50,
message: t('page.manage.task.invokeTargetPlease'),
},
],
cronExpression: [
{
required: true,
min: 6,
message: t('page.manage.task.cronExpressionPlease'),
},
],
})
);
const scrollConfig = computed(() => {
return {
y: wrapperElHeight.value - 72,
@@ -53,11 +94,14 @@ const scrollConfig = computed(() => {
};
});
const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
const { columns, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
apiFn: doGetjobList,
apiParams: {
pageNum: 1,
pageSize: 10,
jobName: '',
jobGroup: '',
status: ''
},
rowKey: 'jobId',
columns: () => [
@@ -78,22 +122,6 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
dataIndex: 'jobGroup',
title: t('page.manage.task.group'),
align: 'center',
// customRender: ({ record }: any) => {
// if (record.operatorType === null) {
// return null;
// }
// const tagMap: any = {
// 0: t('page.manage.log.other'),
// 1: t('page.manage.log.backUser'),
// 2: t('page.manage.log.phoneUser'),
// };
// const tagColor: any = {
// '0': 'pink',
// '1': 'warning',
// '2': 'blue',
// };
// return <Tag color={tagColor[record.operatorType]}>{tagMap[record.operatorType]}</Tag>;
// }
},
{
key: 'invokeTarget',
@@ -132,74 +160,42 @@ const { columns, columnChecks, data, loading, getData, mobilePagination, searchP
title: t('common.operate'),
align: 'center',
width: 200,
// customRender: ({ record }: any) =>
// !record.admin && (
// <div class="flex justify-around gap-8px">
// <Popconfirm onConfirm={() => handleDelete(record.operId)} title={t('common.confirmDelete')}>
// <a-button danger size="small">
// <template #icon>
// <SyncOutlined />
// </template>
// </a-button>
// </Popconfirm>
// </div>
// )
}
]
});
const {
drawerVisible,
operateType,
editingData,
handleAdd,
checkedRowKeys,
onBatchDeleted,
onDeleted
// closeDrawer
} = useTableOperate(data, { getData, idKey: 'jobId' });
const deptTreeData = ref<Api.Common.CommonTree>([]);
onMounted(() => {
});
async function handleBatchDelete() {
const { error } = await doDeleteLog(checkedRowKeys.value);
if (!error) {
onBatchDeleted();
}
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.task.delTip', { num: checkedRowKeys.value.join(',') }),
async onOk() {
const { error } = await doDeleteLog(checkedRowKeys.value);
if (!error) {
onBatchDeleted();
}
}
})
}
async function handleDelete(id: number) {
const { error } = await doDeleteLog([id]);
if (!error) {
onDeleted();
}
}
function handleUserSelectChange(selectedRowKeys: Key[], selectedRows: any[]) {
checkedRowKeys.value = selectedRowKeys as number[];
}
function fnTest() {
searchParams.value = {
};
resetSearchParams();
// 使用 nextTick 确保视图更新后检查
nextTick(() => {
console.log(operateType)
});
}
async function fnRecordView(jobId: number) {
// const { error, data } = await doGetjobInfo(jobId);
// // if (!error) {
// // onDeleted();
// // }
// console.log(data);
operateType.value = 'view';
if (modalState.confirmLoading) return;
@@ -215,16 +211,44 @@ async function fnRecordView(jobId: number) {
modalState.title = t('page.manage.task.viewJob');
console.log(modalState.openByView);
}
// if (res.code === RESULT_CODE_SUCCESS && res.data) {
// modalState.from = Object.assign(modalState.from, res.data);
// modalState.title = t('views.manage.job.viewJob');
// modalState.openByView = true;
// } else {
// message.error(t('views.manage.job.viewInfoErr'), 2);
// }
});
}
/**
* 对话框弹出确认执行函数
* 进行表达规则校验
*/
function fnModalOk() {
modalStateFrom
.validate()
.then(() => {
modalState.confirmLoading = true;
const from = toRaw(modalState.from);
const job = from.jobId ? updateJob(from) : addJob(from);
const key = 'job';
message.loading({ content: t('common.loading'), key });
job
.then((res: any) => {
if (!res.error) {
message.success({
content: t('common.msgSuccess', { msg: modalState.title }),
key,
duration: 2,
});
modalState.openByEdit = false;
modalStateFrom.resetFields();
getData();
}
})
.finally(() => {
modalState.confirmLoading = false;
});
})
.catch(e => {
message.error(t('common.errorFields', { num: e.errorFields.length }), 3);
});
}
/**
* 对话框弹出关闭执行函数
@@ -233,7 +257,7 @@ async function fnRecordView(jobId: number) {
function fnModalCancel() {
modalState.openByEdit = false;
modalState.openByView = false;
// modalStateFrom.resetFields();
modalStateFrom.resetFields();
}
@@ -264,6 +288,123 @@ function fnModalVisibleByEdit(jobId?: string | number) {
}
}
/**
* 对话框弹出cron生成回调
*/
function fnModalCron(opt: boolean, cronStr?: string) {
modalState.openByCron = opt;
if (cronStr) {
modalState.from.cronExpression = cronStr;
}
}
function fnRecordDelete(recordId: any) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.task.delTip', { num: recordId }),
async onOk() {
const { error } = await delJobLog(recordId);
if (!error) {
onDeleted();
}
}
})
}
function fnRunTask(jobId: any) {
Modal.confirm({
title: t('common.tipTitle'),
content: t('page.manage.task.runOneTip', { num: jobId }),
async onOk() {
const { error } = await runJob(jobId);
if (!error) {
message.success(t('page.manage.task.runOneOk'), 2);
}
}
})
}
/**跳转任务日志页面 */
function fnJobLogView(jobId: string | number = '0') {
console.log(`${routePath}/log/${jobId}`)
router.push(`${routePath}/log?jobId=${jobId}`);
}
/**
* 任务状态修改
* @param row 任务信息对象
*/
function fnRecordStatus(row: Record<string, string>) {
doGetType(row.jobId).then((res: any) => {
console.log(res);
})
const sysJobStatus = [
{
"label": t('common.normal'),
"value": "0",
"tagType": "",
"tagClass": ""
},
{
"label": t('common.disable'),
"value": "1",
"tagType": "",
"tagClass": ""
}
];
const text =
row.status === '1'
? sysJobStatus.find(s => s.value === '1')?.label
: sysJobStatus.find(s => s.value === '0')?.label;
Modal.confirm({
title: t('common.tipTitle'),
content: t('views.monitor.job.statusChange', { text, num: row.jobName }),
onOk() {
const key = 'changeJobStatus';
message.loading({ content: t('common.loading'), key });
changeJobStatus(row.jobId, row.status).then(res => {
if (!res.error) {
message.success({
content: t('common.msgSuccess', { msg: `${row.jobName} ${text}` }),
key,
duration: 2,
});
}
getData();
});
},
onCancel() {
const value =
row.status === '1'
? sysJobStatus.find(s => s.value === '0')?.value
: sysJobStatus.find(s => s.value === '1')?.value;
row.status = value || '0';
},
});
}
function fnExportList() {
Modal.confirm({
title: t('common.tipTitle'),
content: t('common.exportTip'),
onOk() {
const key = 'exportJob';
message.loading({ content: t('common.loading'), key });
exportJob().then(res => {
if (!res.error) {
message.success({
content: t('common.exportOk'),
key,
duration: 2,
});
saveAs(res.data, `job_${Date.now()}.xlsx`);
}
});
},
});
}
</script>
<template>
@@ -274,14 +415,14 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<AForm :model="searchParams" :label-width="80">
<ARow :gutter="[16, 16]" wrap>
<ACol :lg="6" :md="12" :xs="24">
<AFormItem label="Name" name="operIp" class="m-0">
<AInput v-model:value="searchParams.operIp" />
<AFormItem label="Name" name="jobName" class="m-0">
<AInput v-model:value="searchParams.jobName" />
</AFormItem>
</ACol>
<ACol :lg="6" :md="12" :xs="24">
<AFormItem label="Group" name="title" class="m-0">
<AInput v-model:value="searchParams.title" />
<AFormItem label="Group" name="jobGroup" class="m-0">
<AInput v-model:value="searchParams.jobGroup" />
</AFormItem>
</ACol>
@@ -302,7 +443,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<AFormItem class="m-0">
<div class="w-full flex-y-center justify-end gap-8px">
<a-space :size="8">
<a-button @click="fnTest">
<a-button @click="resetSearchParams">
<template #icon>
<SyncOutlined />
</template>
@@ -326,10 +467,6 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<ACard title="Task Management" :bordered="false" :body-style="{ flex: 1, overflow: 'hidden' }"
class="flex-col-stretch sm:flex-1-hidden card-wrapper">
<template #extra>
<!-- <TableHeaderOperation v-model:columns="columnChecks" :disabled-delete="checkedRowKeys.length === 0"
:loading="loading" :show-delete="true" @add="handleAdd" @delete="handleBatchDelete" @refresh="getData"
:showExport="true" :not-show-add="false" /> -->
<div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
<slot name="prefix"></slot>
<slot name="default">
@@ -355,13 +492,21 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<span>{{ $t('common.refresh') }}</span>
</div>
</AButton>
<!-- <AButton size="small" type="primary" @click="handleExport" v-show="showExport">
<div class="flex-y-center gap-8px">
<icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
<span>{{ $t('common.export') }}</span>
</div>
</AButton> -->
<TableColumnSetting v-model:columns="columns" />
<AButton size="small" type="primary" @click="fnExportList">
<template #icon>
<ExportOutlined />
</template>
<span>{{ $t('common.export') }}</span>
</AButton>
<AButton size="small" type="default" @click.prevent="fnJobLogView()">
<template #icon>
<ContainerOutlined />
</template>
{{ t('page.manage.task.jobLog') }}
</AButton>
<slot name="suffix"></slot>
</div>
</template>
@@ -375,17 +520,14 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<a-switch v-model:checked="record.status" checked-value="0" un-checked-value="1" size="small" />
<!-- <DictTag :options="{
'0': t('common.normal'),
'1': t('common.abnormal'),
}" :value="record.status" /> -->
<a-switch v-model:checked="record.status" checked-value="0" un-checked-value="1" size="small"
@change="fnRecordStatus(record)" />
</template>
<template v-if="column.key === 'operate'">
<a-space :size="8" align="center">
<a-tooltip>
<template #title>{{ 'View' }}</template>
<template #title>{{ t('common.view') }}</template>
<a-button type="link" @click.prevent="fnRecordView(record.jobId)">
<template #icon>
<ProfileOutlined />
@@ -393,7 +535,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-button>
</a-tooltip>
<a-tooltip>
<template #title>{{ 'Edit' }}</template>
<template #title>{{ t('common.edit') }}</template>
<a-button type="link" @click.prevent="fnModalVisibleByEdit(record.jobId)">
<template #icon>
<FormOutlined />
@@ -402,8 +544,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-tooltip>
<a-tooltip>
<template #title>{{ 'Delete' }}</template>
<a-button type="link">
<template #title>{{ t('common.delete') }}</template>
<a-button type="link" @click.prevent="fnRecordDelete(record.jobId)">
<template #icon>
<DeleteOutlined />
</template>
@@ -411,8 +553,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-tooltip>
<a-tooltip>
<template #title>{{ 'run' }}</template>
<a-button type="link">
<template #title>{{ t('page.manage.task.runOne') }}</template>
<a-button type="link" @click.prevent="fnRunTask(record.jobId)">
<template #icon>
<RocketOutlined />
</template>
@@ -420,8 +562,8 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-tooltip>
<a-tooltip>
<template #title>{{ 'Job Log' }}</template>
<a-button type="link">
<template #title>{{ t('page.manage.task.jobLog') }}</template>
<a-button type="link" @click.prevent="fnJobLogView(record.jobId)">
<template #icon>
<ContainerOutlined />
</template>
@@ -434,11 +576,6 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</ATable>
<!-- <taskOperateDrawer v-model:visible="drawerVisible" :dept-tree-data="deptTreeData" :operate-type="operateType"
:row-data="editingData" @submitted="getData" /> -->
<!-- 详情框 -->
<a-modal :width="800" v-model:open="modalState.openByView" :title="modalState.title" @cancel="fnModalCancel">
<a-form layout=" horizontal" :label-col="{ span: 6 }" :label-wrap="true">
@@ -528,10 +665,10 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<!-- 新增框或修改框 -->
<!-- <a-modal :drag="true" :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
<a-modal :width="800" :destroyOnClose="true" :keyboard="false" :mask-closable="false"
:open="modalState.openByEdit" :title="modalState.title" :confirm-loading="modalState.confirmLoading"
@ok="fnModalOk" @cancel="fnModalCancel">
<a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true" :rules="rules">
<a-form name="modalStateFrom" layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.taskName')" name="jobName">
@@ -542,7 +679,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.status')" name="status">
<a-select v-model:value="modalState.from.status" default-value="0"
:placeholder="t('common.selectPlease')" :options="dict.sysJobStatus">
:placeholder="t('common.selectPlease')" :options="modalState.statusOpt">
</a-select>
</a-form-item>
</a-col>
@@ -552,20 +689,20 @@ function fnModalVisibleByEdit(jobId?: string | number) {
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.jobGroup')" name="jobGroup">
<a-select v-model:value="modalState.from.jobGroup" default-value="DEFAULT"
:placeholder="t('common.selectPlease')" :options="dict.sysJobGroup">
:placeholder="t('common.selectPlease')" :options="modalState.jobGroup">
</a-select>
</a-form-item>
</a-col>
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('page.manage.task.saveLog')" name="saveLog">
<a-select v-model:value="modalState.from.saveLog" default-value="0"
:placeholder="t('common.selectPlease')" :options="dict.sysJobSaveLog">
:placeholder="t('common.selectPlease')" :options="modalState.sysJobSaveLog">
</a-select>
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('page.manage.task.invokeTarget')" name="invokeTarget" :label-col="{ span: 3 }"
<a-form-item :label="t('page.manage.task.invoke')" name="invokeTarget" :label-col="{ span: 3 }"
:label-wrap="true">
<a-input v-model:value="modalState.from.invokeTarget" allow-clear
:placeholder="t('page.manage.task.invokeTargetPlease')">
@@ -580,7 +717,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-input>
</a-form-item>
<a-form-item :label="t('page.manage.task.cronExpression')" name="cronExpression" :label-col="{ span: 3 }"
<a-form-item :label="t('page.manage.task.cron')" name="cronExpression" :label-col="{ span: 3 }"
:label-wrap="true">
<a-input v-model:value="modalState.from.cronExpression" allow-clear
:placeholder="t('page.manage.task.cronExpressionPlease')">
@@ -606,6 +743,7 @@ function fnModalVisibleByEdit(jobId?: string | number) {
</a-input>
</a-form-item>
<a-form-item :label="t('page.manage.task.targetParams')" name="targetParams" :label-col="{ span: 3 }"
:label-wrap="true">
<a-textarea v-model:value="modalState.from.targetParams" :auto-size="{ minRows: 2, maxRows: 6 }"
@@ -618,8 +756,11 @@ function fnModalVisibleByEdit(jobId?: string | number) {
:maxlength="400" :show-count="true" />
</a-form-item>
</a-form>
</a-modal> -->
</a-modal>
<CronModal v-model:open="modalState.openByCron" :cron="modalState.from.cronExpression"
@ok="fnModalCron(false, $event)"></CronModal>
</ACard>