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时表示修改。