whm
/
BookingHeChuanFront
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

复制功能 + 下拉列表默认值

Browse Source
szh_zidingyibiaoti
lilu 2 years ago
parent d506bf2ce4
commit f501de0c07
5 changed files with 139 additions and 97 deletions
Show Stats Download Patch File Download Diff File

2
src/layouts/BasicLayout.vue
Unescape Escape View File

@ -165,7 +165,7 @@ export default {
this.setBlfrtList() this.setBlfrtList()
this.setCtnallList() this.setCtnallList()
this.setLineList() this.setLineList()
// this.setBookingInitData() this.setBookingInitData()
} }
} }
} }

26
src/store/modules/booking.js
Unescape Escape View File

@ -306,24 +306,14 @@ const booking = {
case 'service': case 'service':
allData['serviceInitList'] = $data allData['serviceInitList'] = $data
break break
case 'template': case 'sTemplate':
const shippernameInitList = [] allData['shippernameInitList'] = $data
const consigneenameInitList = [] break
const notifypartynameInitList = [] case 'fTemplate':
$data.map((tempalte, cindex) => { allData['consigneenameInitList'] = $data
if (tempalte.type.includes('10')) { break
shippernameInitList.push(tempalte) case 'tTemplate':
} allData['notifypartynameInitList'] = $data
if (tempalte.type.includes('20')) {
consigneenameInitList.push(tempalte)
}
if (tempalte.type.includes('30')) {
notifypartynameInitList.push(tempalte)
}
})
allData['shippernameInitList'] = shippernameInitList
allData['consigneenameInitList'] = consigneenameInitList
allData['notifypartynameInitList'] = notifypartynameInitList
break break
} }
}) })

176
src/views/main/BookingLedger/detail/components/selectView.vue
Unescape Escape View File

@ -1,50 +1,61 @@
<template> <template>
<div class="select-content"> <div class="select-content">
<a-select <div class="select-input">
size="small" <a-select
ref="selectView" size="small"
:class="`select-input-${type}`" ref="selectView"
v-model="value" :class="`select-input-${type}`"
show-search v-model="value"
:allowClear="true" show-search
:filter-option="!this.openSearch ? filterOption : false" :allowClear="true"
:dropdownMatchSelectWidth="false" :filter-option="!this.openSearch ? filterOption : false"
:showArrow="!this.openSearch ? true : true" :dropdownMatchSelectWidth="false"
:open="open" :showArrow="!this.openSearch ? true : true"
optionLabelProp="label" :open="open"
:notFoundContent="inLoading ? '加载中...' : '暂无数据'" optionLabelProp="label"
@focus="getSelectFirst" :notFoundContent="inLoading ? '加载中...' : '暂无数据'"
@blur="getSelectBlur" v-clickDown="{ clickFun: () => {} , dblclickFun: this.dblclickFun }"
@select="selectOption" @focus="getSelectFirst"
@change="(value,option)=> debounce(this.handleChange, 200, option)" @blur="getSelectBlur"
@search="debounce(handleSearch, 300, $event)" @select="selectOption"
> @change="(value,option)=> debounce(this.handleChange, 200, option)"
<a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]"> @search="debounce(handleSearch, 300, $event)"
<template v-if="type === 'contractno'"> >
<div class="contractno-label"> <a-select-option v-for="(item, index) in selectList" :key="index" :value="item[showLabel[0]] + index" :label="item[showLabel[0]]">
<div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div> <template v-if="type === 'contractno'">
<div class="note"><span>{{ item.contractNote || '--' }}</span></div> <div class="contractno-label">
</div> <div class="title"> {{ item.contractNo }} / {{ item.contractName || '--' }} </div>
</template> <div class="note"><span>{{ item.contractNote || '--' }}</span></div>
<template v-if="type === 'vessel'"> </div>
<div class="vessel-label"> </template>
<div class="title"> {{ item.vessel }} </div> <template v-if="type === 'vessel'">
<div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div> <div class="vessel-label">
<div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div> <div class="title"> {{ item.vessel }} </div>
</div> <div class="voyno">航次： <span>{{ item.voyno || '--' }}</span></div>
</template> <div class="etd">ETD: <span>{{ item.etd || '--' }}</span></div>
<template v-else> </div>
<template v-for="(label, lindex) in showLabel"> </template>
{{ item[label] }} <template v-else>
<template v-if="lindex != showLabel.length - 1"> / </template> <template v-for="(label, lindex) in showLabel">
{{ item[label] }}
<template v-if="lindex != showLabel.length - 1"> / </template>
</template>
</template> </template>
</template> </a-select-option>
</a-select-option> </a-select>
</a-select> <div v-show="!open" class="select_overlap" @mouseup="openSelect"></div>
<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> </div>
</template> </template>
<script> <script>
import Vue from 'vue'
import { import {
GetPortloadlist, GetPortloadlist,
GetPortlist, GetPortlist,
@ -60,6 +71,29 @@ import {
} from '@/api/modular/main/BookingLedger' } from '@/api/modular/main/BookingLedger'
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
let timer 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 { export default {
name: '', name: '',
props: { props: {
@ -457,7 +491,8 @@ export default {
} }
}, },
openSelect() { openSelect(open) {
console.log('== 测试鼠标滑过 ==')
if (!this.open) { if (!this.open) {
this.getSelectFirst('', false) this.getSelectFirst('', false)
} else { } else {
@ -469,6 +504,27 @@ export default {
}, },
getSelectBlur (e) { getSelectBlur (e) {
this.open = false 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)
} }
} }
} }
@ -509,17 +565,31 @@ export default {
} }
.select-content { .select-content {
position: relative; display: flex;
.select_overlap { .select-input{
cursor: pointer; flex: 1;
height: 32px; position: relative;
width: 100%; overflow: hidden;
position: absolute; .select_overlap {
top: 0; cursor: pointer;
left: 0; height: 32px;
right: 0; width: 100%;
bottom: 0; position: absolute;
opacity: 0; 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> </style>

25
src/views/main/BookingLedger/detail/modules/basicInfo.vue
Unescape Escape View File

@ -170,7 +170,6 @@
<template v-else> <template v-else>
<inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange" /> <inputView type="contractno" :parentVal="details.contractno" @getInputChange="inputChange" />
</template> </template>
<span class="iconfont icon-fuzhi11 copy-btn" @click="copyFun('contractno')"></span>
</div> </div>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
@ -212,7 +211,6 @@
:openSearch="true" :openSearch="true"
@change="getSelectViewRes" @change="getSelectViewRes"
></selectView> ></selectView>
<span class="iconfont icon-fuzhi11 copy-btn" @click="copyFun('vessel')"></span>
</div> </div>
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
@ -1123,29 +1121,6 @@ export default {
console.log(this.etdWeek) console.log(this.etdWeek)
} }
console.log('== 日期修改 ==', type, value, this.details[type]) console.log('== 日期修改 ==', type, value, this.details[type])
},
copyFun (type) {
const val = this.details[type]
if (!val) {
this.$message.error('暂无复制内容')
return false
}
console.log('复制内容', val)
this.copy(val)
},
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)
} }
} }
} }

7
src/views/main/BookingLedger/list/index.vue
Unescape Escape View File

@ -2477,4 +2477,11 @@ export default {
.pono{ .pono{
text-align: left; text-align: left;
} }
/deep/ .vxe-header--row th{
text-align: left !important;
}
/deep/ .vxe-cell--title{
width: 100%;
text-align: left;
}
</style> </style>

Write Preview
Loading…
Cancel
Save