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.
1096 lines
30 KiB
1096 lines
30 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-03 13:43:43
|
|
@ 备注: 表格
|
|
-->
|
|
<script lang='ts' setup>
|
|
import '@/assets/scss/element-var.scss'
|
|
import '@/assets/scss/index.scss'
|
|
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
|
|
import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { nodeFlow,conditionInfo,nodelPeoples } from '@/api/taskapi/types'
|
|
import {
|
|
constGetControlByName,
|
|
constSetFormOptions,
|
|
constFormBtnEvent,
|
|
constControlChange,
|
|
constFormProps,
|
|
appendOrRemoveStyle
|
|
} from '@/api/DesignForm/utils'
|
|
import formatResult from '@/utils/DesignForm/formatResult'
|
|
import formChangeValue from '@/utils/DesignForm/formChangeValue'
|
|
import { judgeSubmitCancel,gainRunFlowStart,startRunFlow,saveDraftAgain,afreshAppSubmit } from '@/api/DesignForm/requestapi'
|
|
import { notAsA_BasisForJudgment,asAnApprovalActionControl,fixedValueControl,timeControl,timeEquation,submitButton, afreshSubmitButton } from '@/utils/workflow/const'
|
|
import { jsonParseStringify } from '@/utils/DesignForm'
|
|
//通用提交
|
|
import { currencyFormApiSubmit,realTimeUpdateFlow,createAppTask } from '@/api/taskapi/management'
|
|
|
|
import FormGroup from '@/components/DesignForm/public/form/formGroup.vue'
|
|
import FlowStep from '@/views/taskplatform/taskmanagement/flowStep.vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
formData: FormData
|
|
type?: number // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
|
|
numrun?: number //1：获取；非1：不变
|
|
disabled?: boolean // 禁用表单提交
|
|
requestUrl?: string // 编辑数据请求url
|
|
beforeRequest?: Function // 请求编辑数据前参数处理方法，可对请求参数处理
|
|
afterResponse?: Function | string // 请求数据加载完成后数据处理方法，可对返回数据处理
|
|
addUrl?: string // 表单数据新增提交保存url
|
|
editUrl?: string // 表单数据修改保存提交url
|
|
beforeSubmit?: Function | string // 表单提交前数据处理，可对提交数据处理，新增和保存都会触发
|
|
afterSubmit?: Function // 表单提交后，默认提示提交结果，可return false阻止提示
|
|
closeAppSubmit?: Function //关闭拉窗
|
|
changeKeyVal?: Function //监听表单值该表
|
|
anewSubmit?: Function //重新提交表单
|
|
saveDraftPage?: Function //保存草稿
|
|
saveEditFormInfo?: Function //保存草稿 只改表单不操作流程
|
|
sendDraftSubmit?: Function //草稿提交审批
|
|
submitEdit?: Function //提交修改数据申请
|
|
value?: { [key: string]: any } // 表单初始值，同setValue
|
|
options?: { [key: string]: any } // 表单组件选项，同setOptions
|
|
dict?: object // 固定匹配的字典
|
|
isSearch?: boolean // 列表里作为筛选使用
|
|
isWorkFlow?: number //
|
|
flowkey?: string //
|
|
groupid?: string //
|
|
signCode?: string //
|
|
versionId?: string //
|
|
mastesformjson?: string //
|
|
}>(),
|
|
{
|
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
|
|
numrun:2,
|
|
formData: () => {
|
|
return {
|
|
list: [],
|
|
form: {},
|
|
config: {
|
|
style:''
|
|
},
|
|
styles:{
|
|
divStyle:{},
|
|
labelStyle:{},
|
|
inputStyle:{}
|
|
}
|
|
}
|
|
},
|
|
dict: () => {
|
|
return {}
|
|
},
|
|
isSearch: false,
|
|
issave:{
|
|
type:Boolean,
|
|
default:true
|
|
},
|
|
isWorkFlow:2,
|
|
flowkey:"",
|
|
groupid:"",
|
|
signCode:"",
|
|
mastesformjson:"",
|
|
}
|
|
)
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'btnClick', type: string): void
|
|
(e: 'change', val: any): void // 表单组件值发生变化时
|
|
(e: 'update:issave', type: boolean): void
|
|
(e: 'closePage', type: string): void
|
|
(e: 'optionsValue3Get3', val: any,fieldName: string): void
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
//工作流相关
|
|
const flowLoading = ref(false) //loading
|
|
const flowFactor = reactive<conditionInfo[]>([]) //表单组件
|
|
const flowMap = ref<any[]>(); //工作流
|
|
const nextStep = ref<number>(0);
|
|
const currentProgress = ref<number>(1);
|
|
const nodeKey = ref<string>('');
|
|
const ruleForm = ref(); //表单
|
|
//获取工作流条件
|
|
const gainFlowChart = reactive<nodeFlow>({
|
|
id:props.flowkey
|
|
})
|
|
const nodelUserList = reactive<nodelPeoples[]>([])
|
|
|
|
let timer = 0
|
|
let eventName = ''
|
|
let getValueEvent = ''
|
|
|
|
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
|
|
}
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:47:53
|
|
@ 功能: 重置表单
|
|
*/
|
|
const resetFields = () => {
|
|
if(ruleForm.value){
|
|
ruleForm.value.resetFields()
|
|
}
|
|
|
|
}
|
|
provide(constFormProps, formProps)
|
|
// 设置全局事件结束
|
|
const resultDict = ref({})
|
|
// 处理表单值开始
|
|
const model = ref<any>({})
|
|
|
|
//监听是否为流程表单
|
|
watch(()=>props.isWorkFlow,(val:number)=>{
|
|
console.log("监听是否为流程表单----->",val,formProps)
|
|
if(val == 1){
|
|
getFlowInitSwps()
|
|
}
|
|
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-10 10:21:15
|
|
@ 功能: 获取流程
|
|
*/
|
|
const getFlowInitSwps = () => {
|
|
gainRunFlowStart({id:props.flowkey})
|
|
.then(({data})=>{
|
|
console.log("获取流程",data)
|
|
flowMap.value = data.flowList
|
|
nextStep.value = data.nextStep
|
|
currentProgress.value = data.Step
|
|
gainFlowChart.id = props.flowkey
|
|
flowLoading.value = false;
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 11:19:30
|
|
@ 功能: 提供一个方法，用于根据name从formData.list里查找数据
|
|
*/
|
|
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
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 09:31:40
|
|
@ 功能: 注册win事件
|
|
*/
|
|
const setWindowEvent = (bool?: boolean) => {
|
|
if (props.formData.list.length > 0) {
|
|
const formName = props.formData.form?.name
|
|
if (!formName) {
|
|
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]
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
setWindowEvent()
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 13:16:50
|
|
@ 功能: 检测表单是否有变动
|
|
*/
|
|
watch(() => props.formData,() => {
|
|
emits('update:issave', false)
|
|
},{ deep: true })
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 13:20:01
|
|
@ 功能: 监听表单样式变化
|
|
*/
|
|
watch(() => props.formData.config,()=>{
|
|
if (timer < 2) {
|
|
setWindowEvent() // 简单判断下，这里不是每次都更新
|
|
}
|
|
timer++
|
|
appendRemoveStyle(true) // 更新样式
|
|
},{ deep: true });
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 13:32:57
|
|
@ 功能: 追加移除style样式
|
|
*/
|
|
const appendRemoveStyle = (type?: boolean) => {
|
|
try {
|
|
const {
|
|
config:{ style }
|
|
} = props.formData
|
|
appendOrRemoveStyle('formStyle', style || '', type)
|
|
} catch (e) {
|
|
/* empty */
|
|
}
|
|
}
|
|
const getControlByName = (name: string) => {
|
|
return getNameForEach(props.formData.list, name)
|
|
}
|
|
provide(constGetControlByName, getControlByName)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:14:24
|
|
@ 功能: DOM挂载完毕时执行
|
|
*/
|
|
onMounted(() => {
|
|
getInitModel()
|
|
nextTick(() => {
|
|
gainFlowChart.id = props.flowkey
|
|
appendRemoveStyle(true)
|
|
if(props.isWorkFlow==1){
|
|
getFlowInitSwps()
|
|
}
|
|
|
|
})
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:17:05
|
|
@ 功能: 获取表单初始model
|
|
*/
|
|
const getInitModel = () => {
|
|
const obj = {}
|
|
forEachGetFormModel(props.formData.list, obj)
|
|
// console.log("obj===>",obj)
|
|
model.value = obj
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:18:03
|
|
@ 功能: 从表单数据里提取表单所需的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)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:15:55
|
|
@ 功能: 销毁完毕
|
|
*/
|
|
onUnmounted(() => {
|
|
if (eventName) {
|
|
window[eventName] = ''
|
|
}
|
|
resetFields()
|
|
appendRemoveStyle()
|
|
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:45:25
|
|
@ 功能: 对表单选择项快速设置
|
|
*/
|
|
const setFormOptions = ref({})
|
|
provide(constSetFormOptions, setFormOptions)
|
|
const setOptions = (obj: { [key: string]: string[] }) => {
|
|
setFormOptions.value = obj
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:46:13
|
|
@ 功能: 表单options设置
|
|
*/
|
|
watch(() => props.options,(val:any) => {
|
|
val && setOptions(vval)
|
|
})
|
|
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:50:44
|
|
@ 功能: 按钮组件事件
|
|
*/
|
|
provide(constFormBtnEvent, (obj: any) => {
|
|
emits('btnClick', obj.key)
|
|
console.log("按钮组件事件-----2-------->",obj.key)
|
|
if ([3, 4, 5].includes(props.type)) {
|
|
return ElMessage.error('当前模式不能提交表单')
|
|
}
|
|
switch (obj.key) {
|
|
case 'submit': //新增提交
|
|
appFormSubmit();
|
|
break
|
|
case 'reset':
|
|
resetFields() // 重置表单
|
|
break
|
|
case 'cancel': // 取消返回，
|
|
let notReturn
|
|
if (typeof props.closeAppSubmit === 'function') {
|
|
notReturn = props.closeAppSubmit()
|
|
}
|
|
break
|
|
case 'saveDraft': //保存草稿 只保存表单不操作流程
|
|
saveDraft()
|
|
break
|
|
case 'saveEditDraft': //修改草稿箱数据后，再次保存草稿箱
|
|
saveDraftAgainSend()
|
|
break
|
|
case 'afreshSubmit': //重新提交流程
|
|
appAfreshSubmit()
|
|
break
|
|
case 'draftSubmit': //草稿提交审批
|
|
|
|
break
|
|
case 'submitEdit': //申请修改
|
|
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-13 11:11:13
|
|
@ 功能: app重新提交表单
|
|
*/
|
|
const appAfreshSubmit = (params = {}) => {
|
|
let addUrl = props.formData.config?.addUrl || props.addUrl
|
|
console.log("自定义App提交表单", props.addUrl)
|
|
if (props.isSearch || !addUrl || loading.value) {
|
|
if (!props.isSearch && !addUrl) {
|
|
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.versionId
|
|
formatParams.appKey=props.groupid
|
|
formatParams.status=1
|
|
formatParams.flowList=json2string(flowMap.value)
|
|
|
|
console.log("submitParams--111->",submitParams )
|
|
console.log("formatParams--111->",formatParams)
|
|
afreshAppSubmit(submitParams??formatParams)
|
|
.then((data:any)=>{
|
|
console.log("app重新提交表单--112221->",data)
|
|
emits("closePage")
|
|
})
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-10 10:37:30
|
|
@ 功能: 再次保存草稿箱
|
|
*/
|
|
const saveDraftAgainSend = (params = {}) => {
|
|
let addUrl = props.formData.config?.addUrl || props.addUrl
|
|
console.log("自定义App提交表单", props.addUrl)
|
|
if (props.isSearch || !addUrl || loading.value) {
|
|
if (!props.isSearch && !addUrl) {
|
|
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.versionId
|
|
formatParams.appKey=props.groupid
|
|
formatParams.status=1
|
|
|
|
|
|
console.log("submitParams--111221->",submitParams )
|
|
console.log("formatParams--1112222->",formatParams)
|
|
saveDraftAgain(submitParams??formatParams)
|
|
.then((data:any)=>{
|
|
console.log("提交草稿数据--112221->",data)
|
|
emits("closePage")
|
|
})
|
|
}else{
|
|
afterSubmit('validate', fields)
|
|
}
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-06 15:51:16
|
|
@ 功能: 保存草稿箱
|
|
*/
|
|
const saveDraft = (params = {}) => {
|
|
let addUrl = props.formData.config?.addUrl || props.addUrl
|
|
console.log("自定义App提交表单", props.addUrl)
|
|
if (props.isSearch || !addUrl || loading.value) {
|
|
if (!props.isSearch && !addUrl) {
|
|
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.versionId
|
|
formatParams.appKey=props.groupid
|
|
formatParams.status=1
|
|
|
|
|
|
createAppTask(submitParams ?? formatParams)
|
|
.then((data:any) => {
|
|
console.log("formatParams--111->",data)
|
|
|
|
if(props.isWorkFlow == 1){
|
|
nextTick(() => {
|
|
let sendInfo ={
|
|
id:data.data.uuid,
|
|
flowList:flowMap.value,
|
|
state:1
|
|
}
|
|
startRunFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
console.log("流程提交成功--------1---------->",data)
|
|
})
|
|
})
|
|
}
|
|
afterSubmit('success', data)
|
|
})
|
|
.catch(res => {
|
|
afterSubmit('fail', res)
|
|
})
|
|
|
|
}else{
|
|
afterSubmit('validate', fields)
|
|
}
|
|
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 14:59:31
|
|
@ 功能: 表单组件值改变事件 tProp为子表格相关
|
|
*/
|
|
provide(constControlChange, ({ key, value, data, tProp, type, attribute }: any) => {
|
|
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 sendInfo = {
|
|
"fieldKey":key,
|
|
"mathsFornula":props.formData.config,
|
|
"keyVal":fieldVal
|
|
}
|
|
console.log("sendInfoe-->",sendInfo)
|
|
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
|
|
}
|
|
})
|
|
})
|
|
}
|
|
if (typeof props.changeKeyVal === 'function') {
|
|
props.changeKeyVal(key, value,type,attribute)
|
|
}
|
|
if(props.isWorkFlow == 1){
|
|
changeKeyVal(key, value,type,attribute) //值改变时，检测一下有没有触发流程分支条件
|
|
}
|
|
|
|
if (key) {
|
|
if (!tProp) {
|
|
// 表格和弹性布局不是这里更新，只触change
|
|
model.value[key] = value
|
|
}
|
|
// 支持在线方式数据处理，如A组件值改变时，可自动修改B组件的值，可参考请假流程自动时长计算
|
|
if (props.formData.events?.change) {
|
|
model.value = props.formData.events.change(key, model.value)
|
|
}
|
|
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 })
|
|
}
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-05 15:03:25
|
|
@ 功能: 对表单设置初始值
|
|
*/
|
|
const setValue = (obj: { [key: string]: any }, filter?: boolean) => {
|
|
// 分两种，false时将obj所有值合并到model，当obj有某些值不存于表单中，也会合并到model，当提交表单也会提交此值
|
|
// true则过滤没用的值，即存在当前表单的才合并
|
|
if (filter) {
|
|
for (const key in obj) {
|
|
if (model.value[key] !== undefined) {
|
|
model.value[key] = obj[key]
|
|
}
|
|
}
|
|
} else {
|
|
model.value = Object.assign({}, model.value, jsonParseStringify(obj)) // 防止列表直接使用set方法对弹窗表单编辑，当重置表单时当前行数据被清空
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-06 08:23:50
|
|
@ 功能: 自定义App提交表单
|
|
*/
|
|
const appFormSubmit = (params = {}) => {
|
|
let addUrl = props.formData.config?.addUrl || props.addUrl
|
|
console.log("自定义App提交表单", props.addUrl)
|
|
if (props.isSearch || !addUrl || loading.value) {
|
|
if (!props.isSearch && !addUrl) {
|
|
console.error(
|
|
new Error('请在表单设计处配置接口事件url或选择数据源或设置props')
|
|
)
|
|
}
|
|
return
|
|
}
|
|
console.log(params)
|
|
validate((valid: boolean, fields: any) => {
|
|
if (valid) {
|
|
const formatParams = Object.assign({}, fields, params)
|
|
console.log("params--->",params)
|
|
console.log("fields--->",fields)
|
|
console.log("自定义A2pp提交表单", formatParams)
|
|
let submitParams
|
|
const beforeSubmit = props.formData.events?.beforeSubmit
|
|
console.log("beforeSubmit--->", 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.versionId
|
|
formatParams.appKey=props.groupid
|
|
formatParams.status=2
|
|
console.log("提交表单-----------1------------>", submitParams)
|
|
console.log("提交表单-----------2------------>", formatParams)
|
|
|
|
createAppTask(submitParams ?? formatParams)
|
|
.then((data:any) => {
|
|
console.log("formatParams--111->",data)
|
|
|
|
if(props.isWorkFlow == 1){
|
|
nextTick(() => {
|
|
let sendInfo ={
|
|
id:data.data.uuid,
|
|
flowList:flowMap.value,
|
|
state:3
|
|
}
|
|
startRunFlow(sendInfo)
|
|
.then((data:any)=>{
|
|
console.log("流程提交成功--------1---------->",data)
|
|
})
|
|
.finally(() =>{
|
|
afterSubmit('success', data)
|
|
})
|
|
})
|
|
}
|
|
|
|
})
|
|
.catch(res => {
|
|
afterSubmit('fail', res)
|
|
})
|
|
|
|
}else{
|
|
afterSubmit('validate', fields)
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-06 09:47:51
|
|
@ 功能: 不管成功失败，有事件时都需要执行回调
|
|
*/
|
|
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)
|
|
}
|
|
loading.value = false
|
|
if (notReturn === false) {
|
|
// 有返回false时则不提示
|
|
return
|
|
}
|
|
if (type === 'success') {
|
|
ElMessage.success(res.msg || '保存成功！')
|
|
} else if (type === 'fail') {
|
|
ElMessage.error(res.message || '保存失败！')
|
|
}
|
|
//不管结果，重置表单，防再次打开时保留上一次的值
|
|
resetFields()
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-06 09:14:16
|
|
@ 功能: 表单检验方法
|
|
*/
|
|
const validate = (callback: any) => {
|
|
ruleForm.value.validate((valid: boolean, fields: any) => {
|
|
let fieldValue = fields
|
|
if (valid) {
|
|
// 校验通过，返回当前表单的值
|
|
fieldValue = getValue()
|
|
}
|
|
callback(valid, fieldValue)
|
|
})
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-06 09:17:29
|
|
@ 功能: 提供一个取值的方法
|
|
*/
|
|
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 {
|
|
// console.log("getValue--->model-value->",model.value)
|
|
return model.value
|
|
}
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-13 16:06:26
|
|
@ 功能: 关闭抽屉
|
|
*/
|
|
const closePage = () =>{
|
|
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-06 13:18:58
|
|
@ 功能: 表单组件分析
|
|
*/
|
|
const changeKeyVal = (key:any,val:any,type:any,attribute:any) => {
|
|
let unitsVal = val
|
|
let isUpdateFlowChart = false
|
|
//单选，多选，下拉菜单
|
|
if(notAsA_BasisForJudgment.indexOf(type) === -1){
|
|
let isWrite = true
|
|
flowFactor.forEach((item:any)=>{
|
|
if(item.factorid == key){
|
|
isWrite = false
|
|
|
|
item.type=3
|
|
if(type == "checkbox"){
|
|
item.isCheckbox = true
|
|
item.answers = val.map(String)
|
|
}else{
|
|
item.isCheckbox = false
|
|
item.oneanswer = val.toString()
|
|
}
|
|
if(notAsA_BasisForJudgment.indexOf(type) === -1){
|
|
isUpdateFlowChart = true
|
|
}
|
|
}
|
|
})
|
|
if(isWrite){
|
|
if(type == "checkbox"){
|
|
flowFactor.push({
|
|
factorid:key,
|
|
type:3,
|
|
isCheckbox:true,
|
|
answers:val.map(String)
|
|
})
|
|
}else{
|
|
flowFactor.push({
|
|
factorid:key,
|
|
type:3,
|
|
isCheckbox:false,
|
|
oneanswer:val.toString()
|
|
})
|
|
}
|
|
isUpdateFlowChart = true
|
|
}
|
|
// console.log("改变表单值--flowFactor--->",flowFactor)
|
|
|
|
}
|
|
//时间类空间附加判断条件
|
|
if(timeControl.indexOf(type) > -1 || fixedValueControl.indexOf(type) > -1 || type == "input"){
|
|
let addNewTime = true //判断是否新增
|
|
flowFactor.forEach((item:any)=>{
|
|
// console.log("改变表单值--flowFactor--5->",item.type)
|
|
if(item.type == 2){
|
|
addNewTime = false
|
|
// console.log("改变表单值--flowFactor--5====1->",item.type)
|
|
// console.log("改变表单值--flowFactor--5====3->",item.customFields,item.customFields.length)
|
|
if(item.customFields && item.customFields.length > 0){
|
|
// console.log("改变表单值--flowFactor--5====2->",item.customFields)
|
|
let sunNewAdd = true
|
|
item.customFields.forEach((sunItem:any)=>{
|
|
// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key)
|
|
if(sunItem.wordfield == key){
|
|
sunNewAdd = false
|
|
isUpdateFlowChart = true
|
|
if(timeEquation.indexOf(attribute) === -1){ //非区间性时间
|
|
sunItem.leftval = val.toString()
|
|
}else{ //区间性时间
|
|
if(Array.isArray(val)){
|
|
if(val.length >= 2){
|
|
sunItem.leftval = val[0].toString()
|
|
sunItem.rightval = val[val.length - 1].toString()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
if(sunNewAdd){
|
|
isUpdateFlowChart = true
|
|
if(timeEquation.indexOf(attribute) === -1){//非区间性时间
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "1",
|
|
leftval: val.toString()
|
|
}
|
|
item.customFields.push(customFieldInfo)
|
|
}else{ //区间性时间
|
|
if(Array.isArray(val)){
|
|
if(val.length >= 2){
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "6",
|
|
leftval: val[0].toString(),
|
|
leftoptType:"3",
|
|
rightoptType:"3",
|
|
rightval:val[val.length - 1].toString()
|
|
}
|
|
item.customFields.push(customFieldInfo)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
if(addNewTime){ //新增自定义类数据判断
|
|
isUpdateFlowChart = true
|
|
if(timeEquation.indexOf(attribute) === -1){ //非区间性时间
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "1",
|
|
leftval: val.toString()
|
|
}
|
|
let condInfo = {
|
|
factorid:"customFields",
|
|
type:2,
|
|
isCheckbox:false,
|
|
customFields:[customFieldInfo]
|
|
}
|
|
flowFactor.push(condInfo)
|
|
}else{ //区间性时间
|
|
if(Array.isArray(val)){
|
|
|
|
if(val.length >= 2){
|
|
let customFieldInfo = {
|
|
wordfield: key,
|
|
optType: "6",
|
|
leftval: val[0].toString(),
|
|
leftoptType:"3",
|
|
rightoptType:"3",
|
|
rightval:val[val.length - 1].toString()
|
|
}
|
|
let condInfo = {
|
|
factorid:"customFields",
|
|
type:2,
|
|
isCheckbox:false,
|
|
customFields:[customFieldInfo]
|
|
}
|
|
flowFactor.push(condInfo)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
//操作人
|
|
if(asAnApprovalActionControl.indexOf(type) > -1){
|
|
isUpdateFlowChart = true
|
|
let isWriteUs = true
|
|
nodelUserList.forEach((item:any)=>{
|
|
if(item.factorid == key){
|
|
isWriteUs = false
|
|
item.userList = val
|
|
}
|
|
})
|
|
if(isWriteUs){
|
|
nodelUserList.push({
|
|
factorid:key,
|
|
userList:val
|
|
})
|
|
}
|
|
}
|
|
console.log("isUpdateFlowChart",isUpdateFlowChart)
|
|
//更新工作流图
|
|
if(isUpdateFlowChart && gainFlowChart.id !=0){
|
|
flowLoading.value = true
|
|
//获取工作流不进图
|
|
gainFlowChart.conditionList=flowFactor
|
|
gainFlowChart.nodelPeople=nodelUserList
|
|
gainFlowChart.oldFlow = flowMap
|
|
// console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart)
|
|
realTimeUpdateFlow(gainFlowChart)
|
|
.then((data:any) =>{
|
|
// console.log("获取工作流不进图-new-->",data)
|
|
flowMap.value = data.data.flowList
|
|
nextStep.value = data.data.nextStep;
|
|
currentProgress.value = data.data.Step;
|
|
nodeKey.value = data.data.nodeKey;
|
|
// // console.log("获取工作流不进图-1-->",flowMap.value)
|
|
flowLoading.value = false
|
|
})
|
|
}
|
|
}
|
|
defineExpose({
|
|
setOptions,
|
|
setValue,
|
|
getValue,
|
|
validate,
|
|
resetFields,
|
|
appFormSubmit,
|
|
closePage,
|
|
// getData, //功能待定
|
|
// anewSubmit,
|
|
// saveDraftPage,
|
|
// saveEditFormInfo,
|
|
// getEditData,
|
|
// submitEdit
|
|
})
|
|
|
|
|
|
function optionsValue3Get2(data: any,fieldName: string){
|
|
|
|
|
|
emits('optionsValue3Get3',data,fieldName)
|
|
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="common-layout">
|
|
<el-container v-if="props.isWorkFlow==1">
|
|
<el-main class="formMainBox">
|
|
<el-form
|
|
v-bind="formData.form"
|
|
ref="ruleForm"
|
|
:model="model as any"
|
|
:disabled="disabled || type === 3"
|
|
class="add-form"
|
|
:class="{
|
|
'design-form': type === 5,
|
|
'detail-form': type === 3 || type === 4 || type === 1
|
|
}"
|
|
>
|
|
|
|
<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" />
|
|
|
|
<slot></slot>
|
|
</el-form>
|
|
|
|
</el-main>
|
|
<el-aside class="flowBox">
|
|
<el-text size="large">审批流程</el-text>
|
|
<FlowStep v-loading="flowLoading" v-model:flow-map="flowMap" :next-step="nextStep" :current-progress="currentProgress" :node-key="nodeKey" />
|
|
</el-aside>
|
|
</el-container>
|
|
<div v-else>
|
|
|
|
<el-form
|
|
v-bind="formData.form"
|
|
ref="ruleForm"
|
|
:model="model as any"
|
|
:disabled="disabled || type === 3"
|
|
class="add-form"
|
|
:class="{
|
|
'design-form': type === 5,
|
|
'detail-form': type === 3 || type === 4 || type === 1
|
|
}"
|
|
>
|
|
|
|
<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" @optionsValue3Get2="optionsValue3Get2"/>
|
|
|
|
<slot></slot>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.formMainBox{
|
|
padding: 0;
|
|
}
|
|
.flowBox{
|
|
width: 350px;
|
|
border-left: 1px solid #4f4f4f;
|
|
padding: 0 15px;
|
|
}
|
|
</style>
|
|
|