mirror of
https://github.com/PanJiaChen/vue-element-admin.git
synced 2025-08-13 07:04:21 +08:00
9d59700aa5
* improves: Reduce and more easy create news Forms. * fix: Overwrite template metadata component with metadata prop from mixin * Add search from server for product price inquiry * add isEvaluateValueChanges. * Add support to latest version from POS client * Add clean for all fields * add style with prop cssClassName * Add style for components * fix subscribe mutation's and add set value and set values. * Change error by info for form Co-authored-by: Edwin Betancourt <EdwinBetanc0urt@hotmail.com>
89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<template>
|
|
<el-upload
|
|
:ref="metadata.columnName"
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess"
|
|
:before-upload="beforeAvatarUpload"
|
|
:disabled="isDisabled"
|
|
:class="'avatar-uploader ' + metadata.cssClassName"
|
|
>
|
|
<img v-if="value" :src="value" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script>
|
|
import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
|
|
|
|
export default {
|
|
name: 'FieldImage',
|
|
mixins: [fieldMixin],
|
|
data() {
|
|
return {
|
|
value: ''
|
|
}
|
|
},
|
|
watch: {
|
|
valueModel(value) {
|
|
if (this.metadata.inTable) {
|
|
this.value = value
|
|
}
|
|
},
|
|
'metadata.value'(value) {
|
|
if (!this.metadata.inTable) {
|
|
this.value = value
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleAvatarSuccess(res, file) {
|
|
this.value = URL.createObjectURL(file.raw)
|
|
// TODO: define one method to control change value
|
|
this.handleChange(this.value)
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg'
|
|
const isPNG = file.type === 'image/png'
|
|
// const isGIF = file.type === 'image/gif'
|
|
// const isBMP = file.type === 'image/bmp'
|
|
const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
|
if (!isLt2M) {
|
|
this.$message.error(this.$t('components.imageError'))
|
|
}
|
|
return isJPG + isPNG + isLt2M
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.avatar-uploader .el-upload {
|
|
border: 1px dashed #d9d9d9;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.avatar-uploader .el-upload:hover {
|
|
border-color: #409EFF;
|
|
}
|
|
|
|
.avatar-uploader-icon {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
line-height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 178px;
|
|
height: 178px;
|
|
display: block;
|
|
}
|
|
</style>
|