84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
|
<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>
|