Project background: For convenience, relevant departments conduct more intuitive analysis of business data. Tabular data needs to be displayed vertically.
Rendering:
Idea:
- How to perform format conversion, analyze the horizontal header format, (label, prop), vertical required data format, and construct data. (You can refer to other articles on the Internet)
- How to convert the address into a picture needs to be converted one by one.
Implementation process
- Entity class
@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;
/** product image url */
@Excel(name = "Product Picture")
private String url;
/** barcode */
@Excel(name = "Product Barcode")
private String code2;
/** product name */
@Excel(name = "Product Name")
private String name;
/** Subclass code */
@Excel(name = "Subclass code")
private String dscode;
/** Subclass name */
@Excel(name = "subclass name")
private String dsname;
/** retail price */
@Excel(name = "retail price")
private String rtlprc;
/** Number of days on market */
@Excel(name = "Days on market")
private String storefin;
/** Number of inventory stores */
@Excel(name = "Inventory store quantity")
private String keepstore;
/** The general warehouse is available */
@Excel(name = "General warehouse available")
private String thewrh;
/** Monthly average daily store sales */
@Excel(name = "Daily sales of monthly single store")
private BigDecimal msalavg;
/** Sales volume in the past month */
@Excel(name = "Sales volume in the past month")
private String saleMonthSum;
/** Sales in the past month */
@Excel(name = "Sales in the past month")
private String saleMonthMoney;
/** Sales volume in the past 3 months */
@Excel(name = "Sales volume in the past 3 months")
private String threeMonthSaleSum;
/** Sales in the past 3 months */
@Excel(name = "Sales in the past 3 months")
private String threeMonthSaleMoney;
/** Sales volume in the past 6 months */
@Excel(name = "Sales volume in the past 6 months")
private String sixMonthSaleSum;
/** Sales in the past 6 months */
@Excel(name = "Sales in the past 6 months")
private String sixMonthSaleMoney;
/** Sales volume in the past 12 months */
@Excel(name = "Sales volume in the past 12 months")
private String yearMonthSaleSum;
/** Sales in the past 12 months */
@Excel(name = "Sales in the past 12 months")
private String yearMonthSaleMoney;
/** Single SKU monthly sales MAX value (sales volume) */
@Excel(name = "Single SKU monthly sales MAX value")
private BigDecimal qtymax;
/** Single SKU monthly sales MAX value (sales) */
@Excel(name = "Single SKU monthly sales MAX value")
private BigDecimal amtmax;
/** Product status name */
@Excel(name = "Product status name")
private String goodsbusgate;
/** Huadu main warehouse available (yesterday) */
@Excel(name = "Huadu General Warehouse Available (Yesterday)")
private BigDecimal yesterwrh;
/** Huadu main warehouse is on the way */
@Excel(name = "Huadu main warehouse is on the way")
private String onway;
/** New and old packaging */
@Excel(name = "old and new packaging")
private String packtype;
/** Sales tag */
@Excel(name = "Sales Label")
private String phbqno;
/** Update time */
@Excel(name = "update time" , width = 30, dateFormat = "yyyy-MM-dd")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Date updateTime;
/** updater */
private String updateBy;
@TableField(exist = false)
private List<String> img;
}
- Java backend interface (Controller layer)
/** Data query
* @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;
}
The found data is presented as follows
- The background interface provides data and returns to the front end to convert the data and format.
Define header array
data() {
return {
headers:[
{
prop:'url',
label:'Product Picture',
},
{
prop:'code2',
label:'Product Barcode',
},
{
prop:'name',
label:'product name',
},
{
prop:'dscode',
label:'Subclass code',
},
.......
],
}
}
2. Convert to the required format
Core code
//Data processing
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();
},
//process header
getHeaders() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
},
//Traverse the table header and assign the corresponding value
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. Processed data
header data —>final data (presented in one line, corresponding data)
4. List display
<!-- Since the first row of images needs to be processed separately, all columns are extracted for processing -->
<!-- List -->
<el-table-column
v-for="(item, index) in tableHeaderDeal"
:key="index"
:prop="item"
>
<template slot-scope="scope">
<span v-if="scope.row.title == 'Product Picture'">
<span v-if="index == 0">
{<!-- -->{scope.row.title}}
</span>
<span v-else-if="index == 1">
<span v-if="scope.row.value0 != null & amp; & amp; 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">Not uploaded</el-tag>
</span>
</span>
<span v-else-if="index == 2">
<span v-if="scope.row.value1 != null & amp; & amp; 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">Not uploaded</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. If you don’t need code to process images
<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>
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Cloud native entry-level skills treeHomepageOverview 16,659 people are learning the system