通过映射等方法处理重复逻辑

场景一.

需求：根据不同的参数判断，跳转不同的路由路径并携带该参数。

初始方法：if判断

cardHandlerClick(e) {
      const res = this.$API.workTable.workTable.taskClick.post({id:e.id})
      var params = { type: e.task_type };
      if(e.task_type==1){
        this.$router.push({path:'/AuditManagement1',state:{params}})
      }else if(e.task_type==2){
        this.$router.push({path:'/AuditManagement2',state:{params}})
      }else if(e.task_type==3){
        this.$router.push({path:'/AuditManagement3',state:{params}})
      }else if(e.task_type==4){
        this.$router.push({path:'/AuditManagement4',state:{params}})
      }
    },

这种方法随能实现功能，觉得很屎。于是有了下面的优化方案：

cardHandlerClick(e) {
  const res = this.$API.workTable.workTable.taskClick.post({ id: e.id });
  const params = { type: e.task_type };

  // 定义一个映射关系
  const pathMapping = {
    1: '/AuditManagement1',
    2: '/AuditManagement2',
    3: '/AuditManagement3',
    4: '/AuditManagement4',
  };

  // 检查是否存在对应的路径，如果不存在则使用默认路径 '/AuditManagement'
  const path = pathMapping[e.task_type] || '/AuditManagement';

  this.$router.push({
    path,
    state: { params },
  });
}

在这个优化后的代码中，我们定义了一个 pathMapping 对象，它将 e.task_type 映射到对应的路径。然后，我们检查是否存在对应的路径，如果存在就使用映射后的路径，否则使用默认路径 '/AuditManagement'。这样可以避免重复的条件语句，使代码更加简洁和可维护。如果需要添加更多任务类型的映射，只需在 pathMapping 对象中添加即可。

场景二.

 if (history.state.params) {
        if(Number(history.state.params.type)==1){
          this.searchForm.type = 1
        }else if(Number(history.state.params.type)==2){
          this.searchForm.type = 3
        }else if(Number(history.state.params.type)==3){
          this.searchForm.type = 2
        }else if(Number(history.state.params.type)==4){
          this.searchForm.type = 4
        }
      }

老样子 我们依然用映射思路解决

if (history.state.params) {
  const typeMapping = {
    1: 1,
    2: 3,
    3: 2,
    4: 4
  };
  const mappedType = typeMapping[Number(history.state.params.type)];
  if (mappedType !== undefined) {
    this.searchForm.type = mappedType;
  }
}

在这个版本中，我们使用了一个名为 typeMapping 的对象，将不同的 history.state.params.type 映射到相应的 this.searchForm.type 值。然后，我们检查 history.state.params.type 是否在映射对象中，并将映射后的值赋给 this.searchForm.type。这种方式使映射更明确和易于管理。如果需要添加更多的映射，只需在 typeMapping 对象中添加即可。

小结：

处理重复逻辑时，应首要考虑映射方法，映射就是创建一个对象，对象中的键为你需要判断的值(输入值)，而值为你需要使用的值(输出值)。

拓展：结构赋值优化代码

async addCompany() {
      this.addform = {};
      this.city = [];
      var res = await this.$API.base.department.getCode.get();
      if (res.code == 200) {
        if (res.data == "") {
          this.addform.code = "";
          this.addCode = false;
        } else {
          this.addform.code = res.data;
          this.addCode = true;
        }
      }
      this.addCompanyVisible = true;
    },

优化后的代码

async addCompany() {
  try {
    this.addform = {};
    this.city = [];
    const res = await this.$API.base.department.getCode.get();
    if (res.code === 200) {
      this.addform.code = res.data || "";
      this.addCode = !!res.data;
    } else {
      // 处理错误情况
      console.error(`Error: ${res.code}`);
    }
    this.addCompanyVisible = true;
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

此处的

 this.addform.code = res.data || "";
 this.addCode = !!res.data;

是什么意思呢

这两行代码是用来处理res.data的值的

this.addform.code = res.data || ""; 这行代码使用了逻辑或运算符 ||。它的意思是如果 res.data 有值（不是 null、undefined 或者空字符串），则将 res.data 的值赋给 this.addform.code，否则，将一个空字符串赋给 this.addform.code。这样做是为了确保 this.addform.code 至少有一个值，即使 res.data 为空时也能正常工作。

this.addCode = !!res.data; 这行代码使用了两次逻辑非运算符 !!。首先， !!res.data 将 res.data 转换为布尔值，确保它是一个布尔值（true 或 false）。然后，将这个布尔值赋给 this.addCode 变量。这样做是为了将 this.addCode 设置为 res.data 的存在性（如果 res.data 存在，this.addCode 将为 true，否则为 false）。