style(sj_map_reduce): 工作流开始节点上下文组件优化

src/components/common/code-mirror.vue

@@ -11,7 +11,7 @@ defineOptions({
 });
 
 interface Props {
-  modelValue: string;
+  modelValue?: string;
   lang?: NaiveUI.CodeMirrorLang;
   height?: string;
   fontSize?: string;
@@ -25,7 +25,8 @@ const props = withDefaults(defineProps<Props>(), {
   readonly: false,
   disabled: false,
   height: 'auto',
-  fontSize: '13px'
+  fontSize: '13px',
+  modelValue: ''
 });
 
 interface Emits {

src/components/common/dynamic-input.vue

@@ -51,6 +51,20 @@ const boolenOptions = [
     value: 1
   }
 ];
+
+const handleUpdateType = (index: number) => {
+  if (content.value[index].type === 'string') {
+    content.value[index].value = '';
+  }
+
+  if (content.value[index].type === 'boolean') {
+    content.value[index].value = 1;
+  }
+
+  if (content.value[index].type === 'number') {
+    content.value[index].value = 0;
+  }
+};
 </script>
 
 <template>
@@ -86,7 +100,7 @@ const boolenOptions = [
           @keydown.enter.prevent
         />
         <NSelect
-          v-if="content[index].type === 'boolen'"
+          v-if="content[index].type === 'boolean'"
           v-model:value="content[index].value as number"
           :options="boolenOptions"
           placeholder="value"
@@ -106,6 +120,7 @@ const boolenOptions = [
           :options="typeOptions"
           placeholder="字段类型"
           @keydown.enter.prevent
+          @update:value="handleUpdateType(index)"
         />
       </NFormItem>
       <div class="ml-3px h-34px lh-34px">)</div>

src/components/common/log-drawer.vue

@@ -11,7 +11,6 @@ defineOptions({
 
 interface Props {
   title?: string;
-  show?: boolean;
   drawer?: boolean;
   type?: 'job' | 'retry';
   taskData?: Api.Job.JobTask | Api.RetryLog.RetryLog | Api.RetryTask.RetryTask;
@@ -20,20 +19,14 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   title: undefined,
-  show: false,
   drawer: true,
   type: 'job',
   taskData: undefined,
   modelValue: () => []
 });
 
-interface Emits {
+const visible = defineModel<boolean>('show', {
-  (e: 'update:show', show: boolean): void;
+  default: false
-}
-
-const emit = defineEmits<Emits>();
-const visible = defineModel<boolean>('visible', {
-  default: true
 });
 
 const syncTime = ref(1);
@@ -103,9 +96,8 @@ onBeforeUnmount(() => {
 });
 
 watch(
-  () => props.show,
+  () => visible.value,
   async val => {
-    visible.value = val;
     if (val) {
       if (props.modelValue) {
         logList.value = props.modelValue;
@@ -125,10 +117,6 @@ watch(
   { immediate: true }
 );
 
-const onUpdateShow = (value: boolean) => {
-  emit('update:show', value);
-};
-
 function timestampToDate(timestamp: string): string {
   const date = new Date(Number.parseInt(timestamp?.toString(), 10));
   const year = date.getFullYear();
@@ -264,7 +252,7 @@ const SnailLogComponent = defineComponent({
 </script>
 
 <template>
-  <NDrawer v-if="drawer" v-model:show="visible" width="100%" display-directive="if" @update:show="onUpdateShow">
+  <NDrawer v-if="drawer" v-model:show="visible" width="100%" display-directive="if">
     <NDrawerContent closable>
       <template #header>
         <div class="flex-center">

src/components/workflow/modules/detail/start-detail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { $t } from '@/locales';
 import { blockStrategyRecord, triggerTypeRecord, workFlowNodeStatusRecord } from '@/constants/business';
 
@@ -36,14 +36,6 @@ watch(
 const onClose = () => {
   emit('update:open', false);
 };
-
-const wfContext = computed(() => {
-  try {
-    return JSON.parse(props.modelValue?.wfContext || '{}').init;
-  } catch {
-    return props.modelValue.wfContext;
-  }
-});
 </script>
 
 <template>
@@ -60,7 +52,7 @@ const wfContext = computed(() => {
 
         <NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
         <NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
-        <NDescriptionsItem label="工作流上下文">{{ wfContext }}</NDescriptionsItem>
+        <NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem>
         <NDescriptionsItem label="工作流状态">
           {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
         </NDescriptionsItem>

src/components/workflow/modules/drawer/branch-drawer.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import type { FormInst, FormRules } from 'naive-ui';
-import CodeMirror from 'vue-codemirror6';
-import { oneDark } from '@codemirror/theme-one-dark';
-import { javascript } from '@codemirror/lang-javascript';
 import EditableInput from '@/components/common/editable-input.vue';
 import { fetchCheckNodeExpression } from '@/service/api';
 import { expressionOptions } from '@/constants/business';
@@ -36,21 +33,11 @@ const form = ref<Workflow.ConditionNodeType>({
   decision: {
     logicalCondition: 1,
     expressionType: 1,
+    nodeExpression: '',
     checkContents: []
   }
 });
 
-const theme = ref({
-  '.cm-line': {
-    fontSize: '18px'
-  },
-  '.cm-scroller': {
-    height: '500px',
-    overflowY: 'auto',
-    overflowX: 'hidden'
-  }
-});
-
 watch(
   () => props.open,
   val => {
@@ -147,14 +134,7 @@ const rules: FormRules = {
           </NRadioGroup>
         </NFormItem>
         <NFormItem path="decision.nodeExpression" label="条件表达式">
-          <CodeMirror
+          <CodeMirror v-model="form.decision!.nodeExpression" placeholder="请输入条件表达式" />
-            v-model="form.decision!.nodeExpression"
-            class="sj-code-mirror"
-            :theme="theme"
-            basic
-            :lang="javascript()"
-            :extensions="[oneDark]"
-          />
         </NFormItem>
         <NFormItem path="decision.checkContents" label="模拟上下文">
           <DynamicInput v-model:value="form.decision!.checkContents!" path="decision.checkContents" />

src/components/workflow/modules/drawer/start-drawer.vue

@@ -9,7 +9,7 @@ import {
 } from '@/constants/business';
 import { $t } from '@/locales';
 import { fetchGetAllGroupNameList } from '@/service/api';
-import { isNotNull } from '@/utils/common';
+import { isNotNull, parseContent, stringToContent } from '@/utils/common';
 import { useWorkflowStore } from '@/store/modules/workflow';
 import EditableInput from '@/components/common/editable-input.vue';
 
@@ -24,7 +24,9 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   open: false,
-  modelValue: () => ({})
+  modelValue: () => ({
+    wfContexts: []
+  })
 });
 
 interface Emits {
@@ -38,7 +40,9 @@ const store = useWorkflowStore();
 
 let title: string = '';
 const drawer = ref<boolean>(false);
-const form = ref<Workflow.NodeDataType>({});
+const form = ref<Workflow.NodeDataType>({
+  wfContexts: []
+});
 const groupNameList = ref<string[]>([]);
 
 watch(
@@ -64,7 +68,8 @@ watch(
       title = '请选择组';
     }
     if (val.wfContext) {
-      form.value.wfContext = JSON.parse(val.wfContext).init;
+      form.value.wfContext = JSON.parse(val.wfContext);
+      form.value.wfContexts = stringToContent(val.wfContext);
     }
   },
   { immediate: true }
@@ -81,7 +86,7 @@ const save = () => {
   formRef.value
     ?.validate(errors => {
       if (!errors) {
-        form.value.wfContext = JSON.stringify({ init: form.value.wfContext });
+        form.value.wfContext = JSON.stringify(parseContent(form.value.wfContexts) || {});
         close();
         emit('save', form.value);
       }
@@ -206,7 +211,7 @@ const rules: Record<RuleKey, FormItemRule> = {
           </NGi>
         </NGrid>
         <NFormItem path="wfContext" label="工作流上下文">
-          <CodeMirror v-model="form.wfContext" lang="json" placeholder="请输入工作流上下文" />
+          <DynamicInput v-model:value="form.wfContexts!" path="wfContexts" />
         </NFormItem>
         <NFormItem path="workflowStatus" label="节点状态">
           <NRadioGroup v-model:value="form.workflowStatus">

src/typings/workflow.d.ts

@@ -17,6 +17,7 @@ declare namespace Workflow {
     executorTimeout?: number;
     /** 方法参数 */
     wfContext?: string;
+    wfContexts?: { key: string; value: string | number | boolean; type: string }[];
     /** 工作流状态 */
     workflowStatus?: Api.Common.WorkFlowNodeStatus;
     /** 描述 */

src/utils/common.ts

@@ -179,3 +179,44 @@ export function parseContent(value?: { key: string; value: string | number | boo
     return obj;
   }, {});
 }
+
+export function stringToContent(
+  jsonString?: string
+): { key: string; value: string | number | boolean; type: string }[] {
+  if (!jsonString) return [];
+  // 尝试解析JSON字符串
+  let parsedObj = jsonString;
+
+  if (typeof jsonString === 'string') {
+    try {
+      parsedObj = JSON.parse(jsonString);
+    } catch (e) {
+      return [];
+    }
+  }
+
+  // 创建结果数组
+  const result = [];
+
+  // 遍历对象的键值对
+  for (const [key, value] of Object.entries(parsedObj)) {
+    // 根据值的类型确定type字段
+    let type = 'string';
+    if (typeof value === 'number') {
+      type = 'number';
+    } else if (typeof value === 'boolean') {
+      type = 'boolean';
+    } else {
+      type = 'string';
+    }
+
+    // 将转换后的对象添加到结果数组中
+    result.push({
+      key,
+      value,
+      type
+    });
+  }
+
+  return result as any;
+}