From c50b1aeec0541d9a6c5eda30f13b212332526bcc Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Fri, 27 Dec 2024 23:44:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(1.3.0-beta1):=20=E5=B7=A5=E4=BD=9C?=
 =?UTF-8?q?=E6=B5=81=E6=96=B0=E5=A2=9E=E6=89=A7=E8=A1=8C=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/code-mirror.vue         | 53 ++++++++---
 .../workflow/modules/drawer/start-drawer.vue  |  5 +-
 src/service/api/workflow.ts                   |  9 ++
 src/typings/api.d.ts                          |  5 ++
 src/views/workflow/task/index.vue             | 37 ++++----
 .../task/modules/workflow-trigger-modal.vue   | 88 +++++++++++++++++++
 6 files changed, 161 insertions(+), 36 deletions(-)
 create mode 100644 src/views/workflow/task/modules/workflow-trigger-modal.vue

diff --git a/src/components/common/code-mirror.vue b/src/components/common/code-mirror.vue
index 1aa6d9d..3ff35a5 100644
--- a/src/components/common/code-mirror.vue
+++ b/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
-    v-model="nodeExpression"
-    class="w-100%"
-    :readonly="readonly"
-    :disabled="disabled"
-    :theme="theme"
-    :placeholder="placeholder"
-    basic
-    :line-number="false"
-    :lang="codeLang"
-    :extensions="[oneDark]"
-  />
+  <div class="w-100% flex-x-center gap-8px">
+    <CodeMirror
+      v-model="nodeExpression"
+      class="w-100%"
+      :readonly="readonly"
+      :disabled="disabled"
+      :theme="theme"
+      :placeholder="placeholder"
+      basic
+      :line-number="false"
+      :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>
diff --git a/src/components/workflow/modules/drawer/start-drawer.vue b/src/components/workflow/modules/drawer/start-drawer.vue
index 54086c7..9987df6 100644
--- a/src/components/workflow/modules/drawer/start-drawer.vue
+++ b/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="节点状态">
diff --git a/src/service/api/workflow.ts b/src/service/api/workflow.ts
index 94d35bd..4e69bb4 100644
--- a/src/service/api/workflow.ts
+++ b/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[]>({
diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts
index e596766..e47ddc6 100644
--- a/src/typings/api.d.ts
+++ b/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
diff --git a/src/views/workflow/task/index.vue b/src/views/workflow/task/index.vue
index 96d8c64..48088bc 100644
--- a/src/views/workflow/task/index.vue
+++ b/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 {
-  fetchBatchDeleteWorkflow,
-  fetchGetWorkflowPageList,
-  fetchTriggerWorkflow,
-  fetchUpdateWorkflowStatus
-} from '@/service/api';
+import { ref } from 'vue';
+import { useBoolean } from '@sa/hooks';
+import { fetchBatchDeleteWorkflow, fetchGetWorkflowPageList, 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!)}>
-              {{
-                default: () => $t('common.confirmExecute'),
-                trigger: () => (
-                  <NButton type="error" text ghost size="small">
-                    {$t('common.execute')}
-                  </NButton>
-                )
-              }}
-            </NPopconfirm>
+            <NButton type="error" text ghost size="small" onClick={() => execute(row)}>
+              {$t('common.execute')}
+            </NButton>
 
             <n-divider vertical />
 
@@ -253,12 +248,9 @@ function copy(id: string) {
 //   router.push({ path: '/workflow/batch', state: { workflowId: id } });
 // }
 
-async function execute(id: string) {
-  const { error } = await fetchTriggerWorkflow(id);
-  if (!error) {
-    window.$message?.success($t('common.executeSuccess'));
-    getData();
-  }
+async function execute(row: Api.Workflow.Workflow) {
+  triggerData.value = row;
+  openTriggerModal();
 }
 
 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>
 
diff --git a/src/views/workflow/task/modules/workflow-trigger-modal.vue b/src/views/workflow/task/modules/workflow-trigger-modal.vue
new file mode 100644
index 0000000..1c2770f
--- /dev/null
+++ b/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>