|
|
|
|
@ -1,45 +1,67 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="sea-select-textarea flex">
|
|
|
|
|
<div class="name">
|
|
|
|
|
<span @click="handleOpen(2)" class="copy-btn iconfont icon-bianji" :style="{ fontSize: '12px' }"></span>
|
|
|
|
|
{{ props.label }}
|
|
|
|
|
<div class="sea-select-textarea">
|
|
|
|
|
<div class="flex">
|
|
|
|
|
<div class="name">
|
|
|
|
|
<span @click="handleOpen(2)" class="copy-btn iconfont icon-bianji" :style="{ fontSize: '12px' }"></span>
|
|
|
|
|
{{ props.label }}
|
|
|
|
|
</div>
|
|
|
|
|
<a-select
|
|
|
|
|
ref="select"
|
|
|
|
|
v-model:value="company"
|
|
|
|
|
style="width: 100px;"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
optionLabelProp="label"
|
|
|
|
|
@change="handleChange"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option
|
|
|
|
|
v-for="item in companyList"
|
|
|
|
|
:key="item.id" :value="item.id"
|
|
|
|
|
:label="item.shortName"
|
|
|
|
|
:title="`${item.shortName}(${item.codeName})`"
|
|
|
|
|
:blContent="item.blContent"
|
|
|
|
|
>
|
|
|
|
|
{{ item.shortName }} ({{ item.codeName }})
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
|
|
|
|
|
<!-- <selectView
|
|
|
|
|
class="select-view"
|
|
|
|
|
type="Id"
|
|
|
|
|
ref="consigneenameInput"
|
|
|
|
|
:defaultVal="Id"
|
|
|
|
|
:searchApi="RsearchApi()"
|
|
|
|
|
showCode="id"
|
|
|
|
|
:showLabel="['shortName']"
|
|
|
|
|
@change="getSelectViewRes"
|
|
|
|
|
></selectView> -->
|
|
|
|
|
<!-- <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('Content')">
|
|
|
|
|
保存
|
|
|
|
|
</a-button> -->
|
|
|
|
|
<div class="right">
|
|
|
|
|
<!-- <span class="btn-circle" @click="spliceMore('Content')" :style="{ fontSize: '14px' }">*</span> -->
|
|
|
|
|
<span class="btn" @click="changeCode(30, 'Content')">30</span>
|
|
|
|
|
<span class="btn" @click="changeCode(35, 'Content')">35</span>
|
|
|
|
|
<span class="btn" @click="changeCode(40, 'Content')">40</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<selectView
|
|
|
|
|
class="select-view"
|
|
|
|
|
type="Id"
|
|
|
|
|
ref="consigneenameInput"
|
|
|
|
|
:defaultVal="Id"
|
|
|
|
|
:searchApi="RsearchApi()"
|
|
|
|
|
showCode="id"
|
|
|
|
|
:showLabel="['shortName']"
|
|
|
|
|
@change="getSelectViewRes"
|
|
|
|
|
></selectView>
|
|
|
|
|
<!-- <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('Content')">
|
|
|
|
|
保存
|
|
|
|
|
</a-button> -->
|
|
|
|
|
<div class="right">
|
|
|
|
|
<span class="btn-circle" @click="spliceMore('Content')" :style="{ fontSize: '14px' }">*</span>
|
|
|
|
|
<span class="btn" @click="changeCode(30, 'Content')">30</span>
|
|
|
|
|
<span class="btn" @click="changeCode(35, 'Content')">35</span>
|
|
|
|
|
<span class="btn" @click="changeCode(40, 'Content')">40</span>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<textareaView
|
|
|
|
|
id="consignee-scroll"
|
|
|
|
|
:parentVal="Content"
|
|
|
|
|
type="Content"
|
|
|
|
|
:openToCDB="true"
|
|
|
|
|
@getTextareaChange="getTextareaChange"
|
|
|
|
|
/>
|
|
|
|
|
<!-- <div class="line-count" id="consignee-scroll-right" v-if="Content.length > 0">
|
|
|
|
|
<div v-for="(num, index) in Content.split('\n')" :key="index">{{ num.length }}</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<textareaView
|
|
|
|
|
id="consignee-scroll"
|
|
|
|
|
:parentVal="Content"
|
|
|
|
|
type="Content"
|
|
|
|
|
:openToCDB="true"
|
|
|
|
|
@getTextareaChange="getTextareaChange"
|
|
|
|
|
/>
|
|
|
|
|
<!-- <div class="line-count" id="consignee-scroll-right" v-if="Content.length > 0">
|
|
|
|
|
<div v-for="(num, index) in Content.split('\n')" :key="index">{{ num.length }}</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { ref, watch } from 'vue'
|
|
|
|
|
import selectView from '../detail/components/selectView.vue'
|
|
|
|
|
import { GetShipperClientList, GetConsigneeClientList, GetNotifyPartyClientList } from '/@/views/operation/seaexport/api/BookingLedger'
|
|
|
|
|
// import selectView from '../detail/components/selectView.vue'
|
|
|
|
|
import textareaView from '../detail/components/textareaView.vue'
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
details: {
|
|
|
|
|
@ -63,7 +85,7 @@
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
deep: true,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
const emit = defineEmits(['spliceMore', 'Change'])
|
|
|
|
|
const visible = ref(false)
|
|
|
|
|
@ -75,6 +97,27 @@
|
|
|
|
|
const modelVisible = ref(false)
|
|
|
|
|
const modelType = ref('')
|
|
|
|
|
const modelContent = ref('')
|
|
|
|
|
const company = ref()
|
|
|
|
|
// 往来单位下拉数据
|
|
|
|
|
const companyList = ref([])
|
|
|
|
|
// 页面初始化下拉数据
|
|
|
|
|
const init = async () => {
|
|
|
|
|
if (props.field == 'shipper') {
|
|
|
|
|
const res = await GetShipperClientList()
|
|
|
|
|
companyList.value = res.data
|
|
|
|
|
console.log(res)
|
|
|
|
|
} else if (props.field == 'consignee') {
|
|
|
|
|
const res = await GetConsigneeClientList()
|
|
|
|
|
companyList.value = res.data
|
|
|
|
|
} else {
|
|
|
|
|
const res = await GetNotifyPartyClientList()
|
|
|
|
|
companyList.value = res.data
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
init()
|
|
|
|
|
const handleChange = (v, obj) => {
|
|
|
|
|
Content.value = obj.blContent
|
|
|
|
|
}
|
|
|
|
|
function handleOpen(type) {
|
|
|
|
|
visible.value = true
|
|
|
|
|
modalType.value = type
|
|
|
|
|
@ -194,6 +237,7 @@
|
|
|
|
|
subValue = subValue.replace(/[\n]+/g, '\n')
|
|
|
|
|
subValue = subValue.replace(/[ ]+[\n]+/g, '\n')
|
|
|
|
|
subValue = subValue.replace(/[ ]+$/g, '')
|
|
|
|
|
console.log(subValue, 2222)
|
|
|
|
|
Content.value = subValue
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
@ -208,129 +252,26 @@
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #0057FF;
|
|
|
|
|
}
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
.name {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
color: #000;
|
|
|
|
|
.iconfont {
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.save-btn {
|
|
|
|
|
height: 24px;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
color: #000;
|
|
|
|
|
span {
|
|
|
|
|
margin-left: 4px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
float: right;
|
|
|
|
|
margin-top: 2px;
|
|
|
|
|
margin-right: 25px;
|
|
|
|
|
}
|
|
|
|
|
.customer-input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
.ant-select {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -5px;
|
|
|
|
|
left: 5px;
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: -5px;
|
|
|
|
|
.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;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
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;
|
|
|
|
|
height: 28px;
|
|
|
|
|
width: 28px;
|
|
|
|
|
line-height: 26px;
|
|
|
|
|
background: #c1e0ff;
|
|
|
|
|
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;
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
.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>
|
|
|
|
|
|
