装卸单

src/api/materialsStation/auth.js

@@ -91,3 +91,11 @@ export function uploadSort(data) {
     data: data
   })
 }
+
+export function getSort(data) {
+  return request({
+    url: '/material/back_apply_info/getSort',
+    method: 'post',
+    data: data
+  })
+}

src/views/business/handlingOrder/index.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
-<!--      <el-form-item label="申请时间">-->
+      <el-form-item label="日期">
-<!--        <el-date-picker-->
+        <el-date-picker
-<!--          v-model="queryParams.time"-->
+          v-model="queryParams.time"
-<!--          type="daterange"-->
+          type="daterange"
-<!--          value-format="yyyy-MM-dd"-->
+          value-format="yyyy-MM-dd"
-<!--          range-separator="至"-->
+          range-separator="至"
-<!--          start-placeholder="开始日期"-->
+          start-placeholder="开始日期"
-<!--          end-placeholder="结束日期"-->
+          end-placeholder="结束日期"
-<!--          style="width: 240px"-->
+          style="width: 240px"
-<!--        ></el-date-picker>-->
+        ></el-date-picker>
-<!--      </el-form-item>-->
+      </el-form-item>
       <el-form-item label="关键字" prop="keyWord">
         <el-input
           v-model="queryParams.keyWord"
@@ -32,7 +32,6 @@
       :data="tableList"
       v-loading="loading"
       ref="multipleTable"
-      @selection-change="handleSelectionChange"
       row-key="id"
     >
       <el-table-column label="序号" width="70" align="center" type="index">
@@ -45,11 +44,23 @@
       <el-table-column label="车牌号" align="center" width="170" prop="carCode" show-overflow-tooltip />
       <el-table-column label="联系人" align="center" width="170" prop="linkMan" show-overflow-tooltip />
       <el-table-column label="联系电话" align="center" width="170" prop="phone" show-overflow-tooltip />
-      <el-table-column label="保存日期" align="center" width="170" prop="reserveDate" show-overflow-tooltip />
+      <el-table-column label="日期" align="center" width="170" prop="reserveDate" show-overflow-tooltip />
-      <el-table-column label="排号" align="center"width="120" prop="sort" show-overflow-tooltip />
+      <el-table-column
+        label="排号"
+        align="center"
+        width="120"
+        show-overflow-tooltip
+      >
+        <!-- 使用作用域插槽获取行数据 -->
+        <template #default="scope">
+          {{ scope.row.timeType }}-{{ scope.row.sort }}
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" width="170">
         <template slot-scope="{ row }">
           <el-button size="mini" v-if="row.sort===null" type="success" @click="handleView(row)">排号</el-button>
+          <el-button size="mini" v-if="row.type==='装' && row.sort!==null" type="success" @click="dialogView(row)">装货单</el-button>
+          <el-button size="mini" v-if="row.type==='卸' && row.sort!==null" type="success" @click="dialogView(row)">卸货单</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -66,8 +77,18 @@
     <el-dialog title="审核排号" :visible.sync="viewDialogVisible" width="500px" append-to-body>
       <el-form :model="viewForm" label-width="60px" class="view-dialog-form">
         <el-form-item label="排号：">
-          <!-- 限制只能输入数字，并禁止输入其他字符 -->
+         <span
+           style="display: inline-block;
+         margin-right: 5px;
+         color: #666;
+         vertical-align: middle;
+         font-size: 16px;
+         font-weight: bold;"
+         >
+  {{ timeType }}-
+</span>
           <el-input
+            style="display: inline-block; width: auto; vertical-align: middle;"
             v-model.number="viewForm.sort"
             @input="handleSortInput"
             placeholder="请输入数字"
@@ -88,6 +109,120 @@
       </div>
     </el-dialog>
 
+    <el-dialog
+      title="卸货单预览"
+      :visible.sync="previewDialogVisible"
+      width="50%"
+      top="5vh">
+      <div class="preview-container">
+        <!-- 图片预览 -->
+        <img
+          v-if="currentPreviewImage"
+          :src="currentPreviewImage"
+          alt="卸货单"
+          style="max-width: 100%; border: 1px solid #eee;">
+
+        <!-- 卸货单内容 - 添加print-content类 -->
+        <div
+          id="unloading-ticket"
+          class="unloading-ticket print-content"
+          v-else>
+          <h2 style="text-align: center;">卸车排位号</h2>
+          <table class="ticket-table" style="margin: 0 auto;">
+            <tr>
+              <td width="100" style="text-align: center;">号类</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ currentTicketData.timeType }}-{{ currentTicketData.sort }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">工程名称</td>
+              <td style="text-align: center;">{{ currentTicketData.proName }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">车牌号码</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ currentTicketData.carCode }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">联系人</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ currentTicketData.linkMan }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">联系电话</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ currentTicketData.phone }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">日期</td>
+              <td style="text-align: center;">{{ currentTicketData.reserveDate }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">签字</td>
+              <td style="height: 50px; text-align: center;"></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="previewDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="printTicket">打印</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      title="装货单预览"
+      :visible.sync="loadingDialogVisible"
+      width="50%"
+      top="5vh">
+      <div class="preview-container">
+        <!-- 图片预览 -->
+        <img
+          v-if="currentPreviewImage"
+          :src="currentPreviewImage"
+          alt="装货单"
+          style="max-width: 100%; border: 1px solid #eee;">
+
+        <!-- 卸货单内容 - 添加print-content类 -->
+        <div
+          id="loading-ticket"
+          class="loading-ticket loading-print-content"
+          v-else>
+          <h2 style="text-align: center;">装货排位号</h2>
+          <table class="loading-ticket-table" style="margin: 0 auto;">
+            <tr>
+              <td width="100" style="text-align: center;">号类</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ loadingTicketData.timeType }}-{{ loadingTicketData.sort }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">工程名称</td>
+              <td style="text-align: center;">{{ loadingTicketData.proName }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">车牌号码</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ loadingTicketData.carCode }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">联系人</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ loadingTicketData.linkMan }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">联系号码</td>
+              <td style="font-weight: bold; font-size: 25px; text-align: center;">{{ loadingTicketData.phone }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">日期</td>
+              <td style="text-align: center;">{{ loadingTicketData.reserveDate }}</td>
+            </tr>
+            <tr>
+              <td style="text-align: center;">签字</td>
+              <td style="height: 50px; text-align: center;"></td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="loadingDialogVisible = false">关闭</el-button>
+        <el-button type="primary" @click="loadingPrintTicket">打印</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -99,12 +234,13 @@ import {
   getTeamList,
   sumbitAuthData,
   uploadIdCard,
-  getAuthInfo, getHandlingOrderList, uploadSort
+  getAuthInfo, getHandlingOrderList, uploadSort, getSort
 } from '@/api/materialsStation/auth'
 import { getToken } from '@/utils/auth'
 import { validateIdCard } from '@/utils/bonus'
 import vueEasyPrint from 'vue-easy-print'
 import {acceptInnerVerifyer} from "@/api/purchase/goodsAccept";
+import printJS from "print-js";
 export default {
   components: { vueEasyPrint },
   name: 'IdCardUploadComponent',
@@ -167,7 +303,33 @@ export default {
         detailsList: [],
         userName: '',
         createTime: ''
-      }
+      },
+
+      previewDialogVisible: false,
+      currentPreviewImage: null,
+      currentTicketData: {
+        timeType:'',
+        type: '',
+        proName: '',
+        carCode: '',
+        linkMan: '',
+        phone: '',
+        reserveDate: '',
+        sort:''
+      },
+      loadingDialogVisible: false,
+      loadingTicketData: {
+        timeType:'',
+        type: '',
+        proName: '',
+        carCode: '',
+        linkMan: '',
+        phone: '',
+        reserveDate: '',
+        sort:''
+      },
+      timeType:'',
+      sort:''
     }
   },
   created() {
@@ -198,8 +360,8 @@ export default {
       this.loading = true
       const params = {
         keyWord: this.queryParams.keyWord,
-        // startTime: this.queryParams.time && this.queryParams.time[0],
+        startTime: this.queryParams.time && this.queryParams.time[0],
-        // endTime: this.queryParams.time && this.queryParams.time[1],
+        endTime: this.queryParams.time && this.queryParams.time[1],
         pageSize: this.queryParams.pageSize,
         pageNum: this.queryParams.pageNum
       }
@@ -219,7 +381,8 @@ export default {
     confirmAction() {
       const param = {
         id: this.viewForm.id,
-        sort: this.viewForm.sort
+        sort: this.viewForm.sort,
+        timeType: this.timeType
       }
       uploadSort(param).then(response => {
         if (response.code === 200) {
@@ -250,6 +413,17 @@ export default {
       this.viewDialogVisible = true
       this.viewForm.sort = row.sort // 可选：将原排号显示在输入框中
       this.viewForm.id = row.id // 保存当前行的 id
+
+      const params = {
+        type:''
+      }
+      getSort(params).then(response => {
+        console.log(response.data)
+        this.timeType=response.data.timeType,
+        this.viewForm.sort=response.data.sort
+      })
+
+
     },
     // 转换时间格式
     formatTime(time) {
@@ -259,10 +433,230 @@ export default {
       const day = date.getDate()
       return `${year} 年 ${month} 月 ${day} 日`
     },
+    dialogView(row) {
+      if (row.type === '卸' && row.sort !== null) {
+        this.showUnloadingTicket(row);
+      } else if (row.type === '装' && row.sort !== null) {
+        this.showLoadingTicket(row);
+      }
+    },
+// 显示卸货单
+    showUnloadingTicket(row) {
+      this.currentTicketData = {
+        timeType:row.timeType,
+        sort: row.sort,
+        proName: row.proName,
+        carCode: row.carCode,
+        linkMan: row.linkMan,
+        phone: row.phone,
+        reserveDate: row.reserveDate
+      };
+      this.currentPreviewImage = null; // 确保不使用图片预览
+      this.previewDialogVisible = true;
+    },
+    printTicket() {
+      // 创建一个打印专用的样式
+      const printStyle = `
+    .unloading-ticket {
+      width: 100%;
+      max-width: 500px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .ticket-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .ticket-table td {
+      padding: 10px;
+      border: 1px solid #ddd;
+    }
+    .ticket-table td:first-child {
+      font-weight: bold;
+      background-color: #f5f5f5;
+    }
+    h2 {
+      text-align: center;
+    }
+  `;
+
+      printJS({
+        printable: 'unloading-ticket',
+        type: 'html',
+        targetStyles: ['*'],
+        scanStyles: false,
+        style: printStyle,
+        onPrintDialogClose: () => {
+          // 打印对话框关闭后的回调
+        }
+      });
+    },
+    // 显示装货单
+    showLoadingTicket(row) {
+      this.loadingTicketData = {
+        timeType:row.timeType,
+        sort: row.sort,
+        proName: row.proName,
+        carCode: row.carCode,
+        linkMan: row.linkMan,
+        phone: row.phone,
+        reserveDate: row.reserveDate
+      };
+      this.currentPreviewImage = null; // 确保不使用图片预览
+      this.loadingDialogVisible = true;
+    },
+    loadingPrintTicket() {
+      // 创建一个打印专用的样式
+      const printStyle = `
+    .loading-ticket {
+      width: 100%;
+      max-width: 500px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .loading-ticket-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    .loading-ticket-table td {
+      padding: 10px;
+      border: 1px solid #ddd;
+    }
+    .loading-ticket-table td:first-child {
+      font-weight: bold;
+      background-color: #f5f5f5;
+    }
+    h2 {
+      text-align: center;
+    }
+  `;
+
+      printJS({
+        printable: 'loading-ticket',
+        type: 'html',
+        targetStyles: ['*'],
+        scanStyles: false,
+        style: printStyle,
+        onPrintDialogClose: () => {
+          // 打印对话框关闭后的回调
+        }
+      });
+    },
   }
 }
 </script>
 <style lang="scss" scoped>
+
+/* 统一显示和打印的样式 */
+.unloading-ticket {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  background-color: #fff;
+
+  h2 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+}
+
+.ticket-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    padding: 10px;
+    border: 1px solid #ddd;
+    text-align: left;
+
+    &:first-child {
+      font-weight: bold;
+      background-color: #f5f5f5;
+      width: 100px;
+    }
+  }
+}
+
+/* 打印专用样式 */
+@media print {
+  body * {
+    visibility: hidden;
+  }
+
+  .unloading-ticket,
+  .unloading-ticket * {
+    visibility: visible;
+  }
+
+  .unloading-ticket {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: auto;
+    max-width: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+
+.loading-ticket {
+  width: 100%;
+  max-width: 500px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  background-color: #fff;
+
+  h2 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+}
+.loading-ticket-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  td {
+    padding: 10px;
+    border: 1px solid #ddd;
+    text-align: left;
+
+    &:first-child {
+      font-weight: bold;
+      background-color: #f5f5f5;
+      width: 100px;
+    }
+  }
+}
+/* 打印专用样式 */
+@media print {
+  body * {
+    visibility: hidden;
+  }
+
+  .loading-ticket,
+  .loading-ticket * {
+    visibility: visible;
+  }
+
+  .loading-ticket {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: auto;
+    max-width: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+
+
 /* 批量授权标签容器 */
 .selected-items-container {
   max-height: 150px;