dzhh-frontend/.svn/pristine/0a/0a4d9c2d5fc7b69160e2530b47b8095eadd7fabf.svn-base

<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>