1

src/components/order/deliveryNote/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div>
     <div style="max-height: calc(100vh - 114px - 60px); overflow-y: auto; overflow-x: hidden">
+      <el-form :model="supplierId">
+        <el-form-item label="收货公司">
+          <el-select v-model="supplierId" placeholder="请选择" @change="changeSupplier()">
+            <el-option v-for="(item, index) in supplierList" :key="index" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
       <div id="printMe">
         <table class="table-class" border="0" cellpadding="0" cellspacing="0">
           <tr>
@@ -9,7 +16,7 @@
           </tr>
           <tr>
             <td colspan="2">单号</td>
-            <td colspan="2"></td>
+            <td colspan="2">{{ deliveryCode }}</td>
             <td colspan="2">单据日期</td>
             <td colspan="2"></td>
             <td style="width: 60px">页次</td>
@@ -17,7 +24,7 @@
           </tr>
           <tr>
             <td colspan="2">送货公司</td>
-            <td colspan="2"></td>
+            <td colspan="2">福清市胜德体育用品有限公司</td>
             <td colspan="2">联系人</td>
             <td colspan="2"></td>
             <td style="width: 60px">电话</td>
@@ -25,21 +32,23 @@
           </tr>
           <tr>
             <td colspan="2">收货公司</td>
-            <td colspan="2"></td>
+            <td colspan="2">{{ selectSupplier.name }}</td>
             <td colspan="2">收货地址</td>
-            <td style="border-right: 0" colspan="5"></td>
+            <td style="border-right: 0; text-align: left" colspan="5">
+              {{ selectSupplier.province }},{{ selectSupplier.city }},{{ selectSupplier.detailedAddress }}
+            </td>
           </tr>
           <tr>
-            <td style="width: 40px">序号</td>
-            <td style="width: 120px">BOM品号</td>
+            <td style="width: 54px">序号</td>
+            <td style="width: 100px">BOM品号</td>
             <td style="width: 120px">SKU品号</td>
             <td style="min-width: 160px">SKU品名</td>
             <td style="width: 70px">规格</td>
             <td style="width: 60px">数量</td>
             <td style="width: 60px">单位</td>
-            <td style="width: 70px">件数/体积</td>
-            <td style="min-width: 130px" colspan="2">订单号</td>
-            <td style="border-right: 0; width: 90px">备注</td>
+            <td style="width: 90px">件数/体积</td>
+            <td style="min-width: 110px" colspan="2">订单号</td>
+            <td style="border-right: 0; width: 100px">备注</td>
           </tr>
           <tbody v-if="orderInfo.orderSkuList && orderInfo.orderSkuList.length > 0">
             <tr v-for="(item, index) in orderInfo.orderSkuList" :key="index">
@@ -56,15 +65,46 @@
             </tr>
           </tbody>
         </table>
-        <el-row :gutter="10" style="margin-top: 10px;">
-          <el-col :span="8">
-            <div>送货人:</div>
+        <el-row :gutter="10" style="margin-top: 30px">
+          <el-col :span="8" style="display: flex">
+            <div class="textOne">送货人</div>
+            <div class="textOne-right"></div>
+          </el-col>
+          <el-col :span="8" style="display: flex">
+            <div class="textTwo">送货人电话</div>
+            <div class="textTwo-right"></div>
+          </el-col>
+          <el-col :span="8" style="display: flex">
+            <div class="textThree">车牌号</div>
+            <div class="textThree-right"></div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="10" style="margin-top: 30px">
+          <el-col :span="8" style="display: flex">
+            <div class="textOne">仓管员</div>
+            <div class="textOne-right"></div>
+          </el-col>
+          <el-col :span="8" style="display: flex">
+            <div class="textTwo">核准</div>
+            <div class="textTwo-right"></div>
+          </el-col>
+          <el-col :span="8" style="display: flex">
+            <div class="textThree">时间</div>
+            <div class="textThree-right"></div>
           </el-col>
-          <el-col :span="8">
-            <div>送货人电话:</div>
+        </el-row>
+        <el-row :gutter="10" style="margin-top: 30px">
+          <el-col :span="8" style="display: flex">
+            <div class="textOne">收货人</div>
+            <div class="textOne-right"></div>
+          </el-col>
+          <el-col :span="8" style="display: flex">
+            <div class="textTwo">收货人电话</div>
+            <div class="textTwo-right"></div>
           </el-col>
-          <el-col :span="8">
-            <div>车牌号:</div>
+          <el-col :span="8" style="display: flex">
+            <div class="textThree">收货时间</div>
+            <div class="textThree-right"></div>
           </el-col>
         </el-row>
       </div>
@@ -78,16 +118,17 @@
 
 <script setup>
 const { proxy } = getCurrentInstance();
-const supplier = ref([]);
+const supplierId = ref("");
+const supplierList = ref([]);
 const props = defineProps({
   rowData: Object,
 });
 const getBomClassify = () => {
   proxy.post("/supplier/page", { pageNum: 1, pageSize: 999 }).then((res) => {
     if (res.rows && res.rows.length > 0) {
-      supplier.value = res.rows;
+      supplierList.value = res.rows;
     } else {
-      supplier.value = [];
+      supplierList.value = [];
     }
   });
 };
@@ -99,12 +140,24 @@ const clickCancel = () => {
 const orderInfo = ref({
   orderSkuList: [],
 });
+const deliveryCode = ref("");
 onMounted(() => {
   getBomClassify();
   if (props.rowData && props.rowData.id) {
     proxy.post("/orderInfo/detail", { id: props.rowData.id }).then((res) => {
       orderInfo.value = res;
     });
+    if (props.rowData.deliveryCode) {
+      deliveryCode.value = props.rowData.deliveryCode;
+    } else {
+      status.value = true;
+      proxy.post("/orderInfo/getOrderDeliveryCode", {}).then((res) => {
+        deliveryCode.value = res;
+        proxy.post("/orderInfo/saveOrderDeliveryCode", { id: props.rowData.id, deliveryCode: deliveryCode.value }).then(() => {
+          status.value = true;
+        });
+      });
+    }
   }
 });
 const printObj = ref({
@@ -113,12 +166,26 @@ const printObj = ref({
   extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
   extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
 });
+const selectSupplier = ref({});
+const changeSupplier = () => {
+  if (supplierId.value) {
+    let list = supplierList.value.filter((item) => item.id === supplierId.value);
+    if (list && list.length > 0) {
+      selectSupplier.value = list[0];
+    } else {
+      selectSupplier.value = {};
+    }
+  } else {
+    selectSupplier.value = {};
+  }
+  console.log(selectSupplier.value);
+};
 </script>
 
 <style lang="scss" scoped>
 .table-class {
   width: 100%;
-  font-size: 14px;
+  font-size: 12px;
   border: 1px solid #eeeeee;
 }
 .table-class td {
@@ -129,4 +196,37 @@ const printObj = ref({
   border-bottom: 1px solid #eeeeee;
   border-right: 1px solid #eeeeee;
 }
+.textOne {
+  width: 50px;
+  text-align: justify;
+  text-align-last: justify;
+  font-size: 12px;
+}
+.textOne-right {
+  width: calc(100% - 50px);
+  border-bottom: 1px solid #dbdbdb;
+  font-size: 12px;
+}
+.textTwo {
+  width: 80px;
+  text-align: justify;
+  text-align-last: justify;
+  font-size: 12px;
+}
+.textTwo-right {
+  width: calc(100% - 80px);
+  border-bottom: 1px solid #dbdbdb;
+  font-size: 12px;
+}
+.textThree {
+  width: 64px;
+  text-align: justify;
+  text-align-last: justify;
+  font-size: 12px;
+}
+.textThree-right {
+  width: calc(100% - 64px);
+  border-bottom: 1px solid #dbdbdb;
+  font-size: 12px;
+}
 </style>