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.
1287 lines
38 KiB
1287 lines
38 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 formLoading = 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();
|
|
}
|
|
formLoading.value = false;
|
|
};
|
|
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;
|
|
nodeKey.value = data.nodeKey;
|
|
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)
|
|
// console.log("obj===>",props.formData.list)
|
|
model.value = obj;
|
|
};
|
|
watch(
|
|
() => props.formData.list,
|
|
() => {
|
|
// formData从接口获取时
|
|
getInitModel();
|
|
}
|
|
);
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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);
|
|
formLoading.value = true;
|
|
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();
|
|
}
|
|
formLoading.value = false;
|
|
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"));
|
|
}
|
|
formLoading.value = false;
|
|
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");
|
|
formLoading.value = false;
|
|
});
|
|
formLoading.value = false;
|
|
} else {
|
|
formLoading.value = false;
|
|
}
|
|
});
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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"));
|
|
}
|
|
formLoading.value = false;
|
|
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");
|
|
formLoading.value = false;
|
|
});
|
|
} else {
|
|
afterSubmit("validate", fields);
|
|
formLoading.value = false;
|
|
}
|
|
});
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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"));
|
|
}
|
|
formLoading.value = false;
|
|
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);
|
|
formLoading.value = false;
|
|
})
|
|
.catch((res) => {
|
|
afterSubmit("fail", res);
|
|
formLoading.value = false;
|
|
});
|
|
} else {
|
|
afterSubmit("validate", fields);
|
|
formLoading.value = false;
|
|
}
|
|
});
|
|
};
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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 oldFormConfig = props.formData.config;
|
|
let newFormConfig = props.formData.config.groupKey;
|
|
let odlHideField = props.formData.config.hideField;
|
|
console.log(props.formData);
|
|
delete props.formData.config.groupKey;
|
|
delete props.formData.config.hideField;
|
|
let sendInfo = {
|
|
fieldKey: key,
|
|
mathsFornula: props.formData.config,
|
|
keyVal: fieldVal,
|
|
};
|
|
// console.log("sendInfoe-1->",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;
|
|
}
|
|
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);
|
|
});
|
|
}
|
|
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"));
|
|
}
|
|
formLoading.value = false;
|
|
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)
|
|
formLoading.value = false;
|
|
})
|
|
.finally(() => {
|
|
afterSubmit("success", data);
|
|
});
|
|
});
|
|
} else {
|
|
afterSubmit("success", data);
|
|
}
|
|
formLoading.value = false;
|
|
})
|
|
.catch((res) => {
|
|
afterSubmit("fail", res);
|
|
formLoading.value = false;
|
|
});
|
|
} else {
|
|
afterSubmit("validate", fields);
|
|
formLoading.value = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 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);
|
|
}
|
|
|
|
const asfs: any[] = [];
|
|
const tables: 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++) {
|
|
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);
|
|
}
|
|
let asfRangeDoubleCondiChangeObj = ref();
|
|
provide("asfRangeDoubleCondiChangeObj", asfRangeDoubleCondiChangeObj);
|
|
|
|
let oldModelStr = "";
|
|
watch(
|
|
() => model.value,
|
|
(newVal) => {
|
|
let currentChangeKey = "";
|
|
const newModelStr = JSON.stringify(newVal);
|
|
let oldModelStr1 = oldModelStr;
|
|
if (newModelStr !== oldModelStr1 && oldModelStr1 != "") {
|
|
let oldVal = JSON.parse(oldModelStr1);
|
|
for (const key in newVal) {
|
|
if (JSON.stringify(newVal[key]) !== JSON.stringify(oldVal[key])) {
|
|
currentChangeKey = key;
|
|
}
|
|
}
|
|
}
|
|
let rangeFormulaArr = [];
|
|
if (asfs.length > 0) {
|
|
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 }
|
|
);
|
|
</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"
|
|
v-loading="formLoading"
|
|
: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" :alldata="formData" :purview="formData.powerstr" :node-key="nodeKey" /> -->
|
|
<FormGroup
|
|
:tableinfo="formData.form"
|
|
:numrun="numrun"
|
|
:data="formData.list"
|
|
:alldata="formData"
|
|
:node-key="nodeKey"
|
|
/>
|
|
<slot></slot>
|
|
</el-form>
|
|
</el-main>
|
|
<el-aside class="flowBox">
|
|
<el-text size="large">审批流程</el-text>
|
|
<FlowStep
|
|
v-model:flow-map="flowMap"
|
|
v-loading="flowLoading"
|
|
:next-step="nextStep"
|
|
:current-progress="currentProgress"
|
|
:node-key="nodeKey"
|
|
/>
|
|
</el-aside>
|
|
</el-container>
|
|
<div v-else>
|
|
<el-form
|
|
v-bind="formData.form"
|
|
ref="ruleForm"
|
|
v-loading="formLoading"
|
|
:model="model as any"
|
|
:disabled="disabled || type === 3"
|
|
class="add-form"
|
|
:class="{
|
|
'design-form': type === 5,
|
|
'detail-form': type === 3 || type === 4 || type === 1,
|
|
}"
|
|
>
|
|
<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>
|
|
|