initial
This commit is contained in:
parent
060f5391db
commit
a31570cec2
4
.prettierrc
Normal file
4
.prettierrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all"
|
||||
}
|
||||
27
src/App.vue
27
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>
|
||||
|
||||
108
src/assets/data.ts
Normal file
108
src/assets/data.ts
Normal file
@ -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;
|
||||
83
src/components/boardOrderDetails.vue
Normal file
83
src/components/boardOrderDetails.vue
Normal file
@ -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>
|
||||
152
src/components/table.vue
Normal file
152
src/components/table.vue
Normal file
@ -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>
|
||||
|
||||
|
||||
@ -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',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
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'),
|
||||
name: 'table',
|
||||
component: orderDetails,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user