feat: 使用编辑组件做展示，mock数据等待接口联调

src/pages/PurchaseAdmin/PurchaseList/DailyRecord/components/WriteRecordModal.js

@@ -7,30 +7,33 @@ import { approvalLog } from '@/services/record';
 const WriteRecordModal = ({
   defaultLogList = [],
   visible,
+  editMode = false,
   user,
   projects,
-  loading = false,
   onOk,
   onCancel,
 }) => {
   const defaultData = { id: '', code_id: '', title: '', content: '' };
+
   const [form] = Form.useForm();
-  const [list, setList] = useState(defaultLogList);
-  const [editMode, setEditMode] = useState(false);
 
-  // 首次加载时，判断是否传入了数据，传入就是编辑，不传入就是新增
+  const [list, setList] = useState([defaultData]);
+
+  // 每次关闭前 默认恢复到新增状态
   useEffect(() => {
     if (!visible) {
-      if (defaultLogList.length) {
-        setList(defaultLogList);
-        setEditMode(true);
-      } else {
-        setList([defaultData]);
-        setEditMode(false);
-      }
+      setList([defaultData]);
     }
   }, [visible]);
 
+  useEffect(() => {
+    if (defaultLogList.length) {
+      setList(defaultLogList);
+    } else {
+      setList([defaultData]);
+    }
+  }, [defaultLogList]);
+
   const handleAddClick = () => {
     setList([...list, defaultData]);
   };
@@ -53,7 +56,14 @@ const WriteRecordModal = ({
   };
 
   return (
-    <Modal title="写日志" open={visible} width={800} onOk={handleOk} onCancel={onCancel}>
+    <Modal
+      title="写日志"
+      open={visible}
+      width={800}
+      onOk={handleOk}
+      onCancel={onCancel}
+      destroyOnClose
+    >
       <Form
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 18 }}
@@ -61,6 +71,7 @@ const WriteRecordModal = ({
         width="100%"
         style={{ marginBottom: 20 }}
         form={form}
+        disabled={!editMode}
       >
         <Form.Item
           label="日志标题"
@@ -82,6 +93,7 @@ const WriteRecordModal = ({
               idx={idx}
               projects={projects}
               data={item}
+              showDeleteIcon={idx !== 0 && editMode}
               onChange={handleChangeItem}
               onDelete={handleDelItem}
             />
@@ -100,11 +112,13 @@ const WriteRecordModal = ({
 
 export default WriteRecordModal;
 
-const RenderItem = ({ idx, data, projects, onChange, onDelete }) => {
+const RenderItem = ({ idx, data, showDeleteIcon, projects, onChange, onDelete }) => {
   const [form] = Form.useForm();
+
   const projectName = useMemo(() => {
     return projects.find(item => item.ID == data.code_id)?.Name || '';
   }, [data.code_id]);
+
   return (
     <div className={styles.itemContent}>
       <Form
@@ -164,7 +178,9 @@ const RenderItem = ({ idx, data, projects, onChange, onDelete }) => {
           />
         </Form.Item>
       </Form>
-      <DeleteOutlined className={styles.delIcon} onClick={idx => onDelete(idx)} />
+      {showDeleteIcon && (
+        <DeleteOutlined className={styles.delIcon} onClick={idx => onDelete(idx)} />
+      )}
     </div>
   );
 };

src/pages/PurchaseAdmin/PurchaseList/DailyRecord/index.js

@@ -25,8 +25,11 @@ const DailyRecord = props => {
   const [date, setDate] = useState('');
   const [writeVisible, setWriteVisible] = useState(false);
   const [detailVisible, setDetailVisible] = useState(false);
+  const [editMode, setEditMode] = useState(false);
   const [selectedLogID, setselectedLogID] = useState('');
 
+  const [mockLogDetail, setMockLogDetail] = useState([]);
+
   // 请求列表
   const { data, run, loading: listLoading } = useRequest(date => approvalLogOwnList(date));
 
@@ -66,7 +69,7 @@ const DailyRecord = props => {
     },
   });
 
-  // 统一管理加载状态
+  // 统一管理 加载状态
   const allLoading = useMemo(() => {
     const loadingList = [propsLoading, listLoading, deleteLoading, addLoading, editLoading];
     if (loadingList.find(item => item)) {
@@ -75,10 +78,30 @@ const DailyRecord = props => {
     return false;
   }, [propsLoading, listLoading, deleteLoading, addLoading, editLoading]);
 
-  const editLog = record => {};
+  const editLog = record => {
+    setWriteVisible(true);
+    setEditMode(true);
+    setMockLogDetail([
+      {
+        id: 'gsdfgZ',
+        code_id: 12,
+        title: 'mock',
+        content: 'mock mock mock mock mock mock mock mock',
+      },
+      { id: 'bnsrqre', code_id: 13, title: 'mock', content: 'mock mock ' },
+      { id: 'hnsfggrqe', code_id: 14, title: 'mock', content: 'mock mock ' },
+    ]);
+  };
 
   const toDetail = record => {
-    runDetail(record.log_id);
+    // runDetail(record.log_id);
+    setWriteVisible(true);
+    setEditMode(false);
+    setMockLogDetail([
+      { id: 'gsdfgZ', code_id: 12, title: 'mock', content: 'mock mock ' },
+      { id: 'bnsrqre', code_id: 13, title: 'mock', content: 'mock mock ' },
+      { id: 'hnsfggrqe', code_id: 14, title: 'mock', content: 'mock mock ' },
+    ]);
   };
 
   const deleteRecord = record => {
@@ -132,6 +155,7 @@ const DailyRecord = props => {
     },
   ];
 
+  // 加载项目列表，如果没有
   useEffect(() => {
     if (!projects?.length) {
       dispatch({ type: 'record/queryProject' });
@@ -141,6 +165,7 @@ const DailyRecord = props => {
   const onChange = (date, dateString) => {
     run({ s_time: `${dateString} 00:00:00`, e_time: `${dateString} 23:59:59` });
   };
+
   return (
     <div>
       <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '20px' }}>
@@ -150,7 +175,13 @@ const DailyRecord = props => {
             查询
           </Button>
         </Space>
-        <Button type="primary" onClick={() => setWriteVisible(true)}>
+        <Button
+          type="primary"
+          onClick={() => {
+            setWriteVisible(true);
+            setEditMode(true);
+          }}
+        >
           写日志
         </Button>
       </div>
@@ -158,8 +189,9 @@ const DailyRecord = props => {
         <Table columns={columns} dataSource={data?.list} pagination={data?.pagination} />
       </Spin>
       <WriteRecordModal
-        defaultDetail={logDetail}
+        defaultLogList={mockLogDetail}
         visible={writeVisible}
+        editMode={editMode}
         user={currentUser}
         projects={projects}
         onOk={runAdd}