Skip to content

B
bigDataSystem
Commit 2887457d authored by liwei's avatar liwei
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents 1b726b84 356e9b02
Hide whitespace changes
Inline Side-by-side
Showing with 1251 additions and 1 deletion
src/views/dataIntegration/taskOM/DeptTable.vue 0 → 100644
View file @ 2887457d
<template>
<div class="m-1 mr-0 overflow-hidden bg-white">
<!-- <a-button @click="checkAll()" class="mr-2"> 全选 </a-button>-->
<BasicTree
title=" "
ref="treeRef"
search
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:checkable="false"
:defaultExpandAll="true"
:rowSelection="true"
:treeData="treeData"
:actionList="actionList"
:fieldNames="{ key: 'businessId', title: 'label' }"
@select="handleSelect"
/>
</div>
</template>
<script lang="ts" setup>
import { h, nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionItem, TreeActionType, TreeItem } from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import { Nullable } from '@vben/types';
import { treeDataList } from './mock';
import { CaretRightOutlined, EditOutlined } from '@ant-design/icons-vue';
defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
async function fetch() {
treeData.value = treeDataList;
await nextTick(() => {
getTree().expandAll(true);
});
}
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
// 全选
const checkFlag = ref(true);
function checkAll() {
checkFlag.value = !checkFlag.value;
getTree().checkAll(checkFlag.value);
}
function handleSelect(keys) {
emit('select', keys[0]);
}
onMounted(() => {
fetch();
});
function handlePlus(node: any) {
console.log(node);
}
function handleEdit() {
console.log('edit');
}
const actionList: TreeActionItem[] = [
{
// show:() => boolean;
render: (node) => {
return h(CaretRightOutlined, {
class: 'ml-2',
onClick: () => {
handlePlus(node);
},
});
},
},
{
render: () => {
return h(EditOutlined,{
onClick: () => {
handleEdit();
},
});
},
},
];
</script>
src/views/dataIntegration/taskOM/index.vue 0 → 100644
View file @ 2887457d
<template>
<page-wrapper >
<div class="homePage_module">
<Row :gutter="16" class="homePage_left">
<Col :span="24">
<Card>
<div class="card_content">
<Col :span="4">
<div class="card_item">
<div class="card_itemInfo">
<div ref="chartRef" :style="{ width, height }"></div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(1)" :class="{ 'listItemClass': selectedItem === 1 }">
<div class="card_item">
<div class="card_itemInfo">
<div class="dataNum">10</div>
<div class="dataTitle">执行记录</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(2)" :class="{ 'listItemClass': selectedItem === 2 }">
<div class="card_item">
<Icon icon="ant-design:check-circle-filled" :size="30" :color="'rgb(84,198,159)'" />
<div class="card_itemInfo">
<div class="dataNum">1</div>
<div class="dataTitle">成功</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(3)" :class="{ 'listItemClass': selectedItem === 3 }">
<div class="card_item">
<Icon icon="line-md:loading-twotone-loop" :size="30" :color="'rgb(81, 160, 248)'" />
<div class="card_itemInfo">
<div class="dataNum">2</div>
<div class="dataTitle">进行中</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(4)" :class="{ 'listItemClass': selectedItem === 4 }">
<div class="card_item">
<Icon icon="line-md:close-circle-filled" :size="30" :color="'rgb(212, 115, 113)'" />
<div class="card_itemInfo">
<div class="dataNum">3</div>
<div class="dataTitle">失败</div>
</div>
</div>
</Col>
<Col :span="4" @click="clickButton(5)" :class="{ 'listItemClass': selectedItem === 5 }">
<div class="card_item">
<Icon icon="ri:hourglass-fill" :size="30" :color="'rgb(147, 140, 206)'" />
<div class="card_itemInfo">
<div class="dataNum">4</div>
<div class="dataTitle">等待</div>
</div>
</div>
</Col>
</div>
</Card>
</Col>
</Row>
</div>
<div style="display: flex">
<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<!-- <BasicTable class="w-1/4 xl:w-1/5 mt-1" @register="registerTable1" :searchInfo="searchInfo"></BasicTable>-->
<div class="w-3/4 xl:w-4/5 mt-1 ml-1">
<PageWrapper title="TDT1" contentBackground headerSticky>
<template #extra>
<div class="mr-5 mt-2">
<icon icon="si:play-line" @click="handleExecute"/>
<icon class="ml-1.5" icon="ant-design:edit-outlined" @click="handleEdit" />
</div>
</template>
<template #footer>
<Description class="ml-3" @register="register1"/>
<basic-table class="mt-2" @register="registerTable" >
<template #toolbar>
<a-button type="primary" @click="handleRun">重跑</a-button>
<a-button type="primary" @click="handleRecover" >错误恢复</a-button>
<a-button type="primary" @click="handleCancel" >取消执行</a-button>
</template>
<template #operationalStatus="{ text, record }">
<Icon v-if="text === '成功'" icon="ant-design:check-circle-filled" :size="15" :color="'rgb(84,198,159)'" />
<Icon v-else-if="text === '失败'" icon="line-md:close-circle-filled" :size="15" :color="'rgb(212, 115, 113)'" />
<Icon v-else icon="line-md:loading-twotone-loop" :size="15" :color="'rgb(81, 160, 248)'" />
{{ text }}
</template>
</basic-table>
</template>
</PageWrapper>
</div>
</div>
</page-wrapper>
</template>
<script setup lang="ts">
import PageWrapper from "@/components/Page/src/PageWrapper.vue";
import {Card, Col, Row} from "ant-design-vue";
import Icon from "@/components/Icon/Icon.vue";
import {Ref, ref, watch} from "vue";
import {useECharts} from "@/hooks/web/useECharts";
import {useMessage} from "@/hooks/web/useMessage";
import {useRoute} from "vue-router";
import {useGo} from "@/hooks/web/usePage";
import DeptTree from "./DeptTable.vue";
import {BasicTable, TableAction, useTable} from "@/components/Table";
import {tableList,mockData} from "./mock";
import { columns,searchFormSchema,schema } from "./taskOM.data"
import {Description, useDescription} from "@/components/Description";
defineOptions({ name: 'AccountManagement' });
const [register1] = useDescription({
bordered: false,
data: mockData,
schema: schema,
});
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const { createMessage, createConfirm } = useMessage();
const route = useRoute();
const go = useGo();
const searchInfo = ref('');
const selectedItem = ref()
watch(
() => props.loading,
() => {
if (props.loading) {
return;
}
setOptions({
tooltip: {
trigger: 'item',
},
series: [
{
color: ['rgb(84,198,159)', 'rgb(81, 160, 248)', 'rgb(212, 115, 113)', 'rgb(147, 140, 206)'],
// name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 0,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '12',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 1 , name:'成功'},
{ value: 2 , name:'进行中'},
{ value: 3 ,name:'失败'},
{ value: 4 ,name:'等待'},
],
animationType: 'scale',
animationEasing: 'exponentialInOut',
animationDelay: function () {
return Math.random() * 100;
},
},
],
});
},
{ immediate: true },
);
/**列表right*/
const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm,getRowSelection }] = useTable({
title: '执行记录',
api: async (params) => {
console.log('tableList',tableList)
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableList.length,
code:'',
message:'',
data: tableList,
};
return { ...response};
},
rowKey: 'businessId',
showIndexColumn: false,//显示序号
rowSelection: false,//多选
columns,
// formConfig: {
// labelWidth: 10,
// schemas: searchFormSchema,
// autoSubmitOnEnter: true,
// resetFunc: () => {
// searchInfo.deptId=''
// },
// },
useSearchForm: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
// actionColumn: {
// width: 170,
// title: '操作',
// dataIndex: 'action',
// // slots: { customRender: 'action' },
// },
});
/**执行 按钮*/
const handleExecute = () => {
console.log('触发了执行按钮')
};
/**编辑 按钮*/
const handleEdit = () => {
console.log('触发了编辑按钮')
};
/**重跑 按钮*/
const handleRun = () => {
console.log('触发了重跑按钮')
};
/**错误恢复 按钮*/
const handleRecover = () => {
console.log('触发了错误恢复按钮')
};
/**取消 按钮*/
const handleCancel = () => {
console.log('触发了取消执行按钮')
};
/**点击card 改变css样式*/
function clickButton(item){
selectedItem.value = item;
}
</script>
<style scoped lang="less">
.homePage_module {
::v-deep(.ant-card-body) {
display: flex;
justify-content: center;
height: 180px;
}
.homePage_left {
::v-deep(.ant-tabs-tab) {
font-size: 18px;
font-weight: 600;
}
.card_content {
width: 70%;
display: flex;
justify-content: center;
align-items: center;
.card_item {
padding-left: 20px;
display: flex;
align-items: center;
width: 120px;
height: 80px;
border-radius: 10px;
.card_itemInfo {
padding-left: 7px;
.dataNum {
font-size: 20px;
line-height: 26px;
font-weight: bold;
}
.dataTitle {
font-size: 12px;
line-height: 12px;
}
}
}
}
}
}
.listItemClass{
background-color: rgb(230, 243, 255);
border-bottom: 2px solid #6ebafc;
border-radius: 5px;
}
</style>
src/views/dataIntegration/taskOM/mock.ts 0 → 100644
View file @ 2887457d
export const tableList: any[] = [
{
dispatchTime: '2024-10-25 10:04:05',
executeTime: '2024-10-25 10:04:05',
rows: 12,
executeDuration: '5s',
operationalStatus: '成功',
version: 'V2',
executeMode: '手动执行',
},
{
dispatchTime: '2024-10-25 10:04:05',
executeTime: '2024-10-25 10:04:05',
rows: 12,
executeDuration: '5s',
operationalStatus: '失败',
version: 'V2',
executeMode: '手动执行',
},
{
dispatchTime: '2024-10-25 10:04:05',
executeTime: '2024-10-25 10:04:05',
rows: 12,
executeDuration: '5s',
operationalStatus: '进行中',
version: 'V2',
executeMode: '手动执行',
},
]
export const mockData: Recordable = {
schedulingCycle: '无周期',
publishingStatus: '已发布',
createdBy: '戴拿',
};
export const treeDataList = [
{
label: 'TDT1',
businessId: 1,
// children: [
// { label: 'admin_个人工作区', businessId: 2 },
// { label: '共享工作区', businessId: 3 },
// { label: '商城工作区', businessId: 4 },
// { label: '指标工作区', businessId: 5 },
// ],
},
{
label: 'TDT2',
businessId: 2,
},
{
label: 'TDT3',
businessId: 3,
},
]
export const treeDataListTwo = [
{
label: '默认工作组',
businessId: 1,
children: [
{ label: '默认工作组01', businessId: 2 },
{ label: '默认工作组02', businessId: 3 },
{ label: '默认工作组03', businessId: 4 },
{ label: '默认工作组04', businessId: 5 },
],
},
]
src/views/dataIntegration/taskOM/recordDetails.vue 0 → 100644
View file @ 2887457d
<script setup lang="ts">
</script>
<template>
</template>
<style scoped lang="less">
</style>
src/views/dataIntegration/taskOM/taskOM.data.ts 0 → 100644
View file @ 2887457d
import {BasicColumn, FormSchema} from "@/components/Table";
import {DescItem} from "@/components/Description";
export const columns: BasicColumn[] = [
{
title: '调度时间',
dataIndex: 'dispatchTime',
width: 160,
},
{
title: '执行时间',
dataIndex: 'executeTime',
width: 160,
},
{
title: '影响行数',
dataIndex: 'rows',
width: 90,
},
{
title: '执行时长',
dataIndex: 'executeDuration',
width: 90,
},
{
title: '运行状态',
dataIndex: 'operationalStatus',
width: 90,
slots: { customRender: 'operationalStatus' },
},
{
title: '执行版本',
dataIndex: 'version',
width: 90,
},
{
title: '执行模式',
dataIndex: 'executeMode',
width: 90,
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: ' ',
component: 'Input',
colProps: { span: 8 },
componentProps: {
placeholder: '输入关键字搜索',
},
},
{
field: 'flag',
label: ' ',
component: 'Select',
componentProps: {
placeholder: '按来源过滤',
options: [
{ label: '指标汇总表', value: '1' },
],
},
colProps: { span: 8 },
},
];
export const schema: DescItem[] = [
{
field: 'schedulingCycle',
label: '调度周期',
},
{
field: 'publishingStatus',
label: '发布状态',
},
{
field: 'createdBy',
label: '创建者',
},
];
src/views/taskScheduling/taskFlowDesign/design.data.ts
View file @ 2887457d
...@@ -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 @ 2887457d
...@@ -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 @ 2887457d
<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 @ 2887457d
<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 @ 2887457d
...@@ -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 @ 2887457d
<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