feat: 添加草稿编辑功能

config/env.config.js

 const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
-const environment = 'xyqb';
+const environment = 'sc';
 const envAPi = {
   api: `https://security-${environment}.liangkebang.net`, //'https://security-xyqb.liangkebang.net',
   kdspOpApi: `https://sc-merchant-api-${environment}.liangkebang.net`,

src/pages/GoodsManage/DraftModal/index.jsx

-import React, { useState } from 'react';
-import { Modal, Table } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { Modal, Table, message } from 'antd';
 import { columns } from './staticdata';
+import { apiDraftList, apiDraftDetail, apiDeleteDraft } from '../service';
 
 const DraftModal = props => {
   const [pageInfo, setPageInfo] = useState({
     current: 1,
     pageSize: 4,
-    total: 100,
   });
+  const [total, setTotal] = useState(0);
   const [dataSource, setdataSource] = useState([]);
 
+  const onClose = () => props.onCancel();
+
+  const onEdit = async record => {
+    const res = await apiDraftDetail(record.id);
+    if (res && res.data) {
+      const data = JSON.parse(res.data.content);
+      data.id = record.id;
+      props.onToDetail(data);
+      onClose();
+    }
+  };
+
+  const getDraftList = async params => {
+    const res = await apiDraftList(params);
+    if (res && res.data && res.data.records) {
+      setdataSource(res.data.records);
+      setTotal(res.data.total);
+    }
+  };
+  const onRefresh = () => {
+    getDraftList({
+      pageSize: pageInfo.pageSize,
+      pageNo: pageInfo.current,
+    });
+  };
+
+  const onDel = record => {
+    Modal.confirm({
+      title: '确认提示',
+      content: '操作后不可更改，确认是否删除？',
+      onOk: async () => {
+        console.log('record :>> ', record);
+        await apiDeleteDraft(record.id);
+        message.success('删除成功！');
+        onRefresh();
+      },
+    });
+  };
+
   const onChange = (current, pageSize) => {
-    setPageInfo({
+    const json = {
       current,
       pageSize,
-    });
+    };
+    setPageInfo(json);
+    json.pageNo = current;
+    getDraftList(json);
   };
 
-  const onClose = () => props.onCancel();
-
   const pagination = {
     ...pageInfo,
+    total,
+    showTotal: t => `共 ${t} 项数据`,
     onChange,
+    pageSizeOptions: [4, 20, 50, 100],
+    showSizeChanger: !0,
     onShowSizeChange: onChange,
   };
 
+  useEffect(() => {
+    if (props.visible) {
+      onRefresh();
+    }
+  }, [props.visible]);
+
+  const res = {
+    onDel,
+    onEdit,
+  };
+
   return (
     <Modal
       visible={props.visible}
@@ -32,8 +88,14 @@ const DraftModal = props => {
       onCancel={onClose}
       maskClosable={false}
       width="1000px"
+      footer={[]}
     >
-      <Table columns={columns} pagination={pagination} dataSource={dataSource} />
+      <Table
+        columns={columns(res)}
+        pagination={pagination}
+        rowKey={record => record.id}
+        dataSource={dataSource}
+      />
     </Modal>
   );
 };

src/pages/GoodsManage/DraftModal/staticdata.js

 import React from 'react';
 import { Button } from 'antd';
+import styles from '../style.less';
 
-export const columns = [
+const productType = {
+  1: '普通商品',
+  2: '虚拟商品',
+  3: '电子卡卷',
+  4: '服务商品',
+};
+
+export const columns = ({ onDel, onEdit }) => [
   {
     title: '草稿ID',
-    dataIndex: 'skuId',
+    dataIndex: 'id',
     width: 85,
     align: 'center',
   },
   {
     title: '商品名称',
-    dataIndex: 'skuName',
-    width: 125,
+    dataIndex: 'productName',
     align: 'center',
+    render(text) {
+      return <div className={styles.draftName}>{text}</div>;
+    },
   },
   {
     title: '所属类目',
-    dataIndex: 'skuId',
-    width: 125,
+    dataIndex: 'leimu',
+    width: 240,
     align: 'center',
+    render(text, record) {
+      if (record.firstCategoryName) {
+        return `${record.firstCategoryName}>${record.secondCategoryName}>${record.thirdCategoryName}`;
+      }
+      return '-';
+    },
   },
   {
     title: '商品类型',
-    dataIndex: 'skuId',
-    width: 125,
+    dataIndex: 'productType',
+    width: 100,
     align: 'center',
+    render(text) {
+      return productType[text];
+    },
   },
   {
     title: '创建时间',
-    dataIndex: 'skuId',
-    width: 125,
+    dataIndex: 'createdAt',
+    width: 120,
     align: 'center',
   },
   {
     title: '操作',
     dataIndex: 'action',
-    width: 120,
+    width: 130,
     align: 'center',
-    render: () => (
+    render: (text, record) => (
       <>
-        <Button key="edit" type="link" size="small">
+        <Button key="edit" type="link" size="small" onClick={() => onEdit(record)}>
           修改
         </Button>
-        <Button key="viewP" type="link" size="small" onClick={() => {}}>
+        <Button key="viewP" type="link" size="small" onClick={() => onDel(record)}>
           删除
         </Button>
       </>

src/pages/GoodsManage/index.jsx

@@ -53,11 +53,12 @@ class goodsManage extends Component {
     stockSkuIds: [],
     isType: '',
 
-    serviceVisble: true,
+    serviceVisble: false,
     serviceData: {},
     visibleAuditModal: false,
     auditRow: {}, // 查看审核信息使用
     isVisibleDraft: false, // 显示隐藏草稿箱
+    isEditDraft: false, // 是否编辑草稿
   };
 
   currentLog = null;
@@ -308,6 +309,7 @@ class goodsManage extends Component {
         serviceData: SourceData,
         serviceVisble: true,
         createloading: false,
+        isEditDraft: false,
       });
     } else {
       this.setState({
@@ -319,9 +321,20 @@ class goodsManage extends Component {
     }
   };
 
+  // 编辑草稿
+  editDraft = data => {
+    this.setState({
+      serviceData: data,
+      serviceVisble: true,
+      isEditDraft: true,
+    });
+  };
+
+  // 显示新增商品弹窗
   serviceVisbleClose = (flag, refresh) => {
     this.setState({
       serviceVisble: flag,
+      isEditDraft: false,
       serviceData: {},
     });
     if (refresh) {
@@ -475,6 +488,7 @@ class goodsManage extends Component {
               virtualCategoryList={this.state.virtualTreeData}
               specListData={this.state.specListData}
               permissions={permissions}
+              isDraft={this.state.isEditDraft}
             />
           )}
         </Spin>
@@ -490,7 +504,11 @@ class goodsManage extends Component {
           />
         )}
         {this.state.isVisibleDraft && (
-          <DraftModal visible={this.state.isVisibleDraft} onCancel={this.openDraftModal} />
+          <DraftModal
+            visible={this.state.isVisibleDraft}
+            onCancel={this.openDraftModal}
+            onToDetail={this.editDraft}
+          />
         )}
       </PageHeaderWrapper>
     );

src/pages/GoodsManage/service.js

@@ -269,3 +269,23 @@ export const apiQueryLastAuditRecord = skuId =>
   request.get(`/api/kdsp/sku/last/audit/record?skuId=${skuId}`, {
     prefix: goodsApi,
   });
+
+// 商品草稿详情
+export const apiDraftDetail = draftId =>
+  request.get(`/api/merchants/drafts/detail?id=${draftId}`, {
+    prefix: goodsApi,
+  });
+
+// 删除商品草稿
+export const apiDeleteDraft = draftId =>
+  request.get(`/api/merchants/drafts/delete?id=${draftId}`, {
+    prefix: goodsApi,
+  });
+
+// 商品草稿列表
+export async function apiDraftList(data) {
+  return request.post('/api/merchants/drafts/list', {
+    prefix: goodsApi,
+    data,
+  });
+}

src/pages/GoodsManage/style.less

@@ -126,3 +126,7 @@
 .attrboxMore {
   max-height: max-content;
 }
+.draftName {
+  text-align: left;
+  word-break: break-all;
+}

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -228,7 +228,6 @@ const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColu
 };
 
 const FormPriceOrStock = forwardRef((props, ref) => {
-  console.log('props :>> ', props);
   const { specList, editData, skuList = [], onSpecChange } = props;
 
   const editRef = useRef(null);

src/pages/ServiceGoods/index.jsx

@@ -20,6 +20,7 @@ import {
   merchantProductEdit,
   getByProductType,
   apiCreateDraft,
+  apiEditDraft,
 } from './service';
 import { isUrl, filterSendData, clearCurrent, onAutoSaveValue, localAutoSaveKey } from './utils';
 import { ServiceContext } from './context';
@@ -163,6 +164,7 @@ const ServiceGoods = options => {
   const shopGetByProductType = async type => {
     if (!newCategoryList[type]?.length) {
       const result = await getByProductType(type);
+      console.log('result :>> ', result);
       setNewCategoryList({
         ...newCategoryList,
         [type]: result.data || [],
@@ -185,6 +187,9 @@ const ServiceGoods = options => {
       if (isEdit) {
         sendData.id = pageId;
       }
+      if (options.isDraft) {
+        sendData.productDraftId = SourceData.id;
+      }
       console.log('sendData :>> ', sendData);
       sendMerchantProductHttpRequest(sendData);
     }
@@ -206,6 +211,36 @@ const ServiceGoods = options => {
     }
   };
 
+  const onSetData = info => {
+    if (info.serviceItem) {
+      const ptime = info.serviceItem.purchaseTime;
+      const utime = info.serviceItem.useTime;
+      if (ptime && ptime.length === 2) {
+        ptime[0] = moment(ptime[0]);
+        ptime[1] = moment(ptime[1]);
+      }
+      if (utime && utime.length === 2) {
+        utime[0] = moment(utime[0]);
+        utime[1] = moment(utime[1]);
+      }
+    }
+    setProductType(info.type);
+    setEditData(info);
+    if (info.infoMation && info.infoMation.categoryId && info.infoMation.categoryId.length) {
+      setCategoryIds(info.infoMation.categoryId);
+    }
+  };
+
+  // 继续编辑(使用缓存数据)
+  const onContinueEdit = () => {
+    setVisibleCacheEdit(false);
+    setIsUseCache(true);
+    const info = localStorage.get(localAutoSaveKey);
+    if (info) {
+      onSetData(info);
+    }
+  };
+
   useEffect(() => {
     (async () => {
       if (!options.visible) {
@@ -217,11 +252,23 @@ const ServiceGoods = options => {
       await getAfterSalesAddrsPage();
       await getMerchantSpecList();
       if (Object.keys(SourceData).length) {
-        setEditData(SourceData);
-        setPageId(SourceData.id);
-        setProductType(SourceData.productType);
-        setCategoryIds(SourceData.infoMation.categoryId || []);
-        setIsEdit(true);
+        console.log('SourceData :>> ', SourceData);
+        // 从编辑草稿进入 执行以下代码
+        if (options.isDraft) {
+          setIsUseCache(true);
+          setVisibleCacheEdit(false);
+          onSetData(SourceData);
+          onValuesChange(SourceData, !0);
+        } else {
+          setEditData(SourceData);
+          setPageId(SourceData.id);
+          setProductType(SourceData.productType);
+          setCategoryIds(SourceData.infoMation.categoryId || []);
+          setIsEdit(true);
+        }
+      } else {
+        // 默认生成一条规格数据
+        stockRef.current.onFinish();
       }
       setPageLoading(false);
     })();
@@ -278,37 +325,52 @@ const ServiceGoods = options => {
   const onCategoryChange = e => {
     setCategoryIds(e);
   };
+
   // 保存草稿
-  const onSaveDraft = () => {
+  const onSaveDraft = async () => {
+    console.log('newCategoryList :>> ', newCategoryList);
     const info = localStorage.get(localAutoSaveKey);
     if (info) {
-      localStorage.remove(localAutoSaveKey);
-    }
-  };
-  // 继续编辑(使用缓存数据)
-  const onContinueEdit = () => {
-    setVisibleCacheEdit(false);
-    setIsUseCache(true);
-    const info = localStorage.get(localAutoSaveKey);
-    if (info) {
-      console.log('info :>> ', info);
-      if (info.serviceItem) {
-        const ptime = info.serviceItem.purchaseTime;
-        const utime = info.serviceItem.useTime;
-        if (ptime && ptime.length === 2) {
-          ptime[0] = moment(ptime[0]);
-          ptime[1] = moment(ptime[1]);
-        }
-        if (utime && utime.length === 2) {
-          utime[0] = moment(utime[0]);
-          utime[1] = moment(utime[1]);
-        }
+      if (
+        !info.infoMation ||
+        !info.infoMation.name ||
+        !info.infoMation.categoryId ||
+        info.infoMation.categoryId.length !== 3
+      ) {
+        message.warning('请添加商品类目和名称');
+        return;
       }
-      setProductType(info.type);
-      setEditData(info);
-      if (info.infoMation && info.infoMation.categoryId && info.infoMation.categoryId.length) {
-        setCategoryIds(info.infoMation.categoryId);
+      info.type = productType;
+      let arr = newCategoryList[info.type];
+      const first = arr.find(item => item.id === info.infoMation.categoryId[0]);
+      arr = first.children;
+      const second = arr.find(item => item.id === info.infoMation.categoryId[1]);
+      arr = second.children;
+      const third = arr.find(item => item.id === info.infoMation.categoryId[2]);
+
+      const params = {
+        productName: info.infoMation.name,
+        productType: info.type,
+        firstCategoryId: info.infoMation.categoryId[0],
+        firstCategoryName: first.name,
+        secondCategoryId: info.infoMation.categoryId[1],
+        secondCategoryName: second.name,
+        thirdCategoryId: info.infoMation.categoryId[2],
+        thirdCategoryName: third.name,
+        content: JSON.stringify(info),
+      };
+      console.log('params :>> ', params);
+      setPageLoading(true);
+      let api = apiCreateDraft;
+      if (options.isDraft) {
+        params.id = SourceData.id;
+        api = apiEditDraft;
       }
+      await api(params);
+      localStorage.remove(localAutoSaveKey);
+      setPageLoading(false);
+      message.success('草稿保存成功！');
+      handleCancel(true);
     }
   };
 

src/pages/ServiceGoods/service.js

@@ -106,7 +106,14 @@ export const apiGetAttribute = categoryId =>
 
 // 新建草稿
 export const apiCreateDraft = data =>
-  request.post('/product/draft/add', {
+  request.post('/api/merchants/drafts/add', {
+    prefix: goodsApi,
+    data,
+  });
+
+// 编辑草稿
+export const apiEditDraft = data =>
+  request.post('/api/merchants/drafts/edit', {
     prefix: goodsApi,
     data,
   });

src/pages/ServiceGoods/utils.js

@@ -262,7 +262,7 @@ export const onAutoSaveValue = (e, isClear) => {
     localStorage.set(localAutoSaveKey, Object.assign({}, e));
   } else {
     const info = localStorage.get(localAutoSaveKey) || {};
-    localStorage.set(localAutoSaveKey, Object.assign({}, info, e));
+    localStorage.set(localAutoSaveKey, Object.assign({ type: 1 }, info, e));
   }
 };