appFormLowcode/src/components/formTable/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-11-14 09:01:18
@ 备注: 自定义表单画板
-->
<script lang='ts' setup>
import { useRoute,useRouter,onBeforeRouteLeave } from 'vue-router'
import { FormData } from '@/api/lowCode/form/type';
import { jsonParseStringify } from '@/utils/lowCode/item/index'

import { appendOrRemoveStyle,constControlChange,constFormBtnEvent,constFormProps,constGetControlByName,constSetFormOptions }from '@/api/lowCode/utils'

import { currencyFormApiSubmit,createAppTask,saveDraftAgain } from '@/api/lowCode/taskapi/management'
import formatResult from '@/utils/lowCode/formatResult'

const props = withDefaults(
    defineProps<{
        formData: FormData
        type?: number // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
        disabled?: boolean // 禁用表单提交
        requestUrl?: string // 编辑数据请求url
        submitUrl?: string // 表单数据新增提交保存url
        editUrl?: string // 表单数据修改保存提交url
        isWorkFlow?: boolean //是否有流程
        dict?: { [key: string]: any } // 固定匹配的字典
        isSearch?: boolean // 列表里作为筛选使用
        query?: { [key: string]: any } // 一些附加的请求参数。也可在`beforeRequest`处添加
        params?: { [key: string]: any } // 提交表单一些附加参数，如在提交修改时可添加id等信息。而不需要在提交前拦截处理
        appInfo?:{ [appKey: string]: any } //
        beforeRequest?: Function // 请求编辑数据前参数处理方法，可对请求参数处理
        afterResponse?: Function | string // 请求数据加载完成后数据处理方法，可对返回数据处理
        beforeSubmit?: Function | string // 表单提交前数据处理，可对提交数据处理，新增和保存都会触发
        afterSubmit?: Function // 表单提交后，默认提示提交结果，可return false阻止提示
        btnClick?: (key: string) => boolean | void // 按钮点击事件
    }>(),
    {
        type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
        formData: () => {
            return {
            list: [],
            form: {},
            config: {}
            }
        },
        dict: () => {
            return {}
        },
        isSearch: false,
        query: () => {
            return {}
        },
        params: () => {
            return {}
        }
    }
)

const emits = defineEmits<{
    (e: 'btnClick', type: string): void //按钮单击时
    (e: 'change', val: any): void // 表单组件值发生变化时
}>()
const route = useRoute()
const router = useRouter()
const loading = ref(false)
// 设置全局事件结束
const resultDict = ref({})
// 处理表单值开始
const model = ref({})
// 表单检验方法
const ruleForm = ref()
let timer = 0
let eventName = ''
let getValueEvent = ''
// 注册window事件
const setWindowEvent = (bool?: boolean) => {
    if (props.formData.list.length > 0) {
        const formName = props.formData.form?.name
        if (!formName) {
            // 导出.vue时，name可以没有
            return
        }
        eventName = `get${formName}ControlByName`
        getValueEvent = `get${formName}ValueByName`
        if (formName && (!window[eventName as any] || !bool)) {
            // 根据name获取当前数据项
            // @ts-ignore
            window[eventName] = (name: string) => {
                return getNameForEach(props.formData.list, name)
            }
            // 根据name获取当前项的值
            // @ts-ignore
            window[getValueEvent] = (name: string) => {
                return model.value[name]
            }
        }
    }
}
const unWatch1 = watch(
    () => props.formData.config,
    () => {
        if (timer < 2) {
            setWindowEvent() // 简单判断下，这里不是每次都更新
        }
        timer++
        appendRemoveStyle(true) // 更新样式
    },
    { deep: true }
)
setWindowEvent()
/**
* 追加移除style样式
* @param type
*/
const appendRemoveStyle = (type?: boolean) => {
    try {
        const {
            config: { style }
        } = props.formData
        appendOrRemoveStyle('formStyle', style || '', type)
    } catch (e) {
        /* empty */
    }
}
// 获取表单初始model值
const getInitModel = () => {
    const obj = {}
    forEachGetFormModel(props.formData.list, obj)
    model.value = obj
}
const unWatch2 = watch(
    () => props.formData.list,
    () => {
        // data从接口获取时
        getInitModel()
    }
)
// 从表单数据里提取表单所需的model
const forEachGetFormModel = (list: FormList[], obj: any) => {
    list.forEach((item: any) => {
        if (['table', 'flex'].includes(item.type)) {
            obj[item.name] = jsonParseStringify(item.tableData)
        } else if (['grid', 'tabs'].includes(item.type)) {
            item.columns.forEach((col: any) => {
                forEachGetFormModel(col.list, obj)
            })
        } else if (['card', 'div'].includes(item.type)) {
            forEachGetFormModel(item.list, obj)
        } else {
            const excludeType = ['title', 'divider', 'txt', 'button']
            if (excludeType.indexOf(item.type) === -1) {
                obj[item.name] = jsonParseStringify(item.control.modelValue)
            }
        }
    })
}
const dictForm = computed(() => {
    const storage = window.localStorage.getItem('akFormDict')
    let storageDict = {}
    if (storage) {
      	storageDict = JSON.parse(storage)
    }
    // 全局的、当前表单配置的以及接口返回的
    return Object.assign({}, storageDict, props.dict, resultDict.value)
})
// 表单参数
const formProps = computed(() => {
    return {
        model: model.value,
        type: props.type,
        hideField: props.formData.config?.hideField as [],
        showColon: props.formData.form?.showColon,
        dict: dictForm.value
    }
})
/**
* 提供一个方法，用于根据name从data.list里查找数据
* @param data
* @param name
*/
const getNameForEach = (data: any, name: string) => {
    let temp = {}
    for (const key in data) {
        const dataKey = data[key]
        if (dataKey.name === name) {
            return dataKey
        }
        if (['grid', 'tabs'].includes(dataKey.type)) {
            dataKey.columns.forEach((co: any) => {
                temp = getNameForEach(co.list, name)
            })
        }
        if (['card', 'div'].includes(dataKey.type)) {
            temp = getNameForEach(dataKey.list, name)
        }
    }
    return temp
}
/**
* 表单校验方法，也可以外部使用
* @param callback
*/
const validate = (callback: any) => {
    ruleForm.value.validate((valid: boolean, fields: any) => {
        let fieldValue = fields
        if (valid) {
            // 校验通过，返回当前表单的值
            fieldValue = getValue()
        }
        callback(valid, fieldValue)
    })
}
/**
* 提供一个取值的方法，外部引用
* @param filter true只返回非空值
*/
const getValue = (filter?: boolean) => {
    if (filter) {
        const obj: any = {}
        for (const key in model.value) {
            // eslint-disable-next-line no-prototype-builtins
            if (model.value.hasOwnProperty(key)) {
                const val = (model.value as any)[key]
                if (!/^\s*$/.test(val)) {
                    obj[key] = val
                }
            }
        }
        return obj
    } else {
        return model.value
    }
}
/**
* 对表单设置初始值，提供外部引用
* @param obj
* @param filter 分两种，false时将obj所有值合并到model，当obj有某些值不存于表单中，也会合并到model，当提交表单也会提交此值.true则过滤没用的值，即存在当前表单的才合并
*/
const setValue = (obj: { [key: string]: any }, filter?: boolean) => {
    if (filter) {
        for (const key in obj) {
            if (Object.prototype.hasOwnProperty.call(model.value, key)) {
                model.value[key] = obj[key]
            }
        }
    } else {
        model.value = Object.assign({}, model.value, jsonParseStringify(obj))
    }
}

//provide相关
// 表单组件值改变事件 tProp为子表格相关
 provide(constControlChange, ({ key, value, data, tProp, label }: any) => {
    if (key) {
        if (!tProp) {
            // 表格和弹性布局不是这里更新，只触change
            model.value[key] = value
        }
        // 支持在线方式数据处理，如A组件值改变时，可自动修改B组件的值，可参考请假流程自动时长计算
        const onFormChange = props.formData.events?.change
        if (onFormChange) {
            if (typeof onFormChange === 'function') {
                model.value = onFormChange(key, model.value)
            } else {
                model.value = formChangeValue(key, model.value, onFormChange)
            }
        }
        // 当表格和弹性内的字段和外面字段冲突时，可通过tProps区分
        emits('change', { key, value, model: model.value, data, tProp, label })
    }
})
// 一些表单相关参数
provide(constFormProps, formProps)
/**
* 根据组件的name获取当前控件的相关信息
* @param name
*/
const getControlByName = (name: string) => {
    return getNameForEach(props.formData.list, name)
}
provide(constGetControlByName, getControlByName)
// 对表单选择项快速设置 defineExpose方法
const setFormOptions = ref({})
provide(constSetFormOptions, setFormOptions)
const setOptions = (obj: { [key: string]: string[] }) => {
    setFormOptions.value = obj
}
// 表单设计中按钮组件的点击事件
provide(constFormBtnEvent,(obj: any) => {
    console.log("点击的哪个按钮----》",obj.key);
    if ([3].includes(props.type)) {
      	return ElMessage.error('当前模式不能提交表单')
    }
    switch (obj.key) {
		case 'submit':
			submit() // 提交
			break
        case 'submitFlow':   //提交带流程的表单
            submitFlow()
            break
        case 'editSubmit':  //无流程数据更改
            editSubmit()
            break
		case 'reset':
			resetFields() // 重置
			break
		case 'cancel': // 取消返回，
			// router.go(-1) //这个刷新后可能会失败
			// let notReturn
			// if (typeof props.closeAppSubmit === 'function') {
			// 	notReturn = props.closeAppSubmit()
			// }
			break
		case 'saveDraft':	//保存草稿
			saveDraft() // 保存草稿
			// console.log("保存草稿--------->saveDraft")
			break
        case 'saveEditDraft':	//保存草稿
            saveDraftAgainSend() // 保存草稿
			// console.log("保存草稿--------->saveDraft")
			break
		case "saveDraftFlow": //保存草稿		只保存表单不操作流程
			saveEditDraft()
			// console.log("保存草稿--------->saveEditDraft")
			break
		case 'afreshSubmit':	//重新提交流程
			afreshSubmit() // 提交
			break
		case 'draftSubmit':	//草稿提交审批
			// draftSubmit()
			break
		case 'submitEdit': //申请修改
			submitEditButton()
			break
		default:
			break
    }
})
// 获取表单数据，编辑时，外部调用
/**
* 编辑时获取表单数据，外部调用并传入请求参数
* @param params
*/
const getData = (params = {}) => {
    let requestUrl = props.formData.config?.requestUrl || props.requestUrl
    if (props.type === 5 || !requestUrl || props.isSearch) {
		console.error('执行了获取数据方法，但配置有误！')
		return
    }
	switch(requestUrl){
		case "getFormContent":
			requestUrl ="/systemapi/task_management/look_customer_formdata"
			break;
		case "saveFormContent":
			// requestUrl ="/systemapi/task_management/customer_form_adddata"
			requestUrl ="/systemapi/task_management/add_form_data"
			break;
		case "editFormContent":
			// requestUrl ="/systemapi/task_management/newcust_form_editdata"
			requestUrl ="/systemapi/task_management/add_customer_form"
			break;
		default:
	}
	
    loading.value = true
    const newParams: any = params
    // 同时可使用props或是events里的事件，根据使用使用其中一种即可
    let newParams2
    const beforeRequest = props.formData.events?.beforeRequest
    if (typeof beforeRequest === 'function') {
      	newParams2 = beforeRequest(newParams, route)
    }
    if (typeof props.beforeRequest === 'function') {
      	newParams2 = props.beforeRequest(newParams, route)
    }
    if (newParams2 === false) {
		// 停止数据请求
		return
    }
	currencyFormApiSubmit(requestUrl, newParams2 ?? newParams)
		.then((res: any) => {
			loading.value = false
			const result = res.data
			result.formKey = newParams.id
			result.formId = newParams.version
			// console.log("停止数据请求--->",newParams)
			if (result) {
				let formatRes: any = result
				// 比较适用通用表单，保存在服务端
				const afterResponse = props.formData.events?.afterResponse
				if (typeof afterResponse === 'string' && afterResponse) {
					formatRes = formatResult(result, afterResponse)
				} else if (typeof afterResponse === 'function') {
					formatRes = afterResponse(result) ?? result
				}
				// 比较适用于导出vue文件
				if (typeof props.afterResponse === 'string' && props.afterResponse) {
					formatRes = formatResult(result, props.afterResponse)
				} else if (typeof props.afterResponse === 'function') {
					formatRes = props.afterResponse(result) ?? result
				}
				if (formatRes === false) {
					return
				}
				setValue(formatRes.result || formatRes)
				nextTick(() => {
					// 将dict保存，可用于从接口中设置表单组件options。
					if (formatRes.dict && Object.keys(formatRes.dict).length) {
						resultDict.value = formatRes.dict
					}
				})
			}
		})
		.catch(res => {
			loading.value = false
			return ElMessage.error(res.message)
		})
	// console.log("res------执行了获取数据方法，但配置有误----->", requestUrl,newParams2,newParams)

    
}
//新增、查看、保存数据
const submit = (params = {}) => {
    let apiUrl = props.formData.config?.addUrl || "/systemapi/task_management/add_customer_form"
    
    // console.log("新增、查看、保存数据===>",props.formData.config)
	// console.log("新增、查看、保存数据",apiUrl,props.type,props.addUrl)
    // console.log("props.isWorkFlow --->",props.isWorkFlow )
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		// 列表里作为筛选时，不提交表单
		return
    }
    validate((valid: boolean, fields: any) => {
		
		if (valid) {
			
			const formatParams = Object.assign({}, fields, params)
			// console.log("params--->",params)
			// console.log("fields--->",fields)
			// console.log("formatParams-Object-->",formatParams)

			let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
			if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
			// console.log("beforeSubmit--->",beforeSubmit)
			// console.log("props.beforeSubmit--->",props.beforeSubmit)
			// console.log("props.beforeSubmit--->",props.beforeSubmit)
			formatParams.versionId=props.appInfo.taskKey
            formatParams.formId=props.appInfo.taskId
			formatParams.appKey=props.appInfo.appKey
			formatParams.status=2
			// loading.value = true
			console.log("apiUrl--->",apiUrl)
			console.log("submitParams--->",submitParams)
			console.log("formatParams--->",formatParams)

			// debugger
			// 提交保存表单
			currencyFormApiSubmit(apiUrl, submitParams ?? formatParams)
				.then((res: any) => {
					// console.log("formatParams--111->",res)
						afterSubmit('success', res)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
			// getRequest(apiUrl, submitParams ?? formatParams)
			// 	.then((res: any) => {
			// 		afterSubmit('success', res)
			// 	})
			// 	.catch(res => {
			// 		afterSubmit('fail', res)
			// 	})
		} else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
// 不管成功失败，有事件时都需要执行回调
const afterSubmit = (type: string, res: any) => {
    const afterSubmit = props.formData.events?.afterSubmit
    let notReturn
    if (typeof afterSubmit === 'function') {
      	notReturn = afterSubmit(type, res)
    } else if (typeof props.afterSubmit === 'function') {
      	notReturn = props.afterSubmit(type, res)
		//   console.log("notReturn--123456->",props.afterSubmit)
    }
	// console.log("notReturn--->",notReturn)
	// console.log("afterSubmit--->",afterSubmit)
	// console.log("typeof afterSubmit--->",typeof afterSubmit)
	// console.log("type--->",type)
	// console.log("res--->",res)
	// console.log("props.formData.events--->",props.formData.events)
	// console.log("props.formData.events?.afterSubmit--->",props.formData.events?.afterSubmit)

    loading.value = false
    // 不管结果，重置表单，防再次打开时保留上一次的值
    // resetFields()
    if (notReturn === false) {
		// 有返回false时则不提示
		return
    }
    if (type === 'success') {
      	ElMessage.success(res.msg || '保存成功！')
    } else if (type === 'fail') {
      	ElMessage.error(res.message || '保存失败！')
    }
}
// ------------------------数据处理结束------------------------
// 重置表单方法
const resetFields = () => {
    ruleForm.value.resetFields()
}
onBeforeRouteLeave(() => {
    unWatch1() //销毁监听器
    unWatch2() //销毁监听器
})
onMounted(() => {
    getInitModel()
    nextTick(() => {
      appendRemoveStyle(true)
    })
})
onUnmounted(() => {
    if (eventName) {
      // @ts-ignore
      window[eventName] = ''
    }
    appendRemoveStyle()
})
// 表单初始值
watch(
    () => props.value,
    (v: any) => {
      	v && setValue(v)
    },
    {
      	immediate: true
    }
)
// 表单options
watch(
    () => props.options,
    (v: any) => {
      	v && setOptions(v)
    }
)


/**
@ 作者: 秦东
@ 时间: 2024-11-20 09:49:13
@ 功能: 无流程数据更改
*/
const editSubmit = (params = {}) =>{
    let apiUrl = props.formData.config?.editUrl || "/systemapi/task_management/editCustomerTable"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            formatParams.versionId=props.appInfo.taskKey
            formatParams.formId=props.appInfo.taskId
			formatParams.appKey=props.appInfo.appKey
			formatParams.status=2
            // console.log("apiUrl--->",apiUrl)
			// console.log("submitParams--->",submitParams)
			// console.log("formatParams--->",formatParams)
            // 提交保存表单
			currencyFormApiSubmit(apiUrl, submitParams ?? formatParams)
				.then((res: any) => {
					// console.log("formatParams--111->",res)
						afterSubmit('success', res)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-20 11:45:21
@ 功能: 带流程的表单新增数据
*/
const submitFlow = (params = {}) =>{
    let apiUrl = props.formData.config?.addUrl || "/systemapi/task_management/createAppTask"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            formatParams.versionId=props.appInfo.taskId
            formatParams.formId=props.appInfo.taskKey
			formatParams.appKey=props.appInfo.appKey
			formatParams.status=2
            // console.log("apiUrl--->",apiUrl)
			// console.log("submitParams--->",submitParams)
			// console.log("formatParams--->",formatParams)
            // console.log("props.isWorkFlow --->",props.isWorkFlow )
            // 提交保存表单
			currencyFormApiSubmit(apiUrl, submitParams ?? formatParams)
				.then((data: any) => {
					// console.log("formatParams--111->",res)
                    if(props.isWorkFlow == 1){
                        afterSubmit('runFlow', data.data)
                    }else{
                        afterSubmit('success', data.data)
                    }
						
				})
				.catch(res => {
						afterSubmit('fail', res)
				})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-21 14:53:27
@ 功能: 重新提交
*/
const afreshSubmit = (params = {}) => {
    let apiUrl = "/systemapi/task_management/editCustomerTable"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            formatParams.versionId=props.appInfo.taskId
            formatParams.formId=props.appInfo.taskKey
			formatParams.appKey=props.appInfo.appKey
            currencyFormApiSubmit(apiUrl, submitParams ?? formatParams)
				.then((res: any) => {
                        afterSubmit('reapplyFlow', res)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
//保存草稿  只保存表单，不操作流程
const saveEditDraft = (params = {}) => {
    let apiUrl = "/systemapi/task_management/add_customer_form"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            formatParams.versionId=props.appInfo.taskId
            formatParams.formId=props.appInfo.taskKey
			formatParams.appKey=props.appInfo.appKey
            createAppTask(submitParams ?? formatParams)
				.then((data: any) => {
                        afterSubmit('draftRunFlow', data)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-22 08:28:15
@ 功能: 保存草稿箱
*/
const saveDraft = (params = {}) => {
    let apiUrl = "/systemapi/task_management/add_customer_form"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            formatParams.status = 1
            formatParams.versionId=props.appInfo.taskId
            formatParams.formId=props.appInfo.taskKey
			formatParams.appKey=props.appInfo.appKey
            createAppTask(submitParams ?? formatParams)
				.then((data: any) => {
                        afterSubmit('success', data)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-22 08:32:59
@ 功能: 再次保存草稿箱
*/
const saveDraftAgainSend = (params = {}) => {
    let apiUrl = "/systemapi/task_management/add_customer_form"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            formatParams.versionId=props.appInfo.taskId
            formatParams.formId=props.appInfo.taskKey
			formatParams.appKey=props.appInfo.appKey
            saveDraftAgain(submitParams ?? formatParams)
				.then((data: any) => {
                        afterSubmit('closePage', data)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-22 13:18:26
@ 功能: 申请修改
*/
const submitEditButton = (params = {}) => {
    let apiUrl = "/systemapi/task_management/applyForTableFormData"
    if (props.isSearch || !apiUrl || loading.value) {
		if (!props.isSearch && !apiUrl) {
			console.error(
				new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
			)
		}
		return
    }
    validate((valid: boolean, fields: any) => {
        if (valid) {
            const formatParams = Object.assign({}, fields, params)
            let submitParams
			const beforeSubmit = props.formData.events?.beforeSubmit
            if (beforeSubmit) {
				if (typeof beforeSubmit === 'function') {
					submitParams = beforeSubmit(formatParams, route)
				} else {
					submitParams = formatResult(formatParams, beforeSubmit)
				}
			}
			if (props.beforeSubmit && typeof props.beforeSubmit === 'string') {
				submitParams = formatResult(formatParams, props.beforeSubmit)
			} else if (typeof props.beforeSubmit === 'function') {
				submitParams = props.beforeSubmit(formatParams, route)
			}
			if (submitParams === false) {
				return
			}
            // formatParams.versionId=props.appInfo.taskId
            // formatParams.formId=props.appInfo.taskKey
			// formatParams.appKey=props.appInfo.appKey
            currencyFormApiSubmit(apiUrl, submitParams ?? formatParams)
				.then((data: any) => {
                        afterSubmit('success', data)
					})
					.catch(res => {
						afterSubmit('fail', res)
					})
        } else {
			// 没通过校验
			afterSubmit('validate', fields)
		}
    })
}



defineExpose({
    setOptions,
    setValue,
    getValue,
    validate,
    resetFields,
    getData,
    submit,
    editSubmit,
    submitFlow,
    afreshSubmit,
    saveEditDraft,
    saveDraftAgainSend,
    saveDraft
})
</script>
<template>
    <div v-loading="loading">
       
        <el-form
            v-bind="formData.form"
            ref="ruleForm"
            :model="model as any"
            :disabled="type === 3"
            class="add-form"
            :class="{
                'design-form': type === 5,
                'detail-form': type === 3 
            }"
        >
            <FormItemGroup :tableinfo="formData.form" :data="formData.list" :alldata="formData" />
            <slot></slot>
        </el-form>
    </div>
</template>
<style  lang='scss' scoped>

</style>