Commit 6e6958398169ac1d6f861f3bc39f521547218932

Authored by loveumiko
1 parent 65bd07d5

fix: 规则链相关修改

  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>
@@ -125,7 +125,7 @@ export function useAwaitPopupWindowBindData( @@ -125,7 +125,7 @@ export function useAwaitPopupWindowBindData(
125 CheckExistenceFieldsNameEnum.METADATA_NAMES 125 CheckExistenceFieldsNameEnum.METADATA_NAMES
126 )}最少选填一个` 126 )}最少选填一个`
127 ); 127 );
128 - return false; 128 + return true;
129 } 129 }
130 unref(resolveFn)?.({ 130 unref(resolveFn)?.({
131 flag: true, 131 flag: true,
1 <script setup lang="ts"> 1 <script setup lang="ts">
2 - import { Spin } from 'ant-design-vue'; 2 + import { Spin, Tooltip } from 'ant-design-vue';
3 import { Background, BackgroundVariant } from '@vue-flow/background'; 3 import { Background, BackgroundVariant } from '@vue-flow/background';
4 import { Controls } from '@vue-flow/controls'; 4 import { Controls } from '@vue-flow/controls';
5 import { Panel, PanelPosition, VueFlow } from '@vue-flow/core'; 5 import { Panel, PanelPosition, VueFlow } from '@vue-flow/core';
@@ -24,6 +24,11 @@ @@ -24,6 +24,11 @@
24 import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer'; 24 import { UpdateNodeDrawer } from './src/components/UpdateNodeDrawer';
25 import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer'; 25 import { UpdateEdgeDrawer } from './src/components/UpdateEdgeDrawer';
26 import { CreateRuleChainModal } from './src/components/CreateRuleChainModal'; 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 const getId = Number(Math.random().toString().substring(2)).toString(16); 33 const getId = Number(Math.random().toString().substring(2)).toString(16);
29 34
@@ -96,6 +101,20 @@ @@ -96,6 +101,20 @@
96 useSaveAndRedoActionType.triggerChange?.(); 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 onMounted(() => { 118 onMounted(() => {
100 getCurrentPageMetaData(flowActionType); 119 getCurrentPageMetaData(flowActionType);
101 getCurrentRuleChainDetail(); 120 getCurrentRuleChainDetail();
@@ -131,9 +150,7 @@ @@ -131,9 +150,7 @@
131 <template #edge-custom="props"> 150 <template #edge-custom="props">
132 <BasicEdge v-bind="props" /> 151 <BasicEdge v-bind="props" />
133 </template> 152 </template>
134 -  
135 <BasicConnectionArrow /> 153 <BasicConnectionArrow />
136 -  
137 <Background :variant="BackgroundVariant.Lines" :gap="25" pattern-color="#cfcfcf" /> 154 <Background :variant="BackgroundVariant.Lines" :gap="25" pattern-color="#cfcfcf" />
138 155
139 <Controls :position="PanelPosition.BottomLeft" /> 156 <Controls :position="PanelPosition.BottomLeft" />
@@ -171,14 +188,56 @@ @@ -171,14 +188,56 @@
171 </section> 188 </section>
172 </Panel> 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 <button 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 @click="handleFullScreen" 201 @click="handleFullScreen"
178 > 202 >
179 <Icon class="!text-2xl dark:text-light-50" :icon="getFullScreenIcon" /> 203 <Icon class="!text-2xl dark:text-light-50" :icon="getFullScreenIcon" />
180 </button> 204 </button>
181 </Panel> 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 </VueFlow> 241 </VueFlow>
183 </Spin> 242 </Spin>
184 243
@@ -203,5 +262,9 @@ @@ -203,5 +262,9 @@
203 .ant-spin-container { 262 .ant-spin-container {
204 @apply w-full h-full; 263 @apply w-full h-full;
205 } 264 }
  265 +
  266 + :deep(.top .center) {
  267 + margin: 0 !important;
  268 + }
206 } 269 }
207 </style> 270 </style>
@@ -56,7 +56,8 @@ @@ -56,7 +56,8 @@
56 const handleModalOk = async () => { 56 const handleModalOk = async () => {
57 await validate(); 57 await validate();
58 const data = getFieldsValue(); 58 const data = getFieldsValue();
59 - await handleSubmit(data); 59 + const flag = await handleSubmit(data);
  60 + if (flag) return;
60 resetFieldsValue(); 61 resetFieldsValue();
61 }; 62 };
62 63