VueJS Report format

VueJS Report with master and detail iterate using template tag

by Theara Yuom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<div id="app">
  <table cellspacing="0">
    <tbody>
            <template v-for="(doc, index) in reportData" :key="index">
              <tr class="master">
                <td colspan="7">{{ doc.chartAccount.code }} : {{ doc.chartAccount.name }}</td>
                <td>{{doc.chartAccount.order}}</td>
              </tr>
              <tr v-for="(detail, index) in doc.details" :key="index">
                <td>{{ moment(detail.tranDate).format('DD-MM-YYYY') }}</td>
                <td>{{ detail.journalType }}</td>
                <td>{{ detail.currency }}</td>
                <td>{{ detail.refNum }}</td>
                <td>{{ detail.memo }}</td>
                <td>{{ detail.dr }}</td>
                <td>{{ detail.cr }}</td>
                <td>{{ detail.balance }}</td>
              </tr>
          </template>
    </tbody>
  </table>
</div>

CSS

table, th, td {
    border: 1px solid black;
}
.master {
  background-color: #cdcdcd;
}
td {
  width: 150px;
  text-align: center;
}

tr {
  line-height: 28px;
}

th {
  background-color: black;
  color: white;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    reportData: [{
        "_id": "1",
        "chartAccount": {
          "_id": "1",
          "accountTypeId": "1",
          "code": "10110",
          "name": "Cash On Hand",
          "status": "Active",
          "createdAt": "2018-02-19T14:59:29.087+07:00",
          "order": "10110"
        },
        "details": [{
            "tranDate": "2018-02-01T22:34:40.290+07:00",
            "journalType": "General",
            "currency": "USD",
            "refNum": "0001",
            "memo": "test",
            "dr": 0,
            "cr": 500
          },
          {
            "tranDate": "2018-02-02T22:38:05.125+07:00",
            "journalType": "General",
            "currency": "KHR",
            "refNum": "0002",
            "memo": "test",
            "dr": 10000,
            "cr": 0
          }
        ]
      },

      /* 2 */
      {
        "_id": "48",
        "chartAccount": {
          "_id": "48",
          "accountTypeId": "7",
          "code": "40100",
          "name": "Sale Revenue",
          "status": "Active",
          "createdAt": "2018-02-19T14:59:29.215+07:00",
          "order": "40100"
        },
        "details": [{
          "tranDate": "2018-02-02T22:38:05.125+07:00",
          "journalType": "General",
          "currency": "KHR",
          "refNum": "0002",
          "memo": "test",
          "dr": 0,
          "cr": 10000
        }]
      },

      /* 3 */
      {
        "_id": "58",
        "chartAccount": {
          "_id": "58",
          "accountTypeId": "9",
          "code": "50110",
          "name": "Salary Exp",
          "status": "Active",
          "createdAt": "2018-02-19T14:59:29.239+07:00",
          "order": "50110",
          "updatedAt": "2018-02-24T08:19:28.897+07:00",
          "updatedBy": "iJwFifvWCyikTN69o"
        },
        "details": [{
          "tranDate": "2018-02-01T22:34:40.290+07:00",
          "journalType": "General",
          "currency": "USD",
        ...