|
|
@@ -0,0 +1,229 @@
|
|
|
+<!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>
|
|
|
+ table,
|
|
|
+ table tr th,
|
|
|
+ table tr td {
|
|
|
+ border: 2px solid #333333;
|
|
|
+ padding: 5px 0;
|
|
|
+ height: 55px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #app {
|
|
|
+ /* height: 98vh;
|
|
|
+ position: relative; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 1000px;
|
|
|
+ padding: 70px 20px 20px 20px;
|
|
|
+ font-size: 22px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border: 3px solid #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .col-bgc {
|
|
|
+ background: #f6f7fb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-row1 {
|
|
|
+ display: flex;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ margin-top: 5px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-row2 {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 41px;
|
|
|
+ height: 41px;
|
|
|
+ margin-right: 118px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .config {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 240px;
|
|
|
+ }
|
|
|
+ .autograph{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .bottom-row3 {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .number {
|
|
|
+ text-align: right;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-row {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-content {
|
|
|
+ width: 400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding: 20px 20px 160px 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ height: 450px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .small-img {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .sign{
|
|
|
+ margin-right: 100px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div id="app">
|
|
|
+ <div class="content" v-if="true">
|
|
|
+ <div class="title">出库检斤单</div>
|
|
|
+ <table class="table">
|
|
|
+ <tr class="row">
|
|
|
+ <td class="col col-bgc">送货单位</td>
|
|
|
+ <td class="col" colspan="4">{{tableData.seller}}</td>
|
|
|
+ <td class="col col-bgc">车牌号</td>
|
|
|
+ <td class="col" colspan="1">{{tableData.carNo}}</td>
|
|
|
+ <td class="col col-bgc">货名</td>
|
|
|
+ <td class="col" colspan="1">{{tableData.goodsName}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="row">
|
|
|
+ <td class="col col-bgc">收货单位</td>
|
|
|
+ <td class="col" colspan="4">{{tableData.buyer}}</td>
|
|
|
+ <td class="col col-bgc">类型</td>
|
|
|
+ <td class="col"colspan="1">{{tableData.type}}</td>
|
|
|
+ <td class="col col-bgc">检斤时间</td>
|
|
|
+ <td class="col" colspan="1">{{tableData.updateDate}}</td>
|
|
|
+ </tr>
|
|
|
+ <tr class="row">
|
|
|
+ <td class="col col-bgc">毛重（吨）</td>
|
|
|
+ <td class="col" colspan="2">{{tableData.grossWeight}}</td>
|
|
|
+ <td class="col col-bgc">皮重（吨）</td>
|
|
|
+ <td class="col" colspan="2">{{tableData.tare}}</td>
|
|
|
+ <td class="col col-bgc">净重（吨）</td>
|
|
|
+ <td class="col" colspan="2">{{tableData.netWeight}}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="bottom-row1">
|
|
|
+ <div>检斤员：{{tableData.backOffice}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-row2">
|
|
|
+ <div class="config">收货单位签名或盖章：</div>
|
|
|
+ <div class="autograph">客户签名：</div>
|
|
|
+ </div>
|
|
|
+ </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: {
|
|
|
+ // qualityInspectionManagement:{}
|
|
|
+ },
|
|
|
+ name: "",
|
|
|
+ bigContent: false,
|
|
|
+ smallContent: false
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ printSmall() {},
|
|
|
+ printBig() {},
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(decodeURIComponent(this.getQueryVariable("tableData")))
|
|
|
+ let _data = decodeURIComponent(this.getQueryVariable("tableData"))
|
|
|
+ let _type = decodeURIComponent(this.getQueryVariable("type"))
|
|
|
+ if (_type == 2) {
|
|
|
+ this.bigContent = true
|
|
|
+ this.smallContent = false
|
|
|
+ } else {
|
|
|
+ this.smallContent = true
|
|
|
+ this.bigContent = false
|
|
|
+ }
|
|
|
+ console.log(_data,"sddsd")
|
|
|
+ this.tableData = JSON.parse(_data)
|
|
|
+ console.log(this.tableData)
|
|
|
+ document.title = "粮食检斤单"
|
|
|
+ window.print()
|
|
|
+ window.onafterprint = function(event) {
|
|
|
+ window.history.back(-1)
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {}
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+</html>
|
