Commit a81fc808 authored by 冷玲鹏's avatar 冷玲鹏

任务调度相关模块修改

parent aae87186
<template>
<PageWrapper>
</PageWrapper>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
ref="treeRef"
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:defaultExpandAll="true"
:fieldNames="{ key: 'key', title: 'title' }"
:treeData="taskTreeData"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { Nullable } from '@vben/types';
import { taskTreeData } from './taskFlow.data';
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeRef = ref<Nullable<TreeActionType>>(null);
function handleSelect(keys) {
emit('select', keys[0]);
}
</script>
<template>
<PageWrapper title="任务流" contentBackground headerSticky>
<template #extra>
<div style="display: flex;">
<div>
<a-button style="border-color:transparent">
<Icon icon="ant-design:caret-right-outlined" style="color: blue" size="24"/>
<p>运行</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:send-outlined" style="color: blue" size="24"/>
<p>发布</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:cloud-download-outlined" style="color: blue" size="24"/>
<p>下线</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:tag-outlined" style="color: blue" size="24"/>
<p>设置业务标签</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:reconciliation-outlined" style="color: blue" size="24"/>
<p>复制到</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:clear-outlined" style="color: red" size="24"/>
<p>删除</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:folder-open-outlined" style="color: blue" size="24"/>
<p>移动</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:arrow-up-outlined" style="color: blue" size="24"/>
<p>导出</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:arrow-down-outlined" style="color: blue" size="24"/>
<p>导入</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:folder-add-outlined" style="color: blue" size="24"/>
<p>新建文件夹</p>
</a-button>
</div>
<div>
<a-button style="border-color:transparent ">
<Icon icon="ant-design:plus-square-outlined" style="color: blue" size="24"/>
<p>新建文件</p>
</a-button>
</div>
</div>
</template>
<template #footer>
<div class="flex">
<ModelTree class="w-1/4" @select="handleSelect"/>
<BasicTable
class="w-3/4"
@register="registerTable"
:searchInfo="searchInfo">
<template #tableTitle>
<div style="display: flex;align-items: center">
<BasicForm @register="registerForm" style="margin-bottom: -20px"/>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon:'ant-design:exclamation-circle-outlined',
tooltip:'详情',
/*label: '血缘',*/
onClick: handleConsanguinity.bind(null, record),
},
{
icon:'ant-design:caret-right-outlined',
tooltip:'运行',
onClick: other.bind(null, record),
},
{
icon:'ant-design:cloud-download-outlined',
tooltip:'下线',
onClick: handleOnline.bind(null, record),
},
{
icon:'ant-design:send-outlined',
tooltip:'发布',
onClick: apiDetail.bind(null, record),
},
{
icon:'ant-design:android-outlined',
tooltip:'检查?',
onClick: handleOffline.bind(null, record),
},
]"
:dropDownActions="[
{
icon:'ant-design:reconciliation-outlined',
label: '复制',
onClick: apiDetail.bind(null, record),
},
{
icon:'ant-design:clear-outlined',
label: '删除',
onClick: apiDetail.bind(null, record),
},
{
icon:'ant-design:folder-open-outlined',
label: '移动',
onClick: apiDetail.bind(null, record),
},
]"
/>
</template>
</template>
<template #name="{ text, record }">
<a @click="seeApi(record)">
<Icon icon="ant-design:node-index-outlined" :size="15" style="color:#0000ff;"/>
{{ text }}</a>
</template>
</BasicTable>
</div>
</template>
</PageWrapper>
</template>
<script lang="ts" setup>
import {reactive, onMounted, ref} from 'vue';
import {BasicTable, useTable, TableAction} from '@/components/Table';
import {PageWrapper} from '@/components/Page';
import {useMessage} from '@/hooks/web/useMessage';
import {columns, searchFormSchema} from './taskFlow.data';
import {tableList} from "./mock";
import {useRoute, onBeforeRouteLeave} from 'vue-router';
import {router} from '@/router';
import Icon from "@/components/Icon/Icon.vue";
import BasicForm from "@/components/Form/src/BasicForm.vue";
import ModelTree from "@/views/taskScheduling/taskFlowDesign/ModelTree.vue";
import {designData} from "@/views/taskScheduling/taskFlowDesign/designData";
defineOptions({name: 'safetyLevelManage'});
const {createMessage, createConfirm} = useMessage();
const route = useRoute();
let modelLevel = ref(1);
const tableData = ref([]);
const searchInfo = reactive<Recordable>({});
const [registerTable, {getRowSelection, setTableData}] = useTable({
/* title: '任务流',*/
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//按照部门筛选 如果有进行过滤相应部门的 没有就赋值全部
let data = [];
data = tableData.value.filter((item) => item.type === 'theme');
return {...response, data: data};
},
rowKey: 'businessId',
rowSelection: true,
showIndexColumn: false,
columns,
showTableSetting: false,
bordered: true,
striped: false,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 220,
title: '操作',
dataIndex: 'action',
},
});
/**右上*/
const [registerForm] = useTable({
schemas: searchFormSchema,
//在 input 中输入时按回车自动提交
autoSubmitOnEnter: true,
//是否显示操作按钮(重置/提交)
showActionButtonGroup: false,
rowSelection: true,
pagination: false,
showIndexColumn: false,
scroll: {y: 300},
showSummary: true,
});
onMounted(() => {
tableData.value = tableList;
});
/** 部门树的select*/
function handleSelect(key) {
console.log('asd');
if (key !== null && key !== undefined) {
modelLevel.value = key.split('-').length - 1;
} else {
modelLevel.value = 0;
}
if (modelLevel.value === 2) {
const regex = new RegExp(key, 'i');
const data = tableData.value.filter(
(item) => item.type === 'model' && regex.test(item.themeId),
);
setTableData(data);
}
if (modelLevel.value === 1) {
const regex = new RegExp(key, 'i');
const data = tableData.value.filter(
(item) => item.type === 'twoLevel' && regex.test(item.themeId),
);
setTableData(data);
}
if (modelLevel.value === 0) {
const regex = new RegExp(key, 'i');
const data = tableData.value.filter(
(item) => item.type === 'theme' && regex.test(item.themeId),
);
setTableData(data);
}
}
/**查看API*/
function seeApi(record) {
router.push({
path: '/taskScheduling/taskFlowDesign',
query: {},
})
}
/**查看详情*/
function detailButton(record) {
router.push({
path: '/dataStandards/publicCode/detailPublicCode',
query: {
businessId: record.businessId,
},
});
}
/**血缘按钮跳转路由以及传值*/
function handleConsanguinity(record: Recordable) {
router.push({
path: '/dataService/serviceManage/onlineManage/handleConsanguinity',
query: {
id: record.businessId,
},
});
}
/**设置按钮*/
function Settings() {
}
/**按钮*/
function other() {
}
/**api详情按钮*/
function apiDetail() {
}
/**下线按钮*/
function handleOffline(record) {
// 修改 record 对象的 flag 值为 "未上线"
record.flag = '未上线';
}
/**上线按钮*/
function handleOnline() {
router.push({
path: '/dataService/serviceManage/onlineManage/productionData',
query: {},
});
}
/** 删除按钮*/
function handleDelete(record: Recordable) {
const rowSelection = getRowSelection().selectedRowKeys;
console.log('11111111111', rowSelection);
createMessage.success('删除成功!');
reload();
}
onMounted(() => {
});
</script>
<style lang="scss" scoped>
</style>
/**列表数据*/
export const tableList: any[] = [
{
businessId: 1,
name:'1_1_1',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'model',
themeId: '1-1-1',
},
{
businessId: 2,
name:'1_1_2',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'model',
themeId: '1-1-1',
},
{
businessId: 3,
name:'1_2_1',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'model',
themeId: '1-1-2',
},
{
businessId: 4,
name:'1_2_2',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'model',
themeId: '1-1-2',
},
{
businessId: 5,
name:'1_3_1',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'model',
themeId: '1-1-3',
},
{
businessId: 6,
name:'1_3_2',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'model',
themeId: '1-1-3',
},
{
businessId: 7,
name: 'admin-个人工作区',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'theme',
themeId: '1-1',
},
{
businessId: 8,
name: 'SLA场景验证',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'theme',
themeId: '1-2',
},
{
businessId: 9,
name: '超时',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-1-1',
},
{
businessId: 10,
name: 'test',
ownershipWorkgroup: 'SLA-实时指标计算',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-1-2',
},
{
businessId: 11,
name: 'sql',
ownershipWorkgroup: 'admin-个人工作区',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-1-3',
},
{
businessId: 13,
name: 'SLA-沟通流水',
ownershipWorkgroup: 'SLA-实时指标计算',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-2-2',
},
{
businessId: 14,
name: 'SLA-实时指标计算',
ownershipWorkgroup: 'SLA-实时指标计算',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-2-3',
},
{
businessId: 15,
name: 'sla分组件指标日批统计历史',
ownershipWorkgroup: 'SLA-实时指标计算',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-2-4',
},
{
businessId: 16,
name: 'SLA',
ownershipWorkgroup: 'SLA-实时指标计算',
createDate: '2023/07/10 10:34:30',
updateDate: '2023/07/10 10:49:38',
businessTag: '_',
owner: 'admin',
releaseStatus: '已发布',
type: 'twoLevel',
themeId: '1-2-5',
},
];
import {BasicColumn, FormSchema} from "@/components/Table";
import {TreeItem} from "@/components/Tree";
/** 列表展示字段*/
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'name',
width: 180,
slots: { customRender: 'name' },
},
{
title: '权属工作组',
dataIndex: 'ownershipWorkgroup',
width: 120,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 120,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 120,
},
{
title: '业务标签',
dataIndex: 'businessTag',
width: 80,
},
{
title: '拥有者',
dataIndex: 'owner',
width: 120,
},
{
title: '发布状态',
dataIndex: 'releaseStatus',
width: 120,
},
];
/** 列表筛选项*/
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '',
component: 'InputSearch',
colProps: { span: 20},
componentProps: {
placeholder: '输入关键字搜索',
onChange: (e: any) => {
console.log(e);
},
},
},
];
export const taskTreeData: TreeItem[] = [
{
key: '1',
title: '所有任务流',
level: '0',
children: [
{
title: 'admin-个人工作区',
key: '1-1',
level: '1',
icon: 'ion:desktop-outline',
children: [
{ title: '超时', level: '2', key: '1-1-1', icon: 'ion:git-branch-outline' },
{ title: 'test', level: '2', key: '1-1-2', icon: 'ion:git-branch-outline' },
{ title: 'sql', level: '2', key: '1-1-3', icon: 'ion:git-branch-outline' },
],
},
{
title: 'SLA场景验证',
key: '1-2',
level: '1',
icon: 'ion:desktop-outline',
children: [
{ title: 'test', key: '1-2-1', icon: 'ion:git-branch-outline' },
{ title: 'SLA-沟通流水', key: '1-2-2', icon: 'ion:git-branch-outline' },
{ title: 'SLA-实时指标计算', key: '1-2-3', icon: 'ion:git-branch-outline' },
{ title: 'sla分组件指标日批统计历史', key: '1-2-4', icon: 'ion:git-branch-outline' },
{ title: 'SLA', key: '1-2-5', icon: 'ion:git-branch-outline' },
],
},
],
},
];
<template>
<BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm">
</BasicForm>
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import {BasicForm, useForm} from "@/components/Form";
import {defineEvent} from "@/views/taskScheduling/taskFlowDesign/design.data";
const getTitle = '定义事件';
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({
confirmLoading: false,
okText: '选中并自动更新',
});
await resetFields();
});
//初始化列表
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: defineEvent,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
</script>
......@@ -1015,3 +1015,82 @@ export const delTableColumn1: BasicColumn[] = [
width: 150,
},
];
export const defineEvent: FormSchema[] = [
{
label: '检查频率',
field: 'name',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
{
label: '触发类型',
field: 'depend',
defaultValue: '不依赖',
component: 'RadioGroup',
componentProps: {
options: [
{
label: '文件到达',
value: '文件到达',
},
{
label: 'SQL结果检查',
value: 'SQL结果检查',
},
{
label: '脚本自定义',
value: '脚本自定义',
},
],
},
colProps: { lg: 24, md: 24 },
},
{
label: '文件系统源',
field: 'priority',
component: 'Select',
componentProps: {
options: [
{
label: 'HDFS',
value: 'HDFS',
},
{
label: 'FTP',
value: 'FTP',
},
{
label: 'SFTP',
value: 'SFTP',
},
],
},
colProps: { lg: 24, md: 24 },
},
{
label: '文件路径',
field: 'name',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
{
label: '目标对象',
field: 'name',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
{
label: '超时设置',
field: 'name',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
{
label: '保存结果',
field: 'name',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
];
......@@ -3,42 +3,42 @@ import { TreeItem } from '@/components/Tree';
export const designData = [
{
businessId: 1,
name: 'new task',
name:'1_1_1',
task: 'new task1',
type: 'model',
themeId: '1-1-1',
},
{
businessId: 2,
name: 'new task1',
name:'1_1_2',
task: null,
type: 'model',
themeId: '1-1-1',
},
{
businessId: 3,
name: 'test task',
name:'1_2_1',
task: 'test task1',
type: 'model',
themeId: '1-1-2',
},
{
businessId: 4,
name: 'test task1',
name:'1_2_2',
task: null,
type: 'model',
themeId: '1-1-2',
},
{
businessId: 5,
name: 'sql task',
name:'1_3_1',
task: 'sql task1',
type: 'model',
themeId: '1-1-3',
},
{
businessId: 6,
name: 'sql task1',
name:'1_3_2',
task: null,
type: 'model',
themeId: '1-1-3',
......
<template>
<PageWrapper title="任务流" contentBackground headerSticky>
<PageWrapper title="任务流设计" contentBackground headerSticky>
<template #extra>
<!--历史版本-->
<span v-if="versionFlag">版本:</span>
......@@ -13,8 +13,13 @@
<a-button v-if="versionFlag" type="primary" danger @click="handleExit"
><CloseOutlined />退出</a-button
>
<a-button v-if="!versionFlag" type="primary">跳转运维</a-button>
<a-button v-if="!versionFlag" :disabled="debugFlag" type="primary">运行</a-button>
<a-button v-if="!versionFlag" style="border-color:transparent">
<Icon icon="ant-design:field-time-outlined" style="color: blue" size="24"/>
<p>跳转运维</p></a-button>
<a-button v-if="!versionFlag" :disabled="debugFlag" style="border-color:transparent">
<Icon icon="ant-design:caret-right-outlined" style="color: blue" size="24"/>
<p>运行</p>
</a-button>
<a-button v-if="!versionFlag" :disabled="debugFlag" type="primary">运行当前及下游</a-button>
<a-button v-if="!versionFlag && !debugFlag" type="primary" @click="handleDebug">调试</a-button>
<a-button v-if="!versionFlag && debugFlag" type="primary">调试全部任务</a-button>
......@@ -208,6 +213,7 @@
import TaskFlowConfig from './taskFlowConfig.vue';
import ModelTree from './ModelTree.vue';
import { logicalData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
import Icon from "@/components/Icon/Icon.vue";
const [taskModel, { openModal: openTaskModel }] = useModal();
const filterStore = useFilterStore();
......
......@@ -11,11 +11,20 @@
<Select v-model:value="model[field]" :options="cycleOptions" />
<a-button
type="link"
style="padding: 0"
v-if="model.group === 'default group'"
v-if="model[field] === '事件触发器'"
@click="handleCycle"
>批量调整直接下游配置</a-button
>
>批量调整直接下游配置</a-button>
<!-- 当选中 '事件触发器' 时,显示事件定义和两个按钮 -->
<div v-if="model[field] === '事件触发器'">
<div style="display: flex;margin-left: -62px;margin-top: 15px">
<div style="margin-right: 20px">事件定义</div>
<a-button @click="handleSetConfig" style="color: red;border-color: red">定义事件</a-button>
<a-button @click="viewLogs" style="margin-left: 30px">查看日志</a-button>
</div>
<a-button type="link" style="color: red">
<Icon icon="ant-design:exclamation-circle-outlined"/>
请定义触发事件详情</a-button>
</div>
</template>
<template #cron="{ field, model }">
<Input v-model:value="model[field]" />
......@@ -33,45 +42,58 @@
</template>
</BasicForm>
<EditDownStreamModel @register="editModal" />
<DefineEvent @register="defineEvent" />
</BasicModal>
</template>
<script lang="ts" setup>
import { useTable, TableAction } from '@/components/Table';
import { ref, computed, unref, reactive } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { Input, CheckboxGroup, Select, InputNumber } from 'ant-design-vue';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { connectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
import {
connectionFormSchema,
connectionTable,
} from '@/views/dataWarehousePlanning/logicalModel/modelDetail/model.data';
import {
taskOverallConfig,
upstreamTaskColumn,
} from '@/views/taskScheduling/taskFlowDesign/design.data';
import { useMessage } from '@/hooks/web/useMessage';
import EditDownStreamModel from './editDownStreamModel.vue';
import DefineEvent from "./defineEvent.vue";
const getTitle = '任务流全局配置';
const [editModal, { openModal: openEditModel }] = useModal();
const [defineEvent, { openModal: openDefineEvent }] = useModal();
function handleCycle() {
openEditModel(true, {
isUpdate: false,
});
}
/**定义事件*/
function handleSetConfig() {
openDefineEvent(true, {
isUpdate: false,
});
}
/**查看日志*/
function viewLogs() {
}
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
});
const cycleOptions = [
{
label: '每天一次',
value: '每天一次',
},
{
label: 'Cron表达式',
value: 'Cron表达式',
},
{
label: '事件触发器',
value: '事件触发器',
},
{
label: '无周期',
value: '无周期',
},
];
const overTimeOptions = [
{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment