【项目】给资产查询页面添加3个小功能C和A

前言

因篇幅太长，Plan和Do的部分放在上一篇，此篇为Check和Action部分。

Check

导师检查后发现有4点问题：

导出的数据中“状态”值可读性差，应该与页面对应一致。
上图导出的数据数量和页面显示数据并不一致：导出有10条，而页面只展示了9条。

排查之后发现是我之前在测试批量删除功能时，删除有上下级关系的数据时，本应该删除全部数据，但只删除了选中的数据。比如下图，点击因该删除两条，但实际之后删除一条。这是程序原有的bug，导师希望我能把它解决掉。
把listdemo换一下，并加好图标
笔记中并没有后端逻辑实现的部分，希望我能加上去

Action

第一个问题：导出状态
解决如下：
后端找到导出资产分类列表方法，进入资产分类实体
在这里插入图片描述
把状态的@Excel注解修改如下：

效果如下：

第二个问题：多选需全删除

写代码之前应该先理清楚思路，这样才能提高效率。
首先排除是后端的问题，应是前端没有把应该删除行的id的值传给后端。于是去理了前端逻辑，发现所有多选框的操作应该都是在handleSelectionChange（）方法中，因此在此方法中添加代码。

思路：

找到需添加代码的地方
拿到多选框选中数据的id值（selectIds）
拿到资产列表所有数据(根据树结构)（this.multiSelect）
写两个for循环，先遍历selectIds，再遍历this.multiSelect
如果selectIds中的值和this.multiSelect的id值相等并且this.multiSelect有子级，就遍历子级
把子级的id值加到selectIds中
因为上面的操作会出现id重复添加到selectIds中，比如我点击了子级框，又点击了父级框，这时，selectIds中会出现子级id重复的现象，所以需要去重。

实现：
第一步：在data() return中定义一个数组用于拿取多选上下级数据

  //多选上下级
      multiSelect: [],

第二步：在 handleSelectionChange（）添加代码

    // 多选框选中数据
    handleSelectionChange(selection) {
    
    
      var selectIds= selection.map(item => item.id); 
      listCategory().then((response) => {
    
    
        this.multiSelect = this.handleTree(response.rows, "id", "pid");

        for (let i = 0; i <selectIds.length; i++) {
    
        
          for(let j=0;j<this.multiSelect.length;j++){
    
    
            if(this.multiSelect[j].id==selectIds[i]&&this.multiSelect[j].children.length>0){
    
    
              for(let k=0;k<this.multiSelect[j].children.length;k++){
    
    
                selectIds.push(this.multiSelect[j].children[k].id);
              }  
          }
          }    
        }
      //数组去重，去除重复的数据
      this.ids = selectIds.filter((element, index, self) =>{
    
    
      return self.indexOf(element) === index;
      });

    });
      // this.ids = selection.map(item => item.id)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },

最终实现效果：选中“22”的框，点击删除按钮，会拿到“22”和"3"的id值，点击确定，可以删除这两条数据。
在这里插入图片描述

至于点击父级选择框，子级选择框并没有显示被点中，这个前端效果我百度了一个小时，并没有找到实现方法，所以，这个问题就留给我们组的前端大佬来实现吧哈哈哈哈，我放弃

第三个问题：修改路由
在这里插入图片描述

第四个问题：添加后端代码
这里记录一下批量删除代码的后端逻辑，因为后端的删除逻辑直接实现了单个删除和批量删除，值得我学习记录。
第一步：前端编写删除按钮的操作方法
在这里插入图片描述
第二步：在delCategory（）中访问后端逻辑的路径。

第二步：在control层添加方法

	/**
	 * 删除资产分类
	 */
	@PreAuthorize("@ss.hasPermi('asset:category:remove')")
	@Log(title = "资产分类", businessType = BusinessType.DELETE)
	@DeleteMapping("/{ids}")
	public AjaxResult remove(@PathVariable Long[] ids) {
    
    
		return toAjax(assetCategoryService.deleteAssetCategoryByIds(ids));
	}

第二步：定义相应的service层接口和对于实现
接口：

        /**
     * 批量删除资产分类
     * 
     * @param ids 需要删除的资产分类ID
     * @return 结果
     */
    public int deleteAssetCategoryByIds(Long[] ids);

实现：

	/**
	 * 批量删除资产分类
	 * 
	 * @param ids 需要删除的资产分类ID
	 * @return 结果
	 */
	@Override
	public int deleteAssetCategoryByIds(Long[] ids) {
    
    
		return assetCategoryMapper.deleteAssetCategoryByIds(ids);
	}

第三步：定义相应的dao层

	/**
	 * 批量删除资产分类
	 * 
	 * @param ids 需要删除的数据ID
	 * @return 结果
	 */
	public int deleteAssetCategoryByIds(Long[] ids);
}

    <delete id="deleteAssetCategoryByIds" parameterType="String">
        delete from asset_category where id in 
        <foreach item="id" collection="array" open="(" separator="," close=")">
            #{
    
    id}
        </foreach>
    </delete>