Skip to content

B
bigDataSystem
Commit ce3b3264 authored by LiXuyang's avatar LiXuyang
Browse files
Options

任务流设计-任务流配置

parent 655a3967
Hide whitespace changes
Inline Side-by-side
Showing with 682 additions and 1 deletion
src/views/taskScheduling/taskFlowDesign/design.data.ts
View file @ ce3b3264
...@@ -756,3 +756,217 @@ export const taskColumn: BasicColumn[] = [ ...@@ -756,3 +756,217 @@ export const taskColumn: BasicColumn[] = [
slots: { customRender: 'config' }, slots: { customRender: 'config' },
}, },
]; ];
export const taskOverallConfig: FormSchema[] = [
{
label: '名称',
field: 'name',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
{
label: '描述',
field: 'txt',
component: 'InputTextArea',
componentProps: {
rows: 4,
},
colProps: { lg: 24, md: 24 },
},
{
label: '业务标签',
field: 'tag',
component: 'Select',
componentProps: {
mode: 'multiple',
options: [
{
label: '临时',
value: '临时',
},
],
},
colProps: { lg: 24, md: 24 },
},
{
label: '调度周期',
field: 'cycle',
slot: 'cycle',
component: 'Select',
componentProps: {
options: [
{
label: 'Cron表达式',
value: 'Cron表达式',
},
],
},
colProps: { lg: 24, md: 24 },
},
{
label: 'Cron表达式',
field: 'cron',
slot: 'cron',
colProps: { lg: 24, md: 24 },
},
{
label: '自定义日历',
field: 'calendar',
defaultValue: '不启用',
component: 'RadioGroup',
componentProps: {
options: [
{
label: '启用',
value: '启用',
},
{
label: '不启用',
value: '不启用',
},
],
},
colProps: { lg: 24, md: 24 },
},
{
label: '超时设置',
field: 'overTime',
slot: 'overTime',
colProps: { lg: 24, md: 24 },
},
{
label: '依赖上次',
field: 'depend',
defaultValue: '不依赖',
component: 'RadioGroup',
componentProps: {
options: [
{
label: '不依赖',
value: '不依赖',
},
{
label: '上次成功',
value: '上次成功',
},
{
label: '上次完成',
value: '上次完成',
},
],
},
colProps: { lg: 24, md: 24 },
},
{
label: '执行器组',
field: 'group',
slot: 'group',
colProps: { lg: 24, md: 24 },
},
{
label: '执行优先级',
field: 'priority',
component: 'RadioGroup',
defaultValue: '低',
componentProps: {
options: [
{
label: '高',
value: '高',
},
{
label: '中',
value: '中',
},
{
label: '低',
value: '低',
},
],
},
colProps: { lg: 24, md: 24 },
},
];
export const editFormSchema: FormSchema[] = [
{
label: '刷新对象',
field: 'flushType',
required: true,
component: 'CheckboxGroup',
componentProps: {
options: [
{
label: '调度配置',
value: '调度配置',
},
{
label: '日历',
value: '日历',
},
],
},
},
];
export const editTableColumn: BasicColumn[] = [
{
title: '资源对象',
dataIndex: 'name',
width: 200,
slots: { customRender: 'name' },
},
{
title: '调度配置',
dataIndex: 'cron',
width: 150,
slots: { customRender: 'cron' },
},
{
title: '发布状态',
dataIndex: 'flag',
width: 120,
},
{
title: '日历配置',
dataIndex: 'config',
width: 150,
},
];
export const editResultColumn: BasicColumn[] = [
{
title: '资源对象',
dataIndex: 'name',
width: 180,
slots: { customRender: 'name' },
},
{
title: '调度配置',
dataIndex: 'cron',
width: 100,
slots: { customRender: 'cron' },
},
{
title: '发布状态',
dataIndex: 'flag',
width: 100,
},
{
title: '日历配置',
dataIndex: 'config',
width: 100,
},
{
title: '发布状态',
dataIndex: 'uploadStatus',
width: 100,
},
{
title: '更新状态',
dataIndex: 'updateStatus',
width: 100,
slots: { customRender: 'updateStatus' },
},
{
title: '详情',
dataIndex: 'detail',
width: 80,
},
];
src/views/taskScheduling/taskFlowDesign/designData.ts
View file @ ce3b3264
...@@ -213,3 +213,51 @@ export const taskData = [ ...@@ -213,3 +213,51 @@ export const taskData = [
config: false, config: false,
}, },
]; ];
export const editTableData = [
{
businessId: 1,
name: 'A_下游',
path: '/共享工作区/gxx/文档/A_下游',
cron: 'Cron表达式',
formula: '0 * * * * ? *',
flag: '未发布',
config: '-',
checked: false,
},
{
businessId: 2,
name: 'B_下游',
path: '/共享工作区/gxx/文档/B_下游',
cron: 'Cron表达式',
formula: '0 * * * * ? *',
flag: '未发布',
config: '-',
checked: false,
},
];
export const editResultData = [
{
businessId: 1,
name: 'A_下游',
path: '/共享工作区/gxx/文档/A_下游',
cron: 'Cron表达式',
formula: '0 * * * * ? *',
flag: '未发布',
config: '-',
uploadStatus: '未发布',
updateStatus: '成功',
detail: '下游33',
},
{
businessId: 2,
name: 'B_下游',
path: '/共享工作区/gxx/文档/B_下游',
cron: 'Cron表达式',
formula: '0 * * * * ? *',
flag: '未发布',
config: '-',
uploadStatus: '未发布',
updateStatus: '失败',
detail: '下游B',
},
];
src/views/taskScheduling/taskFlowDesign/editDownStreamModel.vue 0 → 100644
View file @ ce3b3264
<template>
<BasicModal
width="60%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
>
<Alert
type="info"
:message="
'①当前资源的调度配置：02***？*日历：不启用\n' +
'自动刷新：将保留发布状态，即自动默认发布新的版本，故著用户未发布的新的配置也会在本次自动刷新中直接生效。\n' +
'特殊场景说明：\n' +
'1若当前是事件触发的模式，下游将会全部剧新为无周期模式；\n' +
'2若剧新为无周期，日历将默认不启动；\n' +
'3自动发布的新版本将会忽略审批流程。\n' +
'配置任务流依赖关系的触发方式有内部的计算方式，请参考手册明确上下游的执行依赖关系是否符合业务预期，按照当前资源的调度配置。'
"
:style="{ whiteSpace: 'pre-line' }"
/>
<BasicForm @register="registerForm" />
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<div style="flex: 1; display: flex; justify-content: space-between">
<Input style="width: 30%" v-model:value="resourceName" placeholder="资源名称">
<template #suffix>
<SearchOutlined />
</template>
</Input>
<div>
<Checkbox @click="handleAllSelect" v-model:checked="checkAll" />
<span style="padding: 0 8px">全选</span>
</div>
</div>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<Checkbox v-model:checked="record.checked" />
</template>
</template>
<template #name="{ text, record }">
<div>{{ text }}</div>
<div style="color: #adb2bd">{{ record.path }}</div>
</template>
<template #cron="{ text, record }">
<div>{{ text }}</div>
<div>{{ record.formula }}</div>
</template>
</BasicTable>
<template #footer>
<a-button @click="handleCancel">取消</a-button>
<a-button type="primary" @click="handleSuccess">选中并自动更新</a-button>
</template>
<EditResultModel @register="editResultModel" @handle-cancel="handleCancel" />
</BasicModal>
</template>
<script lang="ts" setup>
import { useTable, TableAction } from '@/components/Table';
import { ref, computed, unref, reactive } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { Select, Alert, Input, Checkbox } 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 {
editFormSchema,
editTableColumn,
taskOverallConfig,
upstreamTaskColumn,
} from '@/views/taskScheduling/taskFlowDesign/design.data';
import { useMessage } from '@/hooks/web/useMessage';
import { editTableData } from '@/views/taskScheduling/taskFlowDesign/designData';
import EditResultModel from './editResultModel.vue';
const getTitle = '分析并批量调整直接下游配置';
const [editResultModel, { openModal: openEditResultModel }] = useModal();
//初始化弹框
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: editFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
const resourceName = ref();
const checkAll = computed(
() => getDataSource().findIndex((item) => item.checked === false) === -1,
);
function handleAllSelect() {
let list = getDataSource();
console.log('list', list);
if (checkAll.value) {
list.forEach((item) => {
item.checked = false;
});
setTableData([...list]);
} else {
list.forEach((item) => {
item.checked = true;
});
setTableData([...list]);
}
}
const searchInfo = reactive<Recordable>({});
const [registerTable, { setTableData, getDataSource, getRowSelection, setSelectedRowKeys }] =
useTable({
title: '',
// 定高
scroll: { y: 150 },
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: editTableData.length,
code: '',
message: '',
data: editTableData,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: editTableColumn,
striped: false,
// 搜索
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
actionColumn: {
width: 150,
title: '操作',
dataIndex: 'action',
},
});
function handleCancel() {
closeModal();
}
const { createMessage } = useMessage();
function handleSuccess() {
// 校验
validate().then(() => {
// 打开
let list = getDataSource();
let index = list.findIndex((item) => item.checked === true);
if (index === -1) {
createMessage.warning('请至少勾选一条数据！');
} else {
openEditResultModel(true, {
isUpdate: false,
});
}
});
}
</script>
src/views/taskScheduling/taskFlowDesign/editResultModel.vue 0 → 100644
View file @ ce3b3264
<template>
<BasicModal width="60%" v-bind="$attrs" @register="registerModal" :title="getTitle">
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<div style="flex: 1; display: flex; justify-content: space-between">
<Input style="width: 30%" v-model:value="resourceName" placeholder="资源名称">
<template #suffix>
<SearchOutlined />
</template>
</Input>
</div>
</template>
<template #name="{ text, record }">
<div>{{ text }}</div>
<div style="color: #adb2bd">{{ record.path }}</div>
</template>
<template #cron="{ text, record }">
<div>{{ text }}</div>
<div>{{ record.formula }}</div>
</template>
<template #updateStatus="{ text, record }">
<div v-if="text === '成功'"> <CheckCircleOutlined style="color: #36bd8f" />{{ text }} </div>
<div v-if="text === '失败'"> <CloseCircleOutlined style="color: #d66767" />{{ text }} </div>
</template>
</BasicTable>
<template #footer>
<a-button @click="handleDownload">下载</a-button>
<a-button @click="handleCancel" type="primary">关闭</a-button>
</template>
</BasicModal>
</template>
<script lang="ts" setup>
import { useTable, TableAction } from '@/components/Table';
import {ref, computed, unref, reactive, defineEmits} from 'vue';
import { SearchOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
import Icon from '@/components/Icon/Icon.vue';
import { Select, Alert, Input, Checkbox } from 'ant-design-vue';
import { BasicModal, 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 {
editFormSchema,
editResultColumn,
editTableColumn,
taskOverallConfig,
upstreamTaskColumn,
} from '@/views/taskScheduling/taskFlowDesign/design.data';
import { useMessage } from '@/hooks/web/useMessage';
import {editResultData, editTableData} from '@/views/taskScheduling/taskFlowDesign/designData';
const emit = defineEmits(['handleCancel']);
const getTitle = '调整依赖链路调度结果';
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({
confirmLoading: false,
okText: '选中并自动更新',
});
});
const resourceName = ref();
const searchInfo = reactive<Recordable>({});
const [registerTable] = useTable({
title: '',
// 定高
scroll: { y: 150 },
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: editResultData.length,
code: '',
message: '',
data: editResultData,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: editResultColumn,
striped: false,
// 搜索
useSearchForm: false,
showTableSetting: false,
showIndexColumn: false,
bordered: true,
});
function handleCancel() {
closeModal();
emit('handleCancel');
}
const { createMessage } = useMessage();
function handleDownload() {
createMessage.success('下载成功');
}
</script>
src/views/taskScheduling/taskFlowDesign/index.vue
View file @ ce3b3264
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</RadioGroup> </RadioGroup>
<div>展示切换</div> <div>展示切换</div>
</div> </div>
<a-button type="primary">任务流配置</a-button> <a-button type="primary" @click="handleConfig">任务流配置</a-button>
<a-button type="primary">参数设置</a-button> <a-button type="primary">参数设置</a-button>
<a-button type="primary">任务列表</a-button> <a-button type="primary">任务列表</a-button>
<a-button type="primary" @click="handleDepend">任务流依赖</a-button> <a-button type="primary" @click="handleDepend">任务流依赖</a-button>
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
<TaskModel @register="taskModel" /> <TaskModel @register="taskModel" />
<UpstreamModel @register="upstreamTaskModel" /> <UpstreamModel @register="upstreamTaskModel" />
<DependModel @register="dependModel" /> <DependModel @register="dependModel" />
<TaskConfigModel @register="taskConfigModel" />
</PageWrapper> </PageWrapper>
</template> </template>
...@@ -160,10 +161,12 @@ ...@@ -160,10 +161,12 @@
import { router } from '@/router'; import { router } from '@/router';
import UpstreamModel from './upstreamTaskModel.vue'; import UpstreamModel from './upstreamTaskModel.vue';
import DependModel from './dependModel.vue'; import DependModel from './dependModel.vue';
import TaskConfigModel from './taskConfigModel.vue';
const [taskModel, { openModal: openTaskModel }] = useModal(); const [taskModel, { openModal: openTaskModel }] = useModal();
const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal(); const [upstreamTaskModel, { openModal: openUpstreamModel }] = useModal();
const [dependModel, { openModal: openDependModel }] = useModal(); const [dependModel, { openModal: openDependModel }] = useModal();
const [taskConfigModel, { openModal: openTaskConfigModel }] = useModal();
const rotate = ref(90); const rotate = ref(90);
const showType = ref('table'); const showType = ref('table');
const searchInfo = reactive<Recordable>({}); const searchInfo = reactive<Recordable>({});
...@@ -191,6 +194,11 @@ ...@@ -191,6 +194,11 @@
isUpdate: false, isUpdate: false,
}); });
} }
function handleConfig() {
openTaskConfigModel(true, {
isUpdate: false,
});
}
const [registerTable, { getRowSelection }] = useTable({ const [registerTable, { getRowSelection }] = useTable({
title: '', title: '',
// 数据 // 数据
......
src/views/taskScheduling/taskFlowDesign/taskConfigModel.vue 0 → 100644
View file @ ce3b3264
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm">
<template #cycle="{ field, model }">
<Select v-model:value="model[field]" :options="cycleOptions" />
<a-button
type="link"
style="padding: 0"
v-if="model.group === 'default group'"
@click="handleCycle"
>批量调整直接下游配置</a-button
>
</template>
<template #cron="{ field, model }">
<Input v-model:value="model[field]" />
<a-button style="padding: 0" type="link">Cron表达式</a-button>
</template>
<template #overTime="{ field, model }">
<CheckboxGroup :options="overTimeOptions" v-model:value="model[field]" />
<div v-if="model[field]" style="display: flex; width: 30%">
<InputNumber v-model:value="model.timeNum" :min="0" :step="1" />
<Select v-model:value="model.timeType" :options="timeTypeOptions" />
</div>
</template>
<template #group="{ field, model }">
<Select v-model:value="model[field]" :options="groupOptions" />
</template>
</BasicForm>
<EditDownStreamModel @register="editModal" />
</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';
const getTitle = '任务流全局配置';
const [editModal, { openModal: openEditModel }] = useModal();
function handleCycle() {
openEditModel(true, {
isUpdate: false,
});
}
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
});
const cycleOptions = [
{
label: 'Cron表达式',
value: 'Cron表达式',
},
];
const overTimeOptions = [
{
label: '超时失败',
value: '超时失败',
},
];
const groupOptions = [
{
label: '全部执行器',
value: '全部执行器',
},
{
label: 'Java执行器',
value: 'Java执行器',
},
{
label: 'Scala执行器',
value: 'Scala执行器',
},
{
label: 'default group',
value: 'default group',
},
];
const timeTypeOptions = [
{
label: '分',
value: '分',
},
{
label: '小时',
value: '小时',
},
{
label: '天',
value: '天',
},
{
label: '周',
value: '周',
},
{
label: '月',
value: '月',
},
];
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: taskOverallConfig,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
/**确定按钮*/
async function handleSubmit() {
closeModal();
}
</script>
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