master
parent
c459aa8566
commit
e5c026331c
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,394 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal width="1000px" :closable="false" :visible="visible" @cancel="visible = false">
|
||||
<template slot="title">
|
||||
</template>
|
||||
<div class="main" >
|
||||
<div class="main-title" >
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div class="line" ></div>
|
||||
<div>邮件发送</div>
|
||||
</div>
|
||||
<a-icon @click="visible=false" type="close" style="font-size: 20px;color: black;cursor: pointer;" />
|
||||
</div>
|
||||
<a-spin :spinning="load">
|
||||
<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
|
||||
<a-form-model-item prop="name">
|
||||
<div class="label">收件人</div>
|
||||
<a-select
|
||||
:filter-option="filterOption"
|
||||
show-search
|
||||
v-model="form.sendTo"
|
||||
mode="tags"
|
||||
style="width: 100%">
|
||||
<a-select-option v-for="item in contactsList" :key="item.id" :value="item.email">
|
||||
{{ item.name }}
|
||||
<span v-if="item.email">(</span>
|
||||
{{ item.email }}
|
||||
<span v-if="item.email">)</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="name">
|
||||
<div class="label">抄送</div>
|
||||
<a-spin :spinning="poepleLoad">
|
||||
<a-select
|
||||
v-model="form.ccTo"
|
||||
:filter-option="filterOption"
|
||||
show-search
|
||||
|
||||
mode="tags"
|
||||
style="width: 100%">
|
||||
<a-select-option v-for="item in peopleList" :key="item.id" :value="item.email">
|
||||
{{ item.name }}
|
||||
<span v-if="item.email">(</span>
|
||||
{{ item.email }}
|
||||
<span v-if="item.email">)</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-spin>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="name">
|
||||
<div class="label">主题</div>
|
||||
<a-input style="background: rgba(255,255,255,0);" v-model="form.title"></a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item>
|
||||
<div style="display: flex;height: 28px;align-items: center;" >
|
||||
<a-upload
|
||||
:customRequest="customRequest"
|
||||
:showUploadList="false"
|
||||
:multiple="true"
|
||||
name="file">
|
||||
<a-spin :spinning="downloading">
|
||||
<div style="cursor: pointer;" >
|
||||
<a-icon type="paper-clip" style="font-size: 20px;color:rgb(41,150,150);" />
|
||||
<span style="font-size: 13px;font-weight: 400;color: rgb(41, 150, 150);margin-left: 10px;">添加附件</span>
|
||||
</div>
|
||||
</a-spin>
|
||||
</a-upload>
|
||||
<div style="display: flex;flex-wrap: wrap;margin-left: 20px;">
|
||||
<div v-for="(item, index) in fileList" class="fileList" :key="index">
|
||||
<span @click="handleDownFile(item)" style="cursor: pointer;" >{{ item.name }}</span>
|
||||
<a-icon style="color: red;font-size: 12px;margin-left: 10px;" @click.stop="handleDetleFile(index)" type="close" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</a-form-model-item>
|
||||
<a-form-model-item prop="name">
|
||||
<a-textarea v-model="form.body" :auto-size="{ minRows: 12, maxRows: 20 }"></a-textarea>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<a-row>
|
||||
|
||||
</a-row>
|
||||
</a-spin>
|
||||
</div>
|
||||
<template slot="footer">
|
||||
<a-button type="danger" @click="visible = false">取消</a-button>
|
||||
<a-button type="primary" @click="handleSend">发送</a-button>
|
||||
</template>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { DjyCustomerdetail, GetSysUserPage, PrintTuoshu, GetFileByName, SendTuoshu } from '@/api/modular/main/BookingLedger'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { UploadTempFile } from '@/api/modular/system/fileManage'
|
||||
export default {
|
||||
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
labelCol: { span: 2 },
|
||||
wrapperCol: { span: 22 },
|
||||
visible: false,
|
||||
details: {},
|
||||
contactsList: [],
|
||||
peopleList: [],
|
||||
fileList: [],
|
||||
downloading: false,
|
||||
load: false,
|
||||
form: {
|
||||
sendTo: [],
|
||||
ccTo: []
|
||||
},
|
||||
poepleLoad: false,
|
||||
rules: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'bookingInitData'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
init(form) {
|
||||
this.fileList = []
|
||||
this.form = {
|
||||
sendTo: [],
|
||||
ccTo: []
|
||||
}
|
||||
const data = {
|
||||
CodeName: form.forwarderid,
|
||||
ShortName: form.forwarder
|
||||
}
|
||||
this.details = form
|
||||
DjyCustomerdetail(data).then(res => {
|
||||
if (res.success) {
|
||||
const parm = res.data.paramValueList ? res.data.paramValueList : []
|
||||
const arr = []
|
||||
parm.forEach(item => {
|
||||
if (item.paraCode === 'BookingRoute') {
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
if (arr.length === 0) {
|
||||
this.$emit('noOpen')
|
||||
} else {
|
||||
if (arr[0].itemCode === 'EMAIL') {
|
||||
this.getPeople(res.data)
|
||||
} else {
|
||||
this.$emit('noOpen')
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.message)
|
||||
this.$emit('noOpen')
|
||||
}
|
||||
})
|
||||
PrintTuoshu({ bookingId: form.id }).then(res => {
|
||||
this.fileList.push({
|
||||
name: res.data,
|
||||
path: res.data,
|
||||
type: 'print'
|
||||
})
|
||||
})
|
||||
},
|
||||
handleDownFile(row) {
|
||||
if (row.type === 'print') {
|
||||
window.open(` ${process.env.VUE_APP_API_BASE_URL}/BookingOrder/ViewPrintPdf/${row.path}`, '_blank')
|
||||
} else {
|
||||
const data = {
|
||||
fn: row.path,
|
||||
isTemp: true
|
||||
}
|
||||
GetFileByName(data).then(res => {
|
||||
var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
|
||||
var contentDisposition = res.headers['content-disposition']
|
||||
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
|
||||
var result = patt.exec(contentDisposition)
|
||||
var filename = result[1]
|
||||
var downloadElement = document.createElement('a')
|
||||
var href = window.URL.createObjectURL(blob) // 创建下载的链接
|
||||
var reg = /^["](.*)["]$/g
|
||||
downloadElement.style.display = 'none'
|
||||
downloadElement.href = href
|
||||
downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
|
||||
document.body.appendChild(downloadElement)
|
||||
downloadElement.click() // 点击下载
|
||||
document.body.removeChild(downloadElement) // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(href)
|
||||
})
|
||||
}
|
||||
},
|
||||
handleDetleFile(index) {
|
||||
this.fileList.splice(index, 1)
|
||||
},
|
||||
handleSend() {
|
||||
const data = {
|
||||
body: this.form.body,
|
||||
title: this.form.title,
|
||||
bookingId: this.details.id
|
||||
}
|
||||
if (this.form.sendTo) {
|
||||
data.sendTo = this.form.sendTo.join(';')
|
||||
}
|
||||
if (this.form.ccTo) {
|
||||
data.ccTo = this.form.ccTo.join(';')
|
||||
}
|
||||
const arr = []
|
||||
this.fileList.forEach(item => {
|
||||
arr.push(item.path)
|
||||
})
|
||||
data.fileList = arr
|
||||
console.log(data)
|
||||
this.load = true
|
||||
SendTuoshu(data).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success('发送成功')
|
||||
this.visible = false
|
||||
} else {
|
||||
this.$message.error(res.message)
|
||||
}
|
||||
this.load = false
|
||||
})
|
||||
},
|
||||
filterOption(input, option) {
|
||||
return (
|
||||
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
},
|
||||
handleSearchPeople(val) {
|
||||
this.poepleLoad = true
|
||||
GetSysUserPage({ name: val }).then(res => {
|
||||
const arr = []
|
||||
res.data.forEach(item => {
|
||||
if (item.email) {
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
this.peopleList = arr
|
||||
this.poepleLoad = false
|
||||
})
|
||||
},
|
||||
customRequest(data) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', data.file)
|
||||
this.downloading = true
|
||||
UploadTempFile(formData, (percent) => this.setUploadProcess(percent)).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success('上传成功')
|
||||
const data = res.data.split('\\')
|
||||
this.fileList.push({
|
||||
name: data[1],
|
||||
path: res.data
|
||||
})
|
||||
} else {
|
||||
this.$message.error('上传失败：' + res.message)
|
||||
}
|
||||
this.downloading = false
|
||||
})
|
||||
},
|
||||
getPeople(data) {
|
||||
const arr = data.contacts ? data.contacts : []
|
||||
const arr1 = []
|
||||
const arr2 = []
|
||||
arr.forEach(item => {
|
||||
if (item.carrierProp === this.details.carrierid) {
|
||||
if (item.email) {
|
||||
arr1.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
this.contactsList = arr1
|
||||
if (arr1.length > 0) {
|
||||
this.form.sendTo.push(arr1[0].email)
|
||||
}
|
||||
const peopleArr = this.bookingInitData ? this.bookingInitData.opInitList : []
|
||||
const arr3 = []
|
||||
peopleArr.forEach(item => {
|
||||
if (item.email) {
|
||||
arr3.push(item)
|
||||
}
|
||||
})
|
||||
this.peopleList = arr3
|
||||
if (this.details.opid) {
|
||||
const oparr = []
|
||||
peopleArr.forEach(item => {
|
||||
if (item.id == this.details.opid) {
|
||||
oparr.push(item)
|
||||
}
|
||||
})
|
||||
if (oparr.length > 0) {
|
||||
if (oparr[0].email) {
|
||||
arr2.push(oparr[0].email)
|
||||
}
|
||||
} else {
|
||||
GetSysUserPage({ name: this.details.op }).then(res => {
|
||||
arr2.push(res.data[0].email)
|
||||
if (res.data[0].email) {
|
||||
arr2.push(res.data[0].email)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
if (this.details.docid) {
|
||||
const oparr1 = []
|
||||
peopleArr.forEach(item => {
|
||||
if (item.id == this.details.docid) {
|
||||
oparr1.push(item)
|
||||
}
|
||||
})
|
||||
if (oparr1.length > 0) {
|
||||
if (oparr1[0].email) {
|
||||
arr2.push(oparr1[0].email)
|
||||
}
|
||||
} else {
|
||||
GetSysUserPage({ name: this.details.doc }).then(res => {
|
||||
arr2.push(res.data[0].email)
|
||||
if (res.data[0].email) {
|
||||
arr2.push(res.data[0].email)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
this.form.ccTo = arr2
|
||||
const day = this.details.etd.slice(0, 10)
|
||||
const str = this.details.erpCode + ' ' + this.details.portload + '-' + this.details.destination + ' ' + this.details.cntrtotal + ' ' + day
|
||||
this.$set(this.form, 'title', str)
|
||||
this.$set(this.form, 'body', this.details.description)
|
||||
this.visible = true
|
||||
this.$emit('cancelOpen')
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.fileList {
|
||||
background-color: rgb(237,242,242);
|
||||
color: black;
|
||||
line-height: 20px;
|
||||
padding: 3px 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.main{
|
||||
background: url('./mailBg.jpg');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 800px;
|
||||
padding: 40px 37px 0 50px;
|
||||
.main-title{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
line-height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 45px;
|
||||
justify-content: space-between;
|
||||
.line{
|
||||
background: rgba(19, 194, 194, 1);
|
||||
height: 19px;
|
||||
width: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.label{
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 13px;
|
||||
margin-bottom: 12px;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
/deep/ .ant-modal-body{
|
||||
padding: 0px !important;
|
||||
}
|
||||
/deep/ .ant-select-selection--multiple{
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
/deep/ .ant-select-selection__choice{
|
||||
background: rgb(211,240,240);
|
||||
color: rgb(41,150,150);
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue