Showing
4 changed files
with
72 additions
and
7 deletions
src/assets/svg/down-svg.svg
0 → 100644
1 | +<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1701135308389" class="icon" viewBox="0 0 1079 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1473" xmlns:xlink="http://www.w3.org/1999/xlink" width="210.7421875" height="200"><path d="M602.973867 717.627733l342.024533-342.075733a48.759467 48.759467 0 0 0 14.344533-34.577067 48.896 48.896 0 0 0-83.456-34.5856l-307.5072 307.541334-307.464533-307.549867a48.913067 48.913067 0 0 0-69.128533 0 48.955733 48.955733 0 0 0 0 69.154133L533.845333 717.610667a48.930133 48.930133 0 0 0 69.128534 0.017066z" fill="#AAAAAA" p-id="1474"></path></svg> | |
\ No newline at end of file | ... | ... |
1 | 1 | <script setup lang="ts"> |
2 | - import { Spin } from 'ant-design-vue'; | |
2 | + import { Spin, Tooltip } from 'ant-design-vue'; | |
3 | 3 | import { Background, BackgroundVariant } from '@vue-flow/background'; |
4 | 4 | import { Controls } from '@vue-flow/controls'; |
5 | 5 | import { Panel, PanelPosition, VueFlow } from '@vue-flow/core'; |
... | ... | @@ -24,6 +24,11 @@ |
24 | 24 | import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer'; |
25 | 25 | import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer'; |
26 | 26 | import { CreateRuleChainModal } from './src/components/CreateRuleChainModal'; |
27 | + import { useRouter } from 'vue-router'; | |
28 | + | |
29 | + import { getRuleChinsList } from '/@/api/ruleengine/ruleengineApi'; | |
30 | + import { ApiSelect } from '/@/components/Form'; | |
31 | + import DownImage from '/@/assets/svg/down-svg.svg'; | |
27 | 32 | |
28 | 33 | const getId = Number(Math.random().toString().substring(2)).toString(16); |
29 | 34 | |
... | ... | @@ -96,6 +101,20 @@ |
96 | 101 | useSaveAndRedoActionType.triggerChange?.(); |
97 | 102 | }; |
98 | 103 | |
104 | + const ROUTER = useRouter(); | |
105 | + const isShowSelect = ref<boolean>(false); | |
106 | + const handleBack = () => { | |
107 | + ROUTER.go(-1); | |
108 | + }; | |
109 | + | |
110 | + const handleDown = () => { | |
111 | + isShowSelect.value = !unref(isShowSelect); | |
112 | + }; | |
113 | + | |
114 | + const handleSelectChange = (e) => { | |
115 | + ROUTER.replace(`${e}`); | |
116 | + }; | |
117 | + | |
99 | 118 | onMounted(() => { |
100 | 119 | getCurrentPageMetaData(flowActionType); |
101 | 120 | getCurrentRuleChainDetail(); |
... | ... | @@ -131,9 +150,7 @@ |
131 | 150 | <template #edge-custom="props"> |
132 | 151 | <BasicEdge v-bind="props" /> |
133 | 152 | </template> |
134 | - | |
135 | 153 | <BasicConnectionArrow /> |
136 | - | |
137 | 154 | <Background :variant="BackgroundVariant.Lines" :gap="25" pattern-color="#cfcfcf" /> |
138 | 155 | |
139 | 156 | <Controls :position="PanelPosition.BottomLeft" /> |
... | ... | @@ -171,14 +188,56 @@ |
171 | 188 | </section> |
172 | 189 | </Panel> |
173 | 190 | |
174 | - <Panel position="top-right"> | |
191 | + <Panel position="top-right" class="flex"> | |
192 | + <Tooltip title="返回"> | |
193 | + <button | |
194 | + class="w-10 h-10 bg-gray-300 flex justify-center items-center rounded-full dark:bg-dark-50" | |
195 | + @click="handleBack" | |
196 | + ><Icon icon="ant-design:rollback-outlined" class="cursor-pointer svg:text-xl" /> | |
197 | + </button> | |
198 | + </Tooltip> | |
175 | 199 | <button |
176 | - class="w-10 h-10 bg-gray-300 flex justify-center items-center rounded-full dark:bg-dark-50" | |
200 | + class="w-10 h-10 bg-gray-300 mx-1 flex justify-center items-center rounded-full dark:bg-dark-50" | |
177 | 201 | @click="handleFullScreen" |
178 | 202 | > |
179 | 203 | <Icon class="!text-2xl dark:text-light-50" :icon="getFullScreenIcon" /> |
180 | 204 | </button> |
181 | 205 | </Panel> |
206 | + <Panel position="top-left"> | |
207 | + <h1 class="ml-10">{{ ruleChainDetail?.name }}</h1> | |
208 | + </Panel> | |
209 | + <Panel position="top-center" class="flex flex-col items-center"> | |
210 | + <button | |
211 | + class="w-10 h-10 bg-gray-300 mx-1 flex justify-center items-center rounded-full dark:bg-dark-50" | |
212 | + @click="handleDown" | |
213 | + > | |
214 | + <img :src="DownImage" alt="avatar" /> | |
215 | + </button> | |
216 | + <div v-if="isShowSelect" class="mt-1"> | |
217 | + <ApiSelect | |
218 | + class="!mx-2 flex-auto w-40" | |
219 | + :api=" | |
220 | + async (params) => { | |
221 | + const options = await getRuleChinsList(params); | |
222 | + return options?.data | |
223 | + .map((item) => ({ label: item.name, value: item.id.id })) | |
224 | + .filter((item) => item.label !== ruleChainDetail?.name); | |
225 | + } | |
226 | + " | |
227 | + :showSearch="true" | |
228 | + :filterOption="(inputValue: string, option: Record<'label' | 'value', string>) => | |
229 | + option.label.includes(inputValue)" | |
230 | + placeholder="请选择规则链" | |
231 | + :params="{ | |
232 | + page: 0, | |
233 | + pageSize: 100, | |
234 | + sortProperty: 'createdTime', | |
235 | + sortOrder: 'DESC', | |
236 | + }" | |
237 | + @change="handleSelectChange" | |
238 | + /> | |
239 | + </div> | |
240 | + </Panel> | |
182 | 241 | </VueFlow> |
183 | 242 | </Spin> |
184 | 243 | |
... | ... | @@ -203,5 +262,9 @@ |
203 | 262 | .ant-spin-container { |
204 | 263 | @apply w-full h-full; |
205 | 264 | } |
265 | + | |
266 | + :deep(.top .center) { | |
267 | + margin: 0 !important; | |
268 | + } | |
206 | 269 | } |
207 | 270 | </style> | ... | ... |