接入流程表单

src/components/gFlow/propertySetting/webhookParams.vue

@@ -13,7 +13,7 @@
 					</div>
 
 					<div class="param-value">
-						<el-popover placement="bottom" :width="600" trigger="click">
+						<el-popover placement="bottom" :width="600" trigger="click" @hide="handlePopoverHide">
 							<template #reference>
 								<el-input v-model="origin[key]" placeholder="参数值" :disabled="readonly" @input="updateOrigin" />
 							</template>
@@ -24,11 +24,11 @@
 										<div class="column-title">表单类别</div>
 										<div class="category-list">
 											<div
-												v-for="item in flow_model_cate"
+												v-for="item in flowForms"
 												:key="item.value"
 												class="category-item"
-												:class="{ active: currentSelectCate === item.value }"
-												@click="selectCategory(item.value)"
+												:class="{ active: currentSelectCate === item }"
+												@click="selectCategory(item)"
 											>
 												{{ item.label }}
 											</div>
@@ -39,10 +39,10 @@
 									<div class="right-column">
 										<div class="column-title">字段列表</div>
 										<div class="field-list">
-											<div v-for="field in currentListSelectCate" :key="field.Key" class="field-item" @click="selectField(field.Key, key)">
-												<div class="field-name">{{ field.Key }}</div>
-												<div class="field-type">{{ field.Type }}</div>
-												<div class="field-desc">{{ field.Dc }}</div>
+											<div v-for="field in currentListSelectCate" :key="field.key" class="field-item" @click="selectField(field.key, key)">
+												<div class="field-name">{{ field.key }}</div>
+												<div class="field-type">{{ field.type }}</div>
+												<div class="field-desc">{{ field.dc }}</div>
 											</div>
 										</div>
 									</div>
@@ -61,20 +61,24 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { computed, getCurrentInstance, Ref, ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Delete } from '@element-plus/icons-vue'
-import { useAsyncState } from '@vueuse/core'
-import { getFlowFields } from '/@/api/flow/flowForm'
+import { asyncComputed, useAsyncState } from '@vueuse/core'
+import { getFlowFields, getFlowForm, listFlowForm } from '/@/api/flow/flowForm'
 
 const { proxy } = getCurrentInstance() as any
 const {
 	flow_model_cate,
 }: {
-	[key: string]: Array<{
-		label: string
-		value: string
-	}>
+	[key: string]: Ref<
+		Array<{
+			label: string
+			value: string
+
+			meta?: FlowFieldsInSql['infos']
+		}>
+	>
 } = proxy.useDict('flow_model_cate')
 
 // 定义组件的 Props
@@ -86,9 +90,9 @@ interface Props {
 
 type FlowFieldsInSql = {
 	infos: Array<{
-		Key: string
-		Type: string
-		Dc: string
+		key: string
+		type: string
+		dc: string
 	}>
 }
 // getFlowFields('表单名').then((res:FlowFieldsInSql)=>xxx)
@@ -171,33 +175,89 @@ const updateOrigin = () => {
 	origin.value = { ...origin.value }
 }
 
-const currentSelectCate = ref('')
+const currentSelectCate = ref<any | undefined>(undefined)
 
 // 选择表单类别
-const selectCategory = (categoryValue: string) => {
+const selectCategory = (categoryValue: any) => {
 	currentSelectCate.value = categoryValue
 }
 
 // 选择字段
 const selectField = (fieldKey: string, paramKey: string) => {
-	origin.value[paramKey] = `{{.${fieldKey}}`
+	origin.value[paramKey] = `{{.${fieldKey}}}`
 	updateOrigin()
 }
 
+const flowForms = asyncComputed<{ label: string; value: string; meta?: FlowFieldsInSql['infos'] }[]>(async () => {
+	const form = await Promise.all(
+		((await listFlowForm({ pageNum: 1, pageSize: 10 })) as unknown as { list: { name: string; id: number }[] }).list.map(async (detail) => {
+			//label: string,
+			//value: string,
+			//meta: any
+			const form_fields_resp = (await getFlowForm(detail.id)) as unknown as { fields: string[]; name: string }
+
+			/**
+			 * {
+			 * 	"type": "input",
+			 * 	"field": "title",
+			 * 	"title": "标题",
+			 * 	"info": "",
+			 * 	"$required": false,
+			 * 	"_fc_drag_tag": "input",
+			 * 	"hidden": false,
+			 * 	"display": true,
+			 * 	"_fc_id": "id_Fhoum1kfoi93abc",
+			 * 	"name": "ref_Fkwqm1kfoi93acc"
+			 * }
+			 */
+			const fields = form_fields_resp.fields.map((it) => JSON.parse(it)) as unknown as {
+				field: string
+				type: string
+				title: string
+			}[]
+			return {
+				label: form_fields_resp.name,
+				value: form_fields_resp.name,
+				meta: fields.map((it) => {
+					return {
+						key: it.field,
+						type: it.type,
+						dc: it.title,
+					}
+				}),
+			}
+		})
+	)
+
+	return [...flow_model_cate.value, ...form]
+})
+
 watch(currentSelectCate, (newListSelectCate) => {
-	if (newListSelectCate === '') return
+	if (newListSelectCate === undefined) return
 	selectCate(100, newListSelectCate)
 })
 
 const { state: currentListSelectCate, execute: selectCate } = useAsyncState(
 	async (data) => {
-		return await getFlowFields(data)
+		if (data.meta !== undefined) {
+			return data.meta
+		}
+		return await getFlowFields(data.value)
 			.then((res: any) => (res as FlowFieldsInSql).infos)
+			.then((res) => res.filter((it) => it.key !== ''))
 			.catch(() => [] as FlowFieldsInSql['infos'])
 	},
 	[] as FlowFieldsInSql['infos'],
 	{ immediate: false }
 )
+
+// 监听popover关闭，重置组件状态
+const handlePopoverHide = () => {
+	// 当popover关闭时，重置所有相关状态
+	currentSelectCate.value = ''
+	// 清空字段列表数据
+	currentListSelectCate.value = []
+}
 </script>
 
 <style scoped lang="scss">