fix: 使用form-create内置方法修复函数方法JSON解析失败
parent
ff7beb6db2
commit
47863e8d22
|
|
@ -2,6 +2,7 @@
|
||||||
* 针对 https://github.com/xaboy/form-create-designer 封装的工具类
|
* 针对 https://github.com/xaboy/form-create-designer 封装的工具类
|
||||||
*/
|
*/
|
||||||
import { isRef } from 'vue'
|
import { isRef } from 'vue'
|
||||||
|
import formCreate from '@form-create/element-ui'
|
||||||
|
|
||||||
// 编码表单 Conf
|
// 编码表单 Conf
|
||||||
export const encodeConf = (designerRef: object) => {
|
export const encodeConf = (designerRef: object) => {
|
||||||
|
|
@ -24,7 +25,7 @@ export const encodeFields = (designerRef: object) => {
|
||||||
export const decodeFields = (fields: string[]) => {
|
export const decodeFields = (fields: string[]) => {
|
||||||
const rule: object[] = []
|
const rule: object[] = []
|
||||||
fields.forEach((item) => {
|
fields.forEach((item) => {
|
||||||
rule.push(JSON.parse(item))
|
rule.push(formCreate.parseJson(item))
|
||||||
})
|
})
|
||||||
return rule
|
return rule
|
||||||
}
|
}
|
||||||
|
|
@ -32,7 +33,7 @@ export const decodeFields = (fields: string[]) => {
|
||||||
// 设置表单的 Conf 和 Fields,适用 FcDesigner 场景
|
// 设置表单的 Conf 和 Fields,适用 FcDesigner 场景
|
||||||
export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
|
export const setConfAndFields = (designerRef: object, conf: string, fields: string) => {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
designerRef.value.setOption(JSON.parse(conf))
|
designerRef.value.setOption(formCreate.parseJson(conf))
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
designerRef.value.setRule(decodeFields(fields))
|
designerRef.value.setRule(decodeFields(fields))
|
||||||
}
|
}
|
||||||
|
|
@ -49,154 +50,10 @@ export const setConfAndFields2 = (
|
||||||
detailPreview = detailPreview.value
|
detailPreview = detailPreview.value
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修复所有函数类型(解决设计器保存后函数变成字符串的问题)。例如说:
|
|
||||||
// https://t.zsxq.com/rADff
|
|
||||||
// https://t.zsxq.com/ZfbGt
|
|
||||||
// https://t.zsxq.com/mHOoj
|
|
||||||
// https://t.zsxq.com/BSylB
|
|
||||||
const option = JSON.parse(conf)
|
|
||||||
const rule = decodeFields(fields)
|
|
||||||
// 🔧 修复所有函数类型 - 解决设计器保存后函数变成字符串的问题
|
|
||||||
const fixFunctions = (obj: any) => {
|
|
||||||
if (obj && typeof obj === 'object') {
|
|
||||||
Object.keys(obj).forEach((key) => {
|
|
||||||
// 检查是否是函数相关的属性
|
|
||||||
if (isFunctionProperty(key)) {
|
|
||||||
// 如果不是函数类型,重新构建为函数
|
|
||||||
if (typeof obj[key] !== 'function') {
|
|
||||||
obj[key] = createDefaultFunction(key)
|
|
||||||
}
|
|
||||||
} else if (typeof obj[key] === 'object' && obj[key] !== null) {
|
|
||||||
// 递归处理嵌套对象
|
|
||||||
fixFunctions(obj[key])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 判断是否是函数属性
|
|
||||||
const isFunctionProperty = (key: string): boolean => {
|
|
||||||
const functionKeys = [
|
|
||||||
'beforeFetch', // 请求前处理
|
|
||||||
'afterFetch', // 请求后处理
|
|
||||||
'onSubmit', // 表单提交
|
|
||||||
'onReset', // 表单重置
|
|
||||||
'onChange', // 值变化
|
|
||||||
'onInput', // 输入事件
|
|
||||||
'onClick', // 点击事件
|
|
||||||
'onFocus', // 获取焦点
|
|
||||||
'onBlur', // 失去焦点
|
|
||||||
'onMounted', // 组件挂载
|
|
||||||
'onCreated', // 组件创建
|
|
||||||
'onReload', // 重新加载
|
|
||||||
'remoteMethod', // 远程搜索方法
|
|
||||||
'parseFunc', // 解析函数
|
|
||||||
'validator', // 验证器
|
|
||||||
'asyncValidator', // 异步验证器
|
|
||||||
'formatter', // 格式化函数
|
|
||||||
'parser', // 解析函数
|
|
||||||
'beforeUpload', // 上传前处理
|
|
||||||
'onSuccess', // 成功回调
|
|
||||||
'onError', // 错误回调
|
|
||||||
'onProgress', // 进度回调
|
|
||||||
'onPreview', // 预览回调
|
|
||||||
'onRemove', // 移除回调
|
|
||||||
'onExceed', // 超出限制回调
|
|
||||||
'filterMethod', // 过滤方法
|
|
||||||
'sortMethod', // 排序方法
|
|
||||||
'loadData', // 加载数据
|
|
||||||
'renderContent', // 渲染内容
|
|
||||||
'render' // 渲染函数
|
|
||||||
]
|
|
||||||
// 检查是否以函数相关前缀开头
|
|
||||||
const functionPrefixes = ['on', 'before', 'after', 'handle']
|
|
||||||
return functionKeys.includes(key) || functionPrefixes.some((prefix) => key.startsWith(prefix))
|
|
||||||
}
|
|
||||||
// 根据函数名创建默认函数
|
|
||||||
const createDefaultFunction = (key: string): Function => {
|
|
||||||
switch (key) {
|
|
||||||
case 'beforeFetch':
|
|
||||||
return (config: any) => {
|
|
||||||
// 添加 Token 认证头。例如说:
|
|
||||||
// https://t.zsxq.com/hK3FO
|
|
||||||
const token = localStorage.getItem('token')
|
|
||||||
if (token) {
|
|
||||||
config.headers = {
|
|
||||||
...config.headers,
|
|
||||||
Authorization: 'Bearer ' + token
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 添加通用请求头
|
|
||||||
config.headers = {
|
|
||||||
...config.headers,
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-Requested-With': 'XMLHttpRequest'
|
|
||||||
}
|
|
||||||
// 添加时间戳防止缓存
|
|
||||||
config.params = {
|
|
||||||
...config.params,
|
|
||||||
_t: Date.now()
|
|
||||||
}
|
|
||||||
return config
|
|
||||||
}
|
|
||||||
case 'afterFetch':
|
|
||||||
return (data: any) => {
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
case 'onSubmit':
|
|
||||||
return (_formData: any) => {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
case 'onReset':
|
|
||||||
return () => {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
case 'onChange':
|
|
||||||
return (_value: any, _oldValue: any) => {}
|
|
||||||
case 'remoteMethod':
|
|
||||||
return (query: string) => {
|
|
||||||
console.log('remoteMethod被调用:', query)
|
|
||||||
}
|
|
||||||
case 'parseFunc':
|
|
||||||
return (data: any) => {
|
|
||||||
// 默认解析逻辑:如果是数组直接返回,否则尝试获取list属性
|
|
||||||
if (Array.isArray(data)) {
|
|
||||||
return data
|
|
||||||
}
|
|
||||||
return data?.list || data?.data || []
|
|
||||||
}
|
|
||||||
case 'validator':
|
|
||||||
return (_rule: any, _value: any, callback: Function) => {
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
case 'beforeUpload':
|
|
||||||
return (_file: any) => {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
default:
|
|
||||||
// 通用默认函数
|
|
||||||
return (...args: any[]) => {
|
|
||||||
// 对于事件处理函数,返回true表示继续执行
|
|
||||||
if (key.startsWith('on') || key.startsWith('handle')) {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
// 对于其他函数,返回第一个参数(通常是数据传递)
|
|
||||||
return args[0]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 修复 option 中的所有函数
|
|
||||||
fixFunctions(option)
|
|
||||||
// 修复 rule 中的所有函数(包括组件的 props)
|
|
||||||
if (Array.isArray(rule)) {
|
|
||||||
rule.forEach((item: any) => {
|
|
||||||
fixFunctions(item)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
detailPreview.option = option
|
detailPreview.option = formCreate.parseJson(conf)
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
detailPreview.rule = rule
|
detailPreview.rule = decodeFields(fields)
|
||||||
|
|
||||||
if (value) {
|
if (value) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue