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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
<template>
<PageWrapper title=" " dense contentFullHeight fixedHeight contentClass="flex">
<!-- <GroupTree @select="handleSelect" class="w-1/4 xl:w-1/5" /> -->
<template #headerContent>
<div style="width: 100%; display: flex; align-items: center; justify-content: space-between">
<div style="display: flex; align-items: center">
<Icon
@click="goBack"
class="backBtn"
icon="eva:arrow-ios-back-fill"
:size="25"
color="grey"
/>
<span style="color: grey; margin-left: 10px"> {{ path }}</span>
</div>
<div style="display: flex; margin-left: 500px">
<!-- 提交版本-->
<Tooltip placement="top" title="提交版本">
<a-button type="primary" style="margin-right: 10px" @click="handleSubmit">
提交版本
<!-- <Icon icon="majesticons:cloud-upload-line" :size="20" />-->
</a-button>
</Tooltip>
<!-- 版本管理-->
<Tooltip placement="top" title="版本管理">
<a-button type="primary" style="margin-right: 10px" @click="handleVersion">
版本管理
<!-- <Icon icon="majesticons:file-search-line" :size="20" />-->
</a-button>
</Tooltip>
<!-- 参数配置-->
<Tooltip placement="top" title="参数配置">
<a-button type="primary" style="margin-right: 10px" @click="handleOptions">
参数配置
<!-- <Icon icon="majesticons:link-circle-line" :size="20" />-->
</a-button>
</Tooltip>
<!-- 保存-->
<Tooltip placement="top" title="保存">
<a-button type="primary" style="margin-right: 10px" @click="handleSave">
保存
<!-- <Icon icon="majesticons:save-line" :size="20" />-->
</a-button>
</Tooltip>
</div>
</div>
</template>
<div class="w-full xl:w-full" style="background-color: white">
<div style="width: 100%; margin-top: 20px">
<div class="codeEditorH" style="padding: 0 15px" v-if="layout === 'single'">
<CodeEditor v-model:value="jsonData" :mode="MODE.SHELL" />
</div>
</div>
</div>
<OptionsModal @register="registerModal" />
<PreviewModal @register="registerPreviewModal" />
<SubmitModal @register="registerSubmitModal" @success="handleSuccess" />
<VersionManagementModal @register="registerVersionManagementModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { Tooltip } from 'ant-design-vue';
import { onMounted, ref, nextTick, watch } from 'vue';
import { PageWrapper } from '@/components/Page';
import GroupTree from '../GroupTree.vue';
import { jsonData, DataTreeData } from '../sqlDevelopmentData';
import { formSchema } from '../data';
import { useGo } from '@/hooks/web/usePage';
import { CodeEditor, MODE } from '@/components/CodeEditor';
import { BasicForm, useForm } from '@/components/Form';
import OptionsModal from './optionsModal.vue';
import { useModal } from '@/components/Modal';
import ResultModal from './resultModal.vue';
import PreviewModal from './dataPreviewModal.vue';
import { useMessage } from '@/hooks/web/useMessage';
import Icon from '@/components/Icon/Icon.vue';
import RecordModal from './executeRecordModal.vue';
import SubmitModal from './handleSubmit/submitModal.vue';
import { schema } from '@/views/dataIntegration/taskOM/taskOM.data';
import VersionManagementModal from './versionManagementModal.vue';
import { useRoute } from 'vue-router';
import { router } from '@/router';
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
const go = useGo();
const route = useRoute();
const path = ref('');
const layout = ref('single');
const editorLeft = ref<HTMLElement | null>(null);
const editorRight = ref<HTMLElement | null>(null);
const toggleLayout = () => {
layout.value = layout.value === 'single' ? 'double' : 'single';
};
const [registerModal, { openModal }] = useModal();
const [registerSubmitModal, { openModal: openSubmitModal }] = useModal();
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
const [registerVersionManagementModal, { openModal: openVersionManagementModal }] = useModal();
/** 部门树的select*/
function handleSelect() {
openPreviewModal(true, {
title: '数据预览',
});
}
function handleOptions() {
openModal(true, {
title: '参数配置',
});
}
//提交版本按钮
function handleSubmit() {
openSubmitModal(true, {
title: '提交版本',
});
}
//编辑版本
function handleVersion() {
openVersionManagementModal(true, {
title: '版本管理',
id: route.query.id,
});
}
function handleChange() {
createMessage.success('格式化成功');
}
function handleSuccess() {
createMessage.success('提交成功');
}
//保存按钮
function handleSave() {
createMessage.success('保存成功');
}
// 根据id获取文件路径
function getPathById(id) {
console.log(id);
const node = DataTreeData.find((item) => '' + item.businessId === id);
console.log(node);
if (!node) return ''; // 如果找不到节点，则返回空字符串
// 如果是根节点，直接返回其名称
if (node.parentId === 0) {
return node.workSpaceName;
}
// 递归获取父节点路径，并拼接当前节点名称
const parentPath = getPathById('' + node.parentId);
console.log('parentPath', parentPath);
return `${parentPath} / ${node.workSpaceName}`;
}
// 页面左侧点击返回链接时的操作
function goBack() {
// // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
// go('/scriptDevelopment/shellDevelopment/index');
// router.go(-1);
router.push({
path: '/scriptDevelopment/shellDevelopment/index',
});
}
//同步滚动
const handleScroll = () => {
if (editorLeft.value && editorRight.value) {
editorLeft.value.scrollTop = editorRight.value.scrollTop;
editorLeft.value.scrollLeft = editorRight.value.scrollLeft;
}
};
watch([editorLeft, editorRight], ([newEditorLeft, newEditorRight]) => {
if (newEditorLeft && newEditorRight) {
newEditorLeft.addEventListener('scroll', handleScroll);
newEditorRight.addEventListener('scroll', handleScroll);
} else {
if (editorLeft.value) {
editorLeft.value.removeEventListener('scroll', handleScroll);
}
if (editorRight.value) {
editorRight.value.removeEventListener('scroll', handleScroll);
}
}
});
onMounted(async () => {
path.value = getPathById(route.query.id);
await nextTick(() => {
if (editorLeft.value && editorRight.value) {
editorLeft.value.addEventListener('scroll', handleScroll);
editorRight.value.addEventListener('scroll', handleScroll);
}
});
});
</script>
<style lang="less" scoped>
:deep(.CodeMirror) {
height: 700px !important;
}
:deep(.ant-page-header) {
padding: 5px !important;
}
</style>