装卸单
This commit is contained in:
parent
2ab360e93b
commit
10aeb9ff75
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-date-picker-->
|
||||
<!-- v-model="queryParams.time"-->
|
||||
<!-- type="daterange"-->
|
||||
<!-- value-format="yyyy-MM-dd"-->
|
||||
<!-- range-separator="至"-->
|
||||
<!-- start-placeholder="开始日期"-->
|
||||
<!-- end-placeholder="结束日期"-->
|
||||
<!-- style="width: 240px"-->
|
||||
<!-- ></el-date-picker>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="queryParams.time"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
style="width: 240px"
|
||||
></el-date-picker>
|
||||
</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="120" prop="sort" show-overflow-tooltip />
|
||||
<el-table-column label="日期" align="center" width="170" prop="reserveDate" 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],
|
||||
// endTime: this.queryParams.time && this.queryParams.time[1],
|
||||
startTime: this.queryParams.time && this.queryParams.time[0],
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue