ShutongInterconnectedChemicalCloudPlatform/src/components/DesignForm/app/formPage.vue

<!--
@ 作者: 秦东
@ 时间: 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>