✨ feat(): 优化货品选择

src/pages/transaction/purchaseAbility/purchasDoor/purchasInfo/index.tsx

@@ -37,6 +37,7 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
   const [selectCategoryData, setSelectCategoryData] = useState<any>([defaultCategoryData])
   const [companyPics, setCompanyPics] = useState([]) // 厂房照片
   const [honorPics, setHonorPics] = useState([]) // 资质荣誉
+  const [advertPics, setAdvertPics] = useState([]) // 采购门户广告图
   const [slideshowBOList, setSlideshowBOList] = useState([]) // 首页轮播图
   const [logo, setLogo] = useState<string>("")
   const [shopInfo, setShopInfo] = useState<any>()
@@ -106,6 +107,7 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
           setCompanyPics(data.companyPics || [])
           setHonorPics(data.honorPics || [])
           setSlideshowBOList(data.slideshowBOList || [])
+          setAdvertPics(data.advertPics || [])
           if (data.albumName && data.albumUrl) {
             setFile({
               albumName: data.albumName,
@@ -119,6 +121,7 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
             companyPics: data.companyPics || [],
             honorPics: data.honorPics || [],
             slideshowBOList: data.slideshowBOList || [],
+            advertPics: data.advertPics || []
           })
         }
       }
@@ -186,6 +189,15 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
     })
   }
 
+  const handleDeleteAdvertPicsItem = (itemInfo: any) => {
+    let result = [...advertPics]
+    result = result.filter(item => item !== itemInfo)
+    setAdvertPics(result)
+    form.setFieldsValue({
+      advertPics: result
+    })
+  }
+
   const handleDeleteIndexPicsItem = (itemInfo: any) => {
     let result = [...slideshowBOList]
     result = result.filter(item => item !== itemInfo)
@@ -294,6 +306,17 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
   }
 
   /**
+   * 采购门户广告图
+   * @param url
+   */
+   const handleAddadvertPics = (url: string) => {
+    setAdvertPics([...advertPics, url])
+    form.setFieldsValue({
+      advertPics: [...advertPics, url]
+    })
+  }
+
+  /**
    * 添加首页轮播图
    * @param url
    */
@@ -317,65 +340,7 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
       slideshowBOList: result
     })
   }
-  /**
-  const handleMallSelectChange = (mallId: number) => {
-    setShopId(mallId)
-    console.log(mallId, shopInfo)
-    if (!shopInfo) {
-      return null
-    }
-    if (shopInfo.shopId && shopInfo.memberId) {
-      getMallItemAndSetUrl(mallId)
-
-    }
-  }
-
-  const getMallItemAndSetUrl = (mallId) => {
-    let result = ""
-    const mallItem = allMallList.filter(item => item.id === mallId)[0]
-    if (!mallItem) {
-      return ""
-    }
-    if (mallItem.environment === 1) {
-      let newSiteUrl = siteUrl
-      if (newSiteUrl.indexOf('http') < 0) {
-        newSiteUrl = `http://` + newSiteUrl
-      }
 
-      switch (mallItem.type) {
-        case 1:
-          result = `${newSiteUrl}/shop?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
-          break
-        case 2:
-          result = `${newSiteUrl}/shop/pointsMall?shopId=${btoa(JSON.stringify({ shopId: shopInfo.id, memberId: shopInfo.memberId, roleId: shopInfo.roleId }))}`
-          break
-        default:
-          result = ""
-          break
-      }
-    } else {
-      result = ""
-    }
-    return result
-  }
-
-  const getSelectMallStoreUrl = () => {
-    if (!shopInfo) {
-      return null
-    }
-    if (shopId && shopInfo.memberId) {
-      const resUrl = getMallItemAndSetUrl(shopId)
-      return resUrl ? (
-        <div className={styles.shop_url}>
-          <span>当前店铺链接：</span>
-          <label>{resUrl}</label>
-          <CopyOutlined className={styles.copy_icon} onClick={() => handleCopyLinke(resUrl)} />
-        </div>
-      ) : null
-    }
-    return null
-  }
-   */
   const handleFormValueChange = () => {
     setFormIsHalfFilledOut(true)
   }
@@ -512,6 +477,33 @@ const PurchasInfo: React.FC<PurchasInfoPropsType> = (props) => {
               </Form.Item>
               <Form.Item
                 labelAlign="left"
+                name="advertPics"
+                label={<RequireItem label="采购门户广告图" />}
+              >
+                <div className={styles.form_item_wrap}>
+                  <div className={styles.img_list}>
+                    {
+                      advertPics.map((item, index) => (
+                        <div key={index} className={cx(styles.upload_btn, styles.large, styles.upload)}>
+                          <div className={styles.delete_btn} onClick={() => handleDeleteAdvertPicsItem(item)}><DeleteOutlined /></div>
+                          <div className={styles.upload_img}>
+                            <Image width="100%" height="100%" src={item} />
+                          </div>
+                        </div>
+                      ))
+                    }
+                    <UploadImage
+                      imgUrl={""}
+                      large={true}
+                      fileMaxSize={1024}
+                      size="106x107"
+                      onChange={(url) => handleAddadvertPics(url)}
+                    />
+                  </div>
+                </div>
+              </Form.Item>
+              <Form.Item
+                labelAlign="left"
                 name="albumName"
                 label={<RequireItem label="宣传画册" />}
                 className={styles.revise_style}

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/components/material.tsx

@@ -16,6 +16,7 @@ import DrawerWrite from '../modal/drawerWrite';
 import { PublicApi } from '@/services/api';
 import UploadImport from '@/components/UploadImport';
 import EyePreview from '@/components/EyePreview';
+import AnchorModal from '../modal';
 
 const layout: any = {
   colon: false,
@@ -220,10 +221,10 @@ const Material: React.FC<Iprops> = (props: any) => {
           )}
         {materielMode === 1
           && (
-            <DrawerWrite
+            <AnchorModal
               preview={isPreview}
               edit={edit}
-              flag={flag}
+              visible={flag}
               onClose={handleClose}
               onConfirm={fetchTableList}
             />

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/modal/drawerWrite.tsx

@@ -568,7 +568,6 @@ const DrawerWrite: React.FC<Iprops> = (props: any) => {
           }
         }}
       />
-
     </>
   )
 }

src/pages/transaction/purchaseAbility/purchaseInquiry/addInquiry/modal/index.less

@@ -85,3 +85,96 @@
 .marginTop {
   margin-top: 48px;
 }
+
+.container {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  .menu {
+    width: 200px;
+    height: 100%;
+    border-right: 1px solid #F4F5F7;
+    .menuItem {
+      padding: 18px 16px;
+      color: #606266;
+    }
+    .active {
+      position: relative;
+      font-weight: bold;
+      color: #303133;
+      &::after {
+        content: '';
+        height: 24px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-left: 3px solid @main-color;
+        transform: scaleY(1);
+        opacity: 1;
+        transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    padding: 24px 16px;
+    overflow-y: scroll;
+    .anchor {
+      color: #909399;
+      font-size: 14px;
+      position: relative;
+      padding-left: 6px;
+      &::after {
+        content: '';
+        height: 14px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-left: 2px solid @main-color;
+        transform: scaleY(1);
+        opacity: 1;
+        transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
+      }
+    }
+    .upload_item {
+      padding: 5px 8px;
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #FAFBFC;
+
+      .upload_left {
+        display: flex;
+        align-items: center;
+        color: #303133;
+
+        :global {
+          .anticon-file-word {
+            color: #4279df;
+            font-size: 20px;
+            margin-right: 8px;
+          }
+        }
+      }
+
+      .upload_right {
+        color: @main-color;
+        cursor: pointer;
+
+        :global {
+          .anticon-delete {
+            margin-left: 19px;
+            color: #C0C4CC;
+          }
+        }
+      }
+    }
+  }
+}