feat: 新增回调分支编辑与详情抽屉

packages/work-flow/src/constants/business.ts

@@ -36,6 +36,8 @@ export const contentTypeRecord: Record<Flow.ContentType, string> = {
   2: 'application/x-www-form-urlencoded'
 };
 
+export const contentTypeOptions = transformRecordToOption(contentTypeRecord);
+
 export const triggerTypeRecord: Record<Flow.TriggerType, FlowI18n.I18nKey> = {
   2: 'snail.enum.triggerType.time',
   3: 'snail.enum.triggerType.cron'

packages/work-flow/src/detail/callback-detail.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { contentTypeRecord } from '../constants/business';
+
+defineOptions({
+  name: 'CallbackDetail'
+});
+
+interface Props {
+  modelValue?: Flow.ConditionNodeType;
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  modelValue: () => ({})
+});
+
+interface Emits {
+  (e: 'update:open', open: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const visible = ref(false);
+
+watch(
+  () => props.open,
+  val => {
+    visible.value = val;
+  },
+  { immediate: true }
+);
+
+const onClose = () => {
+  emit('update:open', false);
+};
+</script>
+
+<template>
+  <NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
+    <NDrawerContent title="工作流详情">
+      <NDescriptions :column="1" bordered :label-style="{ width: '120px' }">
+        <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
+        <NDescriptionsItem label="webhook">{{ modelValue.callback?.webhook }}</NDescriptionsItem>
+        <NDescriptionsItem label="请求类型">
+          {{ contentTypeRecord[modelValue.callback?.contentType!] }}
+        </NDescriptionsItem>
+        <NDescriptionsItem label="密钥">
+          {{ modelValue.callback?.secret }}
+        </NDescriptionsItem>
+      </NDescriptions>
+    </NDrawerContent>
+  </NDrawer>
+</template>
+
+<style scoped lang="scss"></style>

packages/work-flow/src/drawer/callback-drawer.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import type { FormInst, FormRules } from 'naive-ui';
+import { $t } from '../locales';
+import EditableInput from '../common/editable-input.vue';
+import { contentTypeOptions, workFlowNodeStatusOptions } from '../constants/business';
+
+defineOptions({
+  name: 'CallbackDrawer'
+});
+
+interface Props {
+  modelValue?: Flow.ConditionNodeType;
+  open?: boolean;
+  len?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  len: 0,
+  modelValue: () => ({})
+});
+
+interface Emits {
+  (e: 'update:open', open: boolean): void;
+  (e: 'save', form: Flow.ConditionNodeType): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const drawer = ref<boolean>(false);
+const form = ref<Flow.ConditionNodeType>({});
+
+watch(
+  () => props.open,
+  val => {
+    drawer.value = val;
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.modelValue,
+  val => {
+    form.value = val;
+  },
+  { immediate: true, deep: true }
+);
+
+const formRef = ref<FormInst>();
+
+const close = () => {
+  emit('update:open', false);
+  drawer.value = false;
+};
+
+const save = () => {
+  formRef.value
+    ?.validate(errors => {
+      if (!errors) {
+        close();
+        emit('save', form.value);
+      }
+    })
+    .catch(() => window.$message?.warning('请检查表单信息'));
+};
+
+const rules: FormRules = {
+  workflowNodeStatus: [{ required: true, message: '请选择工作流状态', trigger: 'change' }],
+  callback: {
+    webhook: [{ required: true, message: '请输入 webhook', trigger: 'change' }],
+    contentType: [{ required: true, message: '请选择请求类型', trigger: 'change', type: 'number' }],
+    secret: [{ required: true, message: '请输入秘钥', trigger: 'change' }]
+  }
+};
+</script>
+
+<template>
+  <NDrawer v-model:show="drawer" display-directive="if" :width="500" @after-leave="close">
+    <NDrawerContent>
+      <template #header>
+        <div class="w-460px flex-center">
+          <EditableInput v-model="form.nodeName" class="mr-16px max-w-320px min-w-320px" />
+        </div>
+      </template>
+
+      <NForm ref="formRef" :model="form" :rules="rules" label-align="left" label-width="100px">
+        <NFormItem path="callback.webhook" label="webhook">
+          <NInput v-model:value="form.callback!.webhook" placeholder="请输入 webhook" />
+        </NFormItem>
+        <NFormItem path="callback.contentType" label="请求类型">
+          <NSelect
+            v-model:value="form.callback!.contentType"
+            :options="contentTypeOptions"
+            placeholder="请选择请求类型"
+          />
+        </NFormItem>
+        <NFormItem path="callback.secret" label="秘钥">
+          <NInput v-model:value="form.callback!.secret" placeholder="请输入秘钥" />
+        </NFormItem>
+        <NFormItem
+          name="workflowNodeStatus"
+          label="工作流状态"
+          :rules="[{ required: true, message: '请选择工作流状态', trigger: 'change' }]"
+        >
+          <NRadioGroup v-model:value="form.workflowNodeStatus">
+            <NSpace>
+              <NRadio
+                v-for="(options, index) in workFlowNodeStatusOptions"
+                :key="index"
+                :label="$t(options.label)"
+                :value="options.value"
+              />
+            </NSpace>
+          </NRadioGroup>
+        </NFormItem>
+      </NForm>
+
+      <template #footer>
+        <NButton type="primary" @click="save">保存</NButton>
+        <NButton class="ml-12px" @click="close">取消</NButton>
+      </template>
+    </NDrawerContent>
+  </NDrawer>
+</template>

packages/work-flow/src/node/callback-node.vue

@@ -3,6 +3,8 @@ import { nextTick, ref, watch } from 'vue';
 import { $t } from '../locales';
 import { useFlowStore } from '../stores';
 import { contentTypeRecord, taskBatchStatusEnum } from '../constants/business';
+import CallbackDrawer from '../drawer/callback-drawer.vue';
+import CallbackDetail from '../detail/callback-detail.vue';
 import AddNode from './add-node.vue';
 
 defineOptions({
@@ -64,10 +66,10 @@ const drawer = ref<boolean>(false);
 const detailDrawer = ref<boolean>(false);
 const form = ref<Flow.ConditionNodeType>({});
 
-// const save = (val: Flow.ConditionNodeType) => {
+const save = (val: Flow.ConditionNodeType) => {
-//   nodeConfig.value.conditionNodes![currentIndex.value] = val;
+  nodeConfig.value.conditionNodes![currentIndex.value] = val;
-//   emit('update:modelValue', nodeConfig.value);
+  emit('update:modelValue', nodeConfig.value);
-// };
+};
 
 const show = (index: number) => {
   if (store.type === 0) {
@@ -156,7 +158,7 @@ const getClass = (item: Flow.ConditionNodeType) => {
                     <template v-if="item.callback?.webhook">
                       <div class="flex justify-between">
                         <span class="content_label">Webhook:</span>
-                        <NEllipsis class="max-w-116px">{{ item.callback.webhook }}</NEllipsis>
+                        <NEllipsis class="w-116px">{{ item.callback.webhook }}</NEllipsis>
                       </div>
                       <div>
                         <span class="content_label">{{ $t('node.callback.conditionNodes.contentType') }}:</span>
@@ -189,9 +191,9 @@ const getClass = (item: Flow.ConditionNodeType) => {
       </div>
     </div>
     <AddNode v-if="nodeConfig.conditionNodes!.length > 1" v-model="nodeConfig.childNode!" :disabled="disabled" />
-    <!--
     <CallbackDetail v-if="store.type !== 0" v-model:open="detailDrawer" v-model="nodeConfig.conditionNodes![0]" />
     <CallbackDrawer v-model:open="drawer" v-model="form" @save="save" />
+    <!--
     <DetailCard v-if="store.TYPE !== 0 && cardDrawer" :id="detailId" v-model:open="cardDrawer" :ids="detailIds">
       <div style="margin: 20px 0; border-left: #f5222d 5px solid; font-size: medium; font-weight: bold">
         <span style="padding-left: 18px">回调节点详情</span>

packages/work-flow/src/workflow.vue

@@ -116,7 +116,6 @@ const onZoom = (n: number) => {
 
 .workflow {
   padding: 0 !important;
-  height: calc(100% - 50px);
 
   &-affix {
     .header {
@@ -132,7 +131,7 @@ const onZoom = (n: number) => {
 
   &-body {
     overflow: auto;
-    height: 100%;
+    height: calc(100vh - 198px);
   }
 
   &-design {