修改台账表单,单证备注操作备注， 详情收发通，船名，装货港,
parent
d95e89c661
commit
45fb91aa4b
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="date-content">
|
||||
<a-date-picker
|
||||
size="small"
|
||||
ref="dateInput"
|
||||
style="min-width:100px"
|
||||
:class="`date-picker-${type}`"
|
||||
:format="format"
|
||||
v-model="value"
|
||||
:open="open"
|
||||
:show-time="showTime"
|
||||
@change="changeDate"
|
||||
@openChange="handleOpenChange"
|
||||
@focus="onFocus">
|
||||
<a-icon slot="suffixIcon" type="time" style="display: none" />
|
||||
</a-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
parentVal: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'YYYY-MM-DD'
|
||||
},
|
||||
showTime: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal,
|
||||
open: false,
|
||||
over: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parentVal(nval, oval) {
|
||||
this.value = nval
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeDate (date, dateString) {
|
||||
if (!dateString) {
|
||||
this.value = null
|
||||
} else {
|
||||
this.value = dateString
|
||||
}
|
||||
this.$emit('dateChange', {
|
||||
type: this.type,
|
||||
value: this.value
|
||||
})
|
||||
},
|
||||
handleOpenChange (open) {
|
||||
this.open = open;
|
||||
if (!this.open) {
|
||||
this.over = true
|
||||
this.$refs.dateInput.$refs.picker.$refs.input.focus()
|
||||
setTimeout(() => {
|
||||
this.over = false
|
||||
}, 1200)
|
||||
}
|
||||
},
|
||||
onFocus () {
|
||||
if (!this.open && !this.over) {
|
||||
this.open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="input-content">
|
||||
<input
|
||||
class="ant-input input-box"
|
||||
:class="`input-${type}`"
|
||||
size="small"
|
||||
:type="inputType"
|
||||
v-model="value"
|
||||
:disabled="ishd"
|
||||
:placeholder="placeholder"
|
||||
@blur="inputBlur"
|
||||
@change="inputChange"
|
||||
/>
|
||||
<a-icon type="close-circle" theme="filled" class="ant-input-suffix input-icon" @click="clearInput" v-if="value"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
parentVal: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
ishd: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// value: this.parentVal || '',
|
||||
value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
parentVal(nval, oval) {
|
||||
this.value = nval
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
inputBlur() {
|
||||
this.$emit('getInputChange', {
|
||||
type: this.type,
|
||||
value: this.value
|
||||
})
|
||||
},
|
||||
inputChange(e) {
|
||||
if (e.type === 'click' && !this.value) {
|
||||
this.$emit('getInputChange', {
|
||||
type: this.type,
|
||||
value: this.value
|
||||
})
|
||||
}
|
||||
},
|
||||
clearInput () {
|
||||
this.value = ''
|
||||
this.$emit('getInputChange', {
|
||||
type: this.type,
|
||||
value: this.value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.input-content{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.input-box {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.input-icon{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
line-height: 0;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
right: 10px;
|
||||
}
|
||||
&:hover{
|
||||
.input-icon{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue