项目总结-4个相似功能弹框优化为同一个弹框

我们写代码时,往往会出现很多的相似代码,相似代码放在同一个组件中,会显得十分冗余,这时就需要我们用脑力来换体力,将相似代码复制过来是一个不需要怎么动脑的体力活,但是将相似代码对应的功能使用同一段代码来实现就需要动脑了;
功能需求场景:

如图所示,图中动态参数,和静态属性下都有添加参数和编辑button,
而添加 和编辑所使用的弹框也十分相似,无非就是编辑时需要先获取点击时对应的属性id,然后通过id来获取该属性的值,然后渲染到弹框中,用户再进行修改,而添加操作则是空白弹框,用户编辑后进行提交即可;
我这里使用的是element-ui:
弹框代码如下
在优化之前要实现功能需要四段相似度很高的代码;优化后一段代码即可

 <!-- 添加或修改参数的对话框 -->
    <el-dialog :title="isEdit1 + titleText" :visible.sync="addOrupdateDialogVisible" width="50%" @close="addOrupdateDialogClosed">
      <!-- 添加或修改数据的表单 -->
      <el-form :model="addOrupdateForm" :rules="addOrupdateFormRules" ref="addOrupdateFormRef" label-width="100px">
        <el-form-item :label="titleText" prop="attr_name">
          <el-input v-model="addOrupdateForm.attr_name"> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addOrupdateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveParams">确定</el-button>
      </span>
    </el-dialog>

首先在计算属性中定义两个函数isEdit1和titleText来控制显示的是’添加动态参数’或’修改动态参数’或’添加动态属性’或’修改动态属性’四个功能弹框的标题

   // 动态控制添加参数标题文本
    titleText() {
      if (this.activeName === 'many') {
        return '动态参数';
      }
      return '静态属性';
    },
    isEdit1() {
      if (this.isEdit) {
        return '修改';
      }
      return '添加';
    },

其中activeName是控制了动态参数或者静态属性,isEdit控制了是添加还是修改,默认为添加;

具体逻辑:
点击动态属性,或静态参数时:

activeName的值会自动切换

点击’添加属性’或’添加参数’时,执行以下代码

 addParams() {
      this.isEdit = false;
      this.addOrupdateForm.attr_name = '';
      this.addOrupdateDialogVisible = true;
    },

目的是声明该操作是添加操作,将输入框清空,展示对话框;
点击’编辑’时:

    // 编辑参数前先获取,(编辑完了之小的标签不变)
    async editParams(attr_id, attr_vals) {
      this.isEdit = true;
      this.addOrupdateForm.attr_id = attr_id;
      this.addOrupdateForm.attr_vals = attr_vals;
      console.log(attr_vals);

      const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes/${attr_id}`);
      if (res.meta.status !== 200) return $message.error('获取参数信息失败!');
      console.log('获取成功');
      this.addOrupdateForm = res.data;
      this.addOrupdateDialogVisible = true;
      //   重新获取数据
      this.getParamsData();
    },

声明该操作为编辑操作,并传入该条数据的信息,向服务器发送请求,获取原始信息并赋值到弹出框中:如图

最后点击确定时:

saveParams() {
      // 先判断合法性
      this.$refs.addOrupdateFormRef.validate(async (valid) => {
        if (!valid) return;
        // 默认为添加
        if (!this.isEdit) {
          const { data: res } = await this.$http.post(`categories/${this.cateId}/attributes`, {
            attr_name: this.addOrupdateForm.attr_name,
            attr_sel: this.activeName,
          });
          console.log(res);
          if (res.meta.status !== 201) {
            return this.$message.error('添加参数失败!');
          }
          this.$message.success('添加参数成功!');
        } else {
          // 修改
          this.isEdit = false;
          this.addOrupdateDialogVisible = true;
          const { data: res } = await this.$http.put(`categories/${this.cateId}/attributes/${this.addOrupdateForm.attr_id}`, {
            attr_name: this.addOrupdateForm.attr_name,
            attr_sel: this.activeName,
            attr_vals: this.addOrupdateForm.attr_vals,
          });
          if (res.meta.status !== 200) return this.$message.error('修改参数失败!');
          this.$message.success('修改参数成功-------!');
        }
        // 关闭对话框
        this.addOrupdateDialogVisible = false;
        this.addOrupdateForm.attr_name = '';
        // 获取数据
        this.getParamsData();
      });
    },

点击关闭时,将对话框隐藏;
优化完成;