wangchao
/
yiliangyiyun-pc-jj


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
							<!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 {
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .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;
    }

    .name {
      font-size: 16px;
      font-weight: 500;
      color: #323233;
      margin: 10px;
    }

    .price {
      position: absolute;
      right: 10px;
      bottom: 0;
      margin: auto;
      font-size: 14px;
      top: 0;
      display: flex;
    align-items: center;
    }
    .tableBox {
      width: 80px;
      border-left: 1px solid #ccc;
      /* border-right: 1px solid #ccc; */
    }
    .tableBox tr {
      font-size: 12px;
      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;
      padding-right: 10px;
    }

    .tableBox td {
      font-size: 12px;
      padding: 0 !important;
    }

    .tableBox .cell {
      text-align: center;
      padding: 0!important;
      /* margin:0 2px!important; */
    }
    .table-row{
      display: flex;
      border-top: 1px solid #ccc;
    }
    .el-table--scrollable-x .el-table__body-wrapper{
      overflow: hidden!important;
    }
    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border: 0;
    padding: 0;
    text-overflow: initial;
    border-right: 1px solid #ccc;
}
.el-table__row td:nth-of-type(1){
  width: 40%;
  /* border-right: 1px solid #ccc!important; */
  background: #cccccc3d;
}
.el-table__row td:nth-of-type(2){
  width: 60%;
}
.el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
}
.content0{
  margin-bottom: 30vh;
  /* padding-top: 5vh; */
}
.content1{
  margin-bottom: 30vh;
  /* padding-top: 5vh; */

}
.content2{
  /* padding-top: 5vh; */
  /* margin-bottom: 30vh; */
}
.content3{
  /* padding-top: 10px; */
}
.has-gutter th:nth-of-type(1){
  width: 40%;
}
.tableBox7 tr{
border-right: 1px solid #ccc!important;
}
  </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 tableBox7">
            <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>

  </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
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) {
            return pair[1];
          }
        }
        return (false);
      }
    },
    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])
        }
      }
      // window.print()
      window.onafterprint = function (event) {
        window.history.back(-1)
      };
    },
    watch: {
    }
  })
</script>

</html>