添加查看详情功能

src/pages/Classify/Industry/edit.tsx

@@ -6,11 +6,17 @@ import {
   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;
@@ -19,17 +25,30 @@ export type ListFormProps = {
   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 } = props;
+  const { industryStatusEnum, mode = props.values ? 'edit' : 'create',values } = props;
   useEffect(() => {
     form.resetFields();
-    if (props.values) {
-      form.setFieldsValue(props.values);
+    if (values) {
+      form.setFieldsValue(values);
     }
-  }, [form, props]);
+  }, [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();
@@ -39,13 +58,45 @@ const listEdit: React.FC<ListFormProps> = (props) => {
   const handleFinish = async (values: Record<string, any>) => {
     props.onSubmit(values as API.ClassifyIndustry.IndustryRow);
   };
-
+// check
+if (mode === 'view') {
   return (
-    <ModalForm<{
-      name: string;
-      company: string;
-    }>
-      title={`${props.values ? '编辑' : '新增'}行业`}
+    <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}

src/pages/Classify/Industry/index.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useAccess } from '@umijs/max';
 import { Button, FormInstance, message, Modal } from 'antd';
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
-import { DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';
+import { AlignLeftOutlined, DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';
 import EditCompanyListRow from './edit';
 import {
   addCmsIndustryIndustryt,
@@ -49,7 +49,6 @@ const handleExport = async (values: API.ClassifyIndustry.Params) => {
 
 function ManagementList() {
   const access = useAccess();
-
   const formTableRef = useRef<FormInstance>();
   const actionRef = useRef<ActionType>();
 
@@ -96,6 +95,19 @@ function ManagementList() {
       dataIndex: 'industryId',
       width: 300,
       render: (industryId, record) => [
+        <Button
+          type="link"
+          size="small"
+          key="view"
+          icon={<AlignLeftOutlined />}
+          hidden={!access.hasPerms('area:business:List.view')}
+          onClick={() => {
+            setModalVisible(true);
+            setCurrentRow(record);
+      }}
+      >
+        详情
+    </Button>,
         <Button
           type="link"
           size="small"
@@ -142,8 +154,6 @@ function ManagementList() {
     <Fragment>
       <div style={{ width: '100%', float: 'right' }}>
         <ProTable<API.ClassifyIndustry.IndustryRow>
-          // params 是需要自带的参数
-          // 这个参数优先级更高，会覆盖查询表单的参数
           actionRef={actionRef}
           formRef={formTableRef}
           rowKey="industryId"
@@ -185,35 +195,40 @@ function ManagementList() {
           ]}
         />
       </div>
-      <EditCompanyListRow
-        open={modalVisible}
-        onSubmit={async (values) => {
-          let resData;
-          if (values.industryId) {
-            resData = await updateCmsIndustryIndustryt(values);
-          } else {
-            resData = await addCmsIndustryIndustryt(values);
-          }
-          if (resData.code === 200) {
-            setModalVisible(false);
-            setCurrentRow(undefined);
-            if (values.industryId) {
-              message.success('修改成功');
-            } else {
-              message.success('新增成功');
-            }
-            if (actionRef.current) {
-              actionRef.current.reload();
-            }
-          }
-        }}
-        onCancel={() => {
-          setModalVisible(false);
-          setCurrentRow(undefined);
-        }}
-        industryStatusEnum={industryStatusEnum}
-        values={currentRow}
-      ></EditCompanyListRow>
+<EditCompanyListRow
+  open={modalVisible}
+  onSubmit={async (values) => {
+    let resData;
+    if (values.industryId) {
+      resData = await updateCmsIndustryIndustryt(values);
+    } else {
+      resData = await addCmsIndustryIndustryt(values);
+    }
+    if (resData.code === 200) {
+      setModalVisible(false);
+      setCurrentRow(undefined);
+      if (values.industryId) {
+        message.success('修改成功');
+      } else {
+        message.success('新增成功');
+      }
+      if (actionRef.current) {
+        actionRef.current.reload();
+      }
+    }
+  }}
+  onCancel={() => {
+    setModalVisible(false);
+    setCurrentRow(undefined);
+  }}
+  industryStatusEnum={industryStatusEnum}
+  values={currentRow}
+  mode={
+    currentRow?.industryId 
+      ? access.hasPerms('area:business:List.update') ? 'edit' : 'view' 
+      : 'create'
+  }
+/>
     </Fragment>
   );
 }