产品工艺路线路由节点选择功能更新

Ben Lin

2024-06-30 943954bdcb3b672b89cfa097e53d2ac17a36a101

 src/views/components/CustModal.vue

@@ -1,3 +1,11 @@
<!--
 * @Description: 自定义弹出框，可以自定义多个表单
 * @Author: Ben Lin
 * @version: 
 * @Date: 2024-06-05 15:46:07
 * @LastEditors: Ben Lin
 * @LastEditTime: 2024-06-28 14:26:49
-->
<template>
  <BasicModal
    v-bind="$attrs"
@@ -24,11 +32,15 @@
<script lang="ts" setup>
  import { ref, unref, nextTick, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { FormActionType, FormSchema } from '/@/components/Form/index';
  import { FormSchema } from '/@/components/Form/index';
  import { custFunction } from './data';
  import { isNullOrEmpty, isNullOrUnDef } from '/@/utils/is';
  import { Layout, LayoutContent, Card } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const { notification, createErrorModal } = useMessage();
  const ALayout = Layout;
  const ACard = Card;
  const ALayoutContent = LayoutContent;
@@ -37,11 +49,13 @@
  const cType = ref('');
  const title = ref('');
  const width = ref('');
  const FnName = ref('');
  const FnName = ref({});
  const mValues = ref<Recordable>({});
  const initFnName = ref({});
  const dtlSlots = ref([] as any[]);
  const formSchema = ref([] as FormSchema[]);
  const formElName = ref('');
  const prodinfo = ref<Nullable<FormActionType>>(null);
  const formElName = ref([]);
  const useFormData = ref<any>({});
  const props = defineProps({
    detailSlots: { type: Array, default: [] },
  });
@@ -59,24 +73,35 @@
    await nextTick();
    formSchema.value = [];
    setModalProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    cType.value = data?.ctype;
    title.value = data?.title;
    width.value = data?.width;
    formElName.value = data?.formElName;
    prodinfo.value = data?.formEl;
    if (!isNullOrUnDef(prodinfo.value)) {
      prodinfo.value[formElName.value].resetFields();
      if (unref(isUpdate)) {
        prodinfo.value[formElName.value].setFieldsValue({
          ...data,
        });
    isUpdate.value = !!data?.isUpdate; //是否更新
    cType.value = data?.ctype; //是哪个页面
    title.value = data?.title; //弹框标题
    width.value = data?.width; //弹框宽度
    formElName.value = data?.formElName; //弹框中表单名字数组
    useFormData.value = data?.formEl; //弹框中表单实例数组
    FnName.value = data?.fnName; //保存数据方法
    mValues.value = data?.values; //主表单传过来的数据
    //循环表单名数组，操作各表单字段
    formElName.value.forEach((name) => {
      if (!isNullOrUnDef(useFormData.value[name])) {
        useFormData.value[name][1]['resetFields']();
        if (unref(isUpdate)) {
          useFormData.value[name][1]['setFieldsValue']({
            ...mValues.value,
          });
        }
      }
    }
    });
    //初始化方法自定义
    if (!isNullOrEmpty(data?.FnName)) {
      FnName.value = data?.FnName;
      custFunction(unref(isUpdate.value), FnName.value, cType.value);
    if (!isNullOrEmpty(data?.initFnName)) {
      initFnName.value = data?.initFnName;
      custFunction(
        unref(isUpdate.value),
        initFnName.value[cType.value],
        cType.value,
        mValues.value,
        data?.others,
      );
    }
  });

@@ -88,19 +113,40 @@
  //   { deep: true },
  // );

  /**
   * @description: 弹框确定按钮方法
   * @return {*}
   */  
  async function handleSuccess() {
    try {
      var values = await prodinfo.value[formElName.value].validate();
      var values = {} as any;
      //循环表单名数组，验证各表单数据合法性，合法则返回各表单数据，返回值可以用values['表单名']获取表单数据
      for (let name of formElName.value) {
        if (!isNullOrEmpty(useFormData.value[name])) {
          values[name] = await useFormData.value[name][1].validate();
        }
      }
      setModalProps({ confirmLoading: true });

      closeModal();
      emit('success', {
        isUpdate: isUpdate.value,
        fnName: 'handleSubmit',
        cType: cType.value,
        formElName: formElName.value,
        values,
      });
      //调用自定义保存方法保存数据
      values['mValues'] = mValues.value;
      const action = await custFunction(values, FnName.value[cType.value], cType.value);
      if (action as boolean) {
        closeModal();
        //成功事件，将数据返回原页面
        emit('success', {
          isUpdate: isUpdate.value,
          fnName: 'handleSubmit',
          cType: cType.value,
          formElName: formElName.value,
          values,
        });
      } else {
        createErrorModal({
          title: t('警告'),
          content: t('保存数据失败'),
          getContainer: () => document.body,
        });
      }
    } finally {
      setModalProps({ confirmLoading: false });
    }