|
@ -1,9 +1,40 @@ |
|
|
<template> |
|
|
<template> |
|
|
<!-- 采购上架对应的采购收货打印页面--> |
|
|
<!-- 采购上架对应的采购收货打印页面--> |
|
|
<view class="content" style="padding:30rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);"> |
|
|
<view class="content" style="padding:0rpx 20rpx 100rpx;min-height: calc(100vh - 120rpx);"> |
|
|
|
|
|
<view class="tabs-box"> |
|
|
|
|
|
<view @click="tabIndex = 1" :class="tabIndex == 1?'active1' :''" style="padding: 10rpx 0px;">检验指引单</view> |
|
|
|
|
|
<view @click="tabIndex = 2" :class="tabIndex == 2?'active1' :''" style="padding: 10rpx 0px;">上架指引单</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="" style="padding-top: 100rpx;"> |
|
|
|
|
|
<view class="box" style="page-break-before:always;" v-if="tabIndex == 1"> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<table border='1'> |
|
|
|
|
|
<thead> |
|
|
|
|
|
<tr class='top1'> |
|
|
|
|
|
<th>发货单号:</th> |
|
|
|
|
|
<th colspan='2'>{{data1.asnNumber}}</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th>物料代码</th> |
|
|
|
|
|
<th>供应商批次</th> |
|
|
|
|
|
<th>检验数量</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
<tr v-for="(item,index) in showTableInspectDTOList" :key='index'> |
|
|
|
|
|
<td>{{item.itemCode}}</td> |
|
|
|
|
|
<td>{{item.supplierBatch}}</td> |
|
|
|
|
|
<td>{{item.sampleQty}}</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</table> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
<com-empty-view v-if="data.length==0"></com-empty-view> |
|
|
<com-empty-view v-if="data.length==0"></com-empty-view> |
|
|
<!-- 只用于展示页面 --> |
|
|
<!-- 只用于展示页面 --> |
|
|
<view class="box" style="margin-bottom: 20rpx;" v-for='(item,index) in data.sublist' :key='index'> |
|
|
<view class="" v-if="tabIndex == 2"> |
|
|
|
|
|
<view class="box" style="margin-bottom: 20rpx;" v-for='(item,index) in showTableSubList' :key='index'> |
|
|
<view class="top"> |
|
|
<view class="top"> |
|
|
<view class="mb-kw"> |
|
|
<view class="mb-kw"> |
|
|
目标库位:<view>{{item.toLocationCode}}</view> |
|
|
目标库位:<view>{{item.toLocationCode}}</view> |
|
@ -24,30 +55,12 @@ |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- <u-table style="margin-top: 20rpx;"> |
|
|
</view> |
|
|
<u-tr> |
|
|
|
|
|
<u-th>物品代码</u-th> |
|
|
|
|
|
<u-th>物品描述</u-th> |
|
|
|
|
|
<u-th>批次</u-th> |
|
|
|
|
|
<u-th>包装号</u-th> |
|
|
|
|
|
<u-th>包装规格</u-th> |
|
|
|
|
|
<u-th>数量</u-th> |
|
|
|
|
|
<u-th>计量单位</u-th> |
|
|
|
|
|
</u-tr> |
|
|
|
|
|
<u-tr v-for="(cur,key) in item.sublist" :key='key'> |
|
|
|
|
|
<u-td>{{cur.itemCode}}</u-td> |
|
|
|
|
|
<u-td>{{cur.itemDesc1}}</u-td> |
|
|
|
|
|
<u-td>{{cur.batch}}</u-td> |
|
|
|
|
|
<u-td>{{cur.packingNumber}}</u-td> |
|
|
|
|
|
<u-td>{{cur.packUnit}}</u-td> |
|
|
|
|
|
<u-td>{{cur.qty}}</u-td> |
|
|
|
|
|
<u-td>{{cur.uom}}</u-td> |
|
|
|
|
|
</u-tr> |
|
|
|
|
|
</u-table> --> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;"> |
|
|
<view class="" style="position: fixed;width: 100%;bottom: 0rpx;left: 0px;"> |
|
|
<button @click="printImage" |
|
|
<button @click="printImage" |
|
|
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印</button> |
|
|
style='background:rgb(60, 156, 255) !important ;color: white;margin-top: 80rpx;'> 打印<text v-if="tabIndex == 1">检验指引单</text><text v-if="tabIndex == 2">上架指引单</text></button> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
</view> |
|
|
</view> |
|
@ -55,13 +68,16 @@ |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { |
|
|
import { |
|
|
getJimuPutawayJobDetail |
|
|
getJimuPutawayJobDetail, |
|
|
|
|
|
queryInspectionFreeFlag |
|
|
} from '@/api/request2.js'; |
|
|
} from '@/api/request2.js'; |
|
|
import { |
|
|
import { |
|
|
dateFormat |
|
|
dateFormat |
|
|
} from '@/common/basic.js'; |
|
|
} from '@/common/basic.js'; |
|
|
// 打印页面的模板 |
|
|
// 打印页面的模板 |
|
|
const htmlFileUrl = '/hybrid/html/pointPutawayJob.html'; |
|
|
const htmlFileUrl = '/hybrid/html/pointPutawayJob.html'; |
|
|
|
|
|
// 打印页面的模板 |
|
|
|
|
|
const htmlFileUrl1 = '/hybrid/html/purchaseReceiptJob.html'; |
|
|
import { |
|
|
import { |
|
|
pathToBase64 |
|
|
pathToBase64 |
|
|
} from "../../api/img-to-base64.js" //引入解压后的js文件,这里我重新命名了文件名 |
|
|
} from "../../api/img-to-base64.js" //引入解压后的js文件,这里我重新命名了文件名 |
|
@ -74,11 +90,22 @@ |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
data: { |
|
|
data: { |
|
|
sublist:[] |
|
|
sublist: [] |
|
|
}, |
|
|
}, |
|
|
newHtmlContent: '', //打印传入的html |
|
|
newHtmlContent: '', //打印传入的html |
|
|
|
|
|
newHtmlContent1: '', //打印传入的html |
|
|
isLoadFinish: false, |
|
|
isLoadFinish: false, |
|
|
ids:'' |
|
|
ids: '', |
|
|
|
|
|
tabIndex: 1, |
|
|
|
|
|
data1: '', |
|
|
|
|
|
currentPage: 1, |
|
|
|
|
|
pageSize: 3, |
|
|
|
|
|
showTableSubList: [], |
|
|
|
|
|
showTableInspectDTOList:[], |
|
|
|
|
|
|
|
|
|
|
|
currentPage1: 1, |
|
|
|
|
|
pageSize1: 20, |
|
|
|
|
|
number:'' |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
@ -86,7 +113,11 @@ |
|
|
// #ifdef APP |
|
|
// #ifdef APP |
|
|
// 打印 |
|
|
// 打印 |
|
|
printImage() { |
|
|
printImage() { |
|
|
|
|
|
if (this.tabIndex == 1) { |
|
|
|
|
|
testModule.doHTMLPrint(this.newHtmlContent1) |
|
|
|
|
|
} else { |
|
|
testModule.doHTMLPrint(this.newHtmlContent) |
|
|
testModule.doHTMLPrint(this.newHtmlContent) |
|
|
|
|
|
} |
|
|
}, |
|
|
}, |
|
|
// 读取html文件 |
|
|
// 读取html文件 |
|
|
readFile(path, callback) { |
|
|
readFile(path, callback) { |
|
@ -107,74 +138,9 @@ |
|
|
// #endif |
|
|
// #endif |
|
|
formatDate(val) { |
|
|
formatDate(val) { |
|
|
return dateFormat(val) |
|
|
return dateFormat(val) |
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
isLoadFinish: { |
|
|
|
|
|
handler(newVal, oldVal) { |
|
|
|
|
|
if (newVal == true) { |
|
|
|
|
|
// 读取html文件将文件中的内容图换成当前页面的数据 |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
immediate: true |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onLoad(option) { |
|
|
|
|
|
if (option.data) { |
|
|
|
|
|
this.data = JSON.parse(decodeURIComponent(option.data)); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
async onShow() { |
|
|
// 获取采购上架检验html |
|
|
await getJimuPutawayJobDetail({ |
|
|
getPointPutawayJobHtml() { |
|
|
masterIds:this.data.ids |
|
|
|
|
|
}).then(res=>{ |
|
|
|
|
|
this.data.sublist = res.data |
|
|
|
|
|
}) |
|
|
|
|
|
// 获取数据 |
|
|
|
|
|
// this.data = [{ |
|
|
|
|
|
// toLocationCode: 'C13-12-11', |
|
|
|
|
|
// jobNumber: '555555', |
|
|
|
|
|
// creator: '就是我', |
|
|
|
|
|
// createTime: '2019-12-12 05:00:00', |
|
|
|
|
|
// itemNumber: '66', |
|
|
|
|
|
// itemDes: 'hahah', |
|
|
|
|
|
// batch: '201450513', |
|
|
|
|
|
// packingNumber: '201450513', |
|
|
|
|
|
// packUnit: '201450513', |
|
|
|
|
|
// packQty: '40', |
|
|
|
|
|
// uom: '张', |
|
|
|
|
|
// }, { |
|
|
|
|
|
// toLocationCode: 'C13-12-11', |
|
|
|
|
|
// jobNumber: '555555', |
|
|
|
|
|
// creator: '就是我', |
|
|
|
|
|
// createTime: '2019-12-12 05:00:00', |
|
|
|
|
|
// sublist: [{ |
|
|
|
|
|
// itemNumber: '66', |
|
|
|
|
|
// itemDes: 'hahah', |
|
|
|
|
|
// batch: '201450513', |
|
|
|
|
|
// packingNumber: '', |
|
|
|
|
|
// packUnit: '', |
|
|
|
|
|
// packQty: '', |
|
|
|
|
|
// uom: '' |
|
|
|
|
|
// }] |
|
|
|
|
|
// }, { |
|
|
|
|
|
// toLocationCode: 'C13-12-11', |
|
|
|
|
|
// jobNumber: '555555', |
|
|
|
|
|
// creator: '就是我', |
|
|
|
|
|
// createTime: '2019-12-12 05:00:00', |
|
|
|
|
|
// sublist: [{ |
|
|
|
|
|
// itemNumber: '66', |
|
|
|
|
|
// itemDes: 'hahah', |
|
|
|
|
|
// batch: '201450513', |
|
|
|
|
|
// packingNumber: '', |
|
|
|
|
|
// packUnit: '', |
|
|
|
|
|
// packQty: '', |
|
|
|
|
|
// uom: '' |
|
|
|
|
|
// }] |
|
|
|
|
|
// }] |
|
|
|
|
|
this.$nextTick(async () => { |
|
|
this.$nextTick(async () => { |
|
|
let str = '' |
|
|
let str = '' |
|
|
this.readFile(htmlFileUrl, (htmlContent) => { |
|
|
this.readFile(htmlFileUrl, (htmlContent) => { |
|
@ -208,12 +174,137 @@ |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
}) |
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
// 获取采购收货指引单html |
|
|
|
|
|
getPurchaseReceiptJobHtml() { |
|
|
|
|
|
this.$nextTick(async () => { |
|
|
|
|
|
let str2 = '' |
|
|
|
|
|
this.readFile(htmlFileUrl1, (htmlContent) => { |
|
|
|
|
|
this.newHtmlContent1 = htmlContent |
|
|
|
|
|
str2 = `<div class="box" style="page-break-before:always;" ><br /> |
|
|
|
|
|
<div class=""> |
|
|
|
|
|
<table border='1'> |
|
|
|
|
|
<thead> |
|
|
|
|
|
<tr class='top'> |
|
|
|
|
|
<th>发货单号:</th> |
|
|
|
|
|
<th colspan='2'>${this.data1.asnNumber}</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
<tr> |
|
|
|
|
|
<th>物料代码</th> |
|
|
|
|
|
<th>供应商批次</th> |
|
|
|
|
|
<th>检验数量</th> |
|
|
|
|
|
</tr> |
|
|
|
|
|
</thead> |
|
|
|
|
|
<tbody> |
|
|
|
|
|
strBody |
|
|
|
|
|
</tbody> |
|
|
|
|
|
</table> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
` |
|
|
|
|
|
let str1 = '' |
|
|
|
|
|
this.data1.inspectDTOList.forEach(item => { |
|
|
|
|
|
str1 += ` |
|
|
|
|
|
<tr> |
|
|
|
|
|
<td>${item.itemCode}</td> |
|
|
|
|
|
<td>${item.supplierBatch}</td> |
|
|
|
|
|
<td>${item.sampleQty}</td> |
|
|
|
|
|
</tr> |
|
|
|
|
|
` |
|
|
|
|
|
}) |
|
|
|
|
|
str2 = str2.replace("strBody", str1) |
|
|
|
|
|
console.log(335, str1) |
|
|
|
|
|
this.newHtmlContent1 = this.newHtmlContent1.replace( |
|
|
|
|
|
"mainBody", str2); //替换物品代码 |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
|
|
|
getTableSubList() { |
|
|
|
|
|
if (this.data.sublist.length > this.pageSize) { |
|
|
|
|
|
const array = this.data.sublist.slice( |
|
|
|
|
|
(this.currentPage - 1) * this.pageSize, |
|
|
|
|
|
this.currentPage * this.pageSize |
|
|
|
|
|
) |
|
|
|
|
|
if(array.length>0){ |
|
|
|
|
|
this.showTableSubList = [...this.showTableSubList, ...array] |
|
|
|
|
|
this.currentPage += 1 |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
this.showTableSubList = this.data.sublist |
|
|
|
|
|
} |
|
|
|
|
|
// console.log(233,this.showTableSubList) |
|
|
|
|
|
}, |
|
|
|
|
|
getTableInspectDTOList() { |
|
|
|
|
|
if (this.data1.inspectDTOList.length > this.pageSize1) { |
|
|
|
|
|
const array = this.data1.inspectDTOList.slice( |
|
|
|
|
|
(this.currentPage1 - 1) * this.pageSize1, |
|
|
|
|
|
this.currentPage1 * this.pageSize1 |
|
|
|
|
|
) |
|
|
|
|
|
if(array.length>0){ |
|
|
|
|
|
this.showTableInspectDTOList = [...this.showTableInspectDTOList, ...array] |
|
|
|
|
|
this.currentPage1 += 1 |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
this.showTableInspectDTOList = this.data1.inspectDTOList |
|
|
|
|
|
} |
|
|
|
|
|
console.log(233,this.showTableInspectDTOList) |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
watch: { |
|
|
|
|
|
isLoadFinish: { |
|
|
|
|
|
handler(newVal, oldVal) { |
|
|
|
|
|
if (newVal == true) { |
|
|
|
|
|
// 读取html文件将文件中的内容图换成当前页面的数据 |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
immediate: true |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
onLoad(option) { |
|
|
|
|
|
if (option.data) { |
|
|
|
|
|
this.data = JSON.parse(decodeURIComponent(option.data)); |
|
|
|
|
|
} |
|
|
|
|
|
if (option.number) { |
|
|
|
|
|
this.number = option.number; |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
async onShow() { |
|
|
|
|
|
await getJimuPutawayJobDetail({ |
|
|
|
|
|
masterIds: this.data.ids |
|
|
|
|
|
}).then(res => { |
|
|
|
|
|
this.data.sublist = res.data |
|
|
|
|
|
this.getTableSubList() |
|
|
|
|
|
}) |
|
|
|
|
|
// 获取采购收货指引单 |
|
|
|
|
|
await queryInspectionFreeFlag({ |
|
|
|
|
|
number: this.number |
|
|
|
|
|
}).then(async res1 => { |
|
|
|
|
|
this.data1 = res1.data |
|
|
|
|
|
this.getTableInspectDTOList() |
|
|
|
|
|
}) |
|
|
|
|
|
this.getPointPutawayJobHtml() |
|
|
|
|
|
this.getPurchaseReceiptJobHtml() |
|
|
|
|
|
}, |
|
|
|
|
|
onReachBottom() { |
|
|
|
|
|
if(this.tabIndex == 1){ |
|
|
|
|
|
if(this.showTableInspectDTOList.length!=this.data1.inspectDTOList.length){ |
|
|
|
|
|
this.getTableInspectDTOList() |
|
|
|
|
|
} |
|
|
|
|
|
}else{ |
|
|
|
|
|
if(this.showTableSubList.length!=this.data.sublist.length){ |
|
|
|
|
|
this.getTableSubList() |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style> |
|
|
<style lang="scss"> |
|
|
.box { |
|
|
.box { |
|
|
font-size: 26rpx; |
|
|
font-size: 26rpx; |
|
|
/* display: flex; */ |
|
|
/* display: flex; */ |
|
@ -285,53 +376,94 @@ |
|
|
font-size: 46rpx; |
|
|
font-size: 46rpx; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
.mb-bo{ |
|
|
|
|
|
display:flex; |
|
|
.mb-bo { |
|
|
|
|
|
display: flex; |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-left{ |
|
|
|
|
|
flex:1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mb-bo .mb-left { |
|
|
|
|
|
flex: 1 |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-left .mb-text{ |
|
|
|
|
|
|
|
|
.mb-bo .mb-left .mb-text { |
|
|
padding: 20rpx; |
|
|
padding: 20rpx; |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-left .mb-text:nth-child(1){ |
|
|
|
|
|
|
|
|
.mb-bo .mb-left .mb-text:nth-child(1) { |
|
|
border-bottom: 1px solid #dedede; |
|
|
border-bottom: 1px solid #dedede; |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-left .mb-text view{ |
|
|
|
|
|
|
|
|
.mb-bo .mb-left .mb-text view { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
font-size: 32rpx; |
|
|
font-size: 32rpx; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-right{ |
|
|
|
|
|
|
|
|
.mb-bo .mb-right { |
|
|
padding: 20rpx; |
|
|
padding: 20rpx; |
|
|
width: 260rpx; |
|
|
width: 260rpx; |
|
|
border-left: 1px solid #dedede; |
|
|
border-left: 1px solid #dedede; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-right .mb-text{ |
|
|
|
|
|
|
|
|
.mb-bo .mb-right .mb-text { |
|
|
|
|
|
|
|
|
width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
.mb-bo .mb-right .mb-text view{ |
|
|
|
|
|
|
|
|
.mb-bo .mb-right .mb-text view { |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
font-size: 40rpx; |
|
|
font-size: 40rpx; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
} |
|
|
} |
|
|
/* .mb-text { |
|
|
|
|
|
margin-top: 10rpx; |
|
|
.top1 th { |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
padding: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
table { |
|
|
|
|
|
border-collapse: collapse; |
|
|
|
|
|
border: 1px solid #dedede; |
|
|
|
|
|
/* 设置表格的边框 */ |
|
|
|
|
|
width: 100% |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
th { |
|
|
|
|
|
text-align: left; |
|
|
|
|
|
padding: 10px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::v-deep .u-th { |
|
|
td { |
|
|
font-size: 24rpx !important; |
|
|
padding: 10px; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
::v-deep .u-td { |
|
|
.tabs-box { |
|
|
height: auto !important; |
|
|
display: flex; |
|
|
font-size: 24rpx !important; |
|
|
align-items: center; |
|
|
word-break: break-all; |
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
border-bottom: 2rpx solid rgb(188, 188, 188); |
|
|
|
|
|
position: fixed; |
|
|
|
|
|
background: white; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
left: 0px; |
|
|
|
|
|
|
|
|
} */ |
|
|
view { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 60rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.active1 { |
|
|
|
|
|
color: rgb(60, 156, 255) !important; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
border-bottom: 4rpx solid rgb(60, 156, 255); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |