286 lines
7.7 KiB
Vue
286 lines
7.7 KiB
Vue
<template>
|
|
<a-card :bordered="false">
|
|
<!-- table区域-begin -->
|
|
<a-table
|
|
ref="table"
|
|
size="default"
|
|
bordered
|
|
rowKey="id"
|
|
:columns="columns"
|
|
:pagination="false"
|
|
:dataSource="dataSource">
|
|
|
|
</a-table>
|
|
<!-- table区域-end -->
|
|
|
|
|
|
</a-card>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "RowspanTable",
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
description: '存放位置设置表管理页面',
|
|
levelNum:{},
|
|
gridNum:0,
|
|
boxNum:0,
|
|
cabinetNo:"",
|
|
// 表头
|
|
columns: [ {
|
|
title: '分组一',
|
|
align: "center",
|
|
dataIndex: 'cabinetNo',
|
|
customRender: (value, row, index) => {
|
|
const obj = {
|
|
children: value,
|
|
attrs: {},
|
|
};
|
|
if(index===0){
|
|
obj.attrs.rowSpan = this.dataSource.length;
|
|
}else{
|
|
obj.attrs.rowSpan = 0;
|
|
}
|
|
return obj;
|
|
},
|
|
},
|
|
{
|
|
title: '分组二',
|
|
align: "center",
|
|
dataIndex: 'levelNo',
|
|
customRender: (value, row, index) => {
|
|
const obj = {
|
|
children: value,
|
|
attrs: {},
|
|
};
|
|
//当前列跨行的条数
|
|
var a = parseInt(this.levelNum);
|
|
var b = parseInt(this.gridNum)*parseInt(this.boxNum);
|
|
console.log(a);
|
|
for(var c=0;c<=a;c++){
|
|
if(index === (c*b)){
|
|
console.log(1);
|
|
console.log(c*b);
|
|
obj.attrs.rowSpan = b;
|
|
break;
|
|
}else{
|
|
obj.attrs.rowSpan = 0;
|
|
}
|
|
}
|
|
return obj;
|
|
}
|
|
},
|
|
{
|
|
title: '分组三',
|
|
align: "center",
|
|
dataIndex: 'gridNo',
|
|
customRender: (value, row, index) => {
|
|
const obj = {
|
|
children: value,
|
|
attrs: {},
|
|
};
|
|
var a = parseInt(this.levelNum)*parseInt(this.gridNum);
|
|
var b = parseInt(this.boxNum);
|
|
for(var c=0;c<=a;c++){
|
|
if(index === (c*b)){
|
|
obj.attrs.rowSpan = b;
|
|
break;
|
|
}else{
|
|
obj.attrs.rowSpan = 0;
|
|
}
|
|
}
|
|
return obj;
|
|
},
|
|
}, {
|
|
title: '字段一',
|
|
align: "center",
|
|
dataIndex: 'boxNo'
|
|
}, {
|
|
title: '字段二',
|
|
align: 'center',
|
|
dataIndex: 'storedNum'
|
|
}, {
|
|
title: '字段三',
|
|
align: "center",
|
|
dataIndex: 'maxNum'
|
|
},],
|
|
//数据集
|
|
dataSource: [{
|
|
"id": "cb1dfd12cbeca3f8ba121439ee7e2411",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "1",
|
|
"gridNo": "1",
|
|
"boxNo": "1",
|
|
"storedNum": 2,
|
|
"maxNum": 2,
|
|
"unitNum": 2,
|
|
"assignStatus": "1",
|
|
"storageStatus": "1",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-02"
|
|
}, {
|
|
"id": "f903d50d02904b14175dccf2a7948777",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "1",
|
|
"gridNo": "1",
|
|
"boxNo": "2",
|
|
"storedNum": 2,
|
|
"maxNum": 2,
|
|
"unitNum": 2,
|
|
"assignStatus": "1",
|
|
"storageStatus": "1",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-02"
|
|
}, {
|
|
"id": "4f04c0ca4202535d678871b07e706cf6",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "1",
|
|
"gridNo": "2",
|
|
"boxNo": "1",
|
|
"storedNum": 2,
|
|
"maxNum": 2,
|
|
"unitNum": 2,
|
|
"assignStatus": "1",
|
|
"storageStatus": "1",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-02"
|
|
}, {
|
|
"id": "d0c91dabedfc03efad0126e50ea72e80",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "1",
|
|
"gridNo": "2",
|
|
"boxNo": "2",
|
|
"storedNum": 2,
|
|
"maxNum": 2,
|
|
"unitNum": 2,
|
|
"assignStatus": "1",
|
|
"storageStatus": "1",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-08"
|
|
}, {
|
|
"id": "1e8bfcbe4352afbab8878f9fd368e007",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "2",
|
|
"gridNo": "1",
|
|
"boxNo": "1",
|
|
"storedNum": 1,
|
|
"maxNum": 2,
|
|
"unitNum": 1,
|
|
"assignStatus": "1",
|
|
"storageStatus": "0",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-08"
|
|
}, {
|
|
"id": "d76087d8d3ebc7a59d43458588f26941",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "2",
|
|
"gridNo": "1",
|
|
"boxNo": "2",
|
|
"storedNum": 0,
|
|
"maxNum": 2,
|
|
"unitNum": 0,
|
|
"assignStatus": "1",
|
|
"storageStatus": "0",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-02"
|
|
}, {
|
|
"id": "7bf7754f12e1bf95edcd501cc6b85e62",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "2",
|
|
"gridNo": "2",
|
|
"boxNo": "1",
|
|
"storedNum": 0,
|
|
"maxNum": 2,
|
|
"unitNum": 0,
|
|
"assignStatus": "1",
|
|
"storageStatus": "0",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-02"
|
|
}, {
|
|
"id": "9cd08d733657d5b286bec870f12f6ecf",
|
|
"attributeId": "e62831f314e1390edbd884e9d9e6aca6",
|
|
"cabinetNo": "1",
|
|
"levelNo": "2",
|
|
"gridNo": "2",
|
|
"boxNo": "2",
|
|
"storedNum": 0,
|
|
"maxNum": 2,
|
|
"unitNum": 0,
|
|
"assignStatus": "1",
|
|
"storageStatus": "0",
|
|
"remark": null,
|
|
"createBy": "admin",
|
|
"createTime": "2019-04-02",
|
|
"updateBy": "admin",
|
|
"updateTime": "2019-04-02"
|
|
}],
|
|
isorter: {
|
|
column: 'createTime',
|
|
order: 'desc',
|
|
},
|
|
url: {
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
loadData(){
|
|
this.levelNum=4;
|
|
this.gridNum = 2;
|
|
this.boxNum = 2;
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.ant-card-body .table-operator{
|
|
margin-bottom: 18px;
|
|
}
|
|
.ant-table-tbody .ant-table-row td{
|
|
padding-top:15px;
|
|
padding-bottom:15px;
|
|
}
|
|
.anty-row-operator button{margin: 0 5px}
|
|
.ant-btn-danger{background-color: #ffffff}
|
|
|
|
.ant-modal-cust-warp{height: 100%}
|
|
.ant-modal-cust-warp .ant-modal-body{height:calc(100% - 110px) !important;overflow-y: auto}
|
|
.ant-modal-cust-warp .ant-modal-content{height:90% !important;overflow-y: hidden}
|
|
</style>
|
|
|