|
|
@@ -1,98 +1,240 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
- <head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
- <title></title>
|
|
|
- <style>
|
|
|
- .content{
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
+ <title></title>
|
|
|
+ <style>
|
|
|
+ .content {
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
- .title{
|
|
|
+
|
|
|
+ .title {
|
|
|
width: 600px;
|
|
|
position: relative;
|
|
|
- border-top: 1px solid #EBEEF5;
|
|
|
- border-left: 1px solid #EBEEF5;
|
|
|
- border-right: 1px solid #EBEEF5;
|
|
|
- /* padding: 20px; */
|
|
|
- box-sizing: border-box;
|
|
|
+ /* border-top: 1px solid #EBEEF5;
|
|
|
+ border-left: 1px solid #EBEEF5;
|
|
|
+ border-right: 1px solid #EBEEF5; */
|
|
|
+ /* padding: 20px; */
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
- .name{
|
|
|
+
|
|
|
+ .name {
|
|
|
font-size: 14px;
|
|
|
font-weight: 500;
|
|
|
color: #323233;
|
|
|
}
|
|
|
- .price{
|
|
|
+
|
|
|
+ .price {
|
|
|
position: absolute;
|
|
|
- right: 10px;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- font-size: 14px;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
}
|
|
|
- .tableBox tr{
|
|
|
+ .tableBox {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ .tableBox tr {
|
|
|
font-size: 12px;
|
|
|
- padding:0!important;
|
|
|
+ padding: 0 !important;
|
|
|
+ display: flow-root;
|
|
|
+ border-left:1px solid #ccc;
|
|
|
+ border-right:1px solid #ccc;
|
|
|
+ border-bottom:1px solid #ccc;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
- .tableBox td{
|
|
|
+
|
|
|
+ .tableBox td {
|
|
|
font-size: 12px;
|
|
|
- padding:0!important;
|
|
|
+ padding: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableBox .cell {
|
|
|
+ text-align: center;
|
|
|
+ padding: 0!important;
|
|
|
+ margin:0 2px!important;
|
|
|
+ }
|
|
|
+ .table-row{
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
}
|
|
|
- .tableBox .cell{
|
|
|
- text-align:center;
|
|
|
+ .el-table--scrollable-x .el-table__body-wrapper{
|
|
|
+ overflow: hidden!important;
|
|
|
}
|
|
|
- </style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div id="app">
|
|
|
- <div class="content" v-for="(item,index) in 4">
|
|
|
- <div class="title">
|
|
|
- <div class="name" v-if="index==0">水分（{{waterMin}}-{{waterMax}}）一等单价 {{name}}价格对照表（按水分）</div>
|
|
|
- <div class="name" v-if="index==1">水分（{{waterMin}}-{{waterMax}}）二等单价 {{name}}价格对照表（按水分）</div>
|
|
|
- <div class="name" v-if="index==2">水分（{{waterMin}}-{{waterMax}}）三等单价 {{name}}价格对照表（按水分）</div>
|
|
|
- <div class="name" v-if="index==3">水分（{{waterMin}}-{{waterMax}}）等外单价 {{name}}价格对照表（按水分）</div>
|
|
|
- <div class="price">价格单位：元/公斤</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-table :data="tableData" style="width: 600px" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
- <div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <el-table-column prop="waterMin" label="水分下限(%)" header-align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price1" label="一等单价" v-if="index==0" header-align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price2" label="二等单价" v-if="index==1" header-align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="price3" label="三等单价" v-if="index==2" header-align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="priceOther" label="等外单价" v-if="index==3" header-align="center">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
|
|
|
+ border: 0;
|
|
|
+ padding: 0;
|
|
|
+ text-overflow: initial;
|
|
|
+}
|
|
|
+.el-table__row td:nth-of-type(1){
|
|
|
+ width: 40%;
|
|
|
+ border-right: 1px solid #ccc!important;
|
|
|
+}
|
|
|
+.el-table__row td:nth-of-type(2){
|
|
|
+ width: 60%;
|
|
|
+}
|
|
|
+.el-table::before {
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 0px;
|
|
|
+}
|
|
|
+.content0{
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.content1{
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.content2{
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="content" :class="'content'+index" v-for="(item,index) in 4">
|
|
|
+ <div class="title">
|
|
|
+ <div class="name" v-if="index==0">一等单价 {{name}}价格对照表（按水分）</div>
|
|
|
+ <div class="name" v-if="index==1">二等单价 {{name}}价格对照表（按水分）</div>
|
|
|
+ <div class="name" v-if="index==2">三等单价 {{name}}价格对照表（按水分）</div>
|
|
|
+ <div class="name" v-if="index==3">等外单价 {{name}}价格对照表（按水分）</div>
|
|
|
+ <div class="price">价格单位：元/公斤</div>
|
|
|
+ </div>
|
|
|
+ <div class="table-row" >
|
|
|
+ <el-table :data="tableData1" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="tableData2" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="tableData3" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="tableData4" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="tableData5" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="tableData6" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-table :data="tableData7" :row-class-name="tableRowClassName" class="tableBox">
|
|
|
+ <el-table-column prop="waterMin" label="水分" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="waterMax" label="水分上限(%)" header-align="center">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="price1" label="单价" v-if="index==0" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price2" label="单价" v-if="index==1" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="price3" label="单价" v-if="index==2" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceOther" label="单价" v-if="index==3" header-align="center">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- </body>
|
|
|
- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
|
- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
- <script type="text/javascript">
|
|
|
- new Vue({
|
|
|
- el: '#app',
|
|
|
- data: {
|
|
|
- tableData: "",
|
|
|
- name:"",
|
|
|
- waterMin:'',
|
|
|
- waterMax:''
|
|
|
- },
|
|
|
- computed: {},
|
|
|
- methods: {
|
|
|
- tableRowClassName({
|
|
|
+
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
|
|
|
+<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+ new Vue({
|
|
|
+ el: '#app',
|
|
|
+ data: {
|
|
|
+ tableData: [],
|
|
|
+ tableData1: [],
|
|
|
+ tableData2: [],
|
|
|
+ tableData3: [],
|
|
|
+ tableData4: [],
|
|
|
+ tableData5: [],
|
|
|
+ tableData6: [],
|
|
|
+ tableData7: [],
|
|
|
+ name: "",
|
|
|
+ waterMin: '',
|
|
|
+ waterMax: ''
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ tableRowClassName({
|
|
|
row,
|
|
|
rowIndex
|
|
|
}) {
|
|
|
@@ -114,25 +256,49 @@
|
|
|
}
|
|
|
return (false);
|
|
|
}
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- debugger
|
|
|
- let _data = localStorage.getItem("pricePrintList")
|
|
|
- this.name = decodeURIComponent(this.getQueryVariable("name"))
|
|
|
- console.log(_data)
|
|
|
- this.tableData = JSON.parse(_data)
|
|
|
-
|
|
|
- this.waterMin = this.tableData[0].waterMin
|
|
|
- this.waterMax = this.tableData[0].waterMax
|
|
|
- document.title = this.name+'价格对照表（按水分）'
|
|
|
- window.print()
|
|
|
- window.onafterprint = function(event) {
|
|
|
- window.history.back(-1)
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ let _data = localStorage.getItem("pricePrintList")
|
|
|
+ this.name = decodeURIComponent(this.getQueryVariable("name"))
|
|
|
+ console.log(_data)
|
|
|
+ this.tableData = JSON.parse(_data)
|
|
|
+ // 构造显示数据
|
|
|
+ this.waterMin = this.tableData[0].waterMin
|
|
|
+ this.waterMax = this.tableData[0].waterMax
|
|
|
+ document.title = this.name + '价格对照表（按水分）'
|
|
|
+ for (let i = 0; i < this.tableData.length; i++) {
|
|
|
+ // if(!this.tableData[i].waterMin.toString().split(".")[1]){
|
|
|
+ // this.tableData[i].waterMin = this.tableData[i].waterMin+'.0'
|
|
|
+ // }
|
|
|
+ if (i <= 39) {
|
|
|
+ this.tableData1.push(this.tableData[i])
|
|
|
+ } else if (i <= 79 && i > 39) {
|
|
|
+ this.tableData2.push(this.tableData[i])
|
|
|
+ }
|
|
|
+ else if (i <= 119 && i > 79) {
|
|
|
+ this.tableData3.push(this.tableData[i])
|
|
|
+ }
|
|
|
+ else if (i <= 159 && i > 119) {
|
|
|
+ this.tableData4.push(this.tableData[i])
|
|
|
+ }
|
|
|
+ else if (i <= 199 && i > 159) {
|
|
|
+ this.tableData5.push(this.tableData[i])
|
|
|
+ }
|
|
|
+ else if (i <= 239 && i > 199) {
|
|
|
+ this.tableData6.push(this.tableData[i])
|
|
|
+ }
|
|
|
+ else if (i <= 279 && i > 239) {
|
|
|
+ this.tableData7.push(this.tableData[i])
|
|
|
+ }
|
|
|
}
|
|
|
- })
|
|
|
- </script>
|
|
|
+ // window.print()
|
|
|
+ window.onafterprint = function (event) {
|
|
|
+ window.history.back(-1)
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
|
|
|
</html>
|
mxx