|
@@ -1,153 +1,157 @@
|
|
<template>
|
|
<template>
|
|
<div class="wrap-print" id="printData">
|
|
<div class="wrap-print" id="printData">
|
|
- <div class="time">
|
|
|
|
- {{ getTime() }}
|
|
|
|
- </div>
|
|
|
|
- <div class="print-hed">
|
|
|
|
- <div style="width: 50%; text-align: center">送货单</div>
|
|
|
|
- <div class="qrCode">
|
|
|
|
- <div>
|
|
|
|
- <vue-qr
|
|
|
|
- ref="qrCode"
|
|
|
|
- :text="form.id"
|
|
|
|
- :logoSrc="logoSrc"
|
|
|
|
- :color-dark="randomColor"
|
|
|
|
- :callback="qrCodeCallback"
|
|
|
|
- width="100"
|
|
|
|
- height="100"
|
|
|
|
- ></vue-qr>
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <vue-barcode
|
|
|
|
- :value="form.id"
|
|
|
|
- :margin="0.5"
|
|
|
|
- :width="1.6"
|
|
|
|
- :height="35"
|
|
|
|
- :fontSize="12"
|
|
|
|
- :textAlign="center"
|
|
|
|
- :displayValue="true"
|
|
|
|
- :text="form.id"
|
|
|
|
- ></vue-barcode>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="header-print">
|
|
|
|
- <div class="item-print" v-if="form.id">
|
|
|
|
- <div class="print-label">采购单号:</div>
|
|
|
|
- <div class="print-value">{{ form.id }}</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="item-print" v-if="form.delvOrdId">
|
|
|
|
- <div class="print-label">出库单号:</div>
|
|
|
|
- <div class="print-value">{{ form.delvOrdId }}</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="item-print">
|
|
|
|
- <div class="print-label">客户名称:</div>
|
|
|
|
- <div class="print-value">{{ form.branchName }}</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="item-print">
|
|
|
|
- <div class="print-label">金额:</div>
|
|
|
|
- <div class="print-value">{{ form.purcAmt }}</div>
|
|
|
|
|
|
+ <div v-for="(itm, index) in tableData" :key="index">
|
|
|
|
+ <div class="time">
|
|
|
|
+ {{ getTime() }}
|
|
</div>
|
|
</div>
|
|
- <div class="item-print">
|
|
|
|
- <div class="print-label">来源部门:</div>
|
|
|
|
- <div class="print-value">{{ form.deptName }}</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="item-print">
|
|
|
|
- <div class="print-label">采购总数:</div>
|
|
|
|
- <div class="print-value">{{ form.qtySum }}</div>
|
|
|
|
|
|
+ <div class="print-hed">
|
|
|
|
+ <div style="width: 50%; text-align: center">送货单</div>
|
|
|
|
+ <div class="qrCode">
|
|
|
|
+ <div>
|
|
|
|
+ <vue-qr
|
|
|
|
+ ref="qrCode"
|
|
|
|
+ :text="form.delvOrdId"
|
|
|
|
+ :logoSrc="logoSrc"
|
|
|
|
+ :color-dark="randomColor"
|
|
|
|
+ :callback="qrCodeCallback"
|
|
|
|
+ width="100"
|
|
|
|
+ height="100"
|
|
|
|
+ ></vue-qr>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <vue-barcode
|
|
|
|
+ :value="form.delvOrdId"
|
|
|
|
+ :margin="0.5"
|
|
|
|
+ :width="1.6"
|
|
|
|
+ :height="35"
|
|
|
|
+ :fontSize="16"
|
|
|
|
+ :textAlign="center"
|
|
|
|
+ :displayValue="true"
|
|
|
|
+ :text="form.delvOrdId"
|
|
|
|
+ ></vue-barcode>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="item-print" v-if="form.delvOrdId">
|
|
|
|
- <div class="print-label">出库人:</div>
|
|
|
|
- <div class="print-value">{{ form.docmker }}</div>
|
|
|
|
|
|
+ <div class="header-print">
|
|
|
|
+ <div class="item-print" v-if="form.id">
|
|
|
|
+ <div class="print-label">采购单号:</div>
|
|
|
|
+ <div class="print-value">{{ form.id }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-print" v-if="form.delvOrdId">
|
|
|
|
+ <div class="print-label">出库单号:</div>
|
|
|
|
+ <div class="print-value">{{ form.delvOrdId }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-print">
|
|
|
|
+ <div class="print-label">客户名称:</div>
|
|
|
|
+ <div class="print-value">{{ form.branchName }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-print">
|
|
|
|
+ <div class="print-label">本页金额:</div>
|
|
|
|
+ <div class="print-value">{{ aceptMount(itm) }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-print">
|
|
|
|
+ <div class="print-label">总金额:</div>
|
|
|
|
+ <div class="print-value">{{ allMount() }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-print">
|
|
|
|
+ <div class="print-label">来源部门:</div>
|
|
|
|
+ <div class="print-value">{{ form.deptName }}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div class="item-print">
|
|
|
|
+ <div class="print-label">采购总数:</div>
|
|
|
|
+ <div class="print-value">{{ form.qtySum }}</div>
|
|
|
|
+ </div> -->
|
|
|
|
+ <!-- <div class="item-print" v-if="form.delvOrdId">
|
|
|
|
+ <div class="print-label">出库人:</div>
|
|
|
|
+ <div class="print-value">{{ form.docmker }}</div>
|
|
|
|
+ </div> -->
|
|
|
|
+ <div class="item-print" v-if="form.delvOrdId">
|
|
|
|
+ <div class="print-label">出库时间:</div>
|
|
|
|
+ <div class="print-value">{{ form.docmkDate }}</div>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="item-print" v-if="form.delvOrdId">
|
|
|
|
- <div class="print-label">出库时间:</div>
|
|
|
|
- <div class="print-value">{{ form.docmkDate }}</div>
|
|
|
|
|
|
+ <table class="printTable" border="1" style="table-layout: auto">
|
|
|
|
+ <thead>
|
|
|
|
+ <tr>
|
|
|
|
+ <th
|
|
|
|
+ v-for="(item, index) in tableHeader"
|
|
|
|
+ :key="index"
|
|
|
|
+ :style="{ minWidth: item.minWidth + 'px' }"
|
|
|
|
+ >
|
|
|
|
+ {{ item.label }}
|
|
|
|
+ </th>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ <tbody>
|
|
|
|
+ <tr v-for="(item, index) in itm" :key="index">
|
|
|
|
+ <td style="width:40px">
|
|
|
|
+ <span>{{ index + 1 }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td style="width:90px">
|
|
|
|
+ <span>{{ item.prodName }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.regcertno }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.spec }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.mol }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.prodEntp }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>
|
|
|
|
+ {{ item.purcUnt }} ({{ item.convrat }}{{ item.prcUnt }}/{{
|
|
|
|
+ item.purcUnt
|
|
|
|
+ }})</span
|
|
|
|
+ >
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.purcCnt }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.delvCnt }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.purcPric }}元/{{ item.prcUnt }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.delvAmt }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td style="width:70px">
|
|
|
|
+ <span>{{ item.lotNum }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ <td>
|
|
|
|
+ <span>{{ item.prodExpy }}</span>
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+ <div class="autograph">
|
|
|
|
+ <div class="grap">送货人(签名):</div>
|
|
|
|
+ <div class="grap">收货人(签名):</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div class="remarks">备注 :</div>
|
|
|
|
+ <div style="page-break-after: always"></div>
|
|
</div>
|
|
</div>
|
|
- <el-table
|
|
|
|
- ref="multipleTable"
|
|
|
|
- :data="tableData"
|
|
|
|
- cell-class-name="cell-class-name"
|
|
|
|
- element-loading-text="加载中..."
|
|
|
|
- border
|
|
|
|
- fit
|
|
|
|
- >
|
|
|
|
- <template slot="empty">
|
|
|
|
- <img src="" alt />
|
|
|
|
- <p>暂无数据</p>
|
|
|
|
- </template>
|
|
|
|
- <el-table-column
|
|
|
|
- fixed="left"
|
|
|
|
- align="center"
|
|
|
|
- type="index"
|
|
|
|
- label="序号"
|
|
|
|
- width="50"
|
|
|
|
- />
|
|
|
|
- <el-table-column label="耗材信息" width="300">
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
- <mcs-info :info="scope.row"></mcs-info>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="规格" prop="spec" />
|
|
|
|
- <el-table-column label="型号" prop="mol" />
|
|
|
|
- <el-table-column label="材质" prop="matl" />
|
|
|
|
- <!-- <el-table-column label="是否集采" prop="isFas">
|
|
|
|
- <template #default="{ row }">
|
|
|
|
- <span v-if="row.isFas == '0'">否</span>
|
|
|
|
- <span v-if="row.isFas == '1'">是</span>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column> -->
|
|
|
|
- <el-table-column label="包装" prop="convrat" width="120px">
|
|
|
|
- <template #default="{ row }">
|
|
|
|
- <span
|
|
|
|
- >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
|
|
|
|
- row.purcUnt
|
|
|
|
- }})</span
|
|
|
|
- >
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="批号" prop="lotNum" width="120"></el-table-column>
|
|
|
|
- <el-table-column label="生产日期" prop="manuDate" width="100" />
|
|
|
|
- <el-table-column label="有效期至" width="100" prop="prodExpy" />
|
|
|
|
- <el-table-column label="需求数量" prop="purcCnt" />
|
|
|
|
- <el-table-column
|
|
|
|
- label="已出库数量"
|
|
|
|
- prop="delvCntYck"
|
|
|
|
- width="90px"
|
|
|
|
- v-if="!form.delvOrdId"
|
|
|
|
- />
|
|
|
|
- <el-table-column label="剩余出库量" prop="toDelvCnt" width="90px">
|
|
|
|
- <template #default="{ row }">
|
|
|
|
- <span v-if="form.quit == 'outbound'">
|
|
|
|
- {{ Number(row.toDelvCnt) - Number(row.delvCnt) }}
|
|
|
|
- </span>
|
|
|
|
- <span v-else>
|
|
|
|
- {{ row.toDelvCnt }}
|
|
|
|
- </span>
|
|
|
|
- </template>
|
|
|
|
- </el-table-column>
|
|
|
|
- <el-table-column label="本次出库数量" prop="delvCnt" width="120" />
|
|
|
|
- </el-table>
|
|
|
|
- <div class="autograph">
|
|
|
|
- <div class="grap">送货人(签名):</div>
|
|
|
|
- <div class="grap">收货人(签名):</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="remarks">备注 :</div>
|
|
|
|
- <div style="page-break-after: always"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import VueQr from "vue-qr";
|
|
import VueQr from "vue-qr";
|
|
import vueBarcode from "vue-barcode";
|
|
import vueBarcode from "vue-barcode";
|
|
import mcsInfo from "@/views/components/mcs-info.vue";
|
|
import mcsInfo from "@/views/components/mcs-info.vue";
|
|
|
|
+import printTable from "@/views/components/printTable.vue";
|
|
import moment from "moment";
|
|
import moment from "moment";
|
|
export default {
|
|
export default {
|
|
name: "printView",
|
|
name: "printView",
|
|
components: {
|
|
components: {
|
|
VueQr,
|
|
VueQr,
|
|
vueBarcode,
|
|
vueBarcode,
|
|
- mcsInfo
|
|
|
|
|
|
+ mcsInfo,
|
|
|
|
+ printTable
|
|
},
|
|
},
|
|
props: {
|
|
props: {
|
|
orderData: {
|
|
orderData: {
|
|
@@ -161,6 +165,62 @@ export default {
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ tableHeader: [
|
|
|
|
+ {
|
|
|
|
+ label: "序号",
|
|
|
|
+ value: "tol",
|
|
|
|
+ minWidth: "40"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "耗材名称",
|
|
|
|
+ value: "prodName"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "注册证号",
|
|
|
|
+ value: "regcertno"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "规格",
|
|
|
|
+ value: "spec"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "型号",
|
|
|
|
+ value: "mol",
|
|
|
|
+ minWidth: "70"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "生产企业",
|
|
|
|
+ value: "prodEntp"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "包装",
|
|
|
|
+ value: "apply"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "需求数量",
|
|
|
|
+ value: "purcCnt"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "出库数量",
|
|
|
|
+ value: "delvCnt"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "单价",
|
|
|
|
+ value: "purcPric"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "金额",
|
|
|
|
+ value: "delvAmt"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "批号",
|
|
|
|
+ value: "lotNum"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: "效期",
|
|
|
|
+ value: "prodExpy"
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
form: {},
|
|
form: {},
|
|
tableData: [],
|
|
tableData: [],
|
|
text: "111111哈哈哈哈哈哈",
|
|
text: "111111哈哈哈哈哈哈",
|
|
@@ -173,10 +233,39 @@ export default {
|
|
mounted() {
|
|
mounted() {
|
|
let { form, data } = this.$route.query;
|
|
let { form, data } = this.$route.query;
|
|
let listForm = JSON.parse(form);
|
|
let listForm = JSON.parse(form);
|
|
- console.log(listForm.quit, "哈哈哈");
|
|
|
|
- this.tableData = this.orderData;
|
|
|
|
|
|
+ // let newHeader = [...this.tableHeader];
|
|
|
|
+ // if (!form.delvOrdId) {
|
|
|
|
+ // newHeader.pop();
|
|
|
|
+ // this.tableHeader = newHeader;
|
|
|
|
+ // }
|
|
|
|
+ let newData = this.paginData(this.orderData, 5);
|
|
|
|
+ this.tableData = newData;
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ //验收金额
|
|
|
|
+ aceptMount(item) {
|
|
|
|
+ let acNub = 0;
|
|
|
|
+ item.forEach(item => {
|
|
|
|
+ acNub += item.delvAmt;
|
|
|
|
+ });
|
|
|
|
+ return parseFloat(acNub).toFixed(4);
|
|
|
|
+ },
|
|
|
|
+ allMount() {
|
|
|
|
+ let acNub = 0;
|
|
|
|
+ this.orderData.forEach(item => {
|
|
|
|
+ acNub += item.delvAmt;
|
|
|
|
+ });
|
|
|
|
+ return parseFloat(acNub).toFixed(4);
|
|
|
|
+ },
|
|
|
|
+ //分页数据打印
|
|
|
|
+ paginData(arr, num) {
|
|
|
|
+ let newArr = [];
|
|
|
|
+ for (let i = 0; i < arr.length; ) {
|
|
|
|
+ //注意:这里与for循环不太一样的是,没有i++
|
|
|
|
+ newArr.push(arr.slice(i, (i += num)));
|
|
|
|
+ }
|
|
|
|
+ return newArr;
|
|
|
|
+ },
|
|
//获取当前时间
|
|
//获取当前时间
|
|
getTime() {
|
|
getTime() {
|
|
return moment().format("YYYY-MM-DD HH:mm:ss");
|
|
return moment().format("YYYY-MM-DD HH:mm:ss");
|
|
@@ -193,6 +282,21 @@ export default {
|
|
.wrap-print {
|
|
.wrap-print {
|
|
padding: 5px;
|
|
padding: 5px;
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ .printTable {
|
|
|
|
+ width: 100%;
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ border-spacing: 0px;
|
|
|
|
+ tr {
|
|
|
|
+ td {
|
|
|
|
+ padding: 5px;
|
|
|
|
+ border: 1px solid black;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+ th {
|
|
|
|
+ padding: 3px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
.title-print {
|
|
.title-print {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 30px;
|
|
height: 30px;
|
|
@@ -205,7 +309,7 @@ export default {
|
|
}
|
|
}
|
|
.print-hed {
|
|
.print-hed {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100px;
|
|
|
|
|
|
+ height: 70px;
|
|
font-size: 30px;
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -222,7 +326,7 @@ export default {
|
|
}
|
|
}
|
|
.header-print {
|
|
.header-print {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100px;
|
|
|
|
|
|
+ height: 65px;
|
|
padding: 2px 0px;
|
|
padding: 2px 0px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
@@ -239,8 +343,8 @@ export default {
|
|
}
|
|
}
|
|
.autograph {
|
|
.autograph {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 30px;
|
|
|
|
- margin-top: 30px;
|
|
|
|
|
|
+ height: 15px;
|
|
|
|
+ margin-top: 10px;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
@@ -250,8 +354,8 @@ export default {
|
|
}
|
|
}
|
|
.remarks {
|
|
.remarks {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 30px;
|
|
|
|
- margin-top: 30px;
|
|
|
|
|
|
+ height: 15px;
|
|
|
|
+ margin-top: 10px;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-weight: bold;
|