|
|
|
|
@ -1,50 +1,61 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="select-content">
|
|
|
|
|
<a-select
|
|
|
|
|
size="small"
|
|
|
|
|
ref="selectView"
|
|
|
|
|
:class="`select-input-${type}`"
|
|
|
|
|
v-model="value"
|
|
|
|
|
show-search
|
|
|
|
|
:allowClear="true"
|
|
|
|
|
:filter-option="!this.openSearch ? filterOption : false"
|
|
|
|
|
:dropdownMatchSelectWidth="false"
|
|
|
|
|
:showArrow="!this.openSearch ? true : true"
|
|
|
|
|
:open="open"
|
|
|
|
|
optionLabelProp="label"
|
|
|
|
|
:notFoundContent="inLoading ? '加载中...' : '暂无数据'"
|
|
|
|
|
@focus="getSelectFirst"
|
|
|
|
|
@blur="getSelectBlur"
|
|
|
|
|
@select="selectOption"
|
|
|
|
|
@change="(value,option)=> debounce(this.handleChange, 200, option)"
|
|
|
|
|
@search="debounce(handleSearch, 300, $event)"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]">
|
|
|
|
|
<template v-if="type === 'contractno'">
|
|
|
|
|
<div class="contractno-label">
|
|
|
|
|
<div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
|
|
|
|
|
<div class="note"><span>{{ item.contractNote || '--' }}</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="type === 'vessel'">
|
|
|
|
|
<div class="vessel-label">
|
|
|
|
|
<div class="title"> {{ item.vessel }} </div>
|
|
|
|
|
<div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div>
|
|
|
|
|
<div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<template v-for="(label, lindex) in showLabel">
|
|
|
|
|
{{ item[label] }}
|
|
|
|
|
<template v-if="lindex != showLabel.length - 1"> / </template>
|
|
|
|
|
<div class="select-input">
|
|
|
|
|
<a-select
|
|
|
|
|
size="small"
|
|
|
|
|
ref="selectView"
|
|
|
|
|
:class="`select-input-${type}`"
|
|
|
|
|
v-model="value"
|
|
|
|
|
show-search
|
|
|
|
|
:allowClear="true"
|
|
|
|
|
:filter-option="!this.openSearch ? filterOption : false"
|
|
|
|
|
:dropdownMatchSelectWidth="false"
|
|
|
|
|
:showArrow="!this.openSearch ? true : true"
|
|
|
|
|
:open="open"
|
|
|
|
|
optionLabelProp="label"
|
|
|
|
|
:notFoundContent="inLoading ? '加载中...' : '暂无数据'"
|
|
|
|
|
v-clickDown="{ clickFun: () => {} , dblclickFun: this.dblclickFun }"
|
|
|
|
|
@focus="getSelectFirst"
|
|
|
|
|
@blur="getSelectBlur"
|
|
|
|
|
@select="selectOption"
|
|
|
|
|
@change="(value,option)=> debounce(this.handleChange, 200, option)"
|
|
|
|
|
@search="debounce(handleSearch, 300, $event)"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]">
|
|
|
|
|
<template v-if="type === 'contractno'">
|
|
|
|
|
<div class="contractno-label">
|
|
|
|
|
<div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
|
|
|
|
|
<div class="note"><span>{{ item.contractNote || '--' }}</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="type === 'vessel'">
|
|
|
|
|
<div class="vessel-label">
|
|
|
|
|
<div class="title"> {{ item.vessel }} </div>
|
|
|
|
|
<div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div>
|
|
|
|
|
<div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else>
|
|
|
|
|
<template v-for="(label, lindex) in showLabel">
|
|
|
|
|
{{ item[label] }}
|
|
|
|
|
<template v-if="lindex != showLabel.length - 1"> / </template>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</template>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<div v-show="!open" class="select_overlap" @mouseup="openSelect"></div>
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<div v-show="!open" class="select_overlap" @mouseup="openSelect"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="copy-btn iconfont icon-fuzhi11" @click="dblclickFun"></div>
|
|
|
|
|
<!-- <div
|
|
|
|
|
v-show="!open"
|
|
|
|
|
class="select_overlap"
|
|
|
|
|
v-clickDown="{ clickFun: this.openSelect, dblclickFun: this.dblclickFun }"
|
|
|
|
|
>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import Vue from 'vue'
|
|
|
|
|
import {
|
|
|
|
|
GetPortloadlist,
|
|
|
|
|
GetPortlist,
|
|
|
|
|
@ -60,6 +71,29 @@ import {
|
|
|
|
|
} from '@/api/modular/main/BookingLedger'
|
|
|
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
|
|
|
let timer
|
|
|
|
|
Vue.directive('clickDown', {
|
|
|
|
|
inserted(el, binding, vnode) {
|
|
|
|
|
let clickTimer = null
|
|
|
|
|
// 单击
|
|
|
|
|
el.addEventListener('click', () => {
|
|
|
|
|
if (clickTimer) {
|
|
|
|
|
window.clearTimeout(clickTimer);
|
|
|
|
|
clickTimer = null;
|
|
|
|
|
}
|
|
|
|
|
clickTimer = setTimeout(() => {
|
|
|
|
|
binding.value.clickFun()
|
|
|
|
|
}, 300);
|
|
|
|
|
})
|
|
|
|
|
// 双击
|
|
|
|
|
el.addEventListener('dblclick', () => {
|
|
|
|
|
if (clickTimer) {
|
|
|
|
|
window.clearTimeout(clickTimer);
|
|
|
|
|
clickTimer = null;
|
|
|
|
|
}
|
|
|
|
|
binding.value.dblclickFun()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
export default {
|
|
|
|
|
name: '',
|
|
|
|
|
props: {
|
|
|
|
|
@ -372,6 +406,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getSelectFirst (e, canClick = true) {
|
|
|
|
|
// console.log('获取焦点', e, this.value)
|
|
|
|
|
if (canClick) {
|
|
|
|
|
this.$refs.selectView.$refs.vcSelect.$refs.arrow.click()
|
|
|
|
|
} else {
|
|
|
|
|
@ -456,7 +491,8 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
openSelect() {
|
|
|
|
|
openSelect(open) {
|
|
|
|
|
console.log('== 测试鼠标滑过 ==')
|
|
|
|
|
if (!this.open) {
|
|
|
|
|
this.getSelectFirst('', false)
|
|
|
|
|
} else {
|
|
|
|
|
@ -468,6 +504,27 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
getSelectBlur (e) {
|
|
|
|
|
this.open = false
|
|
|
|
|
},
|
|
|
|
|
dblclickFun () {
|
|
|
|
|
if (!this.value) {
|
|
|
|
|
this.$message.error('暂无可复制内容')
|
|
|
|
|
return false
|
|
|
|
|
}
|
|
|
|
|
this.copy(this.value)
|
|
|
|
|
},
|
|
|
|
|
copy(textValue) {
|
|
|
|
|
const textarea = document.createElement('textarea')
|
|
|
|
|
textarea.readOnly = 'readonly'
|
|
|
|
|
textarea.style.position = 'absolute'
|
|
|
|
|
textarea.style.left = '-9999px'
|
|
|
|
|
textarea.value = textValue
|
|
|
|
|
document.body.appendChild(textarea)
|
|
|
|
|
textarea.select()
|
|
|
|
|
const result = document.execCommand('Copy')
|
|
|
|
|
if (result) {
|
|
|
|
|
this.$message.success('复制成功')
|
|
|
|
|
}
|
|
|
|
|
document.body.removeChild(textarea)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -508,17 +565,31 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.select-content {
|
|
|
|
|
position: relative;
|
|
|
|
|
.select_overlap {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 32px;
|
|
|
|
|
width: 300px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
.select-input{
|
|
|
|
|
flex: 1;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.select_overlap {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
height: 32px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.copy-btn{
|
|
|
|
|
width: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #bbb;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
&:hover{
|
|
|
|
|
color: @primary-color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
张同海
2 years ago