initial

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

src/App.vue

@@ -1,29 +1,14 @@
 <template>
   <div id="app">
-    <div id="nav">
+
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({});
+</script>
+
 
 <style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>

src/assets/data.ts

@@ -0,0 +1,108 @@
+
+const data = {
+  orderNo: '101808023922',
+  clientName: 'SongQingyang3',
+  soldData: '2018-08-23',
+  contactName: 'K01',
+  contactNo: '12345678901',
+  deliveryAddress: 'D01',
+  addOn: '测试PTP-G刀偏置',
+  boards: [
+    {
+      id: 1234,
+      matierial: '颗粒板',
+      color: '暖白',
+      boardInfos: [
+        {
+          houseName: 'F01',
+          closetName: 'F01',
+          boardNo: 'B1816478862',
+          boardName: '背板',
+          length: 944,
+          width: 59,
+          thickness: 18,
+          quantity: 1,
+          area: 0.568,
+          mutation: '',
+          shape: '',
+          direction: '1/1/1/1 ',
+          strip: '正纹',
+          addOn: '',
+        },
+        {
+          houseName: 'F01',
+          closetName: 'F01',
+          boardNo: 'B1816478862',
+          boardName: '层板',
+          length: 944,
+          width: 598,
+          thickness: 18,
+          quantity: 1,
+          area: 0.568,
+          mutation: '',
+          shape: '造型',
+          direction: '1/1/1/1 ',
+          strip: '正纹',
+          addOn: '',
+        },
+        {
+          houseName: 'F01',
+          closetName: 'F01',
+          boardNo: 'B1816478875',
+          boardName: '右侧板',
+          length: 1198,
+          width: 548,
+          thickness: 18,
+          quantity: 1,
+          area: 0.66,
+          mutation: '',
+          shape: '造型',
+          direction: '1/1/1/1 ',
+          strip: '正纹',
+          addOn: '',
+        },
+      ],
+    },
+    {
+      id: 1235,
+      matierial: '生态板 ',
+      color: '暖白',
+      boardInfos: [
+        {
+          houseName: 'F01',
+          closetName: 'F01',
+          boardNo: 'B1816478862',
+          boardName: '背板',
+          length: 944,
+          width: 598,
+          thickness: 18,
+          quantity: 1,
+          area: 0.568,
+          mutation: '',
+          shape: '',
+          direction: '1/1/1/1 ',
+          strip: '正纹',
+          addOn: '',
+        },
+        {
+          houseName: 'F01',
+          closetName: 'F01',
+          boardNo: 'B1816478861',
+          boardName: '背板',
+          length: 944,
+          width: 598,
+          thickness: 18,
+          quantity: 1,
+          area: 0.568,
+          mutation: '',
+          shape: '',
+          direction: '1/1/1/1 ',
+          strip: '正纹',
+          addOn: '',
+        },
+      ],
+    },
+  ],
+};
+
+export default data;

src/components/boardOrderDetails.vue

@@ -0,0 +1,83 @@
+<template>
+
+  <div class='order-details'>
+    <div class='main_title '>
+      <h1>板材明细单</h1>
+    </div>
+    <div class='sub-title'>
+      <div class='header-detail' v-for="(info,index) in orderInfos " :key="index">
+        <b>{{info}}:</b>{{orderDetails[Object.keys(orderDetails)[index]]}}</div>
+    </div>
+    <template v-for="(board,index) in orderDetails.boards">
+      <Table :board="board" :key='index'></Table>
+    </template>
+
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import Data from '../assets/data';
+import Table from './table.vue';
+
+const orderInfosFormat: string[] = [
+  '订单号',
+  '客户名称',
+  '销售日期',
+  '联系人',
+  '联系电话',
+  '送货地址',
+  '备注',
+];
+const tableTitleFormat: string[] = [
+  '房名',
+  '柜名',
+  '板编号',
+  '板名称',
+  '开料长',
+  '开料宽',
+  '厚度',
+  '数量',
+  '面积',
+  '异形',
+  '造型',
+  '左/右/上/下',
+  '纹路',
+  '备注',
+];
+
+export default Vue.extend({
+  components: {
+    Table,
+  },
+  data() {
+    return {
+      orderDetails: Data,
+      orderInfos: orderInfosFormat,
+      tableTitle: tableTitleFormat,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.order-details {
+  width: 80%;
+  background-color: lightgray;
+  margin: 0 auto;
+  .main_title {
+    text-align: center;
+  }
+
+  .sub-title {
+    display: flex;
+    flex-wrap: wrap;
+    .header-detail {
+      margin-bottom: 10px;
+      width: 33%;
+    }
+  }
+}
+.total_summary {
+  text-align: right;
+}
+</style>

src/components/table.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+
+    <div class='board-title'>
+      <span>
+        <b>材料:{{board.matierial}}</b>
+      </span>
+      <span>
+        <b>颜色:{{board.color}}</b>
+      </span>
+      <span>
+        <b>共{{board.boardInfos.length}}条记录</b>
+      </span>
+      <table>
+        <thead>
+          <th v-for="(header,index) in tableTitle" :key="index">{{header}}</th>
+        </thead>
+        <tbody>
+          <tr v-for="(info,index) in board.boardInfos" :key="index">
+            <td v-for="(each,index) in info " :key="index">{{each}}</td>
+          </tr>
+          <tr>
+            <td colspan="7" class='summary'>
+              <b>小计:</b>
+            </td>
+            <td>
+              <b>{{quantities}}</b>
+            </td>
+            <td colspan="2">
+              <b>{{areas}}</b>
+            </td>
+            <td colspan="4"></td>
+          </tr>
+        </tbody>
+        <tr v-show="isShow">
+          <td colspan="7" class='summary'>
+            <b>总计:</b>
+          </td>
+          <td>
+            <b>{{totalQuantities}}</b>
+          </td>
+          <td colspan="2">
+            <b>{{totalAreas}}</b>
+          </td>
+          <td colspan="4"></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import Data from '../assets/data';
+/*
+const infos = require('../assets/data.js');
+const Data = infos.default;
+*/
+
+export default Vue.extend({
+  props: { board: Object },
+  data() {
+    return {
+      orderDetails: Data,
+      orderInfos: [
+        '订单号',
+        '客户名称',
+        '销售日期',
+        '联系人',
+        '联系电话',
+        '送货地址',
+        '备注',
+      ],
+      tableTitle: [
+        '房名',
+        '柜名',
+        '板编号',
+        '板名称',
+        '开料长',
+        '开料宽',
+        '厚度',
+        '数量',
+        '面积',
+        '异形',
+        '造型',
+        '左/右/上/下',
+        '纹路',
+        '备注',
+      ],
+    };
+  },
+  computed: {
+    quantities(): number {
+      let quantity = 0;
+      for (const item of this.board.boardInfos) {
+        quantity += item.quantity;
+      }
+      return quantity;
+    },
+    areas(): number {
+      let area = 0;
+      for (const item of this.board.boardInfos) {
+        area += item.area;
+      }
+      return parseFloat(area.toFixed(3));
+    },
+    totalQuantities(): number {
+      let toatalquantities = 0;
+      for (const board of Data.boards) {
+        for (const info of board.boardInfos) {
+          toatalquantities += info.quantity;
+        }
+      }
+      return toatalquantities;
+    },
+    totalAreas(): number {
+      let toatalAreas = 0;
+      for (const board of Data.boards) {
+        for (const info of board.boardInfos) {
+          toatalAreas += info.area;
+        }
+      }
+      return parseFloat(toatalAreas.toFixed(3));
+    },
+    isShow(): boolean {
+      return this.board.id === Data.boards[Data.boards.length - 1].id;
+    },
+  },
+});
+</script>
+<style lang="scss" scoped>
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+table,
+td,
+th {
+  border: 1px solid black;
+}
+.board-title {
+  display: flex;
+  flex-wrap: wrap;
+  span {
+    width: 33%;
+  }
+}
+.summary {
+  text-align: right;
+}
+</style>
+
+

src/router.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import Home from './views/Home.vue';
+import Table from './components/table.vue';
+import orderDetails from './components/boardOrderDetails.vue';
 
 Vue.use(Router);
 
@@ -8,16 +9,8 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'table',
-      component: Home,
+      component: orderDetails,
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
     },
   ],
 });