flow-playform-react/src/pages/flowEditor/components/publishFlowModal.tsx

import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Radio, Message } from '@arco-design/web-react';
import { appPublish } from '@/api/flow';
import { getPubFlowList, getMyFlowList } from '@/api/flow';
import { getMyComponents, getPubComponents, getTeamComponents } from '@/api/components';
import { useSelector } from 'react-redux';
import { publishType } from '@/api/interface';
import dayjs from 'dayjs';

interface PublishFlowModalProps {
  visible: boolean;
  onCancel: () => void;
  onSuccess: () => void;
  appId?: string;
  flowId?: string;
  currentFlowName?: string;
}

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;

const PublishFlowModal: React.FC<PublishFlowModalProps> = ({
                                                             visible,
                                                             onCancel,
                                                             onSuccess,
                                                             appId,
                                                             flowId,
                                                             currentFlowName
                                                           }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const { appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);

  // 当弹窗打开时，初始化表单数据
  useEffect(() => {
    if (visible) {
      form.setFieldsValue({
        name: currentFlowName || '',
        published: 1, // 默认发布为公共流程
        tag: '',
        description: ''
      });
    }
  }, [visible, currentFlowName, form]);

  // 当弹窗关闭时，重置表单
  useEffect(() => {
    if (!visible) {
      form.resetFields();
    }
  }, [visible, form]);

  // 更新组件和流程库数据
  const updateComponentData = async () => {
    try {
      const requests = [
        { promise: getMyComponents(), key: 'myLibs' },
        { promise: getPubComponents(), key: 'pubLibs' },
        { promise: getTeamComponents(), key: 'teamLibs' },
        {
          promise: getPubFlowList({
            currPage: 1,
            pageSize: 999
          }),
          key: 'pubFlow'
        },
        {
          promise: getMyFlowList({
            currPage: 1,
            pageSize: 999
          }),
          key: 'myFlow'
        }
      ];

      const obj: any = {
        myLibs: null,
        pubLibs: null,
        teamLibs: null,
        pubFlow: null,
        myFlow: null,
        updateTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      };

      const userInfo = JSON.parse(sessionStorage.getItem('userInfo') || '{}');

      // 分别处理每个请求
      for (const { promise, key } of requests) {
        try {
          const res: any = await promise;
          if (res?.code === 200) {
            if (key === 'pubFlow' || key === 'myFlow') {
              res?.data.list.forEach(item => {
                item['fontCompType'] = 'complex';
              });
              // 更新本地存储数据
              obj[key] = res?.data.list || null;
            }
            // 给协同组件添加一个后续处理数据时使用的类型
            else if (key === 'teamLibs') {
              res.data.forEach(item => {
                item.children.forEach(v => {
                  v['fontCompType'] = 'team';
                });
              });
              obj[key] = res?.data || null;
            }
            else {
              // 更新本地存储数据
              res.data.forEach(item => {
                item.children.forEach(v => {
                  v['fontCompType'] = 'normal';
                });
              });
              obj[key] = res?.data || null;
            }
          }
          sessionStorage.setItem(`compLibs${userInfo.userId}`, JSON.stringify(obj));
        } catch (error) {
          console.error(`加载${key}失败:`, error);
        }
      }
    } catch (error) {
      console.error('更新组件库失败:', error);
    }
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validate();


      console.log('currentAppData:', currentAppData);
      setLoading(true);
      let publishData: publishType = {};

      if (currentAppData.hasOwnProperty('parentAppId')) {
        publishData = {
          appId: currentAppData.parentAppId,
          flowId: currentAppData.key,
          name: values.name,
          published: values.published,
          tag: values.tag,
          description: values.description,
          isMain: 0 // 子流程
        };
      }
      else {
        publishData = {
          appId: currentAppData.id,
          flowId: '',
          name: values.name,
          published: values.published,
          tag: values.tag,
          description: values.description,
          isMain: 1 // 主流程
        };
      }

      const res: any = await appPublish(publishData);

      if (res.code === 200) {
        Message.success('流程发布成功');
        form.resetFields();

        // 发布成功后更新组件和流程库数据
        await updateComponentData();

        onSuccess();
      }
      else {
        Message.error(res.msg || '流程发布失败');
      }
    } catch (error) {
      console.error('流程发布失败:', error);
      if (error?.errors) {
        // 表单验证错误，不需要显示消息
        return;
      }
      Message.error('流程发布失败');
    } finally {
      setLoading(false);
    }
  };

  const handleClose = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="流程发布"
      visible={visible}
      onCancel={handleClose}
      onOk={handleSubmit}
      confirmLoading={loading}
      style={{ width: 600 }}
      okText="发布"
      cancelText="取消"
    >
      <Form
        form={form}
        layout="vertical"
        autoComplete="off"
      >
        <FormItem
          label="流程名称"
          field="name"
          rules={[
            { required: true, message: '请输入流程名称' },
            { maxLength: 50, message: '流程名称不能超过50个字符' }
          ]}
        >
          <Input placeholder="请输入流程名称" maxLength={50} />
        </FormItem>

        <FormItem
          label="发布类型"
          field="published"
          rules={[{ required: true, message: '请选择发布类型' }]}
        >
          <RadioGroup>
            <Radio value={0}>私有流程（仅自己可见）</Radio>
            <Radio value={1}>公共流程（所有人可见）</Radio>
          </RadioGroup>
        </FormItem>

        <FormItem
          label="标签"
          field="tag"
          rules={[
            { maxLength: 20, message: '标签不能超过20个字符' }
          ]}
        >
          <Input placeholder="请输入流程标签，如：数据处理、图像识别等" maxLength={20} />
        </FormItem>

        <FormItem
          label="流程描述"
          field="description"
          rules={[
            { maxLength: 200, message: '流程描述不能超过200个字符' }
          ]}
        >
          <TextArea
            placeholder="请输入流程描述，说明流程的功能和用途"
            maxLength={200}
            showWordLimit
            autoSize={{ minRows: 3, maxRows: 6 }}
          />
        </FormItem>
      </Form>
    </Modal>
  );
};

export default PublishFlowModal;