shihezi-admin/src/pages/Classify/Industry/edit.tsx

import React, { useEffect } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormTreeSelect,
  ProFormText,
  ProDescriptions,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import { DictValueEnumObj } from '@/components/DictTag';
import { FormattedMessage } from '@@/exports';
import { getCmsIndustryTreeList } from '@/services/classify/industry'; // 修改导入为 getCmsIndustryTreeList

interface IndustryDetail {
  id?: number;
  industryName?: string;
  orderNum?: number;
  status?: string;
  parentId?: number;
  parentName?: string;
}

export type ListFormProps = {
  onCancel: (flag?: boolean, formVars?: unknown) => void;
  onSubmit: (values: any) => Promise<void>;
  open: boolean;
  values?: Partial<IndustryDetail>;
  industryStatusEnum: DictValueEnumObj;
  mode?: 'view' | 'edit' | 'create';
};

const listEdit: React.FC<ListFormProps> = (props) => {
  const [form] = Form.useForm<IndustryDetail>();
  const { industryStatusEnum, mode = props.values ? 'edit' : 'create', values } = props;

  useEffect(() => {
    form.resetFields();
    if (values) {
      form.setFieldsValue({
        ...values,
        parentId: values?.parentId ?? 0
      });
    }
  }, [form, values?.id]);

  const getSafeDetailData = (data?: Partial<IndustryDetail>): IndustryDetail => {
    return {
      id: data?.id ?? 0,
      industryName: data?.industryName ?? '',
      orderNum: data?.orderNum ?? 0,
      parentId: data?.parentId ?? 0,
      parentName: data?.parentName ?? '顶级节点',
      status: data?.status ?? '0',
    };
  };

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

  const handleFinish = async (values: Record<string, any>) => {
    const submitValues = {
      ...values,
      parentId: values.parentId === 0 ? undefined : values.parentId
    };
    props.onSubmit(submitValues);
  };

  // 获取行业树数据
  const fetchIndustryTree = async () => {
    const res = await getCmsIndustryTreeList();
    return [
      {
        id: 0,
        label: '顶级节点',
        value: 0,
        children: res.data || []
      }
    ];
  };

  if (mode === 'view') {
    return (
      <ModalForm
        title="行业详情"
        open={props.open}
        width={800}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => handleCancel(),
          footer: null,
        }}
        submitter={false}
      >
        <ProDescriptions<IndustryDetail>
          column={1}
          dataSource={getSafeDetailData(values)}
          loading={!values}
        >
          <ProDescriptions.Item label="行业ID" dataIndex="id" />
          <ProDescriptions.Item label="行业名称" dataIndex="industryName" />
          <ProDescriptions.Item label="显示顺序" dataIndex="orderNum" />
          <ProDescriptions.Item 
            label="父行业" 
            dataIndex="parentName" 
            renderText={(text, record) => record.parentId === 0 ? '顶级节点' : text}
          />
          <ProDescriptions.Item 
            label="行业状态" 
            dataIndex="status"
            valueEnum={industryStatusEnum}
          />
        </ProDescriptions>
      </ModalForm>
    );
  }

  return (
    <ModalForm
      title={`${values ? '编辑' : '新增'}行业`}
      form={form}
      autoFocusFirstInput
      open={props.open}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => handleCancel(),
      }}
      submitTimeout={2000}
      onFinish={handleFinish}
    >
      <ProFormDigit name="id" disabled hidden={true} />
      <ProForm.Group>
        <ProFormText 
          width="md" 
          name="industryName" 
          label="行业名称" 
          placeholder="请输入行业名称"
          rules={[{ required: true, message: '请输入行业名称' }]}
        />
        <ProFormDigit
          label="显示顺序"
          name="orderNum"
          width="md"
          min={0}
          placeholder="请输入显示顺序"
          rules={[{ required: true, message: '请输入显示顺序' }]}
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTreeSelect
          name="parentId"
          label="父行业"
          placeholder="请选择父行业"
          allowClear
          width="md"
          request={fetchIndustryTree}
          fieldProps={{
            virtual:true,
            treeDefaultExpandAll: true,
            showSearch: true,
            filterTreeNode: true,
            fieldNames: {
              label: 'label',
              value: 'id',
              children: 'children',
            },
            dropdownStyle: {
              maxHeight: 400,
              overflow: 'auto',
            },
          }}
          rules={[{ required: true, message: '请选择父行业' }]}
        />
        <ProFormRadio.Group
          valueEnum={industryStatusEnum}
          name="status"
          label="行业状态"
          width="md"
          initialValue="0"
          rules={[{ required: true, message: '请选择行业状态' }]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default listEdit;