mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 02:09:37 +08:00
描述：图片
This commit is contained in:
SelfRidicule
parent
96f2c139fc
commit
61027fca86
@ -265,26 +265,28 @@
|
||||
<a-row>
|
||||
<a-col :span='10'>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='室内图片'>
|
||||
<!-- <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
|
||||
<a-upload
|
||||
v-decorator="['indoorPicUrl']"
|
||||
v-decorator="['indoorPicUrl', {rules: [{ required: true, message: '上传室内图片' }]}]"
|
||||
list-type='picture-card'
|
||||
class='avatar-uploader'
|
||||
:show-upload-list='false'
|
||||
:file-list='fileList'
|
||||
:action='uploadUrl'
|
||||
:headers='headers'
|
||||
:before-upload='beforeUpload'
|
||||
@change='handleChange'
|
||||
@preview='handlePreview'
|
||||
@change='handleChangeFileList'
|
||||
>
|
||||
<img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
|
||||
<div v-else>
|
||||
<a-icon :type="loading ? 'loading' : 'plus'" />
|
||||
<div v-if='fileList.length < 4'>
|
||||
<a-icon type='plus' />
|
||||
<div class='ant-upload-text'> 上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
|
||||
<img style='width: 100%' :src='previewImage' />
|
||||
</a-modal>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
@ -336,7 +338,10 @@ export default {
|
||||
buildingDetailList: [], // 楼层
|
||||
roomList: [], // 房间
|
||||
tenantEnable: false,
|
||||
parkEnable: false
|
||||
parkEnable: false,
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
@ -494,38 +499,19 @@ export default {
|
||||
},
|
||||
moment,
|
||||
//
|
||||
beforeUpload(file) {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
||||
if (!isJpgOrPng) {
|
||||
this.$message.error('You can only upload JPG file!')
|
||||
async handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64FileList(file.originFileObj)
|
||||
}
|
||||
const isLt2M = file.size / 1024 < 5000
|
||||
if (!isLt2M) {
|
||||
this.$message.error('图片必须小于 5M!')
|
||||
}
|
||||
return isJpgOrPng && isLt2M
|
||||
this.previewImage = file.url || file.preview
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleChange(info) {
|
||||
if (info.file.status === 'uploading') {
|
||||
this.loading = true
|
||||
return
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
const { form: { setFieldsValue } } = this
|
||||
const result = info.file.response
|
||||
// 设置值
|
||||
this.$nextTick(() => {
|
||||
setFieldsValue({
|
||||
// 设置相对路径
|
||||
indoorPicUrl: result.fileName
|
||||
})
|
||||
})
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, imageUrl => {
|
||||
this.imageUrl = imageUrl
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
handleCancel() {
|
||||
this.previewVisible = false
|
||||
},
|
||||
// 上传banner
|
||||
handleChangeFileList({ fileList }) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
add() {
|
||||
this.form.resetFields()
|
||||
@ -566,11 +552,15 @@ export default {
|
||||
}
|
||||
// 获取用户信息
|
||||
this.getUserDetail()
|
||||
//
|
||||
// 图片
|
||||
if (this.mdl.indoorPicUrl) {
|
||||
this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.indoorPicUrl
|
||||
this.mdl.indoorPicUrl = JSON.parse(this.mdl.indoorPicUrl)
|
||||
this.mdl.indoorPicUrl.forEach((item, i) => {
|
||||
item.url = process.env.VUE_APP_API_BASE_URL + item.url
|
||||
})
|
||||
this.fileList = this.mdl.indoorPicUrl
|
||||
} else {
|
||||
this.imageUrl = ''
|
||||
this.fileList = []
|
||||
}
|
||||
//
|
||||
this.visible = true
|
||||
@ -614,6 +604,19 @@ export default {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
this.confirmLoading = true
|
||||
const indoorPicUrl = []
|
||||
this.fileList.forEach((file, index) => {
|
||||
// 添加原来的
|
||||
if (file.hasOwnProperty('name') && file.hasOwnProperty('url') && file.hasOwnProperty('uid')) {
|
||||
indoorPicUrl.push({ 'name': file.name, 'url': file.name, 'uid': index })
|
||||
}
|
||||
if (file.status === 'done' && file.response.code === 0) {
|
||||
const data = file.response
|
||||
indoorPicUrl.push({ 'name': data.fileName, 'url': data.fileName, 'uid': index })
|
||||
}
|
||||
})
|
||||
// 多个图片
|
||||
values.indoorPicUrl = JSON.stringify(indoorPicUrl)
|
||||
saveRoomContent(values)
|
||||
.then((res) => {
|
||||
if (res.code === 0) {
|
||||
|
||||
@ -165,23 +165,24 @@
|
||||
<a-row>
|
||||
<a-col :span='10'>
|
||||
<a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='室内图片'>
|
||||
<!-- <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
|
||||
<a-upload
|
||||
v-decorator="['indoorPicUrl']"
|
||||
v-decorator="['indoorPicUrl', {rules: [{ required: true, message: '上传室内图片' }]}]"
|
||||
list-type='picture-card'
|
||||
class='avatar-uploader'
|
||||
:show-upload-list='false'
|
||||
:file-list='fileList'
|
||||
:action='uploadUrl'
|
||||
:headers='headers'
|
||||
:before-upload='beforeUpload'
|
||||
@change='handleChange'
|
||||
@preview='handlePreview'
|
||||
@change='handleChangeFileList'
|
||||
>
|
||||
<img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
|
||||
<div v-else>
|
||||
<a-icon :type="loading ? 'loading' : 'plus'" />
|
||||
<div v-if='fileList.length < 4'>
|
||||
<a-icon type='plus' />
|
||||
<div class='ant-upload-text'> 上传</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
|
||||
<img style='width: 100%' :src='previewImage' />
|
||||
</a-modal>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -236,7 +237,10 @@ export default {
|
||||
buildingDetailList: [], // 楼层
|
||||
roomList: [], // 房间
|
||||
tenantEnable: false,
|
||||
parkEnable: false
|
||||
parkEnable: false,
|
||||
previewVisible: false,
|
||||
previewImage: '',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
beforeCreate() {
|
||||
@ -386,39 +390,20 @@ export default {
|
||||
})
|
||||
},
|
||||
moment,
|
||||
|
||||
beforeUpload(file) {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
|
||||
if (!isJpgOrPng) {
|
||||
this.$message.error('You can only upload JPG file!')
|
||||
//
|
||||
async handlePreview(file) {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = await getBase64FileList(file.originFileObj)
|
||||
}
|
||||
const isLt2M = file.size / 1024 < 5000
|
||||
if (!isLt2M) {
|
||||
this.$message.error('图片必须小于 5M!')
|
||||
}
|
||||
return isJpgOrPng && isLt2M
|
||||
this.previewImage = file.url || file.preview
|
||||
this.previewVisible = true
|
||||
},
|
||||
handleChange(info) {
|
||||
if (info.file.status === 'uploading') {
|
||||
this.loading = true
|
||||
return
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
const { form: { setFieldsValue } } = this
|
||||
const result = info.file.response
|
||||
// 设置值
|
||||
this.$nextTick(() => {
|
||||
setFieldsValue({
|
||||
// 设置相对路径
|
||||
indoorPicUrl: result.fileName
|
||||
})
|
||||
})
|
||||
// Get this url from response in real world.
|
||||
getBase64(info.file.originFileObj, imageUrl => {
|
||||
this.imageUrl = imageUrl
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
handleCancel() {
|
||||
this.previewVisible = false
|
||||
},
|
||||
// 上传banner
|
||||
handleChangeFileList({ fileList }) {
|
||||
this.fileList = fileList
|
||||
},
|
||||
add() {
|
||||
this.form.resetFields()
|
||||
@ -459,11 +444,15 @@ export default {
|
||||
}
|
||||
// 获取用户信息
|
||||
this.getUserDetail()
|
||||
//
|
||||
// 图片
|
||||
if (this.mdl.indoorPicUrl) {
|
||||
this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.indoorPicUrl
|
||||
this.mdl.indoorPicUrl = JSON.parse(this.mdl.indoorPicUrl)
|
||||
this.mdl.indoorPicUrl.forEach((item, i) => {
|
||||
item.url = process.env.VUE_APP_API_BASE_URL + item.url
|
||||
})
|
||||
this.fileList = this.mdl.indoorPicUrl
|
||||
} else {
|
||||
this.imageUrl = ''
|
||||
this.fileList = []
|
||||
}
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
@ -480,6 +469,19 @@ export default {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
this.confirmLoading = true
|
||||
const indoorPicUrl = []
|
||||
this.fileList.forEach((file, index) => {
|
||||
// 添加原来的
|
||||
if (file.hasOwnProperty('name') && file.hasOwnProperty('url') && file.hasOwnProperty('uid')) {
|
||||
indoorPicUrl.push({ 'name': file.name, 'url': file.name, 'uid': index })
|
||||
}
|
||||
if (file.status === 'done' && file.response.code === 0) {
|
||||
const data = file.response
|
||||
indoorPicUrl.push({ 'name': data.fileName, 'url': data.fileName, 'uid': index })
|
||||
}
|
||||
})
|
||||
// 多个图片
|
||||
values.indoorPicUrl = JSON.stringify(indoorPicUrl)
|
||||
saveShowroom(values).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success('保存成功')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user