添加查看详情功能

src/pages/Management/List/edit.tsx

@@ -5,6 +5,7 @@ import {
   ProFormSelect,
   ProFormText,
   ProFormTextArea,
+  ProDescriptions,
 } from '@ant-design/pro-components';
 import { Form } from 'antd';
 import React, { useEffect } from 'react';
@@ -19,6 +20,7 @@ export type ListFormProps = {
   educationEnum: DictValueEnumObj;
   experienceEnum: DictValueEnumObj;
   areaEnum: DictValueEnumObj;
+  mode?: 'view' | 'edit' | 'create'; 
 };
 
 const waitTime = (time: number = 100) => {
@@ -32,6 +34,7 @@ const waitTime = (time: number = 100) => {
 const listEdit: React.FC<ListFormProps> = (props) => {
   const [form] = Form.useForm<{ name: string; company: string; companyName: number }>();
   const { educationEnum, experienceEnum, areaEnum } = props;
+  const { mode = props.values ? 'edit' : 'create' } = props;
   useEffect(() => {
     form.resetFields();
     if (props.values) {
@@ -40,7 +43,7 @@ const listEdit: React.FC<ListFormProps> = (props) => {
         jobLocationAreaCode: String(props.values.jobLocationAreaCode || ''),
       });
     }
-  }, [form, props]);
+  }, [form, props.values?.jobID]);
 
   const handleCancel = () => {
     props.onCancel();
@@ -54,13 +57,59 @@ const listEdit: React.FC<ListFormProps> = (props) => {
   const handleChange = (_: string, value: any) => {
     form.setFieldValue('companyName', value.label);
   };
-
+  if (mode === 'view') {
+    return (
+      <ModalForm
+        title="岗位详情"
+        open={props.open}
+        width={800}
+        modalProps={{
+          destroyOnClose: true,
+          onCancel: () => handleCancel(),
+          footer: null, 
+        }}
+        submitter={false}
+      >
+         <ProDescriptions<API.ManagementList.Manage>
+          column={2}
+          dataSource={props.values || {}}
+        >
+          <ProDescriptions.Item dataIndex="jobTitle" label="岗位名称" />
+          <ProDescriptions.Item dataIndex="companyName" label="招聘公司" />
+          <ProDescriptions.Item dataIndex="minSalary" label="最低薪资(元/月)" />
+          <ProDescriptions.Item dataIndex="maxSalary" label="最高薪资(元/月)" />
+          <ProDescriptions.Item 
+            dataIndex="education" 
+            label="学历要求"
+            valueEnum={educationEnum}
+          />
+          <ProDescriptions.Item 
+            dataIndex="experience" 
+            label="工作经验"
+            valueEnum={experienceEnum}
+          />
+          <ProDescriptions.Item 
+            dataIndex="jobLocationAreaCode" 
+            label="工作区县"
+            valueEnum={areaEnum}
+          />
+          <ProDescriptions.Item dataIndex="vacancies" label="招聘人数" />
+          <ProDescriptions.Item dataIndex="jobLocation" label="工作地点" />
+          <ProDescriptions.Item 
+            dataIndex="description" 
+            label="岗位描述" 
+            span={2}  // 跨两列显示
+          />
+        </ProDescriptions>
+      </ModalForm>
+    );
+  }
   return (
     <ModalForm<{
       name: string;
       company: string;
     }>
-      title="新建表单"
+       title={mode === 'edit' ? '编辑岗位' : '新建岗位'}
       form={form}
       autoFocusFirstInput
       open={props.open}

src/pages/Management/List/index.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/services/Management/list';
 import { Button, FormInstance, message, Modal, Switch } from 'antd';
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
-import { BarChartOutlined, DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';
+import { AlignLeftOutlined, BarChartOutlined, DeleteOutlined, FormOutlined, PlusOutlined } from '@ant-design/icons';
 import EditManageRow from './edit';
 import { getDictValueEnum } from '@/services/system/dict';
 import DictTag from '@/components/DictTag';
@@ -60,7 +60,7 @@ function ManagementList() {
   const [hotEnum, setHotEnum] = useState<any>([]);
   const [currentRow, setCurrentRow] = useState<API.ManagementList.Manage>();
   const [modalVisible, setModalVisible] = useState<boolean>(false);
-
+  const [mode, setMode] = useState<'view' | 'edit' | 'create'>('create');
   useEffect(() => {
     getDictValueEnum('education', true, true).then((data) => {
       setEducationEnum(data);
@@ -178,7 +178,22 @@ function ManagementList() {
       dataIndex: 'jobId',
       width: 300,
       render: (jobId, record) => [
+        <div key="first-row" style={{ marginBottom: 8, display: 'flex', justifyContent: 'center' }}>
         <Button
+        type="link"
+        size="small"
+        key="view"
+        icon={<AlignLeftOutlined />}
+        hidden={!access.hasPerms('area:business:List.view')}
+        onClick={() => {
+          setCurrentRow(record);
+          setModalVisible(true);
+          setMode('view'); // 新增状态控制模式
+        }}
+      >
+        查看详情
+      </Button>
+      <Button
           type="link"
           size="small"
           key="edit"
@@ -187,7 +202,9 @@ function ManagementList() {
           onClick={() => history.push(`/management/see-matching/index/${record.jobId}`)}
         >
           查看申请人
-        </Button>,
+        </Button>
+        </div>,
+        <div key="second-row" style={{ display: 'flex', justifyContent: 'space-evenly'}}>
         <Button
           type="link"
           size="small"
@@ -200,7 +217,7 @@ function ManagementList() {
           }}
         >
           编辑
-        </Button>,
+        </Button>
         <Button
           type="link"
           size="small"
@@ -226,7 +243,8 @@ function ManagementList() {
           }}
         >
           删除
-        </Button>,
+        </Button>
+        </div>
       ],
     },
   ];
@@ -260,6 +278,7 @@ function ManagementList() {
               onClick={async () => {
                 setCurrentRow(undefined);
                 setModalVisible(true);
+                setMode('create');
               }}
             >
               <PlusOutlined /> 新建
@@ -281,6 +300,7 @@ function ManagementList() {
       </div>
       <EditManageRow
         open={modalVisible}
+        mode={mode}
         onSubmit={async (values) => {
           let resData;
           if (values.jobId) {