You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
302 lines
9.5 KiB
302 lines
9.5 KiB
<template> |
|
<!-- 内容 --> |
|
<div> |
|
<el-dialog title="编辑内容" |
|
:visible.sync="visible" |
|
width="700px" |
|
custom-class="module" |
|
:close-on-click-modal="false" |
|
:before-close="close"> |
|
<el-form ref="form" |
|
:model="data.form" |
|
:rules="rules" |
|
:label-width="data.labelWidth"> |
|
<el-form-item v-for="(item, i) in data.forms" |
|
:key="i" |
|
:prop="item.prop" |
|
:label="item.label"> |
|
<el-input v-if="item.type === 'input'" |
|
v-model="data.form[item.prop]" |
|
placeholder="请输入" |
|
maxlength="100"></el-input> |
|
<el-input v-if="item.type === 'textarea'" |
|
v-model="data.form[item.prop]" |
|
type="textarea" |
|
placeholder="请输入" |
|
maxlength="300"></el-input> |
|
<Editor v-if="item.type === 'editor'" |
|
api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' |
|
v-model="data.form[item.prop]" |
|
:init="editorConfig" /> |
|
<el-upload v-if="item.type === 'upload' && item.width" |
|
class="uploader" |
|
accept=".jpg,.png,.jpeg,.gif" |
|
:on-change="res => changeFile(res, data.form)" |
|
:show-file-list="false" |
|
:action="api.upload" |
|
:auto-upload="false"> |
|
<img v-if="data.form[item.prop]" |
|
:src="data.form[item.prop]" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传图片</p> |
|
</div> |
|
<div slot="tip" |
|
class="el-upload__tip"> |
|
<p>只支持.jpg,.png格式</p> |
|
</div> |
|
</el-upload> |
|
<el-upload v-if="item.type === 'upload' && !item.width" |
|
class="uploader" |
|
accept=".jpg,.png,.jpeg" |
|
:on-success="res => uploadSuccess(res, data.form)" |
|
:show-file-list="false" |
|
:headers="headers" |
|
:action="api.upload"> |
|
<img v-if="data.form[item.prop]" |
|
:src="data.form[item.prop]" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-plus"></i> |
|
<p>上传图片</p> |
|
</div> |
|
<div slot="tip" |
|
class="el-upload__tip"> |
|
<p>只支持.jpg,.png格式</p> |
|
</div> |
|
</el-upload> |
|
<template v-if="item.type === 'pic'"> |
|
<img v-if="data.form[item.prop]" |
|
:src="data.form[item.prop]" |
|
class="avatar"> |
|
<div class="uploader-default" |
|
v-else> |
|
<i class="el-icon-picture-outline"></i> |
|
</div> |
|
</template> |
|
<div v-if="item.type === 'link'" |
|
class="flex"> |
|
<el-input class="m-r-10" |
|
v-model="data.form.link.linkName"></el-input> |
|
<el-button @click="toLink(data.form)">设置链接</el-button> |
|
</div> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" |
|
class="dialog-footer"> |
|
<el-button @click="$emit('update:visible', false)">取消</el-button> |
|
<el-button type="primary" |
|
@click="contentSubmit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<Link ref="link" |
|
:visible.sync="linkVisible" |
|
:data.sync="linkForm" |
|
@linkSubmit="linkSubmit" /> |
|
|
|
<!-- 剪裁组件弹窗 --> |
|
<el-dialog title="图片裁剪" |
|
append-to-body |
|
:visible.sync="cropperModel" |
|
width="1100px" |
|
:close-on-click-modal="false"> |
|
<Cropper ref="cropper" |
|
:img-file.sync="file" |
|
:is-upload="isUpload" |
|
:fixed="fixed" |
|
:fixedNumber.sync="fixedNumber" |
|
:autoCropWidth="autoCropWidth" |
|
:autoCropHeight="autoCropHeight" |
|
@upload="customUpload" /> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Link from '@/components/modules/link' |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import Cropper from '@/components/img-upload/Cropper' |
|
import Editor from '@tinymce/tinymce-vue' |
|
import editorConfig from '@/components/editor' |
|
import Axios from 'axios' |
|
export default { |
|
props: ['data', 'visible'], |
|
components: { |
|
Link, |
|
Cropper, |
|
Editor, |
|
}, |
|
data () { |
|
return { |
|
headers: { |
|
token: Util.local.get(Setting.tokenKey) |
|
}, |
|
editorConfig, |
|
rules: {}, |
|
linkVisible: false, |
|
linkForm: {}, |
|
curIndex: 0, |
|
cropperModel: false, |
|
isUpload: false, |
|
file: {}, // 当前被选择的图片文件 |
|
curForm: {}, |
|
fixed: false, |
|
fixedNumber: [0.88, 1], |
|
autoCropWidth: 480, |
|
autoCropHeight: 124, |
|
}; |
|
}, |
|
watch: { |
|
visible (open) { |
|
// 每次打开的时候处理参数 |
|
open && this.handleForm() |
|
} |
|
}, |
|
mounted () { |
|
this.handleForm() |
|
}, |
|
methods: { |
|
// 处理form表单参数 |
|
handleForm () { |
|
const { forms, type } = this.data |
|
this.fixed = false |
|
// 这两张类型的模块才需要处理参数 |
|
if (forms) { |
|
forms.map(e => { |
|
if (e.type === 'upload' && e.width) { |
|
this.autoCropWidth = e.width |
|
this.autoCropHeight = e.height |
|
this.fixed = true |
|
this.fixedNumber = [e.width / e.height, 1] |
|
} |
|
if (e.required) { |
|
this.rules[e.prop] = [ |
|
{ |
|
required: true, |
|
message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`, |
|
trigger: e.type === 'input' ? 'blur' : 'change' |
|
} |
|
] |
|
} |
|
}) |
|
} |
|
}, |
|
close () { |
|
this.$emit('update:visible', false) |
|
}, |
|
// 图片裁剪上传事件 |
|
customUpload (data) { |
|
const formData = new FormData() |
|
formData.append('file', data, this.file.name) |
|
this.imgUpload(formData) |
|
}, |
|
// 图片上传到服务器 |
|
imgUpload (formData) { |
|
this.isUpload = true |
|
Axios({ |
|
method: 'post', |
|
url: this.api.upload, |
|
data: formData, |
|
headers: { |
|
'Content-Type': 'multipart/form-data', |
|
token: Util.local.get(Setting.tokenKey) |
|
}, |
|
}).then(({ data }) => { |
|
if (data.code === 401) { |
|
Util.errorMsg("登录过期，请重新登录"); |
|
setTimeout(() => { |
|
this.$store.dispatch('user/logout') |
|
}, 1000); |
|
return false |
|
} |
|
this.$set(this.curForm, 'pic', data.url) |
|
}).catch(res => { }) |
|
this.$refs.cropper.isDisabled = false |
|
this.isUpload = false |
|
this.cropperModel = false |
|
}, |
|
// 图片改变钩子 |
|
changeFile (file, form) { |
|
const { size, name } = file |
|
const ext = name.substring(name.lastIndexOf('.') + 1) |
|
if (!Util.isImg(ext)) { |
|
this.$message.error('请上传图片！') |
|
return false |
|
} |
|
if (size / 1024 / 1024 > 100) { |
|
this.$message.error('请上传100M以内的图片！') |
|
return false |
|
} |
|
this.file = file |
|
this.curForm = form |
|
this.cropperModel = true |
|
this.$nextTick(() => { |
|
this.$refs.cropper.updateImg({ |
|
url: window.URL.createObjectURL(file.raw), |
|
size: file.size |
|
}) |
|
}) |
|
}, |
|
// 上传成功 |
|
uploadSuccess (res, row) { |
|
this.$set(row, 'pic', res.url) |
|
}, |
|
// 展示链接设置 |
|
toLink (row, i = 0) { |
|
this.linkVisible = true |
|
this.curIndex = i |
|
this.linkForm = row.link |
|
}, |
|
// 链接设置提交 |
|
linkSubmit () { |
|
const el = this.$refs.link |
|
const data = this.data.form ? this.data.form.link : this.data.list[this.curIndex].link |
|
let name |
|
// 站内链接 |
|
if (data.connectionType === 1) { |
|
if (!data.columnId.length) return Util.errorMsg('请选择站内链接') |
|
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
|
if (data.articleId) { |
|
const item = el.articles.find(e => e.id == data.articleId) |
|
name = item ? item.title : '' |
|
} else { |
|
name = el.$refs.column.getCheckedNodes()[0].pathLabels.join('/') |
|
} |
|
} else if (data.connectionType === 3) { // 其他站点链接 |
|
if (!data.otherColumnId.length) return Util.errorMsg('请选择栏目') |
|
// 如果选择了文章，则取文章标题作为链接名称，否则取栏目标题 |
|
if (data.otherArticleId) { |
|
const item = el.articles.find(e => e.id == data.otherArticleId) |
|
name = item ? item.title : '' |
|
} else { |
|
name = el.$refs.otherColumn.getCheckedNodes()[0].pathLabels.join('/') |
|
} |
|
} else { // 站外链接 |
|
if (!data.linkAddress) return Util.errorMsg('请输入站外链接') |
|
name = data.linkAddress |
|
} |
|
data.linkName = name |
|
this.linkVisible = false |
|
}, |
|
// 模块设置提交 |
|
contentSubmit () { |
|
this.$emit('contentSubmit') |
|
}, |
|
} |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.radio-wrap { |
|
display: flex; |
|
align-items: center; |
|
.el-input { |
|
width: 200px; |
|
margin-left: -40px; |
|
} |
|
} |
|
</style> |