|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="page"> |
|
|
|
|
<div class="page" v-show="loaded"> |
|
|
|
|
<p class="page-name mb">栏目</p> |
|
|
|
|
<el-form :model="form" :rules="rules" class="input-form model" label-width="120px"> |
|
|
|
|
<div class="item-line"> |
|
|
|
|
@ -70,6 +70,14 @@ |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="subtitle" label="栏目副标题"> |
|
|
|
|
<el-input |
|
|
|
|
type="textarea" |
|
|
|
|
placeholder="请输入栏目副标题" |
|
|
|
|
v-model.trim="form.subtitle" |
|
|
|
|
@change="nameChange" |
|
|
|
|
></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="templateId" label="栏目模板"> |
|
|
|
|
<el-select v-model="form.templateId"> |
|
|
|
|
<el-option |
|
|
|
|
@ -218,18 +226,29 @@ |
|
|
|
|
</el-form> |
|
|
|
|
<div class="btns"> |
|
|
|
|
<el-button type="primary" @click="submit(0)">确定</el-button> |
|
|
|
|
<el-button @click="$router.back()">取消</el-button> |
|
|
|
|
<el-button @click="$router.push('/column')">取消</el-button> |
|
|
|
|
</div> |
|
|
|
|
<!-- 剪裁组件弹窗 --> |
|
|
|
|
<el-dialog append-to-body :visible.sync="cropperModel" width="1100px"> |
|
|
|
|
<Cropper |
|
|
|
|
ref="vueCropper" |
|
|
|
|
:is-upload="isUpload" |
|
|
|
|
:img-file="file" |
|
|
|
|
:fixed="true" |
|
|
|
|
@upload="customUpload" /> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import util from "@/libs/util"; |
|
|
|
|
import ColumnConst from '@/const/column' |
|
|
|
|
import { mapState } from 'vuex' |
|
|
|
|
import ImgUpload from '@/components/img-upload' |
|
|
|
|
import Cropper from '@/components/img-upload/Cropper' |
|
|
|
|
import Axios from 'axios' |
|
|
|
|
export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
loaded: false, |
|
|
|
|
site: this.$store.state.content.site, |
|
|
|
|
isEdit: this.$route.query.type === 'edit', |
|
|
|
|
nameRepeat: false, |
|
|
|
|
@ -261,6 +280,7 @@ export default { |
|
|
|
|
pageSize: 10, |
|
|
|
|
menuVisible: 0, |
|
|
|
|
columnBanner: '', |
|
|
|
|
subtitle: '', |
|
|
|
|
templateId: 1, |
|
|
|
|
listStyleId: 1, |
|
|
|
|
detailStyle: 1, |
|
|
|
|
@ -296,11 +316,14 @@ export default { |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
submiting: false, // 新增编辑防抖标识 |
|
|
|
|
updateTime: 0 |
|
|
|
|
updateTime: 0, |
|
|
|
|
cropperModel: false, |
|
|
|
|
isUpload: false, |
|
|
|
|
file: {}, // 当前被选择的图片文件 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
ImgUpload |
|
|
|
|
Cropper |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapState('user', [ |
|
|
|
|
@ -356,7 +379,6 @@ export default { |
|
|
|
|
next() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
console.log("🚀 ~ file: index.vue ~ line 336 ~ beforeRouteLeave ~ to", to, this.updateTime) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 栏目列表 |
|
|
|
|
@ -366,11 +388,24 @@ export default { |
|
|
|
|
columnName: '', |
|
|
|
|
templateId: '', |
|
|
|
|
typeId : '', |
|
|
|
|
isSort: 0 |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
this.columns = data |
|
|
|
|
this.isEdit && this.getData() |
|
|
|
|
if (this.isEdit) { |
|
|
|
|
this.getData() |
|
|
|
|
this.handleId(data) |
|
|
|
|
} else { |
|
|
|
|
this.loaded = true |
|
|
|
|
} |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
// 给当前栏目加上disabled禁止选中 |
|
|
|
|
handleId(list) { |
|
|
|
|
list.forEach(e => { |
|
|
|
|
if (this.isEdit && e.id == this.form.id) e.disabled = true |
|
|
|
|
e.children.length ? this.handleId(e.children) : delete e.children |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 文章列表 |
|
|
|
|
getArticle() { |
|
|
|
|
// 站内链接/其他站点链接 |
|
|
|
|
@ -390,14 +425,14 @@ export default { |
|
|
|
|
this.$post(`${this.api.findColumn}?id=${this.form.id}`).then(({ data }) => { |
|
|
|
|
this.form = data |
|
|
|
|
if (data.typeId === 2) { |
|
|
|
|
let link = data.linkAddress |
|
|
|
|
if (link) { |
|
|
|
|
link = link.split(',').map(e => +e) |
|
|
|
|
const article = +link.splice(link.length - 1, 1) // 获取文章id（文章id是附在linkAddress最后面的id） |
|
|
|
|
if (data.linkAddress) { |
|
|
|
|
const columnArticle = data.linkAddress.split('-') |
|
|
|
|
const column = columnArticle[0].split(',').map(e => +e) |
|
|
|
|
const article = columnArticle[1] || '' // 获取文章id（文章id是附在linkAddress最后面的id） |
|
|
|
|
// 获取文章 |
|
|
|
|
this.$post(this.api.queryArticle, { |
|
|
|
|
siteId: this.site.id, |
|
|
|
|
columnIds: [link[link.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id |
|
|
|
|
columnIds: [column[column.length - 1]], // 截取走最后面的文章id，最后一个id就是栏目id |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 1000, |
|
|
|
|
title: '' |
|
|
|
|
@ -405,16 +440,22 @@ export default { |
|
|
|
|
this.articles = res.data.records |
|
|
|
|
// 站内链接/其他站点链接 |
|
|
|
|
if (data.connectionType === 1) { |
|
|
|
|
this.links = link |
|
|
|
|
this.links = column |
|
|
|
|
this.form.linkAddress = '' |
|
|
|
|
this.article = article |
|
|
|
|
if (article) this.article = +article |
|
|
|
|
} else if (data.connectionType === 3) { |
|
|
|
|
this.otherLink = link |
|
|
|
|
this.otherLink = column |
|
|
|
|
this.form.linkAddress = '' |
|
|
|
|
this.otherArticle = article |
|
|
|
|
if (article) this.otherArticle = +article |
|
|
|
|
} |
|
|
|
|
this.$nextTick(() => { |
|
|
|
|
this.updateTime = 1 |
|
|
|
|
}) |
|
|
|
|
this.loaded = true |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
this.loaded = true |
|
|
|
|
} |
|
|
|
|
}).catch(err => {}) |
|
|
|
|
}, |
|
|
|
|
@ -446,6 +487,42 @@ export default { |
|
|
|
|
this.nameRepeat = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
customUpload(data) { |
|
|
|
|
// 自定义upload事件 |
|
|
|
|
// console.log(data); |
|
|
|
|
// let _data = this.compress(img); |
|
|
|
|
const blob = this.dataURItoBlob(data) |
|
|
|
|
const formData = new FormData() |
|
|
|
|
formData.append('file', blob, 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' |
|
|
|
|
}, |
|
|
|
|
}).then(({ data }) => { |
|
|
|
|
|
|
|
|
|
}).catch(res => {}) |
|
|
|
|
// this.$api[this.uploadMethodName]({ |
|
|
|
|
// data: formData, |
|
|
|
|
// showLoading: false |
|
|
|
|
// }).then(res => { |
|
|
|
|
// // 上传成功将照片传回父组件 |
|
|
|
|
// console.log(this.uploadList) |
|
|
|
|
// this.uploadList = this.isSingle ? res : this.uploadList.concat(res) |
|
|
|
|
// this.uploadList.forEach(item => { |
|
|
|
|
// item.name = item.fileId |
|
|
|
|
// item.url = `/common-service/file/downloadFileFromOSS?key=${item.fileId}` |
|
|
|
|
// }) |
|
|
|
|
// }).catch(() => {}) |
|
|
|
|
this.isUpload = false |
|
|
|
|
this.cropperModel = false |
|
|
|
|
}, |
|
|
|
|
// 导入前的钩子 |
|
|
|
|
beforeUpload(file) { |
|
|
|
|
const { size, name } = file |
|
|
|
|
@ -490,13 +567,13 @@ export default { |
|
|
|
|
const { links, article, otherLink, otherArticle } = this |
|
|
|
|
if (form.connectionType === 1) { |
|
|
|
|
if (!links.length) return util.errorMsg('请选择站内链接') |
|
|
|
|
if (!article) return util.errorMsg('请选择文章') |
|
|
|
|
form.linkAddress = links.join() + ',' + article |
|
|
|
|
form.linkAddress = links.join() |
|
|
|
|
if (article) form.linkAddress += '-' + article |
|
|
|
|
} |
|
|
|
|
if (form.connectionType === 3) { |
|
|
|
|
if (!otherLink.length) return util.errorMsg('请选择栏目') |
|
|
|
|
if (!otherArticle) return util.errorMsg('请选择文章') |
|
|
|
|
form.linkAddress = otherLink.join() + ',' + otherArticle |
|
|
|
|
form.linkAddress = otherLink.join() |
|
|
|
|
if (otherArticle) form.linkAddress += '-' + otherArticle |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.submiting = true |
|
|
|
|
|
