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

import React, { useEffect } from 'react';
import {
  ModalForm,
  ProForm,
  ProFormDigit,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProDescriptions,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import { DictValueEnumObj } from '@/components/DictTag';
import { FormattedMessage } from '@@/exports';
import { getCmsIndustryTree } from '@/services/classify/industry';
import { values } from 'lodash';

interface IndustryDetail extends API.ClassifyIndustry.IndustryRow {
  parentName: string;
}

export type ListFormProps = {
  onCancel: (flag?: boolean, formVars?: unknown) => void;
  onSubmit: (values: API.ClassifyIndustry.IndustryRow) => Promise<void>;
  open: boolean;
  values?: Partial<API.ClassifyIndustry.IndustryRow>;
  // industryStatusEnum: DictOptionType[];
  industryStatusEnum: DictValueEnumObj;
  mode?: 'view' | 'edit' | 'create';
};

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

  const getSafeDetailData = (
    data?: Partial<API.ClassifyIndustry.IndustryRow>
  ): IndustryDetail => {
    return{
    industryId: data?.industryId ?? 0,
    industryName: data?.industryName ?? '',
    orderNum: data?.orderNum ?? 0,
    parentId: data?.parentId ?? 0,
    parentName: (data as any)?.parentName ?? '无', // 或通过 parentId 映射
    status: data?.status ?? '0',}
  };

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

  const handleFinish = async (values: Record<string, any>) => {
    props.onSubmit(values as API.ClassifyIndustry.IndustryRow);
  };
// check
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="industryId" />
          <ProDescriptions.Item label="行业名称" dataIndex="industryName" />
          <ProDescriptions.Item label="显示顺序" dataIndex="orderNum" />
          <ProDescriptions.Item 
            label="父行业" 
            dataIndex="parentName" 
            valueType="text"// 假设API返回中有parentName字段
          />
          <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}
      // readonly
    >
      <ProFormDigit label="InputNumber" name="industryId" disabled hidden={true} />
      <ProForm.Group>
        <ProFormText width="md" name="industryName" label="行业名称" placeholder="请输入行业名称" />
        <ProFormDigit
          label="显示顺序"
          name="orderNum"
          width="md"
          min={0}
          placeholder="请输入显示顺序"
        />
      </ProForm.Group>
      <ProForm.Group>
        {/* 多级 */}
        {/*<ProFormTreeSelect*/}
        {/*  name="parentId"*/}
        {/*  label="父行业"*/}
        {/*  placeholder="请选择父行业"*/}
        {/*  allowClear*/}
        {/*  width="md"*/}
        {/*  request={async () => {*/}
        {/*    return getCmsIndustryTree().then((res) => {*/}
        {/*      return res.data;*/}
        {/*    });*/}
        {/*  }}*/}
        {/*  fieldProps={{*/}
        {/*    suffixIcon: null,*/}
        {/*    filterTreeNode: true,*/}
        {/*    showSearch: true,*/}
        {/*    popupMatchSelectWidth: false,*/}
        {/*    labelInValue: false,*/}
        {/*    autoClearSearchValue: true,*/}
        {/*    multiple: false,*/}
        {/*    treeNodeFilterProp: 'title',*/}
        {/*    fieldNames: {*/}
        {/*      label: 'label',*/}
        {/*      value: 'id',*/}
        {/*      children: 'children',*/}
        {/*    },*/}
        {/*  }}*/}
        {/*/>*/}
        {/* 2级 */}
        <ProFormSelect
          name="parentId"
          label="父行业"
          allowClear
          width="md"
          placeholder="请选择父行业"
          request={async () => {
            return getCmsIndustryTree().then((res) => {
              return res.data;
            });
          }}
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: '请选择父行业!' }]}
          fieldProps={{
            suffixIcon: null,
            showSearch: true,
            popupMatchSelectWidth: false,
            labelInValue: false,
            autoClearSearchValue: true,
            fieldNames: {
              label: 'label',
              value: 'id',
            },
          }}
        />
        <ProFormRadio.Group
          valueEnum={industryStatusEnum}
          name="status"
          label="行业状态"
          width="md"
          placeholder="请输入状态"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入状态！" defaultMessage="请选择行业状态！" />,
            },
          ]}
        />
      </ProForm.Group>
    </ModalForm>
  );
};

export default listEdit;