昨天太晚就沒來得及更新，今天是spu管理界面，這個界面一共有三個界面需要切換，完成了兩個界面，而且今天的難度在於最後兩個章節，富有一定的邏輯性，當然中間也有很多需要註意的，比如ElementUI的照片牆需要添加list屬性而且值為你的數據並且必須是一個數組必須有name、url屬性

一.spu管理

1.按鈕與三級聯動可操作性

當進入屬性的添加這個界面我們的三級聯動應該不可點擊

以及我們沒有添加屬性值不應該能夠點擊保存

2.spu介紹

spu和sku就是類與實例的關係

添加

修改

等等

3.靜態

兩個card構成，上面還是我們的三級聯動

下麵這個card先是一個button然後一個table，然後一組button，出現了多次button，後期會封裝一個el-button，利用$attrs這個api

然後分頁器

4.動態展示spu列表

應該在獲取到3id這裡來發

渲染數據

然後是我們的button這裡，封裝一個hintbutton，讓其有懸浮提示效果

來一個全局組件，title顯示提示內容，利用兩個api $attrs直接綁定在組件上可以讓其有傳過來的所有屬性，後面是直接有父組件傳過來的事件綁定（包括觸發方式和回調）

然後把分頁器也做了，註意current-change這個事件可以直接寫在獲取列表這個回調裡面，投機取巧

5.spu管理內容切換

在我們spu管理內容界面一共有三個界面需要切換，一個是現在的列表展示，一個是spu的管理，一個是sku的管理，如果只有兩個用true和false來切換即可，但是這裡有三個頁面所以需要一個動態數據，而切換的依據就是看數字是否匹配

後面兩個組件由於內容比較多，我就單獨寫為兩個組件引入進來

6.spuform靜態

首先應該點擊添加和修改進入spuform界面

註意這裡是組件標簽，但是為什麼直接寫上系統事件可以實現，因為我們封裝了，組件那邊用一個$listeners直接獲取了這個事件的觸發方式和回調，用一個v-on綁定

主要就是記住el-form裡面每一項表單要配合el-form-item就行了

7.spuform業務分析

點擊取消回到0頁面，用到自定義事件

然後就是每次點擊編輯進入spuform這個頁面都會發送四個請求，主要是每次點進來都要發送，而且也不能寫在mounted裡面，因為並沒有銷毀路由，按理說可以給編輯按鈕來一個點擊事件，但是需要這些請求回來的數據是在子組件，而編輯按鈕是在父組件。

這裡不能用自定義事件，因為要數據的是在子組件並不是要把數據發到父組件，可以現在父組件點擊發起請求然後props給到子組件，但是過於麻煩了，這裡可以用過ref拿到子組件的實例對象，然後在子組件methods定義一個發起請求的函數，當父組件一點擊編輯的按鈕，就用這個實例對象裡面的這個方法就調用到了子組件的請求函數了

8.獲取spuform數據

先整理介面

接下來四個介面全部請求，然後給到我們對應的響應式數據

9.spuform數據展示

• 首先spu名稱通過v-model進行收集

這樣一弄確實可以進行雙向收集

但是要考慮到一點，我們是因為點擊的修改所以進來會發請求，spudata裡面才會有這些屬性，那如果我點擊新增spu，沒發請求，我也要手機，到時候點擊保存要發起保存請求，這個時候怎麼辦

觀察介面可以發現需要這麼一堆數據，給到請求

直接將其放到spudata裡面，這時候就算是沒發請求我也可以收集到數據

• 品牌部分

直接遍歷，然後收集tmid

• spu描述

  

• spu圖片

  因為我們這裡要照片牆類型展示，所以要添加一個很重要的屬性 file-list而且值應該為你這個存放圖片的數組，而且查看官網文檔可知，添加了這個屬性後，你的照片這裡的數據必須為一個數組，每一個照片數據為一個對象必須有name和url兩個屬性

  

  那麼我這裡就可以這麼做，照片牆兩個事件，一個是上傳了文件後的回調，一個是刪除了文件後的回調，這隻是題外話，我在發起獲得這些照片的介面那裡就可以對這個list做一些操作

  

• 銷售屬性

  首先我們表格裡面展示的是spu自身已經選擇的銷售屬性

  

  然後屬性值名稱用到動態編輯標簽

  

  然後是我們button和input的切換，當初做並不是直接在data來一個賦值讓其點擊一下切換，你要考慮到這裡不光是一行數據，如果都用這個來控制切換到時候就會出現你切換大家一起切換，所以要在各自的對象裡面加上這個屬性

  

  上面只是先占位，真正添加進對象後面再做，先把表格最後一個刪除按鈕做了

  

  下麵最重要的一個功能，全平臺一共有三個銷售屬性，你自己可能已經選擇了一些，那麼我就要把剩下沒有選擇的篩選出來，這裡用一個計算屬性來做

這裡面的邏輯有點繞註意，用系統總共的數組去篩選，再遍歷你已有的數據，用every也就是全部滿足才返回true，我就去比較老數據看是不是不等於你已經有的數據，全部滿足就返回

然後就可以用我們篩選好的數據去渲染到表單

10.spu照片牆

我們前面完成了照片牆的顯示，但是並沒有完成他的收集功能

可以看到我們照片牆上面有兩個事件，on-preview表示圖片預覽的時候觸發的事件，在這裡不需要收集，on-remove表示的是圖片刪除的時候觸發的事件，這裡需要收集數據

他有兩個參數，file表示你刪除的那個文件，fileList表示的是剩餘的文件

下一個問題，那麼我們上傳圖片怎麼來收集，可以用upload組件的on-success事件，表示的是文件上傳成功觸發的回調

他的三個參數分別是，上傳成功返回的一些信息，上傳成功那張圖的一些信息，上傳成功後所有的圖片信息