|
|
|
|
@ -1,8 +1,8 @@ |
|
|
|
|
<template> |
|
|
|
|
<!-- 内容 --> |
|
|
|
|
<div> |
|
|
|
|
<el-dialog title="编辑内容" :visible.sync="visible" width="600px" custom-class="module" :close-on-click-modal="false" :before-close="close"> |
|
|
|
|
<el-table class="module-table" :data="data.list" header-align="center" row-key="id"> |
|
|
|
|
<el-dialog title="编辑内容" :visible.sync="visible" width="70%" custom-class="module" :close-on-click-modal="false" :before-close="close"> |
|
|
|
|
<el-table class="module-table" :data="list" header-align="center" row-key="id"> |
|
|
|
|
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
|
|
|
|
<el-table-column label="图片" min-width="140" align="center"> |
|
|
|
|
<template slot-scope="scope"> |
|
|
|
|
@ -30,50 +30,36 @@ |
|
|
|
|
:active-value="1" |
|
|
|
|
:inactive-value="0"> |
|
|
|
|
</el-switch> |
|
|
|
|
<i v-if="data.type === 'introduce'" class="el-icon-edit-outline del" @click="editIntro(scope.row, scope.$index)"></i> |
|
|
|
|
<i class="el-icon-edit-outline del" @click="editHistory(scope.row, scope.$index)"></i> |
|
|
|
|
<i class="el-icon-delete del" @click="delRow(data.list, scope.$index)"></i> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-table-column> |
|
|
|
|
</el-table> |
|
|
|
|
<div class="plus"> |
|
|
|
|
<i class="el-icon-circle-plus-outline" @click="editHistory(data.originForm, -1)"></i> |
|
|
|
|
</div> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="$emit('update:visible', false)">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="contentSubmit">确定</el-button> |
|
|
|
|
<el-button type="primary" @click="historySubmit">确定</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" |
|
|
|
|
@upload="customUpload" /> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
<Content :data.sync="data" :visible.sync="contentVisible" @contentSubmit="contentSubmit" /> |
|
|
|
|
</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 Axios from 'axios' |
|
|
|
|
import Content from '@/components/modules/content' |
|
|
|
|
export default { |
|
|
|
|
props: ['data', 'visible'], |
|
|
|
|
props: ['data', 'visible', 'list'], |
|
|
|
|
components: { |
|
|
|
|
Link, |
|
|
|
|
Cropper |
|
|
|
|
Content |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: Util.local.get(Setting.tokenKey) |
|
|
|
|
}, |
|
|
|
|
rules: {}, |
|
|
|
|
linkVisible: false, |
|
|
|
|
linkForm: {}, |
|
|
|
|
@ -83,176 +69,45 @@ export default { |
|
|
|
|
file: {}, // 当前被选择的图片文件 |
|
|
|
|
fileId: '', |
|
|
|
|
curForm: {}, |
|
|
|
|
fixed: false, |
|
|
|
|
fixedNumber: [0.88, 1] |
|
|
|
|
contentVisible: false, |
|
|
|
|
curModule: 0, |
|
|
|
|
curData: {}, |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
visible(open) { |
|
|
|
|
// 每次打开的时候处理参数 |
|
|
|
|
open && this.handleForm() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.handleForm() |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 处理form表单参数 |
|
|
|
|
handleForm() { |
|
|
|
|
const { forms, type } = this.data |
|
|
|
|
// 这两张类型的模块才需要处理参数 |
|
|
|
|
if (type === 'form' || type === 'introduce') { |
|
|
|
|
forms.map(e => { |
|
|
|
|
if (e.type === 'upload') { |
|
|
|
|
if (e.fixedNumber) { |
|
|
|
|
this.fixed = true |
|
|
|
|
this.fixedNumber = e.fixedNumber |
|
|
|
|
} else { |
|
|
|
|
this.fixed = false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (e.required) { |
|
|
|
|
this.rules[e.prop] = [ |
|
|
|
|
{ |
|
|
|
|
required: true, |
|
|
|
|
message: `请${e.type === 'input' ? '输入' : '选择'}${e.label}`, |
|
|
|
|
trigger: e.type === 'input' ? 'blur' : 'change' |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// 添加行 |
|
|
|
|
addRow() { |
|
|
|
|
this.editHistory(this.data.originForm, -1) |
|
|
|
|
}, |
|
|
|
|
// 编辑内容 |
|
|
|
|
editHistory(row, i = 0) { |
|
|
|
|
this.data.form = JSON.parse(JSON.stringify(row)) |
|
|
|
|
this.curModule = i |
|
|
|
|
this.contentVisible = true |
|
|
|
|
}, |
|
|
|
|
close() { |
|
|
|
|
this.$emit('update:visible', false) |
|
|
|
|
}, |
|
|
|
|
// 图片裁剪上传事件 |
|
|
|
|
customUpload(data) { |
|
|
|
|
const formData = new FormData() |
|
|
|
|
formData.append('file', data, this.file.name) |
|
|
|
|
this.imgUpload(formData) |
|
|
|
|
}, |
|
|
|
|
// 压缩图片 |
|
|
|
|
compress(img) { |
|
|
|
|
const canvas = document.createElement('canvas') |
|
|
|
|
const ctx = canvas.getContext('2d') |
|
|
|
|
// let initSize = img.src.length; |
|
|
|
|
const width = img.width |
|
|
|
|
const height = img.height |
|
|
|
|
canvas.width = width |
|
|
|
|
canvas.height = height |
|
|
|
|
// 铺底色 |
|
|
|
|
ctx.fillStyle = '#fff' |
|
|
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height) |
|
|
|
|
ctx.drawImage(img, 0, 0, width, height) |
|
|
|
|
// 进行压缩 |
|
|
|
|
const ndata = canvas.toDataURL('image/jpeg', 0.8) |
|
|
|
|
return ndata |
|
|
|
|
}, |
|
|
|
|
// base64转成bolb对象 |
|
|
|
|
dataURItoBlob(base64Data) { |
|
|
|
|
let byteString |
|
|
|
|
if (base64Data.split(',')[0].indexOf('base64') >= 0) { |
|
|
|
|
byteString = atob(base64Data.split(',')[1]) |
|
|
|
|
// 模块设置提交 |
|
|
|
|
contentSubmit() { |
|
|
|
|
this.contentVisible = false |
|
|
|
|
const { form } = this.data |
|
|
|
|
if (this.curModule === -1) { |
|
|
|
|
this.list.push(JSON.parse(JSON.stringify(this.data.form))) |
|
|
|
|
} else { |
|
|
|
|
byteString = unescape(base64Data.split(',')[1]) |
|
|
|
|
} |
|
|
|
|
const mimeString = base64Data |
|
|
|
|
.split(',')[0] |
|
|
|
|
.split(':')[1] |
|
|
|
|
.split(';')[0] |
|
|
|
|
const ia = new Uint8Array(byteString.length) |
|
|
|
|
for (let i = 0; i < byteString.length; i++) { |
|
|
|
|
ia[i] = byteString.charCodeAt(i) |
|
|
|
|
} |
|
|
|
|
return new Blob([ia], { |
|
|
|
|
type: mimeString |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 图片上传到服务器 |
|
|
|
|
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 }) => { |
|
|
|
|
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 > 5) { |
|
|
|
|
this.$message.error('请上传5M以内的图片！') |
|
|
|
|
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('/') |
|
|
|
|
const list = this.list[this.curModule] |
|
|
|
|
for (const i in form) { |
|
|
|
|
this.$set(list, i, form[i]) |
|
|
|
|
} |
|
|
|
|
} 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 |
|
|
|
|
this.data.form = JSON.parse(JSON.stringify(this.data.originForm)) |
|
|
|
|
}, |
|
|
|
|
// 模块设置提交 |
|
|
|
|
contentSubmit() { |
|
|
|
|
this.$emit('contentSubmit') |
|
|
|
|
historySubmit() { |
|
|
|
|
this.$emit('historySubmit') |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
