this.addDataForm.locationName == ‘settingsLeftBtn‘,this.addDataForm.locationName == ‘settingsRightBt

最新推荐文章于 2024-09-23 16:36:59 发布
最新推荐文章于 2024-09-23 16:36:59 发布
阅读量271 收藏 3
点赞数 7
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuang_nu/article/details/140514894
版权

问:

if (this.addDataForm.locationName == 'topLeftBtnList') {
                ajaxMethods(
                  "post",
                  xxxx + "getByConditionPage",
                  {
                    title: this.searchFormData.title,
                    pageType: this.searchFormData.pageType,
                    locationName: this.addDataForm.locationName,
                    status: this.searchFormData.status,
                    page: this.currentPage,
                    rows: this.pageSize,
                    sortby: 'id',
                    order: 'desc',
                  },
                  (res) => {
                    console.log(res.data.pageSize, "res.data.pageSize/?");
                    this.saveData = res.data.pageSize;
                    if (this.saveData < 1) {
                      ajaxMethods(
                        "post",
                        xxxx + "/inster",
                        {
                          ...this.addDataForm,
                        },
                        (res) => {
                          if (res.code == 0) {
                            this.$message({
                              message: "添加成功",
                              type: "success",
                              type: "success",
                              message: res.msg,
                              type: "success",
                              message: res.msg,
                            });
                            this.resetForm("addDataForm");
                            this.batchVisible = false;
                            this.searchTableData();
                          } else {
                            this.$message.error("重复提交");
                          }
                          console.log(res);
                        }
                      );
                    } else {
                      this.$message.error('topLeftBtnList, 已经存在一个')
                    }
                  }
                );
              }else if (this.addDataForm.locationName == 'topRightBtnList') {
                ajaxMethods(
                  "post",
                  xxxx + "/getByConditionPage",
                  {
                    title: this.searchFormData.title,
                    pageType: this.searchFormData.pageType,
                    locationName: this.addDataForm.locationName,
                    status: this.searchFormData.status,
                    page: this.currentPage,
                    rows: this.pageSize,
                    sortby: 'id',
                    order: 'desc',
                  },
                  (res) => {
                    console.log(res.data.pageSize, "res.data.pageSize/?");
                    this.saveData = res.data.pageSize;
                    if (this.saveData < 2) {
                      ajaxMethods(
                        "post",
                        xxxx + "/inster",
                        {
                          ...this.addDataForm,
                        },
                        (res) => {
                          if (res.code == 0) {
                            this.$message({
                              message: "添加成功",
                              type: "success",
                              type: "success",
                              message: res.msg,
                              type: "success",
                              message: res.msg,
                            });
                            this.resetForm("addDataForm");
                            this.batchVisible = false;
                            this.searchTableData();
                          } else {
                            this.$message.error("重复提交");
                          }
                          console.log(res);
                        }
                      );
                    } else {
                      this.$message.error('topLeftBtnList, 已经存在一个')
                    }
                  }
                );
              }这里重复代码

同时,

我只是放上来了两个情况,后面还会有

this.addDataForm.locationName == 'settingsLeftBtn'

this.addDataForm.locationName == 'settingsRightBtn'

this.addDataForm.locationName == 'settings4Items'

this.addDataForm.locationName == 'settings3NItems'

this.addDataForm.locationName == 'settingsLists0'

this.addDataForm.locationName == 'settingsLists1'

这几种情况?

回答:

明白了，你的情况涵盖了多个可能的 `this.addDataForm.locationName` 值，
为了避免代码重复，可以进一步优化和抽象化。
你可以考虑使用一个对象来存储每种 `locationName` 对应的最大允许数量，
然后根据这个对象来动态判断。
这样可以使代码更加清晰和易于维护。以下是一个示例：


// 定义一个对象来存储每种 locationName 对应的最大允许数量
const maxAllowedMap = {
  'topLeftBtnList': 1,
  'topRightBtnList': 2,
  'settingsLeftBtn': 3,
  'settingsRightBtn': 3,
  'settings4Items': 4,
  'settings3NItems': 3,
  'settingsLists0': 0,
  'settingsLists1': 1,
  // 可根据实际情况继续添加其他 locationName 的定义
};

// 判断 this.addDataForm.locationName 是否在 maxAllowedMap 中定义
if (this.addDataForm.locationName in maxAllowedMap) {
  ajaxMethods(
    "post",
    xxxx + "/getByConditionPage",
    {
      title: this.searchFormData.title,
      pageType: this.searchFormData.pageType,
      locationName: this.addDataForm.locationName,
      status: this.searchFormData.status,
      page: this.currentPage,
      rows: this.pageSize,
      sortby: 'id',
      order: 'desc',
    },
    (res) => {
      console.log(res.data.pageSize, "res.data.pageSize/?");
      this.saveData = res.data.pageSize;

      let maxAllowed = maxAllowedMap[this.addDataForm.locationName];
      
      if (this.saveData < maxAllowed) {
        ajaxMethods(
          "post",
          xxxx + "/inster",
          {
            ...this.addDataForm,
          },
          (res) => {
            if (res.code == 0) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.resetForm("addDataForm");
              this.batchVisible = false;
              this.searchTableData();
            } else {
              this.$message.error("重复提交");
            }
            console.log(res);
          }
        );
      } else {
        this.$message.error(`${this.addDataForm.locationName}, 已经存在一个`);
      }
    }
  );
} else {
  // 处理未知的 locationName 或者添加适当的错误处理
  this.$message.error('未知的 locationName');
}


在这段代码中，我们引入了 `maxAllowedMap` 对象来存储不同 `locationName` 对应的最大允许数量。然后通过 `this.addDataForm.locationName` 来动态获取对应的最大值，并进行判断和处理。这种方式可以有效地减少代码的重复性，同时使得代码更易于扩展和维护。

问:

上述代码在新增的情况下是没有问题的, 但是编辑的情况下, 我们需要新增判断: 当status不变或者status从有效:1 改为-> 无效2的时候, 直接请求接口不需要走: if (this.saveData < maxAllowed) {这里的逻辑, 直接请求接口就可以,

但是当 编辑dialog中后端传回的这一行数据status的状态是无效:2, 且需要改为 有效:1 然后保存提交的时候, 才需要进行if (this.saveData < maxAllowed) {的判断,

所以我们在data中增加了两个字段:

// 存储一下 点击编辑按钮后打开dialog弹框 存储这时候的status状态
saveEditStatus: 0,
      
// 存储一下 编辑弹框的确认按钮点击后 知识后的status状态
saveNewEditStatus: 0,

头一个字段存储点击编辑按钮, dialog弹框显示后, 后端传回的当前status的值, 

另一个字段存储修改编辑表单后, dialog弹框最新的status的值,

下面是修改后的代码:

// 新增
            if (this.addDataForm.status == 1) {
              // 定义一个对象来存储每种 locationName 对应的最大允许数量
              const maxAllowedMap = {
                'topLeftBtnList': 1,
                'topRightBtnList': 2,
                'settingsLeftBtn': 1,
                'settingsRightBtn': 2,
                'settings4Items': 4,
                'settings3NItems': 9,
                'settingsLists0': 10,
                'settingsLists1': 10,
                // 可根据实际情况继续添加其他 locationName 的定义
              };


              // 判断 this.addDataForm.locationName 是否在 maxAllowedMap 中定义
              if (this.addDataForm.locationName in maxAllowedMap) {
                ajaxMethods(
                  "post",
                  xxxx + "xxxx/getByConditionPage",
                  {
                    title: this.searchFormData.title,
                    pageType: this.searchFormData.pageType,
                    locationName: this.addDataForm.locationName,
                    // status: this.addDataForm.status,
                    status: 1, // 默认值查询 有效 的totle数据总数
                    page: this.currentPage,
                    rows: this.pageSize,
                    sortby: 'id',
                    order: 'desc',
                  },
                  (res) => {
                    console.log(res.data.total, "res.data.total/?");
                    this.saveData = res.data.total;

                    let maxAllowed = maxAllowedMap[this.addDataForm.locationName];
                    console.log(this.addDataForm.status,'status???')
                    this.saveNewEditStatus = this.addDataForm.status;
                    console.log(this.saveEditStatus,'this.saveEditStatus')
                    console.log(this.saveNewEditStatus,'this.saveNewEditStatus')
                    if (this.saveEditStatus == 2 && this.saveNewEditStatus == 1) { // 判断: 当是否有效 status从: 无效改为->有效 的时候才进行判断里面的逻辑, 否则直接请求接口就行
                      if (this.saveData < maxAllowed) {
                        ajaxMethods(
                          "post",
                          xxxx + "/xxxx/update",
                          {
                            ...this.addDataForm,
                            id: this.id,
                          },
                          (res) => {
                            if (res.code == 0) {
                              this.$message({
                                message: "编辑成功",
                                type: "success",
                              });
                              this.resetForm("addDataForm");
                              this.batchVisible = false;
                              this.searchTableData();
                            } else {
                              this.$message.error("重复提交");
                            }
                          }
                        );
                      } else {
                        this.$message.error(`当前位置最多可配置${maxAllowed}条`);
                      }
                    } else { // 当status没有改变 或者 从有效改为无效 则不去判断 total 直接调用接口进行update
                      ajaxMethods(
                          "post",
                          xxxx + "/xxxx/update",
                          {
                            ...this.addDataForm,
                            id: this.id,
                          },
                          (res) => {
                            if (res.code == 0) {
                              this.$message({
                                message: "编辑成功",
                                type: "success",
                              });
                              this.resetForm("addDataForm");
                              this.batchVisible = false;
                              this.searchTableData();
                            } else {
                              this.$message.error("重复提交");
                            }
                          }
                        );
                    }
                  }
                );
              }
            } else {
              ajaxMethods(
                "post",
                xxxx + "/xxxx/update",
                {
                  ...this.addDataForm,
                  id: this.id,
                },
                (res) => {
                  if (res.code == 0) {
                    this.$message({
                      message: "编辑成功",
                      type: "success",
                    });
                    this.resetForm("addDataForm");
                    this.batchVisible = false;
                    this.searchTableData();
                  } else {
                    this.$message.error("重复提交");
                  }
                }
              );
            }

问:

感觉上述代码重复度过高, 怎么修改?

回答:

// 新增
if (this.addDataForm.status == 1) {
  const maxAllowedMap = {
    'topLeftBtnList': 1,
    'topRightBtnList': 2,
    'settingsLeftBtn': 1,
    'settingsRightBtn': 2,
    'settings4Items': 4,
    'settings3NItems': 9,
    'settingsLists0': 10,
    'settingsLists1': 10,
    // 可根据实际情况继续添加其他 locationName 的定义
  };

  if (this.addDataForm.locationName in maxAllowedMap) {
    ajaxMethods(
      "post",
      xxxx + "xxxx/getByConditionPage",
      {
        title: this.searchFormData.title,
        pageType: this.searchFormData.pageType,
        locationName: this.addDataForm.locationName,
        status: 1, 
        page: this.currentPage,
        rows: this.pageSize,
        sortby: 'id',
        order: 'desc',
      },
      (res) => {
        this.saveData = res.data.total;

        let maxAllowed = maxAllowedMap[this.addDataForm.locationName];

        if (this.saveEditStatus == 2 && this.addDataForm.status == 1) {
          if (this.saveData < maxAllowed) {
            updateData();
          } else {
            this.$message.error(`当前位置最多可配置${maxAllowed}条`);
          }
        } else {
          updateData();
        }
      }
    );
  }
} else {
  updateData();
}

function updateData() {
  ajaxMethods(
    "post",
    xxxx + "/xxxx/update",
    {
      ...this.addDataForm,
      id: this.id,
    },
    (res) => {
      if (res.code == 0) {
        this.$message({
          message: "编辑成功",
          type: "success",
        });
        this.resetForm("addDataForm");
        this.batchVisible = false;
        this.searchTableData();
      } else {
        this.$message.error("重复提交");
      }
    }
  );
}

fury_123
关注
JS笔记 更新中...
weixin_46118496的博客
12-29 642
1. 数组去重 2. 两个对象数组 根据相同的id进行合并 3. 合计 4. 判断数组中所有对象是否都存在某个属性 5. 查找（在listData数组里查找code相同的name） 6. 数组转成对象 7. 日期加减 8. 正则 9. 消息提示多条时只展示一条 10. 数组每一个值加key 11. 数组相同的放在一起 12. 数组过滤虚值 13. 数组重复数据合并.........
利用filter与indexof实现前端搜索功能
weixin_51922205的博客
03-17 1427
当我们向后端请求了一堆数据时，再点击搜索框，又不想重新请求数据库。 我们想在请求的数据中进行搜索时就可以利用computed计算属性，再利用filter与indexof进行数据过滤与搜索： 这样就在前端完成了搜索功能。 ...
mysql.server stop_Stop-AzMySqlFlexibleServer (Az.MySql) | Microsoft Docs
weixin_35965587的博客
02-02 83
Stop-AzMySqlFlexibleServerStops a server.In this articleSyntaxStop-AzMySqlFlexibleServer-Name -ResourceGroupName [-SubscriptionId ][-DefaultProfile ][-AsJob][-NoWait][-PassThru][-Confirm][-WhatIf][]St...
Angular封装高德地图组件实现输入框搜索,地图点击选地点
weixin_48133130的博客
06-06 587
Angular17创建地图组件
使用 D3.js 进行简单的数据可视化--折线图
小小学渣的博客
10-27 5439
写在前面：大数据课程的作业之一是利用 D3.js 实现数据的可视化，下面记录一下简单的的实现 。 先附上程序（直接引入JSON文件的版本）： 显示北京PM2.5的数值 //引入json数据，看下面解释    var data_DingLing = new Array(23);    var data_DongSi = new Array
vue解析前端对象为Array数组并且遍历
ws_please的博客
01-09 720
就这样
Angular17+leaflet集成天地图组件
weixin_48133130的博客
09-20 650
Angular17 Leaflet +天地图 组件
mysql.proc 20 16_php – mysql.proc的列计数错误.预计20,发现16.表可能已损坏
weixin_30753213的博客
02-18 86
我正在使用000webhost.com,我正在使用phpMyAdmin.当我运行我的PHP脚本时,我从mysql得到这个错误,标题如下：Column count of mysql.proc is wrong. Expected 20, found 16.The table is probably corrupted.有没有解决方案？谢谢.编辑：这是我的代码$username="usrname";$...
react 表格实现拖拽功能
hyy的博客
05-30 584
项目背景 : react + ant 单纯实现拖拽确实不难 , 我的需求是根据后台接口返回 , 生成对应的父子表格 , 并只可以拖拽子的位置 , 如图 后台返回的数据结构 (pid为0说明是父 , 子的pid等于父的id , 说明是父的子) 1 , 我先转成了树形结构且自己加上了key (注意 : key一定得是唯一的 , 否则会出现第一列数据拖拽不动 , 其他列数据可以拖拽的bug) 2 , 生成对应的父子表格 , 父要有对应的子 , 如图 3 ,更改onDragEnd的逻辑 , 实现效果 首先用.fi
results, err := rdb.GeoRadius("locations", longitude, latitude, &radius).Result() if err != nil { fmt.Println("GeoRadius error", err) return } //遍历结果并输出 for _, result := range results { locationName := result.Name longitude := result.Longitude latitude := result.Latitude fmt.Println(locationName, longitude, latitude) }取来经纬度=0
06-09
如果在遍历 `results` 数组时，获取到的经度和纬度值都为 0，可能是因为 Redis 中存储的地理位置信息数据存在问题，或者是在查询时没有指定正确的经度和纬度值。 建议你先使用 Redis 的 `GEOPOS` 命令来检查指定的...
results, err := rdb.GeoRadius("locations", longitude, latitude, &radius).Result() if err != nil { fmt.Println("GeoRadius error", err) return } //遍历结果并输出 for _, result := range results { locationName := result.Name locationDist := result.Dist
06-09
这段代码是用 Go 语言编写的，使用了 Redis 的 GeoRadius 命令来获取指定范围内的地理位置信息。具体来说，它会查询 Redis 中名为 "locations" 的地理位置集合，找到距离指定经度、纬度不超过 radius 所表示的半径的...
改进函数var rdb *redis.Client func initClient() (err error) { rdb = redis.NewClient(&redis.Options{ Addr: "127.0.0.1:6379", Password: "123456", // 密码 DB: 0, //PoolSize: 100, // 连接池大小 }) _, err = rdb.Ping().Result() return err } func main() { if err := initClient(); err != nil { fmt.Printf("init redis client failed, err:%v\n", err) return } fmt.Println("connect redis success...") locations := []*redis.GeoLocation{ {Name: "Beijing", Longitude: 116.404, Latitude: 39.915}, {Name: "Shanghai", Longitude: 121.473, Latitude: 31.230}, {Name: "Guangzhou", Longitude: 113.264, Latitude: 23.129}, } rdb.GeoAdd("locations", locations...) //设置中心点经纬度 longitude := 118.397128 latitude := 30.916527 //设置半径和单位（单位可以是米、千米、英里等） radius := redis.GeoRadiusQuery{ Radius: 1000, Unit: "km", } //调用GeoRadius函数并获取结果 results, err := rdb.GeoRadius("locations", longitude, latitude, &radius).Result() if err != nil { fmt.Println("GeoRadius error", err) return } //遍历结果并输出 for _, result := range results { locationName := result.Name locationDist := result.Dist locationCoord := result.GeoHash fmt.Println(locationName, locationDist, locationCoord) } // 释放相关资源 defer rdb.Close() }
06-09
你的改进函数中，将 Redis 客户端对象 `rdb` 定义为全局变量，并在 `initClient()` 函数中初始化，这样可以避免频繁地创建和销毁 Redis 客户端对象，从而提高程序的运行效率。此外，你还将 Redis 连接的信息（如 ...
results, err := rdb.GeoRadius("locations", longitude, latitude, &radius).Result() if err != nil { fmt.Println("GeoRadius error", err) return }怎么获取经纬度
06-09
locationName := result.Name longitude := result.Longitude latitude := result.Latitude fmt.Println(locationName, longitude, latitude) } ``` 在遍历结果数组时，通过访问result结构体的Longitude和...
results, err := rdb.GeoRadius("locations", longitude, latitude, &radius).Result()怎么在函数之后获取经纬度
06-09
locationName := result.Name locationDist := result.Dist longitude := result.Longitude latitude := result.Latitude // TODO: 处理获取到的经度和纬度值 } ``` 在上面的代码中，我们遍历了 `results` ...
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 579
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
webview2加载本地页面
qq_25160759的博客
09-23 588
推荐使用这种方式，加载速度比WebResourceRequested快（实测的确是快点），但是需要支持：ICoreWebView2_3。个人测试加载html字符串，对于html中引入了css和js，加载不太友好。这种方式是通过截获网络请求，然后返回需要的数据。以达到成功请求的假象。
WebGL复杂几何体与模型加载
天涯学馆
09-23 398
在WebGL中，复杂几何体的创建通常涉及多个顶点和面片，而模型加载则涉及到导入外部文件格式，如OBJ、GLTF或FBX。在WebGL中，可以通过设置不同类型的灯光来改变3D场景的光照效果。在WebGL中，可以通过增加更多的灯光uniforms并在片段着色器中计算它们的组合效果来实现多光源。除了基本的漫射和镜面高光，还可以添加软边缘高光、环境光遮蔽（Ambient Occlusion）和全局光照等效果，以增强光照的真实感。GLTF是一种现代的3D模型格式，包含了模型的几何体、材质、纹理和动画。
apply、call和bind的作用和区别
最新发布
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
09-23 682
javascript中，apply、call和bind的作用和区别介绍。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值