You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

344 lines
8.2 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="printwrap">
<Modal v-model="isShow" width="70" title="出库">
<div id="printmodal" class="print" :class="{'watermark':!showwatermark}">
<div class="printtitle">苏州市河道管理处物资出库记录单</div>
<div class="printtop">
<span>业务科室:{{ form.jieyongbumen }}</span>
<span>编号:{{ form.chukushijian }}-{{ form.id }}</span>
</div>
<table width="100%">
<tr>
<td>出库日期</td>
<td>物资名称</td>
<td>批次</td>
<td>数量</td>
<td>规格</td>
<td>型号</td>
</tr>
<tr v-for="item in mingxiList">
<td>{{ form.chukushijian }}</td>
<td>{{ item.zichanmingcheng }}</td>
<td>{{ item.rukupici }}</td>
<td>{{ item.jieyongshuliang }}</td>
<td>{{ item.wuziguige }}</td>
<td>{{ item.guigexinghao }}</td>
</tr>
<tr>
<td colspan="6">
<p>备注</p>
<p>{{form.beizhu}}</p>
</td>
</tr>
<tr class="printbottom">
<td colspan="3" rowspan="3">
<p>业务科室签字区</p>
<p>
<span>年</span>
<span>月</span>
<span>日</span>
</p>
</td>
<td colspan="3" rowspan="3">
<p>仓库管理员签字区</p>
<p><span>年</span>
<span>月</span>
<span>日</span>
</p>
</td>
</tr>
</table>
</div>
<!-- 提交记录单 -->
<div>
<div>出库记录单:</div>
<el-upload
ref="upload"
class="upload-demo"
:action="action"
multiple
:headers="headers"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:on-remove="onRemove"
:file-list="fileList"
:auto-upload="true"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</div>
<!-- <div v-if="chukuType==='处置'" id="printmodal1" class="print">
<div class="printtitle">苏州市河道管理处报废申请单</div>
<div class="printtop">
<span>上报科室:{{ form.jieyongbumen }}</span>
<span>上报时间:{{ form.chukushijian }}</span>
</div>
<table width="100%">
<tr>
<td>物资名称</td>
<td>数量</td>
<td>报废原因</td>
<td>备注</td>
</tr>
<tr v-for="item in mingxiList">
<td>{{ item.zichanmingcheng }}</td>
<td>{{ item.jieyongshuliang }}</td>
<td>{{ form.baofeiyuanyin }}</td>
<td>{{ form.beizhu }}</td>
</tr>
<tr class="printbottom">
<td colspan="3" rowspan="3">
<p>申请科室</p>
<p>
<span>年</span>
<span>月</span>
<span>日</span>
</p>
</td>
<td colspan="2" rowspan="2">
<p>申请科室分管领导</p>
<p><span>年</span>
<span>月</span>
<span>日</span>
</p>
</td>
</tr>
</table>
</div> -->
<template v-slot:footer>
<Button type="info" style="margin-left:5px;margin-bottom:5px;" @click="isShow=false">取消</Button>
<Button v-print="'#printmodal'" type="primary" style="margin-left:5px;margin-bottom:5px;">打印</Button>
<Button type="primary" style="margin-left:5px;margin-bottom:5px;" @click="submit"></Button>
</template>
</Modal>
</div>
</template>
<script>
import {
show,
save,
} from '@/api/system/baseForm.js'
import {
saveOutbounds
} from '@/api/outbounds.js'
import {
Message
} from 'element-ui'
import {
desChuku
} from '@/api/system/log.js'
import {
getToken
} from '@/utils/auth'
export default {
data() {
return {
isShow: false,
type: 'print',
id: '',
chukuType: '',
tableName: 'outbounds',
showwatermark: true,
form: {
chukushijian: '',
chukuleixing: '',
jieyongcangku: '',
jieyongbumen: '',
jieyongren: '',
jilurenyuan: '',
beizhu: '',
chukumingxi: ''
},
mingxiList: [],
fileList: [],
action: process.env.VUE_APP_UPLOAD_API,
headers: {
token: ''
},
}
},
watch: {
isShow(newVal) {
if (newVal) {
if (this.type === 'print') {
this.getDetail()
}
} else {
this.id = ''
this.type = 'print'
this.showwatermark = true
this.form = {}
this.fileList = []
this.mingxiList = []
}
}
},
created() {
this.headers.token = getToken()
},
methods: {
beforeUpload(file) {
// if (file.size / 1000 > 500) {
// this.$message({
// type: "warning",
// message: "上传文件大小超过500kb",
// });
// return false;
// }
},
onSuccess(response, file, fileList) {
console.log('fileList', fileList)
this.fileList = fileList
const arr = []
for (var k of this.fileList) {
arr.push(k?.response?.id)
}
this.form.qianzi = arr
},
onRemove(file, fileList) {
this.fileList = fileList
const arr = []
for (var k of this.fileList) {
arr.push(k?.response?.id)
}
this.form.qianzi = arr
},
onError(err, file, fileList) {
this.fileList = fileList
this.$message({
type: 'warning',
message: err
})
},
async getDetail() {
const res = await show({
id: this.id,
table_name: this.tableName
})
this.form = res
if (res.zhuangtai == '已办结') {
this.showwatermark = true
} else {
this.showwatermark = false
}
this.mingxiList = res.id_outbounds_items_outbounds_id_relation
},
handlePrint() {
if (this.chukuType == '领用') {
this.$Print('#printmodal')
} else if (this.chukuType == '处置') {
this.$Print('#printmodal1')
}
},
submit() {
if(!this.form.qianzi || (this.form.qianzi && this.form.qianzi.length<1)){
Message({
type: 'warning',
message: ''
})
return
}
this.form.zhuangtai = 3
saveOutbounds({
table_name: this.tableName,
...this.form
}).then(res => {
Message({
type: 'success',
message: '出库成功'
})
desChuku({
outbound_id: this.id
}).then(res => {
})
this.isShow = false
this.$emit('refresh')
})
}
}
}
</script>
<style scoped>
@media print {
@page {
size: auto;
}
body, html,div{
height: auto!important;
}
}
.print {}
.printtitle {
text-align: center;
font-size: 24px;
font-weight: bold;
}
.printtop {
display: flex;
justify-content: space-between;
font-size: 18px
}
.print table {
font-size: 18px;
border-collapse: collapse;
margin-top: 20px;
}
.print table tr {}
.print table td {
padding: 10px;
border: 1px solid #ddd;
}
.printbottom {}
.printbottom td {}
.printbottom td p {
text-align: left;
}
.printbottom td>p:first-child+p {
padding-top: 80px;
text-align: right;
}
.printbottom td p span{
margin-left:30px;
display: inline-block;
}
/* 在你的CSS文件中添加以下样式 */
.watermark {
position: relative;
}
.watermark::after {
content: "审批未完成";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(33deg);
color: red;
font-size: 3em;
z-index: 1;
pointer-events: none;
}
</style>