<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
width="640px"
|
@confirm="confirm"
|
>
|
<el-form ref="form" :model="form" :rules="rules" label-width="96px" class="banner-edit-form">
|
<el-form-item label="标题" prop="title">
|
<el-input v-model="form.title" placeholder="选填，用于后台识别" maxlength="200" clearable v-trim />
|
</el-form-item>
|
<el-form-item label="轮播图片" prop="imageUrl">
|
<UploadAvatarImage
|
:file="imageFile"
|
tips-label="上传图片"
|
custom-style="width: 320px; height: 120px;"
|
:upload-data="{ folder: 'ywH5Banner' }"
|
@uploadSuccess="onUploadSuccess"
|
@uploadBegin="isUploading = true"
|
@uploadEnd="isUploading = false"
|
/>
|
<p class="form-tip">建议尺寸 750×320 左右，支持 jpg/png</p>
|
</el-form-item>
|
<el-form-item label="跳转链接" prop="linkUrl">
|
<el-input v-model="form.linkUrl" placeholder="选填，H5 内链或外链" clearable v-trim />
|
</el-form-item>
|
<el-form-item label="排序" prop="sortnum">
|
<el-input-number v-model="form.sortnum" :min="0" :max="9999" controls-position="right" />
|
<span class="inline-tip">数值越小越靠前</span>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="0">启用</el-radio>
|
<el-radio :label="1">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" :rows="2" placeholder="选填" maxlength="500" show-word-limit />
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
|
const defaultForm = () => ({
|
id: null,
|
title: '',
|
imageUrl: '',
|
linkUrl: '',
|
sortnum: 0,
|
status: 0,
|
remark: ''
|
})
|
|
export default {
|
name: 'YwH5BannerEdit',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage },
|
data () {
|
return {
|
form: defaultForm(),
|
imageFile: { imgurl: '', imgurlfull: '' },
|
isUploading: false,
|
rules: {
|
imageUrl: [{ required: true, message: '请上传轮播图片', trigger: 'change' }],
|
sortnum: [{ required: true, message: '请输入排序', trigger: 'change' }]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/ywh5banner',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
this.isUploading = false
|
if (target == null) {
|
this.$nextTick(() => {
|
this.form = defaultForm()
|
this.imageFile = { imgurl: '', imgurlfull: '' }
|
this.$refs.form && this.$refs.form.clearValidate()
|
})
|
return
|
}
|
this.$nextTick(() => {
|
this.form = Object.assign(defaultForm(), target)
|
this.imageFile = {
|
imgurl: target.imageUrl || '',
|
imgurlfull: target.imageUrl || ''
|
}
|
this.$refs.form && this.$refs.form.clearValidate()
|
})
|
},
|
onUploadSuccess ({ imgurlfull, imgurl }) {
|
this.form.imageUrl = imgurlfull || imgurl || ''
|
this.imageFile.imgurl = imgurl || this.form.imageUrl
|
this.imageFile.imgurlfull = imgurlfull || this.form.imageUrl
|
this.$refs.form && this.$refs.form.validateField('imageUrl')
|
},
|
confirm () {
|
if (this.isUploading) {
|
this.$message.warning('图片上传中，请稍候')
|
return
|
}
|
if (this.form.id == null || this.form.id === '') {
|
this.__confirmCreate()
|
return
|
}
|
this.__confirmEdit()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.banner-edit-form {
|
padding: 8px 0 12px;
|
}
|
|
.banner-edit-form ::v-deep .avatar-uploader-icon {
|
line-height: 120px;
|
}
|
|
.form-tip,
|
.inline-tip {
|
margin: 6px 0 0;
|
font-size: 12px;
|
color: #909399;
|
line-height: 1.5;
|
}
|
|
.inline-tip {
|
display: inline-block;
|
margin-left: 10px;
|
margin-top: 0;
|
vertical-align: middle;
|
}
|
</style>
|
