项目背景:为了方便,有关部门对业务数据,更直观的分析。需要对表格数据进行纵向显示。
效果图:
思路:
- 如何进行格式转换,分析横向表头的格式,(label、prop),纵向需要的数据格式,构建数据。(可参考,网上其他文章)
- 如何将地址,转换为图片,需要进行逐一转换。
实现过程
- 实体类
@Data
@ToString
@EqualsAndHashCode
@NoArgsConstructor
@Accessors(chain = true)
@TableName("bs_goods_plan_dtl")
public class BsGoodsPlanDtl implements Serializable {
private static final long serialVersionUID=1L;
/** UUID */
@TableId(value = "uuid", type = IdType.ASSIGN_UUID)
private String uuid;
/** 商品图片url */
@Excel(name = "商品图片")
private String url;
/** 商品条码 */
@Excel(name = "商品条码")
private String code2;
/** 商品名称 */
@Excel(name = "商品名称")
private String name;
/** 子类代码 */
@Excel(name = "子类代码")
private String dscode;
/** 子类名称 */
@Excel(name = "子类名称")
private String dsname;
/** 零售价 */
@Excel(name = "零售价")
private String rtlprc;
/** 上市天数 */
@Excel(name = "上市天数")
private String storefin;
/** 库存店数量 */
@Excel(name = "库存店数量")
private String keepstore;
/** 总仓可用 */
@Excel(name = "总仓可用")
private String thewrh;
/** 月单店日均销 */
@Excel(name = "月单店日均销")
private BigDecimal msalavg;
/** 近1个月销售量 */
@Excel(name = "近1个月销售量")
private String saleMonthSum;
/** 近1个月销售额 */
@Excel(name = "近1个月销售额")
private String saleMonthMoney;
/** 近3个月销售量 */
@Excel(name = "近3个月销售量")
private String threeMonthSaleSum;
/** 近3个月销售额 */
@Excel(name = "近3个月销售额")
private String threeMonthSaleMoney;
/** 近6个月销售量 */
@Excel(name = "近6个月销售量")
private String sixMonthSaleSum;
/** 近6个月销售额 */
@Excel(name = "近6个月销售额")
private String sixMonthSaleMoney;
/** 近12个月销售量 */
@Excel(name = "近12个月销售量")
private String yearMonthSaleSum;
/** 近12个月销售额 */
@Excel(name = "近12个月销售额")
private String yearMonthSaleMoney;
/** 单SKU月销MAX值(销量) */
@Excel(name = "单SKU月销MAX值")
private BigDecimal qtymax;
/** 单SKU月销MAX值(销额) */
@Excel(name = "单SKU月销MAX值")
private BigDecimal amtmax;
/** 商品状态名称 */
@Excel(name = "商品状态名称")
private String goodsbusgate;
/** 花都总仓可用(昨日) */
@Excel(name = "花都总仓可用(昨日)")
private BigDecimal yesterwrh;
/** 花都总仓在途 */
@Excel(name = "花都总仓在途")
private String onway;
/** 新旧包装 */
@Excel(name = "新旧包装")
private String packtype;
/** 销售标签 */
@Excel(name = "销售标签")
private String phbqno;
/** 更新时间 */
@Excel(name = "更新时间" , width = 30, dateFormat = "yyyy-MM-dd")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date updateTime;
/** 更新人 */
private String updateBy;
@TableField(exist = false)
private List<String> img;
}
- Java后端接口(Controller层)
/** 数据查询
* @Author YQ
* @Description //TODO Administrator
* @Date 17:23 2023/10/17
* @Param [obj]
* @return
**/
@GetMapping("/goodsPlanList")
public TableDataInfo goodsPlanList(BsGoodsPlanDtl obj)
{
startPage();
List<BsGoodsPlanDtl> list = queryGoodsPlanList(obj);
TableDataInfo dataTable = getDataTable(list);
return dataTable;
}
private List<BsGoodsPlanDtl> queryGoodsPlanList(BsGoodsPlanDtl obj){
LambdaQueryWrapper<BsGoodsPlanDtl> lqw = new LambdaQueryWrapper<>();
if (StringUtils.isNotBlank(obj.getCode2())){
lqw.eq(BsGoodsPlanDtl::getCode2 ,obj.getCode2());
}
if (StringUtils.isNotBlank(obj.getDscode())){
lqw.eq(BsGoodsPlanDtl::getDscode ,obj.getDscode());
}
if (StringUtils.isNotBlank(obj.getName())){
lqw.like(BsGoodsPlanDtl::getName ,obj.getName());
}
if (StringUtils.isNotBlank(obj.getDsname())){
lqw.like(BsGoodsPlanDtl::getDsname ,obj.getDsname());
}
if (StringUtils.isNotBlank(obj.getStorefin())){
lqw.eq(BsGoodsPlanDtl::getStorefin ,obj.getStorefin());
}
if (StringUtils.isNotBlank(obj.getKeepstore())){
lqw.eq(BsGoodsPlanDtl::getKeepstore ,obj.getKeepstore());
}
if (StringUtils.isNotBlank(obj.getThewrh())){
lqw.eq(BsGoodsPlanDtl::getThewrh ,obj.getThewrh());
}
if (StringUtils.isNotBlank(obj.getGoodsbusgate())){
lqw.eq(BsGoodsPlanDtl::getGoodsbusgate ,obj.getGoodsbusgate());
}
if (StringUtils.isNotBlank(obj.getPhbqno())){
lqw.eq(BsGoodsPlanDtl::getPhbqno ,obj.getPhbqno());
}
lqw.orderByAsc(BsGoodsPlanDtl::getUrl);
List<BsGoodsPlanDtl> list = iBsGoodsPlanDtlservice.list(lqw);
list.forEach(x ->{
if(StringUtils.isNotEmpty(x.getUrl())){
List<String> imageList = new ArrayList<>();
imageList.add(x.getUrl());
x.setImg(imageList);
}
});
return list;
}
查出数据呈现如下
- 后台接口提供数据,返回前端对数据,格式进行转换处理。
定义头部数组
data() {
return {
headers:[
{
prop:'url',
label:'商品图片',
},
{
prop:'code2',
label:'商品条码',
},
{
prop:'name',
label:'商品名称',
},
{
prop:'dscode',
label:'子类代码',
},
.......
],
}
}
2. 转换需要的格式
核心代码
//处理数据
dealData(goods){
goods.forEach((item,index) =>{
var goodsItem = {url:item.url,
code2:item.code2,
name:item.name,
dscode:item.dscode,
dsname:item.dsname,
rtlprc:item.rtlprc,
......
}
this.tableData.push(goodsItem);
})
this.tableHeaderDeal = this.getHeaders();
this.tableDataDel =this.getValues();
},
//处理表头
getHeaders() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
},
//遍历表头,赋上对应的值
getValues() {
return this.headers.map(item => {
return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
});
},
3. 处理后的数据
header数据 --->最终数据(一行呈现,对应的数据)
4.列表展示
<!-- 由于需要对第一行图片进行,单独处理,所以就把所有列都提出来进行处理-->
<!-- 列表 -->
<el-table-column
v-for="(item, index) in tableHeaderDeal"
:key="index"
:prop="item"
>
<template slot-scope="scope">
<span v-if="scope.row.title == '商品图片'">
<span v-if="index == 0">
{{scope.row.title}}
</span>
<span v-else-if="index == 1">
<span v-if="scope.row.value0 != null && scope.row.value0.length > 0">
<el-image
style="width: 100px; height: 100px;box-shadow: 5px 5px 5px #020000;"
:src="scope.row.value0"
:preview-src-list="dealPicList(scope.row.value0)"
>
</el-image>
</span>
<span v-else>
<el-tag size="medium" type="danger">未上传</el-tag>
</span>
</span>
<span v-else-if="index == 2">
<span v-if="scope.row.value1 != null && scope.row.value1.length > 0">
<el-image
style="width: 100px; height: 100px;box-shadow: 5px 5px 5px #020000;"
:src="scope.row.value1"
:preview-src-list="dealPicList(scope.row.value1)"
>
</el-image>
</span>
<span v-else>
<el-tag size="medium" type="danger">未上传</el-tag>
</span>
</span>
......
</span>
<span v-else>
<span v-if="index == 0">
{{scope.row.title}}
</span>
<span v-else-if="index == 1">
{{scope.row.value0}}
</span>
<span v-else-if="index == 2">
{{scope.row.value1}}
</span>
<span v-else-if="index == 3">
{{scope.row.value2}}
</span>
<span v-else-if="index == 4">
{{scope.row.value3}}
</span>
<span v-else-if="index == 5">
{{scope.row.value4}}
</span>
<span v-else-if="index == 6">
{{scope.row.value5}}
</span>
<span v-else-if="index == 7">
{{scope.row.value6}}
</span>
<span v-else-if="index == 8">
{{scope.row.value7}}
</span>
<span v-else-if="index == 9">
{{scope.row.value8}}
</span>
<span v-else-if="index == 10">
{{scope.row.value9}}
</span>
<span v-else-if="index == 11">
{{scope.row.value10}}
</span>
<span v-else-if="index == 12">
{{scope.row.value11}}
</span>
<span v-else-if="index == 13">
{{scope.row.value12}}
</span>
<span v-else-if="index == 14">
{{scope.row.value13}}
</span>
<span v-else-if="index == 15">
{{scope.row.value14}}
</span>
<span v-else-if="index == 16">
{{scope.row.value15}}
</span>
<span v-else-if="index == 17">
{{scope.row.value16}}
</span>
<span v-else-if="index == 18">
{{scope.row.value17}}
</span>
<span v-else-if="index == 19">
{{scope.row.value18}}
</span>
<span v-else-if="index == 20">
{{scope.row.value19}}
</span>
</span>
</template>
</el-table-column>
5.如果不需要对图片进行处理的代码
<el-table
style="width: 100%"
:data="getValues"
:show-header="false"
>
<el-table-column
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
>
</el-table-column>
</el-table>