Synchronization

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

@@ -4,14 +4,31 @@ import { useEffect, useMemo, useState } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { approvalLog } from '@/services/record';
 
-const WriteRecordModal = ({ visible, user, projects, loading = false, onOk, onCancel }) => {
+const WriteRecordModal = ({
+  defaultLogList = [],
+  visible,
+  user,
+  projects,
+  loading = false,
+  onOk,
+  onCancel,
+}) => {
+  const defaultData = { id: '', code_id: '', title: '', content: '' };
   const [form] = Form.useForm();
-  const defaultData = { code_id: '', title: '', content: '' };
-  const [list, setList] = useState([defaultData]);
-  // console.log(user, list);
+  const [list, setList] = useState(defaultLogList);
+  const [editMode, setEditMode] = useState(false);
 
+  // 首次加载时，判断是否传入了数据，传入就是编辑，不传入就是新增
   useEffect(() => {
-    if (!visible) setList([defaultData]);
+    if (!visible) {
+      if (defaultLogList.length) {
+        setList(defaultLogList);
+        setEditMode(true);
+      } else {
+        setList([defaultData]);
+        setEditMode(false);
+      }
+    }
   }, [visible]);
 
   const handleAddClick = () => {
@@ -30,7 +47,6 @@ const WriteRecordModal = ({ visible, user, projects, loading = false, onOk, onCa
     newList.splice(idx, 1);
     setList(newList);
   };
-  // console.log('00000000000---------', list);
 
   const handleOk = () => {
     onOk(list);

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

@@ -1,5 +1,6 @@
-import { Button, DatePicker, Space, Table } from 'antd';
-import { useEffect, useState } from 'react';
+import { Button, DatePicker, Space, Table, Modal, message, Spin } from 'antd';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { useEffect, useMemo, useState } from 'react';
 import WriteRecordModal from './components/WriteRecordModal';
 import { connect } from 'dva';
 import RecordDetailModal from './components/RecordDetail';
@@ -16,8 +17,10 @@ import record from './models/record';
 import { log } from 'lodash-decorators/utils';
 import moment from 'moment';
 
+const { confirm } = Modal;
+
 const DailyRecord = props => {
-  const { currentUser, projects, dispatch } = props;
+  const { currentUser, projects, loading: propsLoading, dispatch } = props;
 
   const [date, setDate] = useState('');
   const [writeVisible, setWriteVisible] = useState(false);
@@ -25,7 +28,7 @@ const DailyRecord = props => {
   const [selectedLogID, setselectedLogID] = useState('');
 
   // 请求列表
-  const { data, run, loading } = useRequest(date => approvalLogOwnList(date));
+  const { data, run, loading: listLoading } = useRequest(date => approvalLogOwnList(date));
 
   // 查询日志详情
   const { data: logDetail, run: runDetail, loading: detailLoading } = useRequest(
@@ -35,38 +38,60 @@ const DailyRecord = props => {
     }
   );
 
-  // 删除日志
-  const { run: runAdd } = useRequest(approvalAddLog, {
+  // 添加日志
+  const { run: runAdd, loading: addLoading } = useRequest(approvalAddLog, {
     manual: true,
     onSuccess: () => {
-      message('删除日志成功');
+      message.success('添加日志成功');
+      setWriteVisible(false);
       run();
     },
   });
 
-  // 添加日志
-  const { run: runDelete } = useRequest(approvalDeleteLog, {
+  // 删除日志
+  const { run: runDelete, loading: deleteLoading } = useRequest(logID => approvalDeleteLog(logID), {
     manual: true,
     onSuccess: () => {
-      message('添加日志成功');
+      message.success('删除日志成功');
       run();
     },
   });
 
   // 编辑日志
-  const { run: runEdit } = useRequest(approvalEditLog, {
+  const { run: runEdit, loading: editLoading } = useRequest(approvalEditLog, {
     manual: true,
     onSuccess: () => {
-      message('编辑日志成功');
+      message.success('编辑日志成功');
       run();
     },
   });
 
+  // 统一管理加载状态
+  const allLoading = useMemo(() => {
+    const loadingList = [propsLoading, listLoading, deleteLoading, addLoading, editLoading];
+    if (loadingList.find(item => item)) {
+      return true;
+    }
+    return false;
+  }, [propsLoading, listLoading, deleteLoading, addLoading, editLoading]);
+
+  const editLog = record => {};
+
   const toDetail = record => {
-    console.log(record);
     runDetail(record.log_id);
   };
 
+  const deleteRecord = record => {
+    confirm({
+      title: '提示',
+      icon: <ExclamationCircleOutlined />,
+      content: '确认删除此条日志？',
+      onOk() {
+        runDelete(record.log_id);
+      },
+    });
+  };
+
   const columns = [
     {
       title: '日志标题',
@@ -98,9 +123,9 @@ const DailyRecord = props => {
       render: record => {
         return (
           <Space>
-            <a>编辑</a>
+            <a onClick={() => editLog(record)}>编辑</a>
             <a onClick={() => toDetail(record)}>详情</a>
-            <a>删除</a>
+            <a onClick={() => deleteRecord(record)}>删除</a>
           </Space>
         );
       },
@@ -129,8 +154,11 @@ const DailyRecord = props => {
           写日志
         </Button>
       </div>
-      <Table columns={columns} dataSource={data?.list} pagination={data?.pagination} />
+      <Spin spinning={allLoading}>
+        <Table columns={columns} dataSource={data?.list} pagination={data?.pagination} />
+      </Spin>
       <WriteRecordModal
+        defaultDetail={logDetail}
         visible={writeVisible}
         user={currentUser}
         projects={projects}

src/services/record.js

@@ -9,10 +9,9 @@ export async function approvalAddLog(params) {
 }
 
 // 删除日志
-export async function approvalDeleteLog(params) {
-  return request(`/api/v2/approval/log/${params.id}`, {
+export async function approvalDeleteLog(logID) {
+  return request(`/api/v2/approval/log/${logID}`, {
     method: 'DELETE',
-    body: params,
   });
 }