自定义APP自定义App数据通讯
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2102 lines
68 KiB

<!--
@ 作者: 秦东
@ 时间: 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 request from '@/utils/axios/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'
import { useAttrs,computed, onMounted, nextTick,ref,watch,onBeforeMount} from 'vue'
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 // 按钮点击事件
changeKeyVal?: Function; //监听表单值该表
}>(),
{
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) => {
//console.log(list)
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)
}
}
})
showOrHide("onMounted");
}
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, type, attribute, label }: any) => {
// console.log("表单组件值改变事件----------1-----key---->",key)
// console.log("表单组件值改变事件----------2-----value---->",value)
// console.log("表单组件值改变事件----------3-----data---->",data)
// console.log("表单组件值改变事件----------4-----tProp---->",tProp)
// console.log("表单组件值改变事件----------5-----type---->",type)
// console.log("表单组件值改变事件----------6------attribute--->",attribute)
// console.log("表单组件值改变事件----------7------label--->",label)
// console.log("表单组件值改变事件----------11-----model.value---->",model.value)
let fieldVal = {};
for (let i in model.value) {
if (i == key) {
fieldVal[i] = typeof value == "number" ? value.toString() : value;
} else {
fieldVal[i] =
typeof model.value[i] == "number" ? model.value[i].toString() : model.value[i];
}
// console.log("监听表单--constControlChange----------1--------->",i,model.value[i])
}
//数值主键看是否有计算
if (type == "digitpage") {
let oldFormConfig = props.formData.config;
let newFormConfig = props.formData.config.groupKey;
let odlHideField = props.formData.config.hideField;
delete props.formData.config.groupKey;
console.log(props.formData);
delete props.formData.config.hideField;
let sendInfo = {
fieldKey: key,
mathsFornula: props.formData.config,
keyVal: fieldVal,
};
// console.log("sendInfoe-2->",props.formData,props.formData)
currencyFormApiSubmit("/systemapi/maths/mathematicalCalculations", sendInfo)
.then((data: any) => {
// console.log("结果-->",data)
let formatRes: any = data.data;
// 比较适用通用表单,保存在服务端
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;
}
// console.log("停止数据请求--->",formatRes)
setValue(formatRes.result || formatRes);
nextTick(() => {
// 将dict保存,可用于从接口中设置表单组件options。
if (formatRes.dict && Object.keys(formatRes.dict).length) {
resultDict.value = formatRes.dict;
}
props.formData.config.groupKey = newFormConfig;
props.formData.config.hideField = odlHideField;
console.log(props.formData);
});
})
.finally(() => {
props.formData.config.groupKey = newFormConfig;
props.formData.config.hideField = odlHideField;
console.log(props.formData);
});
}
showOrHide(data);
if (typeof props.changeKeyVal === "function") {
props.changeKeyVal(key, value, type, attribute);
}
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)
})
getAsfs()
})
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)
}
})
}
//liwenxuan 241209 关联选项设置 显示隐藏效果 start
let mustBeHidden: any = [];
let newModelKeyArr: string[] = [];
function showOrHide(data: any) {
//console.log(data)
/*
企管部有当前用户,
当前用户是什么权限角色.
某表单某字段值大于等于小于不等于某个值
所需接口
接口1:当前用户是不是指定的权限角色
接口2:当前用户是否在指定的机构下或机构的祖先机构下
接口3:本表单(关联关联表单的表单)的某字段的当前值大于等于小于不等于指定的值???也许不需要接口呢?
*/
//关联表单隐藏条件判定 start
for (let i = 0; i < props.formData.list.length; i++) {
if (props.formData.list[i].type == "associatedForms" && formProps.value.type != 5) {
//console.log(props.formData.list[i].name)
let asfHideCondition = props.formData.list[i].control.hideGongShi.mathsFormula;
const leftOperatorsAndRight = splitString(asfHideCondition);
if (leftOperatorsAndRight) {
let leftArr = leftOperatorsAndRight.left.split(":");
//console.log(leftArr)
if (data == "onMounted" || (leftArr[0] == "formField" && leftArr.length == 3)) {
if (data == "onMounted" || (data != "kong" && data.name == leftArr[2])) {
//关联表单隐藏相关的值发生了变化
if (leftOperatorsAndRight.operator == "包含") {
if (leftOperatorsAndRight.right == "当前用户") {
if (leftOperatorsAndRight.left.startsWith("orgOrPerson")) {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
} else if (leftOperatorsAndRight.left.startsWith("roleid")) {
//接口1
queryHideRoleCondition(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
//alert(data)
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
}
}
} else if (leftOperatorsAndRight.operator == "不包含") {
if (leftOperatorsAndRight.right == "当前用户") {
if (leftOperatorsAndRight.left.startsWith("orgOrPerson")) {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == false) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
} else if (leftOperatorsAndRight.left.startsWith("roleid")) {
//接口1
queryHideRoleCondition(leftOperatorsAndRight).then(({ data }) => {
if (data == false) {
//alert(data)
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
}
}
} else {
//console.log(leftOperatorsAndRight)
if (leftOperatorsAndRight.right == "当前用户") {
if (leftOperatorsAndRight.operator == "==") {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
} else if (leftOperatorsAndRight.operator == "!=") {
//接口2
queryIfOrgOrPerson(leftOperatorsAndRight).then(({ data }) => {
if (data == true) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
mustBeHidden.push(props.formData.list[i].name);
}
});
}
} else {
//接口3
//console.log(leftOperatorsAndRight)
//console.log(data)
if (data.name == leftArr[2]) {
console.log("ghasdhasdfhhsadhasd");
console.log(props.formData.list[i].name);
nextTick(() => {
console.log(model.value[leftArr[2]]);
if (leftOperatorsAndRight.operator == "==") {
if (model.value[leftArr[2]] == leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == "!=") {
if (model.value[leftArr[2]] != leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == ">=") {
if (model.value[leftArr[2]] >= leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == ">") {
if (model.value[leftArr[2]] > leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == "<") {
if (model.value[leftArr[2]] < leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
} else if (leftOperatorsAndRight.operator == "<=") {
if (model.value[leftArr[2]] <= leftOperatorsAndRight.right) {
props.formData.config.hideField = addStringIfNotExists(
props.formData.config.hideField,
props.formData.list[i].name
);
} else {
props.formData.config.hideField = removeStringIfExists(
props.formData.config.hideField,
props.formData.list[i].name
);
}
}
});
}
}
}
}
}
}
}
}
//关联表单隐藏条件判定 end
//liwenxuan 关联选项设置效果实现 start
/* console.log("-1-constControlChange-->",props.formData)
console.log("监听表单-2-constControlChange-->",key)
console.log("监听表单-3-constControlChange-->", value)
console.log("监听表单-4-constControlChange-->",data)
console.log("监听表单-5-constControlChange-->",type)
console.log("监听表单-6-constControlChange-->",attribute) */
//得到当前表单各选项的值
//props.formData.config.hideField.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
//得到所有配置对象,包括radio,checkbox,select,switch
const radioSelectShowConfigArr = [];
const checkboxShowConfigArr = [];
const switchShowConfigArr = [];
//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr2。----用于获取所有出现在配置中的字段。
const radioSelectArr2: any[] = [];
//20240815 关联选项设置的隐藏效果嵌套在内时不生效的问题修复 liwenxuan start
//console.log(props.formData.list) newModelKeyArr
for (let i = 0; i < props.formData.list.length; i++) {
if (
props.formData.list[i].type == "radio" ||
props.formData.list[i].type == "select" ||
props.formData.list[i].type == "checkbox" ||
props.formData.list[i].type == "switch"
) {
props.formData.config.hideField = [];
if (
props.formData.list[i].type == "radio" ||
props.formData.list[i].type == "select"
) {
radioSelectShowConfigArr.push(props.formData.list[i].control.glxxsz);
} else if (props.formData.list[i].type == "checkbox") {
checkboxShowConfigArr.push(props.formData.list[i].control.glxxszForCheckBox);
} else if (props.formData.list[i].type == "switch") {
switchShowConfigArr.push(props.formData.list[i].control.glxxszSwitch);
}
} else if (
props.formData.list[i].type == "card" ||
props.formData.list[i].type == "flex" ||
props.formData.list[i].type == "div" ||
props.formData.list[i].type == "table"
) {
props.formData.config.hideField = [];
let a = JSON.parse(JSON.stringify(props.formData.list[i].list));
for (let w = 0; w < a.length; w++) {
if (a[w].type == "radio" || a[w].type == "select") {
//console.log(a[w])
radioSelectShowConfigArr.push(a[w].control.glxxsz);
} else if (a[w].type == "checkbox") {
checkboxShowConfigArr.push(a[w].control.glxxszForCheckBox);
} else if (a[w].type == "switch") {
switchShowConfigArr.push(a[w].control.glxxszSwitch);
}
newModelKeyArr.push(a[w].name);
}
} else if (props.formData.list[i].type == "grid") {
props.formData.config.hideField = [];
let columns = JSON.parse(JSON.stringify(props.formData.list[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "radio" || a.type == "select") {
radioSelectShowConfigArr.push(a.control.glxxsz);
} else if (a.type == "checkbox") {
checkboxShowConfigArr.push(a.control.glxxszForCheckBox);
} else if (a.type == "switch") {
switchShowConfigArr.push(a.control.glxxszSwitch);
}
newModelKeyArr.push(a.name);
}
}
}
} else if (props.formData.list[i].type == "tabs") {
//tabs标签页有可能再嵌套一层flex或者table
props.formData.config.hideField = [];
let columns = JSON.parse(JSON.stringify(props.formData.list[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "radio" || a.type == "select") {
radioSelectShowConfigArr.push(a.control.glxxsz);
} else if (a.type == "checkbox") {
checkboxShowConfigArr.push(a.control.glxxszForCheckBox);
} else if (a.type == "switch") {
switchShowConfigArr.push(a.control.glxxszSwitch);
} else if (a.type == "flex" || a.type == "table") {
if (a.list.length > 0) {
for (let m = 0; m < a.list.length; m++) {
let q = JSON.parse(JSON.stringify(a.list[m]));
//console.log(q)
if (q.type == "radio" || q.type == "select") {
radioSelectShowConfigArr.push(q.control.glxxsz);
} else if (q.type == "checkbox") {
checkboxShowConfigArr.push(q.control.glxxszForCheckBox);
} else if (q.type == "switch") {
switchShowConfigArr.push(q.control.glxxszSwitch);
}
newModelKeyArr.push(q.name);
}
}
}
newModelKeyArr.push(a.name);
}
}
}
}
newModelKeyArr.push(props.formData.list[i].name);
}
newModelKeyArr = Array.from(new Set(newModelKeyArr));
//20240815 关联选项设置的隐藏效果嵌套在内时不生效的问题修复 liwenxuan end
//console.log(radioSelectShowConfigArr)
//数组深拷贝
const radioSelectShowConfigArr2 = JSON.parse(JSON.stringify(radioSelectShowConfigArr));
const checkboxShowConfigArr2 = JSON.parse(JSON.stringify(checkboxShowConfigArr));
const switchShowConfigArr2 = JSON.parse(JSON.stringify(switchShowConfigArr));
/* console.log(radioSelectShowConfigArr2)
console.log(checkboxShowConfigArr2) */
//console.log("fodijafkjlsdhoidnfoidshojhfeknsidjfoiewhofnosdifhjeonoidufeinkdsaofhe")
//console.log(switchShowConfigArr2)
if (radioSelectShowConfigArr2.length > 0) {
for (let i = 0; i < radioSelectShowConfigArr2.length; i++) {
if (radioSelectShowConfigArr2[i].length > 0) {
for (let j = 0; j < radioSelectShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(radioSelectShowConfigArr2[i][j]));
const optionValueJArr = jArr.optionValue;
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
radioSelectArr2.push({
//conditionFieldKey:jArr.conditionField,
//conditionFieldValue:optionValueJArr,
toShowFieldKey: fieldKeyStr,
});
}
}
}
}
}
}
//将出现在多选配置中的字段放入radioSelectArr2,radioSelectArr2是未去重的所有可能被隐藏的字段
if (checkboxShowConfigArr2.length > 0) {
for (let i = 0; i < checkboxShowConfigArr2.length; i++) {
//console.log(i)
if (checkboxShowConfigArr2[i].length > 0) {
for (let j = 0; j < checkboxShowConfigArr2[i].length; j++) {
//console.log(j)
//console.log(checkboxShowConfigArr2[i][j].showFields)
if (checkboxShowConfigArr2[i][j].showFields.length > 0) {
for (let n = 0; n < checkboxShowConfigArr2[i][j].showFields.length; n++) {
let fieldKeyArr = checkboxShowConfigArr2[i][j].showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
//console.log(fieldKeyStr)
radioSelectArr2.push({
toShowFieldKey: fieldKeyStr,
});
}
}
}
}
}
}
//将出现在开关配置中的字段放入radioSelectArr2,radioSelectArr2是未去重的所有可能被隐藏的字段
if (switchShowConfigArr2.length > 0) {
for (let i = 0; i < switchShowConfigArr2.length; i++) {
if (switchShowConfigArr2[i].length > 0) {
for (let j = 0; j < switchShowConfigArr2[i].length; j++) {
if (switchShowConfigArr2[i][j].showFields.length > 0) {
for (let n = 0; n < switchShowConfigArr2[i][j].showFields.length; n++) {
//console.log("99999999999999999999------"+switchShowConfigArr2[i][j].showFields[n])
let fieldKeyArr = switchShowConfigArr2[i][j].showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
//console.log(fieldKeyStr)
radioSelectArr2.push({
toShowFieldKey: fieldKeyStr,
});
}
}
}
}
}
}
//console.log("radioSelectArr2radioSelectArr2radioSelectArr2radioSelectArr2radioSelectArr2=======")
//console.log(radioSelectArr2)
//以showFields的处理过冒号的每个元素为key,其对应的optionValue为value,新建一个数组radioselectArr3 ---用于组装完整显示隐藏条件、
const radioSelectArr3: any[] = [];
if (radioSelectShowConfigArr2.length > 0) {
for (let i = 0; i < radioSelectShowConfigArr2.length; i++) {
if (radioSelectShowConfigArr2[i].length > 0) {
for (let j = 0; j < radioSelectShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(radioSelectShowConfigArr2[i][j]));
const optionValueJArr = jArr.optionValue;
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
if (jArr.showFields.length > 1) {
let arr1 = [];
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
arr1.push(fieldKeyStr);
}
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: arr1,
});
} else {
//等于1
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: [fieldKeyStr],
});
}
}
}
}
}
}
}
//console.log(radioSelectArr3)
//将多选配置也放入radioSelectArr3
if (checkboxShowConfigArr2.length > 0) {
for (let i = 0; i < checkboxShowConfigArr2.length; i++) {
if (checkboxShowConfigArr2[i].length > 0) {
for (let j = 0; j < checkboxShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(checkboxShowConfigArr2[i][j]));
const optionValueJArr = jArr.selectedOptions;
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
if (jArr.showFields.length > 1) {
let arr1 = [];
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
arr1.push(fieldKeyStr);
}
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: arr1,
});
} else {
//等于1
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: [fieldKeyStr],
});
}
}
}
}
}
}
}
//将开关配置也放入radioSelectArr3
if (switchShowConfigArr2.length > 0) {
for (let i = 0; i < switchShowConfigArr2.length; i++) {
if (switchShowConfigArr2[i].length > 0) {
for (let j = 0; j < switchShowConfigArr2[i].length; j++) {
//数组深拷贝
const jArr = JSON.parse(JSON.stringify(switchShowConfigArr2[i][j]));
//console.log("111111111111111111111-----------"+JSON.stringify(switchShowConfigArr2[i][j]))
if (jArr.showFields != undefined && jArr.showFields.length > 0) {
const optionValueJArr =
typeof jArr.openValue == "undefined" ? jArr.offValue : jArr.openValue;
let arr1 = [];
for (let n = 0; n < jArr.showFields.length; n++) {
let fieldKeyArr = jArr.showFields[n].split(":");
let fieldKeyStr = fieldKeyArr[fieldKeyArr.length - 1];
//console.log(fieldKeyStr)
arr1.push(fieldKeyStr);
}
radioSelectArr3.push({
conditionFieldKey: jArr.conditionField,
conditionFieldValue: optionValueJArr,
toShowFieldKey: arr1,
});
}
}
}
}
}
//console.log(radioSelectArr3)
//暂时使用的隐藏数组,数据敲定后赋给props.formData.config.hideField
let hideFieldArr: any[] = [];
//但凡配置条件的字段先放入隐藏数组中
for (let i = 0; i < radioSelectArr2.length; i++) {
hideFieldArr.push(radioSelectArr2[i].toShowFieldKey);
}
hideFieldArr = Array.from(new Set(hideFieldArr));
const defaultHideFields: any[] = JSON.parse(JSON.stringify(hideFieldArr));
for (let i = 0; i < defaultHideFields.length; i++) {
hideFieldArr = recursionToGetFinallyHideFields(
hideFieldArr,
radioSelectArr3,
defaultHideFields
);
}
hideFieldArr = recursionToGetFinallyHideFields(
hideFieldArr,
radioSelectArr3,
defaultHideFields
);
props.formData.config.hideField?.push(...mustBeHidden);
//console.log(props.formData.config.hideField)
//props.formData.config?.hideField?.push("nin2yuan4yi4wei4wo3menda3fen1ma101939")
//console.log("监听表单--constControlChange-->",key, value, data, tProp,type,attribute)//liwenxuan
}
interface hideFieldConditionArritem {
toShow: string;
conditions: any[];
}
const recursionToGetFinallyHideFields = (
hideFieldArr: any[],
radioSelectArr3: string | any[],
defaultHideFields: any[]
) => {
nextTick(() => {
//console.log(model.value)
/* console.log("showFieldskey,optionValuevalue,radioselectArr3 --- ")
console.log(radioSelectArr3)
console.log("当前表单的值-------------------")
console.log(model.value)
console.log("默认隐藏的字段-----------------")
console.log(defaultHideFields) */
let modelKeyArr = []; //所有字段
for (let i = 0; i < props.formData.list.length; i++) {
modelKeyArr.push(props.formData.list[i].name + "");
}
modelKeyArr = newModelKeyArr;
//console.log(modelKeyArr)
/* console.log("modelKeyArr^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^")
console.log(modelKeyArr) */
//console.log("当前表单的值-------------------")
//console.log(model.value)
//当前处于显示状态的默认隐藏的字段
let nowShowingDefaultHideFieldArr = defaultHideFields.filter(
(a) => !hideFieldArr.includes(a)
);
//当前所有处于显示状态的字段
let nowShowingFieldArr = modelKeyArr.filter((a) => !hideFieldArr.includes(a));
//以被默认隐藏的每个字段为key,显示该字段的所有条件的数组作为value,来作为该数组的每一项。
const hideFieldConditionArr: hideFieldConditionArritem[] = [];
//保存应多选条件造成的应隐藏的字段
let hideFieldsFromCheckbox: string[] = [];
for (let i = 0; i < hideFieldArr.length; i++) {
hideFieldConditionArr.push({
toShow: hideFieldArr[i],
conditions: [],
});
}
//console.log(hideFieldConditionArr)
//遍历所有配置条件数组radioSelectArr3,当radioSelectArr3 [ i ] . toshowFieldKey 【i】==hideFieldArr【i】时
for (let i = 0; i < radioSelectArr3.length; i++) {
for (let j = 0; j < radioSelectArr3[i].toShowFieldKey.length; j++) {
for (let n = 0; n < hideFieldConditionArr.length; n++) {
if (radioSelectArr3[i].toShowFieldKey[j] == hideFieldConditionArr[n].toShow) {
if (Array.isArray(radioSelectArr3[i].conditionFieldValue)) {
let valStr = "";
for (let x = 0; x < radioSelectArr3[i].conditionFieldValue.length; x++) {
valStr = valStr + radioSelectArr3[i].conditionFieldValue[x] + ",";
}
hideFieldConditionArr[n].conditions.push({
conditionFrom: "radioOrSelect", //本条件来自于单选或者下拉
condition: [
{
//条件详细信息//当表单字段conditionField的值为conditionFieldValue时,显示hideFieldConditionArr[n]
conditionField: radioSelectArr3[i].conditionFieldKey,
conditionFieldValue: valStr,
},
],
});
} else {
hideFieldConditionArr[n].conditions.push({
conditionFrom: "radioOrSelect", //本条件来自于单选或者下拉
condition: [
{
//条件详细信息//当表单字段conditionField的值为conditionFieldValue时,显示hideFieldConditionArr[n]
conditionField: radioSelectArr3[i].conditionFieldKey,
conditionFieldValue: radioSelectArr3[i].conditionFieldValue, //
},
],
});
}
}
}
}
}
//console.log(hideFieldConditionArr);
//要显示的和其满足显示条件的个数.
//let showfieldsCountX = [];
for (let i = 0; i < hideFieldConditionArr.length; i++) {
let x = 0; //满足显示条件的次数
let toshow = hideFieldConditionArr[i].toShow;
let conditions = hideFieldConditionArr[i].conditions;
//console.log(conditions)
for (let j = 0; j < conditions.length; j++) {
let conditionField = conditions[j].condition[0].conditionField;
let conditionFieldValue = conditions[j].condition[0].conditionFieldValue;
//console.log(conditionField)
if (conditionFieldValue.includes(",")) {
//来自多选
let conditionFieldValueArr = conditionFieldValue.split(",");
conditionFieldValueArr = conditionFieldValueArr.slice(0, -1);
/* console.log(conditionFieldValueArr)
console.log(conditionFieldValue) */
for (let n = 0; n < modelKeyArr.length; n++) {
if (modelKeyArr[n] == conditionField) {
//let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]];
if (trueValue.length > 0 && arrayEqual(trueValue, conditionFieldValueArr)) {
//此时满足了条件,但是必须看一下conditionField有没有被隐藏.如果被隐藏了,则x不能增加.
//alert("多选条件成功触发")
/* console.log(conditionField)
console.log(toshow) */
let flag = false; //其依赖的选项的父字段是否被隐藏.默认没被隐藏,
//如果此时的conditionField有可能被隐藏且已被隐藏,x不能++
/* for(let a = 0;a<hideFieldConditionArr.length;a++){
if(hideFieldConditionArr[a].toShow==conditionField){//当conditions.length>1说明时多选,=1说明是单选.
for(let b = 0;b<hideFieldConditionArr[a].conditions.length;b++){
for(let c = 0;c<hideFieldConditionArr[a].conditions[b].condition.length;c++){
if(hideFieldConditionArr[a].conditions[b].condition[c]==conditionField){
//暂时写到这里,先去组装多选条件数组.
//console.log(1)
}
}
}
}
} */
if (flag == false) {
x++;
hideFieldsFromCheckbox.push(toshow);
}
}
}
}
} else {
//来自单选下拉
//console.log(modelKeyArr)
for (let n = 0; n < modelKeyArr.length; n++) {
if (modelKeyArr[n] == conditionField) {
//let count_1 = 0;
let trueValue = model.value[modelKeyArr[n]];
if (trueValue == conditionFieldValue) {
let flag = false; //其依赖的选项的父字段是否被隐藏.默认没被隐藏,
if (flag == false) {
x++;
}
}
}
}
}
}
//console.log(x,hideFieldArr,toshow)
if (x > 0) {
hideFieldArr = hideFieldArr.filter((item: string) => item != toshow);
}
//console.log(x,hideFieldArr)
}
//将隐藏的字段值重置
for (let i = 0; i < hideFieldArr.length; i++) {
//console.log(i+"dsfafdasdfasfsda===="+hideFieldArr[i]+"=====jiuopfdsahokjuhuiofadshuiofadsjbknfdjisahuifhjken wij================"+model.value[hideFieldArr[i]])
if (
typeof model.value[hideFieldArr[i]] === "string" ||
typeof model.value[hideFieldArr[i]] === "number"
) {
model.value[hideFieldArr[i]] = "";
} else if (model.value[hideFieldArr[i]] instanceof Array) {
model.value[hideFieldArr[i]] = [];
} else if (typeof model.value[hideFieldArr[i]] == "boolean") {
model.value[hideFieldArr[i]] = false;
}
}
//默认隐藏的字段中目前被显示出来的
nowShowingDefaultHideFieldArr = defaultHideFields.filter(
(a) => !hideFieldArr.includes(a)
);
/* console.log("(((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((())))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))")
console.log(nowShowingDefaultHideFieldArr) */
/* for(let i = 0;i< nowShowingDefaultHideFieldArr.length; i++){
//当被显示出来的字段涉及到的conditionfield已经被隐藏了时,其x应-1,如果x-1后造成该field被隐藏,应递归重新敲定hideFieldArr
if()
} */
//console.log("条件筛选过后最终要隐藏的字段-----"+hideFieldArr)
//编辑表单页不隐藏任何字段。
if (formProps.value.type != 5) {
//console.log(hideFieldArr)
props.formData.config.hideField?.push(...hideFieldArr); //实际造成隐藏效果
}
});
return hideFieldArr;
};
function addStringIfNotExists(arr: string[], str: string) {
if (!arr.includes(str)) {
arr.push(str);
}
return arr;
}
function removeStringIfExists(arr: string[], str: string) {
let newArr = [];
for (let item of arr) {
if (item !== str) {
newArr.push(item);
}
}
return newArr;
}
function queryIfOrgOrPerson(obj: { left: string; operator: string; right: string }) {
return request({
url: "/javasys/lowCode/AssociatedForms/queryIfOrgOrPerson",
method: "post",
data: obj,
});
}
function queryHideRoleCondition(obj: { left: string; operator: string; right: string }) {
return request({
url: "/javasys/lowCode/AssociatedForms/queryHideRoleCondition",
method: "post",
data: obj,
});
}
function splitString(str: string) {
const operators = ["==", ">", ">=", "<", "<=", "!=", "不包含", "包含"];
for (let operator of operators) {
if (str.includes(operator)) {
let index = str.indexOf(operator);
let left = str.slice(0, index).trim();
let right = str.slice(index + operator.length).trim();
return { left, operator, right };
}
}
}
function arrayEqual(a: string[], b: any[]) {
//alert("开始比较")
//先将数组排序
let a_ = JSON.parse(JSON.stringify(a));
for (let i = 0; i < a_.length; i++) {
a_[i] = a_[i] + "";
}
//console.log(a_)
//console.log(b)
a_ = a_.sort();
b = b.sort();
//判断数组长度是否相等,若不相等返回false
if (a_.length != b.length) return false;
//逐个比较数组元素
for (var i = 0; i < a_.length; ++i) {
if (a_[i] !== b[i]) return false;
}
return true;
}
//liwenxuan 241209 关联选项设置 显示隐藏效果 end
//liwenxuan 241217 数据范围动态 start
let asfRangeDoubleCondiChangeObj = ref();
provide("asfRangeDoubleCondiChangeObj", asfRangeDoubleCondiChangeObj);
const asfs: any[] = [];
const tables: any[] = [];
let oldModelStr = "";
watch(
() => model.value,
(newVal) => {
//console.log(1)
let currentChangeKey = "";
const newModelStr = JSON.stringify(newVal);
let oldModelStr1 = oldModelStr;
if (newModelStr !== oldModelStr1 && oldModelStr1 != "") {
let oldVal = JSON.parse(oldModelStr1);
/* console.log(oldVal)
console.log(newVal) */
for (const key in newVal) {
if (JSON.stringify(newVal[key]) !== JSON.stringify(oldVal[key])) {
currentChangeKey = key;
}
}
}
let rangeFormulaArr = [];
if (asfs.length > 0) {
/* console.log(currentChangeKey)
console.log(asfs) */
asfs.forEach((element: any) => {
let asfName = element.name;
if (
element.control.dataRangeGongShi &&
element.control.dataRangeGongShi.mathsFormula &&
element.control.dataRangeGongShi.mathsFormula.length > 0
) {
let asfRangeDoubleCondi = element.control.dataRangeGongShi.mathsFormula;
if (currentChangeKey != "") {
let a = asfRangeDoubleCondi.split(":");
let field = a[a.length - 1];
if (currentChangeKey == field) {
let toShowDoubleCondiValVal = model.value[currentChangeKey];
//console.log("关联表单"+asfName+"应该更新其选项,只显示doubleCondiVal为"+toShowDoubleCondiValVal+"的选项")
let obj = {
asfName: asfName,
toShowDoubleCondiValVal: toShowDoubleCondiValVal,
};
asfRangeDoubleCondiChangeObj.value = obj;
}
}
}
});
}
oldModelStr = newModelStr;
},
{ deep: true }
);
onBeforeMount(() => {
getAsfs()
getTree1()
})
const treeUrl = '/javasys/lowCode/transfer/getOrgAndManTree'
const orgAndManTree = ref()
function getOrgAndManTree() {
return request({
url: treeUrl,
method: 'post',
});
}
function getTree1() {
getOrgAndManTree().then(({ data }) => {
orgAndManTree.value = data
})
}
const rangedUserTrees: any[] = [];
function getAsfs() {
setTimeout(() => {
let dataList = ref({});
dataList.value = props.formData.list;
if (dataList && Array.isArray(dataList.value) && dataList.value.length > 0) {
for (let i = 0; i < dataList.value.length; i++) {
//console.log(dataList.value[i])
if (dataList.value[i].type == "associatedForms") {
asfs.push(dataList.value[i]);
} else if(dataList.value[i].type == "expand-user"){
rangedUserTrees.push(dataList.value[i])
} else if (
dataList.value[i].type == "card" ||
dataList.value[i].type == "flex" ||
dataList.value[i].type == "div" ||
dataList.value[i].type == "table"
) {
if (dataList.value[i].type == "table") {
tables.push(dataList.value[i]);
}
dataList.value[i].list.forEach((element: any) => {
if (element.type == "associatedForms") {
asfs.push(element);
}else if(element.type == "expand-user"){
rangedUserTrees.push(element)
}
});
} else if (dataList.value[i].type == "grid") {
let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "associatedForms") {
asfs.push(a);
}else if (a.type == "expand-user") {
rangedUserTrees.push(a);
}
}
}
}
} else if (dataList.value[i].type == "tabs") {
//tabs标签页有可能再嵌套一层flex或者table
let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "associatedForms") {
asfs.push(a);
}else if(a.type == "expand-user"){
rangedUserTrees.push(a);
} else if (a.type == "flex" || a.type == "table") {
if (a.type == "table") {
tables.push(dataList.value[i]);
}
if (a.list.length > 0) {
for (let m = 0; m < a.list.length; m++) {
let q = JSON.parse(JSON.stringify(a.list[m]));
if (q.type == "associatedForms") {
asfs.push(q);
}else if (q.type == "expand-user") {
rangedUserTrees.push(q);
}
}
}
}
}
}
}
}
}
}
}, 500);
}
/* function getAsfs() {
setTimeout(() => {
let dataList = ref({});
dataList.value = props.formData.list;
if (dataList && Array.isArray(dataList.value) && dataList.value.length > 0) {
for (let i = 0; i < dataList.value.length; i++) {
if (dataList.value[i].type == "associatedForms") {
asfs.push(dataList.value[i]);
} else if (
dataList.value[i].type == "card" ||
dataList.value[i].type == "flex" ||
dataList.value[i].type == "div" ||
dataList.value[i].type == "table"
) {
if (dataList.value[i].type == "table") {
tables.push(dataList.value[i]);
}
dataList.value[i].list.forEach((element: any) => {
if (element.type == "associatedForms") {
asfs.push(element);
}
});
} else if (dataList.value[i].type == "grid") {
let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "associatedForms") {
asfs.push(a);
}
}
}
}
} else if (dataList.value[i].type == "tabs") {
//tabs标签页有可能再嵌套一层flex或者table
let columns = JSON.parse(JSON.stringify(dataList.value[i].columns));
if (columns.length > 0) {
for (let z = 0; z < columns.length; z++) {
for (let x = 0; x < columns[z].list.length; x++) {
let a = JSON.parse(JSON.stringify(columns[z].list[x]));
if (a.type == "associatedForms") {
asfs.push(a);
} else if (a.type == "flex" || a.type == "table") {
if (a.type == "table") {
tables.push(dataList.value[i]);
}
if (a.list.length > 0) {
for (let m = 0; m < a.list.length; m++) {
let q = JSON.parse(JSON.stringify(a.list[m]));
if (q.type == "associatedForms") {
asfs.push(q);
}
}
}
}
}
}
}
}
}
}
}, 500);
} */
//liwenxuan 241217 数据范围动态 end
defineExpose({
setOptions,
setValue,
getValue,
validate,
resetFields,
getData,
submit,
editSubmit,
submitFlow,
afreshSubmit,
saveEditDraft,
saveDraftAgainSend,
saveDraft
})
</script>
1 year ago
<template>
<div v-loading="loading">
6 months ago
<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" :org-and-man-tree="orgAndManTree" />
<slot></slot>
</el-form>
</div>
</template>
<style lang='scss' scoped></style>