feat(1.3.0-beta1): 工作流新增执行参数

src/components/common/code-mirror.vue

@@ -4,6 +4,7 @@ import CodeMirror from 'vue-codemirror6';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { json } from '@codemirror/lang-json';
 import { javascript } from '@codemirror/lang-javascript';
+import { useBoolean } from '@sa/hooks';
 import { useThemeStore } from '@/store/modules/theme';
 
 defineOptions({
@@ -39,6 +40,8 @@ const themeStore = useThemeStore();
 
 const nodeExpression = ref<string>(props.modelValue);
 
+const { bool: visible, setTrue: openModal } = useBoolean();
+
 const codeLang = computed(() => {
   switch (props.lang) {
     case 'json':
@@ -116,16 +119,42 @@ watch(
 </script>
 
 <template>
-  <CodeMirror
+  <div class="w-100% flex-x-center gap-8px">
-    v-model="nodeExpression"
+    <CodeMirror
-    class="w-100%"
+      v-model="nodeExpression"
-    :readonly="readonly"
+      class="w-100%"
-    :disabled="disabled"
+      :readonly="readonly"
-    :theme="theme"
+      :disabled="disabled"
-    :placeholder="placeholder"
+      :theme="theme"
-    basic
+      :placeholder="placeholder"
-    :line-number="false"
+      basic
-    :lang="codeLang"
+      :line-number="false"
-    :extensions="[oneDark]"
+      :lang="codeLang"
-  />
+      :extensions="[oneDark]"
+    />
+    <NButton @click="openModal">
+      <icon-flowbite:expand-outline class="text-18px" />
+    </NButton>
+    <NModal v-model:show="visible" class="max-w-90% w-600px" preset="card" title="编辑器" :bordered="false">
+      <CodeMirror
+        v-model="nodeExpression"
+        class="w-100%"
+        :readonly="readonly"
+        :disabled="disabled"
+        :theme="{
+          ...theme,
+          '.cm-scroller': {
+            height: '300px',
+            overflowY: 'auto',
+            overflowX: 'hidden'
+          }
+        }"
+        :placeholder="placeholder"
+        basic
+        :line-number="false"
+        :lang="codeLang"
+        :extensions="[oneDark]"
+      />
+    </NModal>
+  </div>
 </template>

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

@@ -52,7 +52,8 @@ const store = useWorkflowStore();
 let title: string = '';
 const drawer = ref<boolean>(false);
 const form = ref<Workflow.NodeDataType>({
-  wfContexts: []
+  wfContexts: [],
+  notifyIds: []
 });
 const groupNameList = ref<string[]>([]);
 
@@ -221,7 +222,7 @@ const rules: Record<RuleKey, FormItemRule> = {
             </NFormItem>
           </NGi>
         </NGrid>
-        <NFormItem path="wfContext" label="工作流上下文" :show-feedback="false">
+        <NFormItem path="wfContext" label="工作流上下文" :show-feedback="form.wfContexts?.length ? false : true">
           <DynamicInput v-model:value="form.wfContexts!" path="wfContexts" />
         </NFormItem>
         <NFormItem path="workflowStatus" label="节点状态">

src/service/api/workflow.ts

@@ -18,6 +18,15 @@ export function fetchTriggerWorkflow(id: string) {
   });
 }
 
+/** trigger workflow */
+export function fetchTriggerWorkflowParams(data: Api.Workflow.WorkflowTriggerParams) {
+  return request({
+    url: '/workflow/trigger',
+    method: 'post',
+    data
+  });
+}
+
 /** get namespace list */
 export function fetchGetWorkflowNameList(params?: Api.Workflow.WorkflowNameSearchParams) {
   return request<Api.Workflow.Workflow[]>({

src/typings/api.d.ts

@@ -920,6 +920,11 @@ declare namespace Api {
       executorTimeout: number;
     }>;
 
+    type WorkflowTriggerParams = {
+      workflowId?: string;
+      tmpWfContext?: string;
+    };
+
     /** workflow search params */
     type WorkflowSearchParams = CommonType.RecordNullable<
       Pick<Api.Workflow.Workflow, 'workflowName' | 'groupName' | 'workflowStatus'> & CommonSearchParams

src/views/workflow/task/index.vue

@@ -1,12 +1,9 @@
 <script setup lang="tsx">
 import { NButton, NDropdown, NPopconfirm, NTag } from 'naive-ui';
 import { useRouter } from 'vue-router';
-import {
+import { ref } from 'vue';
-  fetchBatchDeleteWorkflow,
+import { useBoolean } from '@sa/hooks';
-  fetchGetWorkflowPageList,
+import { fetchBatchDeleteWorkflow, fetchGetWorkflowPageList, fetchUpdateWorkflowStatus } from '@/service/api';
-  fetchTriggerWorkflow,
-  fetchUpdateWorkflowStatus
-} from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
@@ -17,12 +14,17 @@ import { useAuth } from '@/hooks/business/auth';
 import { downloadFetch } from '@/utils/download';
 import { useRouterPush } from '@/hooks/common/router';
 import WorkflowSearch from './modules/workflow-search.vue';
+import WorkflowTriggerModal from './modules/workflow-trigger-modal.vue';
+
 const { hasAuth } = useAuth();
 
 const router = useRouter();
 const appStore = useAppStore();
 const { routerPushByKey } = useRouterPush();
 
+const triggerData = ref<Api.Workflow.Workflow | null>();
+const { bool: triggerVisible, setTrue: openTriggerModal } = useBoolean(false);
+
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetWorkflowPageList,
   apiParams: {
@@ -184,16 +186,9 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
 
             <n-divider vertical />
 
-            <NPopconfirm onPositiveClick={() => execute(row.id!)}>
+            <NButton type="error" text ghost size="small" onClick={() => execute(row)}>
-              {{
+              {$t('common.execute')}
-                default: () => $t('common.confirmExecute'),
+            </NButton>
-                trigger: () => (
-                  <NButton type="error" text ghost size="small">
-                    {$t('common.execute')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
 
             <n-divider vertical />
 
@@ -253,12 +248,9 @@ function copy(id: string) {
 //   router.push({ path: '/workflow/batch', state: { workflowId: id } });
 // }
 
-async function execute(id: string) {
+async function execute(row: Api.Workflow.Workflow) {
-  const { error } = await fetchTriggerWorkflow(id);
+  triggerData.value = row;
-  if (!error) {
+  openTriggerModal();
-    window.$message?.success($t('common.executeSuccess'));
-    getData();
-  }
 }
 
 function body(): Api.Workflow.ExportWorkflow {
@@ -335,6 +327,7 @@ function goToBatch(workflowId: string) {
         class="sm:h-full"
       />
     </NCard>
+    <WorkflowTriggerModal v-model:visible="triggerVisible" :row-data="triggerData" />
   </div>
 </template>
 

src/views/workflow/task/modules/workflow-trigger-modal.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { reactive, watch } from 'vue';
+import { $t } from '@/locales';
+import { fetchTriggerWorkflowParams } from '@/service/api';
+import { parseContent } from '@/utils/common';
+
+defineOptions({
+  name: 'WorkflowTriggerModal'
+});
+
+interface Props {
+  /** the edit row data */
+  rowData?: Api.Workflow.Workflow | null;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'submitted'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+type Model = Api.Workflow.WorkflowTriggerParams & {
+  wfContexts: { key: string; value: string | number | boolean; type: string }[];
+};
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    workflowId: props.rowData?.id,
+    tmpWfContext: '',
+    wfContexts: []
+  };
+}
+
+function handleUpdateModelWhenEdit() {
+  Object.assign(model, createDefaultModel());
+}
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    handleUpdateModelWhenEdit();
+  }
+});
+
+async function handleSubmit() {
+  const tmpWfContext = JSON.stringify(parseContent(model.wfContexts) || {});
+  const { error } = await fetchTriggerWorkflowParams({ workflowId: props.rowData?.id, tmpWfContext });
+  if (error) return;
+
+  window.$message?.success($t('common.executeSuccess'));
+
+  closeDrawer();
+  emit('submitted');
+}
+</script>
+
+<template>
+  <NModal v-model:show="visible" class="max-w-90% w-600px" preset="card" title="执行工作流" :bordered="false">
+    <NForm :model="model">
+      <NFormItem path="wfContexts" label="工作流上下文" :show-feedback="model.wfContexts?.length ? false : true">
+        <DynamicInput v-model:value="model.wfContexts" path="wfContexts" />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace justify="end" :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">执行</NButton>
+      </NSpace>
+    </template>
+  </NModal>
+</template>
+
+<style scoped>
+.http-method {
+  width: 130px !important;
+}
+</style>