element-ui後臺管理系統學習(6)-新增/編輯代碼合併

在開發中，我們會經常遇到 新增 和 修改 兩種不同的情況，但是他們往往又有類似的邏輯。此時，我們使用一套代碼進行封裝，在調用相同的函數，完成2種不同的邏輯處理，開發實例如下：

需求說明：在進行相冊管理的時候，我們會有兩種處理方式：新建相冊與編輯相冊。

---

一、修改部分

html 

          <ul class="list-group list-group-flush">
            <li class="list-group-item list-group-item-action d-flex align-items-center" style="cursor:pointer;"
              v-for="(item, index) in albums" :key="index" @click.stop="albumChange(index)"
              :class="{'active sum-active':albumIndex === index}">
              {{item.name}}
              <el-dropdown class="ml-auto">
                <span class="btn btn-light btn-sm border">
                  {{item.num}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.stop.native="openAlbumModel({item, index})">修改</el-dropdown-item>
                  <el-dropdown-item @click.stop.native="albumDelete(index)">刪除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>

思路分析：

1、對已有的相冊列表進行編輯的時候，@click.stop.native = 'openAlbumModel({item, index})'；其中click.stop.native因爲框架封裝，需要使用stop阻止默認事件，native觸發原生事件；openAlbumModel打開新建/修改的對話框，使用出入的對象來區分新建還是修改；

二、新建部分

<el-button type="success" size="mini" @click="openAlbumModel(false)">創建相冊</el-button>

思路分析： 

2、新建是 openAlbumModel(false)，傳值爲false，修改是 openAlbumModel({item, index})，傳值當前點擊的對象與索引。

---

js

   // 打開對話框
    openAlbumModel(obj) {
      // 修改
      if (obj) {
        let { item, index } = obj;
        //   初始化表單
        this.albumForm.name = item.name;
        this.albumForm.order = item.order;
        this.albumEditIndex = index;
        this.albumModel = true;
        return;
      }
      // 創建
      this.albumForm = {
        name: "",
        order: 0
      };
      this.albumEditIndex = -1;
      this.albumModel = true;
    },

    // 點擊確定修改/創建相冊
    confirmAlbumModel() {
      // 判斷是否爲修改
      if (this.albumEditIndex > -1) {
        this.albumEdit();
        this.albumModel = false;
        return
      }
      this.albums.unshift({
          name:this.albumForm.name,
          order:this.albumForm.order,
          num:0
      })
      this.albumModel = false;
    },

    // 編輯相冊
    albumEdit() {
      this.albums[this.albumEditIndex].name = this.albumForm.name;
      this.albums[this.albumEditIndex].order = this.albumForm.order;
    },

備註：在新建與修改使用同一個對話框的時候，我們定義一個新的變量albumEditIndex = -1時表示新建，albumEditIndex > -1時表示修改。