1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<BasicModal
width="70%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<Alert type="warning" show-icon message="任务流存在依赖或引用，请确认是否继续该操作？" />
<Row :gutter="16">
<Col :span="8">
<List>
<template v-for="item in delList1" :key="item.id">
<List.Item
style="cursor: pointer"
@click="handleChange(item)"
:style="{ backgroundColor: selectId === item.id ? '#DCEFFF' : null }"
>
<List.Item.Meta>
<template #avatar>
<BranchesOutlined />
</template>
<template #title>
<span>{{ item.title }}</span>
</template>
</List.Item.Meta>
</List.Item>
</template>
</List>
</Col>
<Col :span="8">
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #headerCell="{ column }">
<template v-if="column.key === 'task'">
<span>下游依赖（{{ getDataSource().length }}）</span>
</template>
</template>
</BasicTable>
</Col>
<Col :span="8">
<BasicTable @register="rightTable" :searchInfo="searchInfo">
<template #headerCell="{ column }">
<template v-if="column.key === 'task'">
<span>被引入（{{ getRightList().length }}）</span>
</template>
</template>
</BasicTable>
</Col>
</Row>
</BasicModal>
</template>
<script lang="ts" setup>
import { useTable, TableAction, BasicTableProps } from '@/components/Table';
import {ref, computed, unref, reactive, defineEmits} from 'vue';
import Icon from '@/components/Icon/Icon.vue';
import { Select, Alert, List, Row, Col } from 'ant-design-vue';
import { BranchesOutlined } from '@ant-design/icons-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 {
delTableColumn1,
infoFormSchema,
uploadModelSchema,
upstreamTaskColumn,
} from '@/views/taskScheduling/taskFlowDesign/design.data';
import { useMessage } from '@/hooks/web/useMessage';
import { delList1, delList2, delList3 } from './designData.ts';
const emit = defineEmits(['setUploadFlag']);
const getTitle = '任务流依赖/引用提醒';
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false });
});
const searchInfo = reactive<Recordable>({});
const selectId = ref(1);
function handleChange(data) {
selectId.value = data.id;
let list = [...delList2];
setTableData([...list.filter((item) => item.fid === data.id)]);
}
const { createMessage } = useMessage();
const [registerTable, { getDataSource, setTableData }] = useTable({
title: '',
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
code: '',
message: '',
data: delList2,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: delTableColumn1,
striped: false,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
} as BasicTableProps);
const [rightTable, { getDataSource: getRightList, setTableData: setRightList }] = useTable({
title: '',
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
code: '',
message: '',
data: delList3,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: delTableColumn1,
striped: false,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
} as BasicTableProps);
async function handleSubmit() {
closeModal();
emit('setUploadFlag', false);
createMessage.success('下线成功');
}
</script>