vue axios 批量删除 数组参数

Posted 2021-02-05 hao-1234-1234

 

方法一：前端循环请求服务器端delete（id）方法

 请问如何获得element-ui表格中的勾选项index，以实现批量删除功能

https://segmentfault.com/q/1010000012759131

方法二：传递 string类型字符串。例如: ‘1,2,3,4‘

ids =[1,2,3,4]

url: ‘/investigator/submitAll/‘ + ids,

method: ‘post‘

服务器端接收到： string类型字符串 ‘1,2,3,4‘ 。

方法三：直接传递数组类型（网上案例均尝试失败）

1 axios传递数组参数爬坑总结

https://www.jianshu.com/p/68d81da4e1ad 

参数：ids=1&ids=2&ids=3 

服务器端难以接收。

2 axios向后台传递数组作为参数

https://blog.csdn.net/u012317188/article/details/79752096

JSON.stringify(ids)

服务器端收到的是string类型的 ‘[1,2,3,4]’

综上我采用了 方法二。

 （如果有人尝试直接传递数组成功了，请一定留言！）

实现 ： elementUI  table 的 多选 ：

http://element-cn.eleme.io/#/zh-CN/component/table

代码摘要：

    <el-button style="margin:0 0 0 20px;" type="primary" @click="toggleSelection(list)">反选</el-button>
          <el-button style="margin:0 0 0 20px;" type="primary" @click="submitAllSelection()">批量提交</el-button>

 <el-table
      ref="multipleTable"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"/>


  data() {
    return {
      multipleSelection: []
     }
   }
methods: {
    toggleSelection(rows) {
      // console.log(‘rows‘, rows)
      // console.log(‘multipleTable-start‘, this.$refs.multipleTable) //table对象
      // this.$refs.multipleTable.toggleAllSelection(rows) //全选或全不选
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)// 反选
        })
      } else {
        // this.$refs.multipleTable.clearSelection() //清除选中
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val  //当前选中行的数据
    },
    submitAllSelection() {
      if (this.multipleSelection.length > 0) {
        this.$confirm(‘此操作将提交选中项, 是否继续?‘, ‘提示‘, {
          confirmButtonText: ‘确定‘,
          cancelButtonText: ‘取消‘,
          type: ‘warning‘
        }).then(() => {
          const idList = []
          for (const v of this.multipleSelection) {
            idList.push(v.DataSourceID)
          }
          this.submitAll(idList)
        }).catch(() => {
          this.$notify({
            title: ‘提示‘,
            message: ‘已取消批量提交‘,
            type: ‘info‘,
            duration: 2000
          })
        })
      } else {
        this.$notify({
          title: ‘提示‘,
          message: ‘请勾选要提交的项！‘,
          type: ‘warning‘,
          duration: 2000
        })
      }
    },
    submitAll(idList) {
      // const idList = JSON.stringify(ids)
      // console.log(‘idList‘, idList)
      submitAll(idList).then((response) => {
        if (response.success) {
          console.log(‘response‘, response.data)
          for (const v of this.multipleSelection) {
            const index = this.list.indexOf(v)
            this.list[index].HasSubmitted = true
          }
          this.$notify({
            title: ‘成功‘,
            message: ‘批量提交成功‘,
            type: ‘success‘,
            duration: 2000
          })
        } else {
          this.$notify({
            title: ‘失败‘,
            message: ‘批量提交失败‘,
            type: ‘danger‘,
            duration: 3000
          })
        }
      })
    }
}


export function submitAll(idList) {
  return request({
    url: ‘/investigator/submitAll/‘ + idList,
    method: ‘post‘
  })
}

根据axios 封装出request 以简化请求。

　　

 

C# webapi控制器

        /// <summary>
        /// 批量提交
        /// </summary>
        /// <param name="ids"></param>
        /// <returns></returns>
        [HttpPost]
        [Route("SubmitAll/{idList}")]
        public ApiResult SubmitAll(string idList)
        {
            var result = new ApiResult();
            result.success = false;

            if (!String.IsNullOrEmpty(idList) && !String.IsNullOrEmpty(idList.Trim()))
            {
                string[] strArray = idList.Split(‘,‘);
                if (strArray.Length > 0)
                {
                    int[] ids = new int[] { };
                    ids = Array.ConvertAll<string, int>(strArray, s => int.Parse(s));
                    var num = manage.SubmitAll(ids, User.Identity.GetUserId<int>());
                    result.success = true;
                    result.data = num;
                }

            }

            return result;
        }

　　

// 数据库访问层

        public int SubmitAll(int[] idList, int userId)
        {
            int num = 0;
            using (var pmdb = new ProjectEntities())
            {
                using (var tran = pmdb.Database.BeginTransaction())
                {
                    try
                    {
                        var list = pmdb.T_Investigator.Where(d => idList.Contains(d.InvestigatorID) && d.CreateUserID == userId && d.HasSubmitted == false).ToList();
                        if (list.Count > 0)
                        {
                            foreach (var item in list)
                            {
                                item.HasSubmitted = true;
                            }
                            num = pmdb.SaveChanges();
                            tran.Commit();
                        }
                    }
                    catch (Exception ex)
                    {
                        tran.Rollback();//回滚
                        throw ex;
                    }
                }
            }

            return num;
        }