脚手架

src/api/flow/flowForm.ts

@@ -96,3 +96,14 @@ export function delFlowFormData(data:object) {
     data: data
   })
 }
+
+
+export function getFlowFields(name: string) {
+	return request({
+		url: '/flow/flowForm/fields',
+		method: 'get',
+		params: {
+			name: name
+		}
+	})
+}

src/components/gFlow/propertySetting/CommonProperty.vue

@@ -127,12 +127,8 @@
 
 				<!-- 请求体 - 仅 POST/PUT 显示 -->
 				<el-form-item label="请求体" v-show="formData.webhook.method === 'POST' || formData.webhook.method === 'PUT'">
-					<el-input :disabled="readonly" type="textarea" v-model="formData.webhook.body" :autosize="{ minRows: 10, maxRows: 10 }" />
-					<!--					<WebHookParams-->
-					<!--						ref="bodyRef"-->
-					<!--						v-model="formData.webhook.body"-->
-					<!--						title="请求体参数"-->
-					<!--						@setParams="setWebHookBody" />-->
+					<!--					<el-input :disabled="readonly" type="textarea" v-model="formData.webhook.body" :autosize="{ minRows: 10, maxRows: 10 }" />-->
+					<webhook-params v-model="formData.webhook.body" title="请求体参数" />
 				</el-form-item>
 			</template>
 
@@ -143,7 +139,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { NodeConditionData, WebHookParamData } from '/@/components/gFlow/propertySetting/model'
+import { NodeConditionData } from '/@/components/gFlow/propertySetting/model'
 import selectUser from '/@/components/selectUser/index.vue'
 import LogicFlow from '@logicflow/core'
 import { computed, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue'
@@ -167,19 +163,23 @@ import {
 	NodeTypeWebHook,
 } from '/@/components/gFlow/consts'
 import systemApi from '/@/api/system'
+import WebhookParams from '/@/components/gFlow/propertySetting/webhookParams.vue'
 
 interface PostInfo {
 	postId: number
 	postName: string
 }
 
+interface DeptInfo {
+	deptId: number
+	deptName: string
+	children?: DeptInfo[]
+}
+
 const getDeptTree = () => systemApi.dept.getList({ status: -1 })
 const getParams = () => systemApi.user.params()
 
 const branchRef = ref()
-const paramsRef = ref()
-const headersRef = ref()
-const bodyRef = ref()
 const { proxy } = <any>getCurrentInstance()
 const props = defineProps({
 	nodeData: {
@@ -207,7 +207,7 @@ const state = reactive({
 	text: '',
 	roleList: [], //角色选项列表
 	postList: [] as PostInfo[], //岗位选项列表
-	deptData: [], //部门选项列表
+	deptData: [] as DeptInfo[], //部门选项列表
 	actionRuleOption: [
 		{
 			label: '任何人',
@@ -297,10 +297,8 @@ const state = reactive({
 		webhook: {
 			url: '',
 			method: 'POST',
-			params: [] as WebHookParamData[],
-			headers: [] as WebHookParamData[],
 			bodyType: 'json',
-			body: [] as WebHookParamData[],
+			body: undefined,
 		},
 	},
 })
@@ -311,12 +309,6 @@ onMounted(() => {
 		state.formData = Object.assign({}, state.formData, properties)
 		//设置条件
 		branchRef.value?.initNodeData(state.formData.nodeExt)
-		//设置WebHook参数
-		if (nodeType.value === NodeTypeWebHook) {
-			paramsRef.value?.initParams(state.formData.webhook?.params || [])
-			headersRef.value?.initParams(state.formData.webhook?.headers || [])
-			bodyRef.value?.initParams(state.formData.webhook?.body || [])
-		}
 	}
 	if (text && text.value) {
 		state.formData.text = text.value
@@ -346,7 +338,7 @@ const getSelector = () => {
 		state.roleList = proxy.handleTree(roles ?? [], 'id', 'parentId', 'children')
 		state.postList = res.posts ?? []
 	})
-	getDeptTree().then((res) => {
+	getDeptTree().then((res: DeptInfo[]) => {
 		state.deptData = res
 	})
 }
@@ -368,18 +360,5 @@ const onSubmit = () => {
 const setNodeExt = (data: Array<NodeConditionData[]>) => {
 	state.formData.nodeExt = data
 }
-
-// WebHook 参数处理方法
-const setWebHookParams = (data: WebHookParamData[]) => {
-	state.formData.webhook.params = data
-}
-
-const setWebHookHeaders = (data: WebHookParamData[]) => {
-	state.formData.webhook.headers = data
-}
-
-const setWebHookBody = (data: WebHookParamData[]) => {
-	state.formData.webhook.body = data
-}
 </script>
 <style scoped></style>

src/components/gFlow/propertySetting/model.ts

@@ -4,10 +4,3 @@ export interface NodeConditionData{
     value:string|undefined;
     operator:string|undefined;
 }
-
-export interface WebHookParamData{
-    key:string;
-    value:string;
-    type:'constant'|'variable'; // 常量或变量
-}
-

src/components/gFlow/propertySetting/webhookParams.vue

@@ -1,224 +1,51 @@
-<template>
-  <el-container>
-    <el-main style="padding: 0 20px 20px 20px">
-      <div class="top-tips">{{ title }}</div>
-      
-      <!-- 参数列表 -->
-      <div class="params-group-editor" v-if="paramsList.length > 0">
-        <div class="header">
-          <span>参数配置</span>
-        </div>
-
-        <div class="main-content">
-          <!-- 表头 -->
-          <div class="params-content-box cell-box">
-            <div>键名</div>
-            <div>值类型</div>
-            <div>值</div>
-            <div>操作</div>
-          </div>
-          
-          <!-- 参数行 -->
-          <div
-              class="params-content"
-              v-for="(param, idx) in paramsList"
-              :key="idx">
-            <div class="params-content-box">
-              <el-input
-                  v-model="param.key"
-                  placeholder="请输入键名" />
-              <el-select
-                  v-model="param.type"
-                  placeholder="请选择类型">
-                <el-option
-                    label="常量"
-                    value="constant"></el-option>
-                <el-option
-                    label="变量(表单值)"
-                    value="variable"></el-option>
-              </el-select>
-              <el-input
-                  v-model="param.value"
-                  :placeholder="param.type === 'variable' ? '请输入表单字段名' : '请输入值'" />
-              <div class="action-buttons">
-                <el-button
-                    type="danger"
-                    size="small"
-                    @click="deleteParam(idx)">
-                  <el-icon><ele-Delete /></el-icon>
-                </el-button>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <div class="sub-content">
-          <el-button
-              link
-              type="primary"
-              @click="addParam">
-            <el-icon><ele-Plus /></el-icon>
-            添加参数
-          </el-button>
-        </div>
-      </div>
-      
-      <!-- 空状态 -->
-      <div v-else class="empty-state">
-        <el-button
-            style="width: 100%"
-            type="info"
-            text
-            bg
-            @click="addParam">
-          <el-icon><ele-Plus /></el-icon>
-          添加参数
-        </el-button>
-      </div>
-    </el-main>
-  </el-container>
-</template>
+<template></template>
 
 <script lang="ts" setup>
-import { WebHookParamData } from "/@/components/gFlow/propertySetting/model";
-import { ref, watch } from "vue";
-
+import { computed, getCurrentInstance } from 'vue'
+
+const { proxy } = getCurrentInstance() as any
+const {
+	flow_model_cate,
+}: {
+	[key: string]: Array<{
+		label: string
+		value: string
+	}>
+} = proxy.useDict('flow_model_cate')
+
+// 定义组件的 Props
 interface Props {
-  modelValue: WebHookParamData[];
-  title?: string;
+	modelValue: string
+	title?: string
+	readonly?: boolean
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  title: '参数配置'
-});
-
-const emit = defineEmits(['update:modelValue', 'setParams']);
-
-const paramsList = ref<WebHookParamData[]>([]);
-
-// 初始化数据
-const initParams = (data: WebHookParamData[]) => {
-  paramsList.value = data || [];
-};
-
-// 添加参数
-const addParam = () => {
-  paramsList.value.push({
-    key: '',
-    value: '',
-    type: 'constant',
-  });
-  emitUpdate();
-};
-
-// 删除参数
-const deleteParam = (idx: number) => {
-  paramsList.value.splice(idx, 1);
-  emitUpdate();
-};
-
-// 发送更新事件
-const emitUpdate = () => {
-  emit('update:modelValue', paramsList.value);
-  emit('setParams', paramsList.value);
-};
-
-// 监听参数变化
-watch(() => paramsList.value, () => {
-  emitUpdate();
-}, { deep: true });
-
-// 监听外部数据变化
-watch(() => props.modelValue, (newVal) => {
-  if (newVal && newVal !== paramsList.value) {
-    paramsList.value = [...newVal];
-  }
-}, { immediate: true });
-
-// 暴露方法
-defineExpose({ initParams });
-</script>
-
-<style scoped lang="scss">
-.top-tips {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  color: #646a73;
-  font-weight: 600;
+type FlowFieldsInSql = {
+	infos: Array<{
+		Key: string
+		Type: string
+		Dc: string
+	}>
 }
+// getFlowFields('表单名').then((res:FlowFieldsInSql)=>xxx)
 
-.params-group-editor {
-  user-select: none;
-  border-radius: 4px;
-  border: 1px solid #e4e5e7;
-  position: relative;
-  margin-bottom: 16px;
-
-  .header {
-    background-color: #f4f6f8;
-    padding: 0 12px;
-    font-size: 14px;
-    color: #171e31;
-    height: 36px;
-    display: flex;
-    align-items: center;
-
-    span {
-      flex: 1;
-    }
-  }
-
-  .main-content {
-    padding: 0 12px;
-
-    .params-content-box {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 12px;
-
-      div {
-        flex: 1;
-        min-width: 100px;
-      }
-
-      .action-buttons {
-        flex: 0 0 auto;
-        width: 60px;
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    .cell-box {
-      div {
-        padding: 16px 0;
-        color: #909399;
-        font-size: 14px;
-        font-weight: 600;
-        text-align: center;
-      }
-    }
-
-    .params-content {
-      padding: 8px 0;
-      border-bottom: 1px solid #f0f0f0;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-  }
-
-  .sub-content {
-    padding: 12px;
-    border-top: 1px solid #f0f0f0;
-  }
-}
+const props = withDefaults(defineProps<Props>(), {
+	title: '参数配置',
+	readonly: false,
+})
+const emit = defineEmits<{
+	// eslint-disable-next-line no-unused-vars
+	(e: 'update:modelValue', value: string): void
+}>()
+
+const origin = computed<{ [key: string]: string }>({
+	get() {
+		return JSON.parse(props.modelValue ?? '{}')
+	},
+	set(value) {
+		emit('update:modelValue', JSON.stringify(value ?? {}))
+	},
+})
+</script>
 
-.empty-state {
-  padding: 20px 0;
-}
-</style>
+<style scoped lang="scss"></style>