<template>
|
<GlobalWindow
|
:title="title"
|
width="60%"
|
:visible.sync="visible"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<el-form :model="form" ref="form" :rules="rules">
|
<el-form-item label="标题" prop="title">
|
<el-input v-model="form.title" placeholder="请输入标题" v-trim/>
|
</el-form-item>
|
<el-form-item label="概述" prop="detail">
|
<el-input type="textarea" v-model="form.detail" placeholder="请输入描述" v-trim/>
|
</el-form-item>
|
<div style="display: flex">
|
<el-form-item label="缩略图" prop="thumbnailImgurl" style="display:inline-block;flex: 1">
|
<div class="upload_wrap">
|
<UploadAvatarImage :file="{ 'imgurlfull': form.fullThumbnailImgurl, 'imgurl': form.thumbnailImgurl }" :uploadData="{folder:''}"
|
@uploadSuccess="uploadAvatarSuccess1" />
|
</div>
|
</el-form-item>
|
<el-form-item label="高清图" prop="imgurl" style="display:inline-block;flex: 3">
|
<div class="upload_wrap">
|
<UploadAvatarImage :file="{ 'imgurlfull': form.fullImgurl, 'imgurl': form.imgurl }" :uploadData="{folder:''}"
|
@uploadSuccess="uploadAvatarSuccess" />
|
</div>
|
</el-form-item>
|
</div>
|
|
<el-form-item label="内容类型" prop="jumpType" >
|
<el-radio-group v-model="form.jumpType">
|
<el-radio :label="0" :value="0">外链</el-radio>
|
<el-radio :label="1" :value="1">富文本</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="跳转内容" prop="content" >
|
<RichEditor v-if="form.jumpType === 1" :richData="form.content" :styleEditor="styleEditor" @getWangedditor="getWangedditor" :readonly="false"/>
|
<el-input v-if="form.jumpType === 0" v-model="form.content" placeholder="请输入跳转链接地址" v-trim/>
|
</el-form-item>
|
<el-form-item label="状态" prop="status" required class="form-item-status">
|
<el-switch v-model="form.status" :active-value="0" :inactive-value="1" active-color="#13ce66"/>
|
</el-form-item>
|
<el-form-item label="排序码（降序）" prop="sortnum">
|
<el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" placeholder="请输入备注" v-trim/>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import RichEditor from '@/components/common/RichEditor'
|
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
|
export default {
|
name: 'OperaCarouselWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, UploadAvatarImage, RichEditor },
|
data () {
|
return {
|
// 表单数据
|
styleEditor: 'border: 1px solid #ccc;display: inline-block;height:500px',
|
form: {
|
id: null,
|
remark: '',
|
title: '',
|
detail: '',
|
imgurl: '',
|
fullImgurl: '',
|
thumbnailImgurl: '',
|
fullThumbnailImgurl: '',
|
jumpType: 0,
|
content: '',
|
sortnum: '',
|
status: 0
|
},
|
// 验证规则
|
rules: {
|
title: [
|
{ required: true, message: '请输入标题' }
|
]
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/carousel',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
// 新建
|
if (target == null) {
|
this.$nextTick(() => {
|
this.$refs.form.resetFields()
|
this.form= {
|
id: null,
|
remark: '',
|
title: '',
|
detail: '',
|
imgurl: '',
|
imgurlFull: '',
|
thumbnailImgurl: '',
|
thumbnailImgurlFull: '',
|
jumpType: 0,
|
content: '',
|
sortnum: '',
|
status: 0
|
}
|
})
|
return
|
}
|
// 编辑
|
this.$nextTick(() => {
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
})
|
},
|
// 上传图片
|
getWangedditor (val) {
|
this.form.content = val
|
},
|
uploadAvatarSuccess (file) {
|
this.form.imgurl = file.imgurl
|
this.form.fullImgurl = file.imgurlfull
|
},
|
uploadAvatarSuccess1 (file) {
|
this.form.thumbnailImgurl = file.imgurl
|
this.form.fullThumbnailImgurl = file.imgurlfull
|
}
|
}
|
}
|
</script>
|
