feat: 添加草稿列表

src/pages/GoodsManage/DraftModal/index.jsx

+import React, { useState } from 'react';
+import { Modal, Table } from 'antd';
+import { columns } from './staticdata';
+
+const DraftModal = props => {
+  const [pageInfo, setPageInfo] = useState({
+    current: 1,
+    pageSize: 4,
+    total: 100,
+  });
+  const [dataSource, setdataSource] = useState([]);
+
+  const onChange = (current, pageSize) => {
+    setPageInfo({
+      current,
+      pageSize,
+    });
+  };
+
+  const onClose = () => props.onCancel();
+
+  const pagination = {
+    ...pageInfo,
+    onChange,
+    onShowSizeChange: onChange,
+  };
+
+  return (
+    <Modal
+      visible={props.visible}
+      title="草稿箱"
+      onCancel={onClose}
+      maskClosable={false}
+      width="1000px"
+    >
+      <Table columns={columns} pagination={pagination} dataSource={dataSource} />
+    </Modal>
+  );
+};
+
+export default DraftModal;

src/pages/GoodsManage/DraftModal/staticdata.js

+import React from 'react';
+import { Button } from 'antd';
+
+export const columns = [
+  {
+    title: '草稿ID',
+    dataIndex: 'skuId',
+    width: 85,
+    align: 'center',
+  },
+  {
+    title: '商品名称',
+    dataIndex: 'skuName',
+    width: 125,
+    align: 'center',
+  },
+  {
+    title: '所属类目',
+    dataIndex: 'skuId',
+    width: 125,
+    align: 'center',
+  },
+  {
+    title: '商品类型',
+    dataIndex: 'skuId',
+    width: 125,
+    align: 'center',
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'skuId',
+    width: 125,
+    align: 'center',
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    width: 120,
+    align: 'center',
+    render: () => (
+      <>
+        <Button key="edit" type="link" size="small">
+          修改
+        </Button>
+        <Button key="viewP" type="link" size="small" onClick={() => {}}>
+          删除
+        </Button>
+      </>
+    ),
+  },
+];

src/pages/GoodsManage/index.jsx

@@ -25,6 +25,7 @@ import SearchForm from './SearchForm';
 import TempleatModal from './TempleatModal';
 import ServiceGoods from '../ServiceGoods';
 import InfoAudit from './infoAudit';
+import DraftModal from './DraftModal';
 
 import { GOOD_MANAGE } from '@/../config/permission.config';
 
@@ -56,6 +57,7 @@ class goodsManage extends Component {
     serviceData: {},
     visibleAuditModal: false,
     auditRow: {}, // 查看审核信息使用
+    isVisibleDraft: false, // 显示隐藏草稿箱
   };
 
   currentLog = null;
@@ -327,6 +329,14 @@ class goodsManage extends Component {
     }
   };
 
+  // 打开草稿箱
+  openDraftModal = e => {
+    console.log('e :>> ', e);
+    this.setState({
+      isVisibleDraft: !!e,
+    });
+  };
+
   onEdit = () => {
     this.setState({ visibleAuditModal: false, auditRow: {} });
     this.serviceVisbleChange(this.state.auditRow);
@@ -348,17 +358,26 @@ class goodsManage extends Component {
     this.canEditable = permissions[GOOD_MANAGE.EDITABLE];
     return (
       <PageHeaderWrapper>
-        {canAddNormal || canAddService ? (
-          <Button
-            type="primary"
-            className={styles.button}
-            onClick={() => this.serviceVisbleClose(true)}
-          >
-            新增商品
-          </Button>
-        ) : (
-          ''
-        )}
+        {canAddNormal || canAddService
+          ? [
+              <Button
+                type="primary"
+                key="btnNew"
+                className={styles.button}
+                onClick={() => this.serviceVisbleClose(true)}
+              >
+                新增商品
+              </Button>,
+              <Button
+                type="link"
+                key="btnDraft"
+                className={styles.button}
+                onClick={this.openDraftModal}
+              >
+                草稿箱
+              </Button>,
+            ]
+          : ''}
         <Spin spinning={this.state.createloading}>
           <Card>
             <SearchForm
@@ -470,6 +489,9 @@ class goodsManage extends Component {
             onEdit={this.onEdit}
           />
         )}
+        {this.state.isVisibleDraft && (
+          <DraftModal visible={this.state.isVisibleDraft} onCancel={this.openDraftModal} />
+        )}
       </PageHeaderWrapper>
     );
   }