我的任务模块
parent
1ad1e983fd
commit
0662331260
@ -0,0 +1,748 @@
|
|||||||
|
<template>
|
||||||
|
<div class="task-detail">
|
||||||
|
<div class="nav-btn">
|
||||||
|
<a-button type="primary">完成任务</a-button>
|
||||||
|
<a-button type="primary">保存</a-button>
|
||||||
|
<a-button type="primary">发送SI</a-button>
|
||||||
|
<a-button type="primary">提单确认</a-button>
|
||||||
|
<a-button type="primary">取消完成任务</a-button>
|
||||||
|
<a-button type="primary">关闭</a-button>
|
||||||
|
</div>
|
||||||
|
<x-card>
|
||||||
|
<div slot="content" style="padding-top:0;" class="mail-info">
|
||||||
|
<div class="task-basic-box">
|
||||||
|
<div class="label">
|
||||||
|
<div class="title">提单号</div>
|
||||||
|
<div class="msg">123456</div>
|
||||||
|
</div>
|
||||||
|
<div class="label">
|
||||||
|
<div class="title">开船日期</div>
|
||||||
|
<div class="msg">123456</div>
|
||||||
|
</div>
|
||||||
|
<div class="label">
|
||||||
|
<div class="title">船名/航次</div>
|
||||||
|
<div class="msg">123456</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-card>
|
||||||
|
<div class="mailing-info">
|
||||||
|
<x-card>
|
||||||
|
<div slot="content" style="margin-top: -5px;" class="mail-info">
|
||||||
|
<a-form-model :selfUpdate="true" ref="mailingFrom" :model="taskDetail">
|
||||||
|
<a-row :gutter="10">
|
||||||
|
<a-col :xs="24" :sm="24" :md="24" :lg="10" :xl="12">
|
||||||
|
<a-form-model-item has-feedback prop="shipper" class="sender-label">
|
||||||
|
<div class="sender">
|
||||||
|
<div class="top"><div class="name"><span class="iconfont icon-bianji"></span>发货人</div></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<a-textarea
|
||||||
|
id="shipper-scroll"
|
||||||
|
:defaultValue="taskDetail.shipper"
|
||||||
|
v-model="showShipper"
|
||||||
|
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||||
|
style="height: 120px"
|
||||||
|
@blur="textareaChange($event, 'shipper')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="line-count"
|
||||||
|
id="shipper-scroll-right"
|
||||||
|
v-if="Object.keys(taskDetail).length > 1 && taskDetail.shipper.length > 1"
|
||||||
|
>
|
||||||
|
<div v-for="(num, index) in taskDetail.shipper.split('\n')" :key="index">{{ num.length }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-model-item>
|
||||||
|
<a-form-model-item has-feedback prop="consignee" class="sender-label">
|
||||||
|
<div class="consignee">
|
||||||
|
<div class="top"><div class="name"><span class="iconfont icon-bianji"></span>收货人</div></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<a-textarea
|
||||||
|
id="consignee-scroll"
|
||||||
|
:defaultValue="taskDetail.consignee"
|
||||||
|
v-model="showConsignee"
|
||||||
|
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||||
|
style="height: 120px"
|
||||||
|
@blur="textareaChange($event, 'consignee')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="line-count"
|
||||||
|
id="consignee-scroll-right"
|
||||||
|
v-if="Object.keys(taskDetail).length > 1 && taskDetail.consignee.length > 1"
|
||||||
|
>
|
||||||
|
<div v-for="(num, index) in taskDetail.consignee.split('\n')" :key="index">{{ num.length }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-model-item>
|
||||||
|
<a-form-model-item has-feedback prop="notifyparty" class="sender-label">
|
||||||
|
<div class="notifier">
|
||||||
|
<div class="top"><div class="name"><span class="iconfont icon-bianji"></span>通知人</div></div>
|
||||||
|
<div class="bottom">
|
||||||
|
<a-textarea
|
||||||
|
id="notifyparty-scroll"
|
||||||
|
:defaultValue="taskDetail.notifyparty"
|
||||||
|
:auto-size="{ minRows: 2, maxRows: 5 }"
|
||||||
|
style="height: 120px"
|
||||||
|
v-model="showNotifier"
|
||||||
|
@blur="textareaChange($event, 'notifyparty')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="line-count"
|
||||||
|
id="notifyparty-scroll-right"
|
||||||
|
v-if="Object.keys(taskDetail).length > 1 && taskDetail.notifyparty.length > 1"
|
||||||
|
>
|
||||||
|
<div v-for="(num, index) in taskDetail.notifyparty.split('\n')" :key="index">{{ num.length }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col class="right-content" :xs="24" :sm="24" :md="24" :lg="14" :xl="12">
|
||||||
|
<a-row :gutter="16">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="装货港代码"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="portloadid"
|
||||||
|
>
|
||||||
|
<auto-complete
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="taskDetail.portloadid"
|
||||||
|
class="customer-input"
|
||||||
|
:data-source="portloadDataArr"
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
:dropdown-style="{ width: '300px' }"
|
||||||
|
@select="portloadSelect"
|
||||||
|
@change="portloadChange"
|
||||||
|
@focus="portloadChange"
|
||||||
|
></auto-complete>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="装货港"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="portload"
|
||||||
|
>
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.portload" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="中转港代码"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="transportid"
|
||||||
|
>
|
||||||
|
<auto-complete
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="taskDetail.transportid"
|
||||||
|
class="customer-input"
|
||||||
|
:data-source="transportDataArr"
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
:dropdown-style="{ width: '300px' }"
|
||||||
|
@select="transportSelect"
|
||||||
|
@change="transportChange"
|
||||||
|
@focus="transportChange"
|
||||||
|
/>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="中转港"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="transport"
|
||||||
|
>
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.transport" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="卸货港代码"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="portdischargeid"
|
||||||
|
>
|
||||||
|
<auto-complete
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="taskDetail.portdischargeid"
|
||||||
|
class="customer-input"
|
||||||
|
:data-source="portdischargeDataArr"
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
:dropdown-style="{ width: '300px' }"
|
||||||
|
@select="portdischargeSelect"
|
||||||
|
@change="portdischargeChange"
|
||||||
|
@focus="portdischargeChange"
|
||||||
|
/>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="卸货港"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="portdischarge"
|
||||||
|
>
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.portdischarge" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="目的代码"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="destinationid"
|
||||||
|
>
|
||||||
|
<auto-complete
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="taskDetail.destinationid"
|
||||||
|
class="customer-input"
|
||||||
|
:data-source="destinationDataArr"
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
:dropdown-style="{ width: '300px' }"
|
||||||
|
@select="destinationSelect"
|
||||||
|
@change="destinationChange"
|
||||||
|
@focus="destinationChange"
|
||||||
|
/>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="目的地"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="destination"
|
||||||
|
>
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.destination" />
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="件数"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="pkgs"
|
||||||
|
>
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.pkgs" type="number"/>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="包装"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="kindpkgs"
|
||||||
|
>
|
||||||
|
<auto-complete
|
||||||
|
:allowClear="true"
|
||||||
|
v-model="taskDetail.kindpkgs"
|
||||||
|
class="customer-input"
|
||||||
|
:data-source="kindpkgsDataArr"
|
||||||
|
:dropdown-match-select-width="false"
|
||||||
|
:dropdown-style="{ width: '200px' }"
|
||||||
|
@select="kindpkgsSelect"
|
||||||
|
@change="kindpkgsChange"
|
||||||
|
@focus="kindpkgsChange"
|
||||||
|
/>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="毛重"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="kgs"
|
||||||
|
>
|
||||||
|
<div class="line-box">
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.kgs" /><span class="unit">KGS</span>
|
||||||
|
</div>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-model-item
|
||||||
|
class="from-label"
|
||||||
|
label="尺寸"
|
||||||
|
:labelCol="labelCol"
|
||||||
|
:wrapperCol="wrapperCol"
|
||||||
|
has-feedback
|
||||||
|
prop="cbm"
|
||||||
|
>
|
||||||
|
<div class="line-box">
|
||||||
|
<a-input :allowClear="true" v-model="taskDetail.cbm" /><span class="unit">CBM</span>
|
||||||
|
</div>
|
||||||
|
</a-form-model-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form-model>
|
||||||
|
</div>
|
||||||
|
</x-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { XCard } from '@/components'
|
||||||
|
import { AutoComplete } from 'ant-design-vue'
|
||||||
|
import {
|
||||||
|
GetBookingOrderInfo
|
||||||
|
} from '@/api/modular/main/TaskmanageList'
|
||||||
|
import {
|
||||||
|
GetPortloadlist,
|
||||||
|
GetPortlist,
|
||||||
|
GetPackage
|
||||||
|
} from '@/api/modular/main/BookingLedger'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'TaskmanageDetail',
|
||||||
|
components: {
|
||||||
|
XCard,
|
||||||
|
AutoComplete
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
taskPKId: this.$route.query.pkId,
|
||||||
|
taskDetail: {},
|
||||||
|
labelCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 8 },
|
||||||
|
md: { span: 10 }
|
||||||
|
},
|
||||||
|
wrapperCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 15 },
|
||||||
|
md: { span: 13 }
|
||||||
|
},
|
||||||
|
YardlabelCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 1 },
|
||||||
|
md: { span: 4 }
|
||||||
|
},
|
||||||
|
YardwrapperCol: {
|
||||||
|
xs: { span: 24 },
|
||||||
|
sm: { span: 1 },
|
||||||
|
md: { span: 20 }
|
||||||
|
},
|
||||||
|
portloadData: [], // 装货港
|
||||||
|
transportData: [], // 中转港
|
||||||
|
portdischargeData: [], // 卸货港
|
||||||
|
destinationData: [], // 目的地
|
||||||
|
kindpkgsData: [],
|
||||||
|
showShipper: '',
|
||||||
|
showConsignee: '',
|
||||||
|
showNotifier: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
portloadDataArr() {
|
||||||
|
if (this.portloadData) {
|
||||||
|
const arr = []
|
||||||
|
this.portloadData.map((item, index) => {
|
||||||
|
if (!arr.includes(item.enName)) {
|
||||||
|
arr.push(`(${item.ediCode})${item.enName}`)
|
||||||
|
// arr.push(item.enName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
transportDataArr() {
|
||||||
|
if (this.transportData) {
|
||||||
|
const arr = []
|
||||||
|
this.transportData.map((item, index) => {
|
||||||
|
if (!arr.includes(item.enName)) {
|
||||||
|
arr.push(`(${item.ediCode})${item.enName}`)
|
||||||
|
// arr.push(item.enName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
portdischargeDataArr() {
|
||||||
|
if (this.portdischargeData) {
|
||||||
|
const arr = []
|
||||||
|
this.portdischargeData.map((item, index) => {
|
||||||
|
if (!arr.includes(item.enName)) {
|
||||||
|
arr.push(`(${item.ediCode})${item.enName}`)
|
||||||
|
// arr.push(item.enName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
destinationDataArr() {
|
||||||
|
if (this.destinationData) {
|
||||||
|
const arr = []
|
||||||
|
this.destinationData.map((item, index) => {
|
||||||
|
if (!arr.includes(item.enName)) {
|
||||||
|
arr.push(`(${item.ediCode})${item.enName}`)
|
||||||
|
// arr.push(item.enName)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
kindpkgsDataArr() {
|
||||||
|
if (this.kindpkgsData) {
|
||||||
|
const arr = []
|
||||||
|
this.kindpkgsData.map((item, index) => {
|
||||||
|
if (!arr.includes(item.name)) {
|
||||||
|
arr.push(item.name)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return arr
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const shipperScroll = document.getElementById('shipper-scroll')
|
||||||
|
if (shipperScroll) {
|
||||||
|
shipperScroll.addEventListener('scroll', () => {
|
||||||
|
document.getElementById('shipper-scroll-right').scrollTop = shipperScroll.scrollTop
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const consigneeScroll = document.getElementById('consignee-scroll')
|
||||||
|
consigneeScroll.addEventListener('scroll', () => {
|
||||||
|
document.getElementById('consignee-scroll-right').scrollTop = consigneeScroll.scrollTop
|
||||||
|
})
|
||||||
|
const notifypartyScroll = document.getElementById('notifyparty-scroll')
|
||||||
|
notifypartyScroll.addEventListener('scroll', () => {
|
||||||
|
document.getElementById('notifyparty-scroll-right').scrollTop = notifypartyScroll.scrollTop
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getBookingOrderInfo () {
|
||||||
|
GetBookingOrderInfo({
|
||||||
|
taskPKId: this.taskPKId
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 起始港 ( 装货港 / 收货地) - start
|
||||||
|
getPortloadlist(name = '', type) {
|
||||||
|
GetPortloadlist({
|
||||||
|
KeyWord: name
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this[`${type}Data`] = res.data
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
portloadSelect(value) {
|
||||||
|
const index = this.portloadDataArr.indexOf(value)
|
||||||
|
this.taskDetail.portloadid = this.portloadData[index].ediCode
|
||||||
|
this.taskDetail.portload = this.portloadData[index].enName
|
||||||
|
this.taskDetail.issueplace = this.portloadData[index].enName
|
||||||
|
if (!this.taskDetail.prepardat) {
|
||||||
|
this.taskDetail.prepardat = this.portloadData[index].enName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
portloadChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
this.taskDetail.portloadid = this.taskDetail.portloadid ? this.taskDetail.portloadid : ''
|
||||||
|
}
|
||||||
|
this.getPortloadlist(value, 'portload')
|
||||||
|
},
|
||||||
|
// 起始港 ( 装货港 / 收货地) - end
|
||||||
|
|
||||||
|
// 目的港 ( 卸货港 / 中转港 / 目的地 / 交货地) - start
|
||||||
|
getPortlist(name = '', type) {
|
||||||
|
GetPortlist({
|
||||||
|
KeyWord: name
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this[`${type}Data`] = res.data.splice(0, 50)
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 卸货港
|
||||||
|
portdischargeSelect(value) {
|
||||||
|
const index = this.portdischargeDataArr.indexOf(value)
|
||||||
|
this.taskDetail.portdischargeid = this.portdischargeData[index].ediCode
|
||||||
|
this.taskDetail.portdischarge = this.portdischargeData[index].enName
|
||||||
|
if (!this.taskDetail.payableat) {
|
||||||
|
this.taskDetail.payableat = this.portdischargeData[index].enName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
portdischargeChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
this.taskDetail.portdischargeid = this.taskDetail.portdischargeid ? this.taskDetail.portdischargeid : ''
|
||||||
|
}
|
||||||
|
this.getPortlist(value, 'portdischarge')
|
||||||
|
},
|
||||||
|
// 目的地
|
||||||
|
destinationSelect(value) {
|
||||||
|
const index = this.destinationDataArr.indexOf(value)
|
||||||
|
this.taskDetail.destinationid = this.destinationData[index].ediCode
|
||||||
|
this.taskDetail.destination = this.destinationData[index].enName
|
||||||
|
},
|
||||||
|
destinationChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
this.taskDetail.destinationid = this.taskDetail.destinationid ? this.taskDetail.destinationid : ''
|
||||||
|
}
|
||||||
|
this.getPortlist(value, 'destination')
|
||||||
|
},
|
||||||
|
// 中转港
|
||||||
|
transportSelect(value) {
|
||||||
|
const index = this.transportDataArr.indexOf(value)
|
||||||
|
this.taskDetail.transportid = this.transportData[index].ediCode
|
||||||
|
this.taskDetail.transport = this.transportData[index].enName
|
||||||
|
},
|
||||||
|
transportChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
this.taskDetail.transportid = this.taskDetail.transportid ? this.taskDetail.transportid : ''
|
||||||
|
}
|
||||||
|
this.getPortlist(value, 'transport')
|
||||||
|
},
|
||||||
|
// 目的港 ( 卸货港 / 中转港 / 目的地 / 交货地) - end
|
||||||
|
|
||||||
|
// 包装 - start
|
||||||
|
getPackage(name = '') {
|
||||||
|
GetPackage({
|
||||||
|
KeyWord: name
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.kindpkgsData = res.data
|
||||||
|
this.$forceUpdate()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
kindpkgsSelect(value) {
|
||||||
|
this.taskDetail.kindpkgs = value
|
||||||
|
},
|
||||||
|
kindpkgsChange(value) {
|
||||||
|
if (!value) {
|
||||||
|
this.taskDetail.kindpkgs = this.taskDetail.kindpkgs ? this.taskDetail.kindpkgs : ''
|
||||||
|
}
|
||||||
|
this.getPackage(value)
|
||||||
|
},
|
||||||
|
// 包装 - end
|
||||||
|
textareaChange(e, type) {
|
||||||
|
this.taskDetail[type] = e.target.value
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.task-basic-box{
|
||||||
|
display: flex;
|
||||||
|
width: 500px;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.label{
|
||||||
|
flex: 1;
|
||||||
|
.title{
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
color:#333;
|
||||||
|
}
|
||||||
|
.msg{
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight:500;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line-box {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 6px;
|
||||||
|
span.unit {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 28px;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sender,
|
||||||
|
.consignee,
|
||||||
|
.notifier {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.top {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
min-height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
.name {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-right: 10px;
|
||||||
|
color: #666;
|
||||||
|
.iconfont {
|
||||||
|
margin-right: 4px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.save-btn {
|
||||||
|
height: 32px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
span{
|
||||||
|
margin-left: 4px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-right: 25px;
|
||||||
|
}
|
||||||
|
.customer-input{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
// background: #c1e0ff;
|
||||||
|
color: @primary-color;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 0;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: @primary-color;
|
||||||
|
opacity: 0.2;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
// background: #c1e0ff;
|
||||||
|
color: @primary-color;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 2px;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: @primary-color;
|
||||||
|
opacity: 0.2;
|
||||||
|
z-index: 0;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
.input-box {
|
||||||
|
margin-top: 10px;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
textarea{
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
.line-count {
|
||||||
|
width: 24px;
|
||||||
|
padding-top: 3px;
|
||||||
|
height: 130px;
|
||||||
|
overflow: auto;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
// max-height: 192px;
|
||||||
|
// overflow-y: auto;
|
||||||
|
div {
|
||||||
|
text-align: right;
|
||||||
|
height: 22px;
|
||||||
|
line-height: 22px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue