feat: 添加商品上架引导modal

src/pages/commodity/products/components/putawayGuide/index.less

+.giudeContainer {
+  display: flex;
+  flex: 1;
+
+  .guideItem {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    margin: 8px;
+    width: 180px;
+    background: #F5F6F7;
+    border-radius: 8px;
+    padding: 16px;
+
+    p {
+      height: 20px;
+      font-size: 12px;
+      color: #A2A2A2;
+      line-height: 20px;
+    }
+
+    :global {
+      .ant-btn {
+        position: absolute;
+        bottom: 16px;
+      }
+    }
+
+    .stepNumber {
+      width: 65px;
+      height: 132px;
+      opacity: 0.09;
+      font-weight: Bold;
+      font-size: 110px;
+      color: #8B9190;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}

src/pages/commodity/products/components/putawayGuide/index.tsx

+import React from 'react'
+import { useIntl } from 'umi';
+import { Button, Modal, ModalProps } from 'antd';
+import styles from './index.less'
+
+export interface PutawayGuideProps extends ModalProps {
+  visible?: boolean,
+}
+
+/**
+ * 商品 上架引导
+ * @param props
+ * @returns
+ */
+const PutawayGuide: React.FC<PutawayGuideProps> = (props) => {
+  const intl = useIntl();
+  const {visible = false, ...restProps } = props
+
+  return (
+    <Modal
+      title="商品上架引导"
+      visible={visible}
+      footer={null}
+      destroyOnClose={true}
+      {...restProps}
+    >
+      <div className={styles.giudeContainer}>
+        <div className={styles.guideItem}>
+          <h3>创建自营商城(店铺)</h3>
+          <p>您还没有创建店铺。</p>
+          <Button>创建店铺</Button>
+          <span className={styles.stepNumber}>1</span>
+        </div>
+        <div className={styles.guideItem}>
+          <h3>配置仓位库存</h3>
+          <p>您还没有配置仓位库存。</p>
+          <Button>配置仓位库存</Button>
+          <span className={styles.stepNumber}>2</span>
+        </div>
+        <div className={styles.guideItem}>
+          <h3>配置订单流程</h3>
+          <p>您还没有配置订单流程。</p>
+          <Button>配置订单流程</Button>
+          <span className={styles.stepNumber}>3</span>
+        </div>
+        <div className={styles.guideItem}>
+          <h3>上架商品</h3>
+          {/* <p>您还没有创建店铺。</p>
+          <Button>创建店铺</Button> */}
+          <span className={styles.stepNumber}>4</span>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+PutawayGuide.defaultProps = {}
+
+export default PutawayGuide

src/pages/commodity/products/index.tsx

@@ -33,6 +33,7 @@ import UpperProductModalTable from './components/upperProductModalTable'
 import { Item } from '@/components/ButtonTabs'
 import { getProductCommodityGetCommodityList, getProductCommodityGetShop, GetProductCommodityGetShopResponse, postProductCommodityApplyCheckCommodity, postProductCommodityCopyCommodity, postProductCommodityDeleteBatchCommodity, postProductCommodityExportCommodityQrCode, postProductCommodityGetShopBatch, postProductCommodityOffPublishCommodity, postProductCommodityOffPublishCommodityBatch, postProductCommodityPublishCommodity, postProductCommodityPublishCommodityBatch } from '@/services/ProductV2Api'
 import { getTemplateWebMemberShopWebFindCurrMemberShop } from '@/services/TemplateV2Api'
+import PutawayGuide from './components/putawayGuide'
 
 const { confirm } = Modal;
 
@@ -74,11 +75,16 @@ const Products: React.FC<{}> = () => {
   const currentRef = useRef<any>([])
   const currentRefRow = useRef<any>([])
   const upperRef = useRef<any>({})
+  const [giudeVisible, setGiudeVisible] = useState<boolean>(false)
 
   const [shopId, setShopId] = useState<any>()
   /** 带参数查询，给表单带默认值 */
   const { searchData, formatInitialValue, clear } = useSetSearchValueInTable();
 
+  useEffect(() => {
+    console.log(upDownModal, 'upDownModal')
+  }, [upDownModal])
+
   const formatedFormValue = useMemo(() => {
     const value = formatInitialValue?.value || {};
     if (value && "statusList" in value) {
@@ -425,6 +431,7 @@ const Products: React.FC<{}> = () => {
         setIsDisabledOKbtn(false)
         message.error(intl.formatMessage({ id: 'commodity.products.handleUp.error' }))
       }
+      setGiudeVisible(true)
     } else {
       postProductCommodityOffPublishCommodity(params).then(res => {
         setUpDownModal(false)
@@ -525,7 +532,7 @@ const Products: React.FC<{}> = () => {
     } else if(e.key === '5') {
       console.log(currentRefRow.current)
       if(!currentRefRow.current.every(item => item.status === 5)) {
-        return message.error(intl.formatMessage({ id: 'commodity.products.handleBatch.qingxuanzeshangjiashangpin' }))
+        return message.error(intl.formatMessage({ id: 'commodity.products.schema.fastSchema.qingxuanzeshangjiashangpin' }))
       }
       currentRef.current.length ? setExportQrcodeModal(true) : message.error(intl.formatMessage({ id: 'commodity.products.handleBatchDelete.error' }))
     }
@@ -800,6 +807,8 @@ const Products: React.FC<{}> = () => {
       </Modal>
       {/* 选择上游商品 */}
       <UpperProductModalTable currentRef={upperRef} type="checkbox" tableRef={ref} />
+      {/* 商品上架引导 */}
+      <PutawayGuide visible={giudeVisible} width={800} onCancel={() => setGiudeVisible(false)} />
     </PageHeaderWrapper>
   )
 }