parent
a6a1a54449
commit
9c208766b9
15 changed files with 3674 additions and 5 deletions
|
After Width: | Height: | Size: 287 B |
@ -0,0 +1,235 @@ |
||||
<template> |
||||
<div> |
||||
<div class="cropper-content"> |
||||
<!-- 剪裁框 --> |
||||
<div class="cropper"> |
||||
<vueCropper |
||||
ref="cropper" |
||||
:img="option.img" |
||||
:output-size="option.size" |
||||
:output-type="option.outputType" |
||||
:info="true" |
||||
:full="option.full" |
||||
:can-move="option.canMove" |
||||
:can-move-box="option.canMoveBox" |
||||
:original="option.original" |
||||
:auto-crop="option.autoCrop" |
||||
:auto-crop-width="option.autoCropWidth" |
||||
:auto-crop-height="option.autoCropHeight" |
||||
:fixed-box="option.fixedBox" |
||||
:fixed="fixed" |
||||
:fixed-number="fixedNumber" |
||||
@realTime="realTime" /> |
||||
<!-- <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"></vueCropper> --> |
||||
</div> |
||||
<!-- 预览框 --> |
||||
<div |
||||
class="show-preview" |
||||
:style="{'width': '500px', 'height': '400px', 'overflow': 'hidden', 'margin': '0 25px', 'display':'flex', 'align-items' : 'center'}"> |
||||
<div :style="previews.div" class="preview"> |
||||
<img :src="previews.url" :style="previews.img" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="footer-btn"> |
||||
<!-- 缩放旋转按钮 --> |
||||
<!-- <div class="scope-btn"> |
||||
<el-button type="primary" icon="el-icon-zoom-in" @click="changeScale(1)"></el-button> |
||||
<el-button type="primary" icon="el-icon-zoom-out" @click="changeScale(-1)"></el-button> |
||||
<el-button type="primary" @click="rotateLeft">逆时针旋转</el-button> |
||||
<el-button type="primary" @click="rotateRight">顺时针旋转</el-button> |
||||
</div>--> |
||||
<!-- 确认上传按钮 --> |
||||
<div class="upload-btn"> |
||||
<el-button |
||||
type="primary" |
||||
:loading="isUpload" |
||||
:disabled="isDisabled" |
||||
@click.prevent="uploadImg('blob')"> |
||||
上传 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
VueCropper |
||||
} from 'vue-cropper' |
||||
import {compress, compressAccurately} from 'image-conversion' |
||||
export default { |
||||
components: { |
||||
VueCropper |
||||
}, |
||||
props: { |
||||
// 上传状态 |
||||
isUpload: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// 图片对象 |
||||
imgFile: { |
||||
type: Object, |
||||
require: true, |
||||
default: () => { |
||||
return { url: '', size: 10 } |
||||
} |
||||
}, |
||||
// 截图框比例 |
||||
fixedNumber: { |
||||
type: Array, |
||||
default: () => { |
||||
return [1, 0.26] |
||||
} |
||||
}, |
||||
fixed: { |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
previews: {}, // 预览数据 |
||||
option: { |
||||
img: '', // 裁剪图片的地址 (默认：空) |
||||
size: 0.8, // 裁剪生成图片的质量 (默认:1) |
||||
full: true, // 是否输出原图比例的截图 选true生成的图片会非常大 (默认:false) |
||||
outputType: 'jpg', // 裁剪生成图片的格式 (默认:jpg) |
||||
canMove: true, // 上传图片是否可以移动 (默认:true) |
||||
original: false, // 上传图片按照原始比例渲染 (默认:false) |
||||
canMoveBox: true, // 截图框能否拖动 (默认:true) |
||||
autoCrop: true, // 是否默认生成截图框 (默认:false) |
||||
autoCropWidth: 480, // 默认生成截图框宽度 (默认:80%) |
||||
autoCropHeight: 124, // 默认生成截图框高度 (默认:80%) |
||||
fixedBox: false, // 固定截图框大小 不允许改变 (默认:false) |
||||
fixed: true, // 是否开启截图框宽高固定比例 (默认:true) |
||||
fixedNumber: [1, 0.26], // 截图框比例 (默认:[1:1]) |
||||
enlarge: 1 |
||||
}, |
||||
isDisabled: false |
||||
} |
||||
}, |
||||
methods: { |
||||
changeScale(num) { |
||||
// 图片缩放 |
||||
num = num || 1 |
||||
this.$refs.cropper.changeScale(num) |
||||
}, |
||||
rotateLeft() { |
||||
// 向左旋转 |
||||
this.$refs.cropper.rotateLeft() |
||||
}, |
||||
rotateRight() { |
||||
// 向右旋转 |
||||
this.$refs.cropper.rotateRight() |
||||
}, |
||||
updateImg(file) { |
||||
this.option.img = file.url |
||||
this.option.size = file.size / 1024 > 200 ? 0.9 : 0.95 |
||||
}, |
||||
realTime(data) { |
||||
// 实时预览 |
||||
this.previews = data |
||||
}, |
||||
close() { |
||||
}, |
||||
uploadImg(type) { |
||||
this.isDisabled = true |
||||
// 将剪裁好的图片回传给父组件 |
||||
const that = this |
||||
if (type === 'blob') { |
||||
this.$refs.cropper.getCropBlob(data => { |
||||
compress(data, 0.8).then(res => { |
||||
that.$emit('upload', res) |
||||
}) |
||||
}) |
||||
} else { |
||||
this.$refs.cropper.getCropData(data => { |
||||
that.$emit('upload', data) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.cropper-content { |
||||
display: flex; |
||||
display: -webkit-flex; |
||||
justify-content: flex-end; |
||||
-webkit-justify-content: flex-end; |
||||
} |
||||
|
||||
.cropper-content .cropper { |
||||
width: 500px; |
||||
height: 400px; |
||||
} |
||||
|
||||
.cropper-content .show-preview { |
||||
flex: 1; |
||||
-webkit-flex: 1; |
||||
display: flex; |
||||
display: -webkit-flex; |
||||
justify-content: center; |
||||
-webkit-justify-content: center; |
||||
overflow: hidden; |
||||
border: 1px solid #cccccc; |
||||
background: #cccccc; |
||||
margin-left: 40px; |
||||
} |
||||
|
||||
.preview { |
||||
overflow: hidden; |
||||
border: 1px solid #cccccc; |
||||
background: #cccccc; |
||||
} |
||||
|
||||
.footer-btn { |
||||
margin-top: 30px; |
||||
display: flex; |
||||
display: -webkit-flex; |
||||
justify-content: flex-end; |
||||
-webkit-justify-content: flex-end; |
||||
} |
||||
|
||||
.footer-btn .scope-btn { |
||||
width: 500px; |
||||
display: flex; |
||||
display: -webkit-flex; |
||||
justify-content: space-between; |
||||
-webkit-justify-content: space-between; |
||||
} |
||||
|
||||
.footer-btn .upload-btn { |
||||
flex: 1; |
||||
-webkit-flex: 1; |
||||
display: flex; |
||||
display: -webkit-flex; |
||||
justify-content: center; |
||||
-webkit-justify-content: center; |
||||
} |
||||
|
||||
.footer-btn .btn { |
||||
outline: none; |
||||
display: inline-block; |
||||
line-height: 1; |
||||
white-space: nowrap; |
||||
cursor: pointer; |
||||
-webkit-appearance: none; |
||||
text-align: center; |
||||
-webkit-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
outline: 0; |
||||
margin: 0; |
||||
-webkit-transition: 0.1s; |
||||
transition: 0.1s; |
||||
font-weight: 500; |
||||
padding: 8px 15px; |
||||
font-size: 12px; |
||||
border-radius: 3px; |
||||
color: #fff; |
||||
background-color: #67c23a; |
||||
border-color: #67c23a; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,535 @@ |
||||
<template> |
||||
<div> |
||||
<!-- 多图片上传 --> |
||||
<el-upload |
||||
ref="upload" |
||||
drag |
||||
action="string" |
||||
:list-type="listType" |
||||
accept="image/*" |
||||
:on-preview="handlePreview" |
||||
:auto-upload="false" |
||||
:on-change="handleChange" |
||||
:file-list="uploadList" |
||||
class="img-upload clearfix" |
||||
:class="{ 'max-num': !isShowPlus || isPreview, describes: describe }"> |
||||
<i class="el-icon-plus"></i> |
||||
<div class="el-upload__text"> |
||||
<slot name="el-upload__text"></slot> |
||||
</div> |
||||
<div v-if="describe" slot="tip" class="el-upload__tip"> |
||||
{{ describe }} |
||||
</div> |
||||
<div slot="file" slot-scope="{ scope }" class="upload-item-container"> |
||||
<img |
||||
class="el-upload-list__item-thumbnail" |
||||
:class="{ cover: isSingle && !isNeedChange }" |
||||
:src="scope.url" |
||||
alt |
||||
@click="handlePreview(scope)" /> |
||||
<div |
||||
v-if="!isSingle && !isPreview" |
||||
class="el-upload-list__item-handover"> |
||||
<i |
||||
class="el-icon-arrow-left" |
||||
:class="{ disabled: scope.prevDisabled }" |
||||
@click.stop="movePrev(scope)"></i> |
||||
<i |
||||
class="el-icon-arrow-right" |
||||
:class="{ disabled: scope.nextDisabled }" |
||||
@click.stop="moveNext(scope)"></i> |
||||
</div> |
||||
<div v-if="isSingle && !isPreview"> |
||||
<p v-if="isNeedChange" class="tac" @click="changeImg($event)"> |
||||
更 换 |
||||
</p> |
||||
</div> |
||||
<span |
||||
v-if="!isPreview" |
||||
class="el-upload-list__item-delete" |
||||
@click="handleRemove(scope)"> |
||||
<i class="el-icon-close"></i> |
||||
</span> |
||||
</div> |
||||
</el-upload> |
||||
<!-- 多图片预览弹窗 --> |
||||
<el-dialog |
||||
append-to-body |
||||
:visible.sync="dialogVisible" |
||||
class="img_view" |
||||
top="20vh" |
||||
width="560px"> |
||||
<!-- <span class="el-carousel__arrow el-carousel__arrow--left" @click="prevAction"> |
||||
<i class="el-icon-arrow-left"></i> |
||||
</span> |
||||
<span class="el-carousel__arrow el-carousel__arrow--right" @click="nextAction"> |
||||
<i class="el-icon-arrow-right"></i> |
||||
</span>--> |
||||
<el-carousel |
||||
v-if="dialogVisible" |
||||
ref="el_carousel" |
||||
height="420px" |
||||
:autoplay="false" |
||||
:class="[uploadList.length < 2 ? 'isShowCutBtn' : '']" |
||||
:initial-index="currentNum"> |
||||
<el-carousel-item v-for="(item, index) in uploadList" :key="index"> |
||||
<img :src="item.url" alt style="width:100%" /> |
||||
</el-carousel-item> |
||||
</el-carousel> |
||||
</el-dialog> |
||||
<!-- 剪裁组件弹窗 --> |
||||
<el-dialog append-to-body :visible.sync="cropperModel" width="1100px"> |
||||
<Cropper |
||||
ref="vueCropper" |
||||
:is-upload="isUpload" |
||||
:img-file="file" |
||||
:fixed-number="fixedNumber" |
||||
:fixed="fixed" |
||||
:fixed-box="fixedBox" |
||||
@upload="customUpload" /> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Cropper from './Cropper' |
||||
export default { |
||||
name: 'Uploader', |
||||
components: { |
||||
Cropper |
||||
}, |
||||
props: { |
||||
// 上传api方法 |
||||
uploadMethodName: { |
||||
type: String, |
||||
default: '', |
||||
required: true |
||||
}, |
||||
// 最大图片数量 |
||||
maxImages: { |
||||
type: Number, |
||||
default: 9 |
||||
}, |
||||
// 是否单图 |
||||
isSingle: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// 单图模式是否显示更改按钮 |
||||
isNeedChange: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// 初始化filelist |
||||
initFileList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
// 剪裁框比例设置 |
||||
fixedNumber: { |
||||
type: Array, |
||||
default: () => [4, 3] |
||||
}, |
||||
// 是否固定宽高比例 |
||||
fixed: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
// 开启查看模式 |
||||
isPreview: { |
||||
type: Boolean, |
||||
default: false |
||||
}, |
||||
// 推荐上传描述 |
||||
describe: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
// 是否固定截图框大小 不允许改变 |
||||
fixedBox: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
isUpload: false, |
||||
file: {}, // 当前被选择的图片文件 |
||||
// dialogImageUrl: '', // 弹窗内图片链接 |
||||
uploadList: [], // 上传图片列表 |
||||
dialogVisible: false, // 展示弹窗开关 |
||||
cropperModel: false, // 剪裁组件弹窗开关 |
||||
currentNum: 0 // 当前点击的是第几张图片 |
||||
} |
||||
}, |
||||
computed: { |
||||
isShowPlus() { |
||||
if (this.isSingle && this.uploadList.length > 0) { |
||||
return false |
||||
} |
||||
if (!this.isSingle && this.uploadList.length >= this.maxImages) { |
||||
return false |
||||
} |
||||
return true |
||||
}, |
||||
listType() { |
||||
return 'picture-card' |
||||
} |
||||
}, |
||||
watch: { |
||||
uploadList(newVal) { |
||||
if (!newVal.length) { |
||||
return |
||||
} |
||||
this.uploadList.map((item, index) => { |
||||
item.prevDisabled = index === 0 |
||||
item.nextDisabled = index === this.uploadList.length - 1 |
||||
}) |
||||
this.$emit('imgupload', newVal) |
||||
}, |
||||
initFileList(newVal) { |
||||
this.updateList(newVal) |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.updateList(this.initFileList) |
||||
}, |
||||
methods: { |
||||
handlePreview(file) { |
||||
// 点击进行图片展示 |
||||
this.currentNum = this.uploadList.findIndex( |
||||
item => item.uid === file.uid |
||||
) |
||||
console.log('file--', file, this.currentNum) |
||||
// this.dialogImageUrl = file.url; |
||||
|
||||
this.dialogVisible = true |
||||
}, |
||||
// 切换图片 |
||||
prevAction() { |
||||
this.$refs.el_carousel.prev() |
||||
}, |
||||
nextAction() { |
||||
this.$refs.el_carousel.next() |
||||
}, |
||||
handleRemove(file) { |
||||
const index = this.uploadList.findIndex(item => item.uid === file.uid) |
||||
this.uploadList.splice(index, 1) |
||||
this.$emit('imgupload', this.uploadList) |
||||
console.log('查看删除文件', file, this.uploadList) |
||||
}, |
||||
handleChange(file, fileList) { |
||||
// var fileSize = file.size / 1024 > 300 |
||||
// if (fileSize) { |
||||
// this.$message.info('图片大小不能超过300k'); |
||||
// return |
||||
// } |
||||
this.file = file |
||||
this.uploadList = this.uploadList.filter( |
||||
item => item.status === 'success' |
||||
) |
||||
console.log(fileList, this.uploadList) |
||||
// 弹出剪裁框，将当前文件设置为文件 |
||||
this.cropperModel = true |
||||
this.$nextTick(() => { |
||||
if (this.$refs.vueCropper) { |
||||
this.$refs.vueCropper.isDisabled = false |
||||
this.$refs.vueCropper.updateImg() |
||||
} |
||||
}) |
||||
}, |
||||
movePrev(file) { |
||||
if (file.prevDisabled) { |
||||
return |
||||
} |
||||
const index = this.uploadList.findIndex(item => item.uid === file.uid) |
||||
this.swapArray(this.uploadList, index, index - 1) |
||||
}, |
||||
moveNext(file) { |
||||
if (file.nextDisabled) { |
||||
return |
||||
} |
||||
const index = this.uploadList.findIndex(item => item.uid === file.uid) |
||||
this.swapArray(this.uploadList, index, index + 1) |
||||
}, |
||||
swapArray(arr, index1, index2) { |
||||
arr[index1] = arr.splice(index2, 1, arr[index1])[0] |
||||
return arr |
||||
}, |
||||
changeImg($e) { |
||||
console.log($e) |
||||
}, |
||||
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) |
||||
}, |
||||
async imgUpload(formData) { |
||||
this.isUpload = true |
||||
await 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.$refs.vueCropper.isDisabled = false |
||||
}) |
||||
this.isUpload = false |
||||
this.cropperModel = false |
||||
}, |
||||
formatImgArr(arr) { |
||||
const result = arr.map((item, index) => { |
||||
if (typeof item === 'string') { |
||||
return { |
||||
url: item, |
||||
uid: `index${index}` |
||||
} |
||||
} |
||||
return item.url |
||||
|
||||
}) |
||||
return result |
||||
}, |
||||
// 压缩图片 |
||||
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]) |
||||
} else { |
||||
byteString = unescape(base64Data.split(',')[1]) |
||||
} |
||||
const mimeString = base64Data |
||||
.split(',')[0] |
||||
.split(':')[1] |
||||
.split(';')[0] |
||||
// const mimeString = 'image/jpeg' |
||||
console.log(mimeString, 'fsnajkcbnjkscsa---') |
||||
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 |
||||
}) |
||||
}, |
||||
updateList(val) { |
||||
this.uploadList = this.$copy(val).map(item => ({ |
||||
...item, |
||||
businessId: item.businessId || null, |
||||
fileId: item.fileId || item, |
||||
name: item.fileId || item, |
||||
url: `/common-service/file/downloadFileFromOSS?key=${item.fileId || |
||||
item}` |
||||
})) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
.img-upload { |
||||
// width: 840px; |
||||
margin-left: 20px; |
||||
text-align: left; |
||||
.el-upload--picture-card { |
||||
width: 120px; |
||||
height: 120px; |
||||
line-height: inherit; |
||||
} |
||||
&.max-num { |
||||
.el-upload { |
||||
display: none; |
||||
} |
||||
} |
||||
.el-upload { |
||||
border: 0; |
||||
.el-upload-dragger { |
||||
width: 120px; |
||||
height: 120px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: #fafafa; |
||||
flex-direction: column; |
||||
.el-icon-plus { |
||||
font-size: 37px; |
||||
color: #ccc; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-upload-list--picture-card { |
||||
.el-upload-list__item { |
||||
overflow: visible; |
||||
position: relative; |
||||
height: 120px; |
||||
width: 120px; |
||||
margin: 0 24px 32px 0; |
||||
// @include borderBase; |
||||
outline: 0; |
||||
} |
||||
|
||||
.upload-item-container { |
||||
display: flex; |
||||
height: 100%; |
||||
background: rgba(237, 237, 237, 0.28); |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.el-upload-list__item-thumbnail { |
||||
border-radius: 5px; |
||||
height: 76%; |
||||
&.cover { |
||||
height: 100%; |
||||
} |
||||
} |
||||
p.tac { |
||||
line-height: 28px; |
||||
color: #5f5d5d; |
||||
cursor: pointer; |
||||
} |
||||
.el-upload-list__item-handover { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 0 20px; |
||||
|
||||
> i { |
||||
cursor: pointer; |
||||
&::before { |
||||
width: 16px; |
||||
height: 16px; |
||||
display: inline-block; |
||||
box-sizing: border-box; |
||||
border-radius: 50%; |
||||
border: 1px solid #5f5d5d; |
||||
font-size: 12px; |
||||
line-height: 16px; |
||||
text-align: center; |
||||
} |
||||
&.disabled { |
||||
&::before { |
||||
border: 1px solid #939393; |
||||
color: #939393; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.el-upload-list__item-delete { |
||||
position: absolute; |
||||
right: -9px; |
||||
top: -9px; |
||||
display: block; |
||||
height: 24px; |
||||
width: 24px; |
||||
background-color: #ffffff; |
||||
border: 1px solid #d5341e; |
||||
border-radius: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
> i { |
||||
position: static; |
||||
font-size: 14px; |
||||
color: #d5341e; |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.describes { |
||||
display: flex; |
||||
.el-upload__tip { |
||||
margin-left: 8px; |
||||
color: #939393; |
||||
} |
||||
} |
||||
.v-modal { |
||||
opacity: 0.3; |
||||
} |
||||
.img_view.el-dialog__wrapper { |
||||
.el-dialog { |
||||
background: none; |
||||
box-shadow: none; |
||||
} |
||||
.el-dialog__header { |
||||
display: none; |
||||
} |
||||
.el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
.title { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
span { |
||||
line-height: 48px; |
||||
width: 80px; |
||||
height: 48px; |
||||
text-align: right; |
||||
cursor: pointer; |
||||
font-size: 14px; |
||||
color: #ffffff; |
||||
} |
||||
} |
||||
.el-carousel__indicators--horizontal { |
||||
display: none; |
||||
} |
||||
.el-carousel__arrow { |
||||
width: 40px; |
||||
height: 40px; |
||||
box-sizing: border-box; |
||||
color: #5f5d5d; |
||||
background: rgba(255, 255, 255, 0.5); |
||||
border: 1px solid #5f5d5d; |
||||
i { |
||||
&::before { |
||||
font-size: 28px; |
||||
line-height: 40px; |
||||
} |
||||
} |
||||
} |
||||
.el-carousel { |
||||
width: 100%; |
||||
} |
||||
.isShowCutBtn { |
||||
.el-carousel__arrow { |
||||
display: none; |
||||
} |
||||
} |
||||
.el-carousel__arrow.el-carousel__arrow--left { |
||||
left: 0; |
||||
} |
||||
.el-carousel__arrow.el-carousel__arrow--right { |
||||
right: 0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,69 @@ |
||||
<template> |
||||
<div class="page system" style="padding: 0"> |
||||
<div class="tabs"> |
||||
<a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a> |
||||
</div> |
||||
|
||||
<staff v-if="active == 'staff'"></staff> |
||||
<pc-role v-if="active == 'pcRole'"></pc-role> |
||||
<mobile-role v-if="active == 'mobileRole'"></mobile-role> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
import staff from "./staff"; |
||||
import pcRole from "./pcRole"; |
||||
import mobileRole from "./mobileRole"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
active: this.$route.query.type || 'staff', |
||||
tabs: { |
||||
staff: "合伙人学习管理", |
||||
pcRole: "合伙人资讯管理", |
||||
mobileRole: "方案管理" |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
staff, |
||||
pcRole, |
||||
mobileRole |
||||
}, |
||||
created() { |
||||
Setting.dynamicRoute && this.initTabs(); |
||||
}, |
||||
methods: { |
||||
tabChange(index) { |
||||
this.active = index |
||||
this.$router.push({ |
||||
path: 'parnerOperation', |
||||
query: { |
||||
...this.$route.query, |
||||
type: index |
||||
} |
||||
}) |
||||
}, |
||||
initTabs() { |
||||
const btns = this.$store.state.btns |
||||
const tab1 = btns.includes('/parner:合伙人学习管理') |
||||
const tab2 = btns.includes('/parner:合伙人资讯管理') |
||||
const tab3 = btns.includes('/parner:方案管理') |
||||
|
||||
tab1 || delete this.tabs.staff |
||||
tab2 || delete this.tabs.pcRole |
||||
tab3 || delete this.tabs.mobileRole |
||||
const type = this.$route.query.type |
||||
const keys = Object.keys(this.tabs) |
||||
this.active = keys.includes(type) ? type : keys[0] |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.system { |
||||
min-height: calc(100vh - 170px); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,967 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<p class="page-name mb">文章详情</p> |
||||
<el-form :model="form" :rules="rules" class="input-form model" label-width="140px"> |
||||
<el-form-item prop="title" label="标题"> |
||||
<el-input |
||||
id="articleTitle" |
||||
style="width: 940px" |
||||
placeholder="请输入标题" |
||||
v-model="form.title" |
||||
clearable |
||||
maxlength="100" |
||||
></el-input> |
||||
</el-form-item> |
||||
<div class="item-line"> |
||||
<el-form-item prop="releaseTime" label="发布日期"> |
||||
<el-date-picker |
||||
v-model="form.releaseTime" |
||||
type="date" |
||||
placeholder="选择日期" |
||||
format="yyyy-MM-dd" |
||||
:clearable="false" |
||||
value-format="yyyy-MM-dd"> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</div> |
||||
<div class="item-line"> |
||||
<el-form-item prop="source" label="来源"> |
||||
<el-input |
||||
placeholder="请输入来源" |
||||
v-model.trim="form.source" |
||||
clearable |
||||
maxlength="50" |
||||
class="inline-input" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="author" label="作者"> |
||||
<el-input |
||||
v-model="form.author" |
||||
clearable |
||||
maxlength="50" |
||||
class="inline-input" |
||||
></el-input> |
||||
</el-form-item> |
||||
</div> |
||||
<div class="item-line"> |
||||
<el-form-item prop="edit" label="编辑"> |
||||
<el-input |
||||
placeholder="请输入编辑" |
||||
v-model.trim="form.edit" |
||||
clearable |
||||
maxlength="50" |
||||
class="inline-input" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="audit" label="审核"> |
||||
<el-input |
||||
placeholder="请输入审核" |
||||
v-model.trim="form.audit" |
||||
clearable |
||||
maxlength="50" |
||||
class="inline-input" |
||||
></el-input> |
||||
</el-form-item> |
||||
</div> |
||||
|
||||
<div class="item-line"> |
||||
<el-form-item prop="source" label="所属分类"> |
||||
<el-select style="width: 234px;" v-model="form.classificationId"> |
||||
<template v-for="item in classifications"> |
||||
<el-option |
||||
v-if="item.id" |
||||
:key="item.id" |
||||
:label="item.classificationName" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</template> |
||||
</el-select> |
||||
<el-button class="set-btn" type="primary" @click="setClass">设置</el-button> |
||||
</el-form-item> |
||||
<el-form-item prop="author" label="主题标签"> |
||||
<el-select style="width: 234px;" v-model="form.lableId" multiple> |
||||
<template v-for="item in labels"> |
||||
<el-option |
||||
v-if="item.id" |
||||
:key="item.id" |
||||
:label="item.labelName" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</template> |
||||
</el-select> |
||||
<el-button class="set-btn" type="primary" @click="setLabel">设置</el-button> |
||||
</el-form-item> |
||||
</div> |
||||
<el-form-item prop="summary" label="摘要"> |
||||
<el-input |
||||
style="width: 940px" |
||||
type="textarea" |
||||
v-model.trim="form.summary" |
||||
:rows="3" |
||||
clearable |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="titleImg" label="封面图"> |
||||
<el-upload |
||||
class="avatar-uploader" |
||||
accept=".jpg,.png,.jpeg,.gif" |
||||
:on-change="file => changeFile(file, 0)" |
||||
:show-file-list="false" |
||||
:action="this.api.fileupload" |
||||
:auto-upload="false" |
||||
> |
||||
<img v-if="form.titleImg" :src="form.titleImg" class="avatar"> |
||||
<div class="uploader-default" v-else> |
||||
<img class="plus" src="@/assets/img/plus.png" alt=""> |
||||
<p>点击上传</p> |
||||
</div> |
||||
</el-upload> |
||||
</el-form-item> |
||||
<el-form-item prop="mainBody" label="正文"> |
||||
<Editor api-key='rnk6zw9v267xqz7pf98twt1vmrvltmd436je7a642pckltda' v-model="form.mainBody" :init="editorConfig" /> |
||||
</el-form-item> |
||||
<el-form-item prop="file" label="文件上传"> |
||||
<el-upload |
||||
:before-upload="fileBeforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-success="uploadSuccessFile" |
||||
:action="this.api.fileupload" |
||||
:file-list="form.fileList" |
||||
:headers="headers" |
||||
> |
||||
<el-button>上传</el-button> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="btns"> |
||||
<el-button type="primary" @click="submit(1)">发布</el-button> |
||||
<el-button @click="submit(0)">保存草稿</el-button> |
||||
<el-button @click="back">取消</el-button> |
||||
</div> |
||||
<!-- 剪裁组件弹窗 --> |
||||
<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="true" |
||||
:fixedNumber.sync="fixedNumber" |
||||
@upload="customUpload" /> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="所属分类设置" :visible.sync="classVisible" width="500px" :close-on-click-modal="false" class="manage-dia" :before-close="closeClass"> |
||||
<div class="plus"> |
||||
<i class="el-icon-circle-plus-outline" @click="addClass"></i> |
||||
</div> |
||||
<el-table :data="classifications" ref="table" header-align="center" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="classificationName" label="分类名称" align="center" min-width="130"> |
||||
<template slot-scope="scope"> |
||||
<el-input |
||||
v-if="scope.row.edit" |
||||
placeholder="请输入分类名称" |
||||
v-model="scope.row.classificationName" |
||||
clearable |
||||
maxlength="30" |
||||
></el-input> |
||||
<span v-else>{{ scope.row.classificationName }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60">否</el-table-column> |
||||
<el-table-column label="操作" align="center" min-width="60"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitClass(scope.row)"></i> |
||||
<i v-else class="el-icon-edit edit" @click="editClass(scope.row)"></i> |
||||
<i class="el-icon-delete del" @click="delClass(scope.row, scope.$index)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<span slot="footer"> |
||||
<el-button @click="closeClass">返回</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="主题标签设置" :visible.sync="labelVisible" width="500px" :close-on-click-modal="false" class="manage-dia" :before-close="closeLabel"> |
||||
<div class="plus"> |
||||
<i class="el-icon-circle-plus-outline" @click="addLabel"></i> |
||||
</div> |
||||
<el-table :data="labels" ref="table" header-align="center" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="labelName" label="主题名称" align="center" min-width="130"> |
||||
<template slot-scope="scope"> |
||||
<el-input |
||||
v-if="scope.row.edit" |
||||
placeholder="请输入主题名称" |
||||
v-model="scope.row.labelName" |
||||
clearable |
||||
maxlength="30" |
||||
></el-input> |
||||
<span v-else>{{ scope.row.labelName }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60">否</el-table-column> |
||||
<el-table-column label="操作" align="center" min-width="60"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitLabel(scope.row)"></i> |
||||
<i v-else class="el-icon-edit edit" @click="editLabel(scope.row)"></i> |
||||
<i class="el-icon-delete del" @click="delLabel(scope.row, scope.$index)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<span slot="footer"> |
||||
<el-button @click="closeLabel">返回</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import { mapState } from 'vuex' |
||||
import Editor from 'tinymce' |
||||
import editorConfig from './editor' |
||||
import Cropper from '@/components/img-upload/Cropper' |
||||
import Axios from 'axios' |
||||
export default { |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: sessionStorage.getItem('token') |
||||
}, |
||||
nameRepeat: false, |
||||
sites: [], |
||||
detailStyle: [], |
||||
columns: [], |
||||
articles: [], |
||||
otherArticles: [], |
||||
columnProps: { |
||||
checkStrictly: true, |
||||
value: 'id', |
||||
label: 'columnName' |
||||
}, |
||||
links: [], |
||||
article: '', |
||||
otherColumns: [], |
||||
otherLink: [], |
||||
otherArticle: '', |
||||
form: { |
||||
id: this.$route.query.id || '', |
||||
templateStatus: 0, |
||||
articleTemplate: '', |
||||
doi: '', |
||||
quote: '', |
||||
articleKeyWord: '', |
||||
publicationTypeId: '', |
||||
publicationYear: '', |
||||
periodicalName: '', |
||||
reel: '', |
||||
documentNumber: '', |
||||
activityEndTime: '', |
||||
activityStartTime: '', |
||||
time: '', |
||||
lectureSeries: '', |
||||
onlineLocation: '', |
||||
offlineLocation: '', |
||||
keynoteSpeaker: '', |
||||
eventProfile: '', |
||||
author: '', |
||||
edit: '', |
||||
audit: '', |
||||
bannerImg: '', |
||||
lableId: [], |
||||
classificationId: '', |
||||
columnId: +this.$route.query.columnId, |
||||
file: '', |
||||
isRelease: 0, |
||||
mainBody: '', |
||||
releaseTime: new Date(), |
||||
source: '', |
||||
summary : '', |
||||
title: '', |
||||
titleImg: '', |
||||
connectionType : 1, |
||||
linkAddress: '', |
||||
siteSelection: '', |
||||
fileList: [], |
||||
isOpen: 1 |
||||
}, |
||||
rules: { |
||||
title: [ |
||||
{ required: true, message: '请输入标题', trigger: 'blur' } |
||||
], |
||||
columnId: [ |
||||
{ required: true, message: '请选择所属栏目', trigger: 'change' } |
||||
], |
||||
time: [ |
||||
{ required: true, message: '请选择起始时间', trigger: 'change' } |
||||
], |
||||
classificationId: [ |
||||
{ required: false, message: '请选择所属分类', trigger: 'change' } |
||||
], |
||||
keynoteSpeaker: [ |
||||
{ required: true, message: '请输入主讲人', trigger: 'blur' } |
||||
], |
||||
eventProfile: [ |
||||
{ required: true, message: '请输入活动简介', trigger: 'blur' } |
||||
], |
||||
releaseTime: [ |
||||
{ required: true, message: '请选择发布日期', trigger: 'change' } |
||||
], |
||||
publicationYear: [ |
||||
{ required: true, message: '请选择出版年份', trigger: 'change' } |
||||
], |
||||
titleImg: [ |
||||
{ required: true, message: '请上传封面图', trigger: 'change' } |
||||
], |
||||
mainBody: [ |
||||
{ required: true, message: '请输入正文', trigger: 'blur' } |
||||
], |
||||
connectionType: [ |
||||
{ required: true, message: '请选择连接类型', trigger: 'blur' } |
||||
], |
||||
}, |
||||
columnInfo: {}, |
||||
editorConfig, |
||||
submiting: false, // 新增编辑防抖标识 |
||||
pass: false, |
||||
uploading: 0, |
||||
updateTime: 0, |
||||
cropperModel: false, |
||||
isUpload: false, |
||||
fixedNumber: [1.76, 1], |
||||
file: {}, // 当前被选择的图片文件 |
||||
isBanner: 0, |
||||
classifications: [], |
||||
classVisible: false, |
||||
labels: [], |
||||
labelVisible: false |
||||
}; |
||||
}, |
||||
components: { |
||||
Editor, |
||||
Cropper |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(val){ |
||||
this.updateTime++ |
||||
}, |
||||
deep:true |
||||
} |
||||
}, |
||||
// 页面离开的时候如果没有保存则提示 |
||||
beforeRouteLeave(to, from, next) { |
||||
if (this.submiting) { |
||||
next() |
||||
} else if (!this.pass) { |
||||
// 更改了信息才需要提示 |
||||
if (this.updateTime > 1) { |
||||
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.submit(this.form.isRelease, next) |
||||
}).catch(() => { |
||||
next() |
||||
}) |
||||
} else { |
||||
next() |
||||
} |
||||
} else { |
||||
next() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getArticle() |
||||
this.getLabel() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getArticle() { |
||||
this.$post(this.api.queryArticle, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
title: '', |
||||
isDisable: 0 |
||||
}).then(({ data }) => { |
||||
this[inner ? 'articles' : 'otherArticles'] = data.records.filter(e => e.isRelease) // 只显示已发布的文章 |
||||
}).catch(err => {}) |
||||
}, |
||||
// 获取所属分类 |
||||
getClassification() { |
||||
this.$post(`${this.api.queryClassif}?siteId=${this.site.id}&templateId=${this.columnInfo.templateId}`).then(({ data }) => { |
||||
this.classifications = data |
||||
}).catch(err => {}) |
||||
}, |
||||
// 显示所属分类弹框 |
||||
setClass() { |
||||
this.classVisible = true |
||||
}, |
||||
// 新增所属分类 |
||||
addClass() { |
||||
this.classifications.push({ |
||||
edit: true, |
||||
id: '', |
||||
classificationName: '' |
||||
}) |
||||
}, |
||||
// 编辑所属分类 |
||||
editClass(row) { |
||||
this.$set(row, 'edit', 1) |
||||
}, |
||||
// 删除所属分类 |
||||
delClass(row, i) { |
||||
if (row.id) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.delClassif}?id=${row.id}`).then(res => { |
||||
Util.successMsg('删除成功') |
||||
this.getClassification() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
this.classifications.splice(i, 1) |
||||
} |
||||
}, |
||||
// 提交所属分类 |
||||
submitClass(row, showMsg = 1) { |
||||
if (!row.classificationName) return Util.errorMsg('请输入分类名称') |
||||
this.$post(`${this.api.checkClassif}?classificationName=${row.classificationName}&siteId=${this.site.id}&classificationId=${row.id}`).then(res => { |
||||
this.$post(this.api[row.id ? 'updateClassif' : 'saveClassif'], { |
||||
classificationName: row.classificationName, |
||||
templateId: this.columnInfo.templateId, |
||||
id: row.id, |
||||
siteId: this.site.id, |
||||
editorId: this.userId, |
||||
founderId: this.userId |
||||
}).then(res => { |
||||
showMsg && Util.successMsg((row.id ? '修改' : '新增') + '成功') |
||||
this.getClassification() |
||||
}).catch(res => {}) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 关闭所属分类 |
||||
closeClass() { |
||||
const list = this.classifications |
||||
if (list.find(e => e.edit && e.classificationName)) { |
||||
this.$confirm('所填写内容暂未保存，是否保存？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
list.map(e => { |
||||
e.edit && e.classificationName && this.submitClass(e, 0) |
||||
}) |
||||
this.classVisible = false |
||||
}).catch(() => { |
||||
this.classVisible = false |
||||
}) |
||||
} else { |
||||
this.classVisible = false |
||||
} |
||||
}, |
||||
|
||||
|
||||
// 获取标签 |
||||
getLabel() { |
||||
this.$post(`${this.api.queryLabel}?siteId=${this.site.id}`).then(({ data }) => { |
||||
this.labels = data |
||||
}).catch(err => {}) |
||||
}, |
||||
// 显示标签弹框 |
||||
setLabel() { |
||||
this.labelVisible = true |
||||
}, |
||||
// 新增标签 |
||||
addLabel() { |
||||
this.labels.push({ |
||||
edit: true, |
||||
id: '', |
||||
labelName: '' |
||||
}) |
||||
}, |
||||
// 编辑标签 |
||||
editLabel(row) { |
||||
this.$set(row, 'edit', 1) |
||||
}, |
||||
// 删除标签 |
||||
delLabel(row, i) { |
||||
if (row.id) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.delLabel}?id=${row.id}`).then(res => { |
||||
Util.successMsg('删除成功') |
||||
this.getLabel() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
this.labels.splice(i, 1) |
||||
} |
||||
}, |
||||
// 提交标签 |
||||
submitLabel(row, showMsg = 1) { |
||||
if (!row.labelName) return Util.errorMsg('请输入主题名称') |
||||
this.$post(`${this.api.checkLabel}?labelName=${row.labelName}&siteId=${this.site.id}&labelId=${row.id}`).then(res => { |
||||
this.$post(this.api[row.id ? 'updateLabel' : 'saveLabel'], { |
||||
labelName: row.labelName, |
||||
id: row.id, |
||||
siteId: this.site.id, |
||||
editorId: this.userId, |
||||
founderId: this.userId |
||||
}).then(res => { |
||||
showMsg && Util.successMsg((row.id ? '修改' : '新增') + '成功') |
||||
this.getLabel() |
||||
}).catch(res => {}) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 关闭所属分类 |
||||
closeLabel() { |
||||
const list = this.labels |
||||
if (list.find(e => e.edit && e.labelName)) { |
||||
this.$confirm('所填写内容暂未保存，是否保存？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
list.map(e => { |
||||
e.edit && e.labelName && this.submitLabel(e, 0) |
||||
}) |
||||
this.labelVisible = false |
||||
}).catch(() => { |
||||
this.labelVisible = false |
||||
}) |
||||
} else { |
||||
this.labelVisible = false |
||||
} |
||||
}, |
||||
|
||||
// 文章名称判重 |
||||
nameChange(){ |
||||
const { title, level, id } = this.form |
||||
if(title && title !== this.originalName){ |
||||
this.$post(this.api.checkIfTheTitleIsRepeat, { |
||||
siteId: this.site.id, |
||||
title, |
||||
id: id || '' |
||||
}).then(res => { |
||||
this.nameRepeat = false |
||||
}).catch(res => { |
||||
this.nameRepeat = true |
||||
}) |
||||
}else{ |
||||
this.nameRepeat = 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]) |
||||
} 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 }) => { |
||||
let url = this.form[this.isBanner ? 'bannerImg' : 'titleImg'] |
||||
url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) // 删除替换掉的图片 |
||||
this.form[this.isBanner ? 'bannerImg' : 'titleImg'] = data.url |
||||
}).catch(res => {}) |
||||
this.$refs.cropper.isDisabled = false |
||||
this.isUpload = false |
||||
this.cropperModel = false |
||||
}, |
||||
// 图片改变钩子 |
||||
changeFile(file, isBanner) { |
||||
this.fixedNumber = isBanner ? [1, 0.26] : [1.76, 1] |
||||
this.isBanner = isBanner |
||||
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.cropperModel = true |
||||
this.$nextTick(() => { |
||||
this.$refs.cropper.updateImg({ |
||||
url: window.URL.createObjectURL(file.raw), |
||||
size: file.size |
||||
}) |
||||
}) |
||||
}, |
||||
// 附件删除 |
||||
handleRemove(e, fileList) { |
||||
e.id ? this.$post(`${this.api.delContentFile}?id=${e.id}`).then(res => { |
||||
this.form.fileList = fileList |
||||
}).catch(res => {}) : (this.form.fileList = fileList) |
||||
}, |
||||
// banner上传成功 |
||||
uploadSuccessBanner(res) { |
||||
let url = this.form.bannerImg |
||||
url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) |
||||
this.form.bannerImg = res.url |
||||
}, |
||||
// 附件上传之前的钩子 |
||||
fileBeforeUpload(file) { |
||||
this.uploading++ |
||||
}, |
||||
// 附件上传成功 |
||||
uploadSuccessFile(res) { |
||||
this.uploading-- |
||||
this.form.id ? |
||||
this.$post(this.api.saveContentFile, { |
||||
contentId: this.form.id, |
||||
editorId: this.userId, |
||||
founderId: this.userId, |
||||
id: '', |
||||
fileName: res.original, |
||||
filePath: res.url |
||||
}).then(({ data }) => { |
||||
this.form.fileList.push({ |
||||
name: res.original, |
||||
url: res.url, |
||||
id: data |
||||
}) |
||||
}).catch(res => {}) : |
||||
this.form.fileList.push({ |
||||
name: res.original, |
||||
url: res.url |
||||
}) |
||||
}, |
||||
// 预览 |
||||
preview() { |
||||
window.open((Setting.isDev ? `http://${location.hostname}:8095` : this.$store.state.content.site.domainName) + `#/article?articleId=${this.form.id}&siteId=${this.form.siteId}&id=${this.form.columnId}`) |
||||
}, |
||||
// 返回 |
||||
back() { |
||||
this.pass = true |
||||
const { updateTime } = this |
||||
// 更改了信息才需要提示 |
||||
if (updateTime > 1) { |
||||
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.submit(this.form.isRelease) |
||||
}).catch(() => { |
||||
this.$router.back() |
||||
}) |
||||
} else { |
||||
this.$router.back() |
||||
} |
||||
}, |
||||
// 更新附件的状态为发布 |
||||
updateFile(files, form, quoteId) { |
||||
files.map(e => { |
||||
this.$post(this.api.updateFile, { |
||||
id: e, |
||||
isRelease: form.isRelease, |
||||
quote: form.title, |
||||
quoteId |
||||
}).then(res => {}).catch(err => {}) |
||||
}) |
||||
}, |
||||
// 提交 |
||||
submit(isRelease, next) { |
||||
if (this.submiting) return false |
||||
const form = JSON.parse(JSON.stringify(this.form)) |
||||
if (!form.title) return Util.errorMsg('请填写标题') |
||||
if (this.nameRepeat) return Util.errorMsg('该标题已重复!') |
||||
if (typeof form.fatherId === 'object') form.fatherId = form.fatherId[form.fatherId.length - 1] |
||||
const tId = form.articleTemplate |
||||
// 如果是发布 |
||||
if (isRelease) { |
||||
if (tId !== 25) { |
||||
if (!form.releaseTime) return Util.errorMsg('请选择发布日期') |
||||
} |
||||
if (tId === 22 || tId === 23 || tId === 24) { |
||||
if (!form.titleImg ) return Util.errorMsg('请上传封面') |
||||
} |
||||
if (tId === 25) { |
||||
if ((!form.time || !form.time.length) && isRelease) return Util.errorMsg('请选择起止时间') |
||||
form.activityStartTime = form.time[0] |
||||
form.activityEndTime = form.time[1] |
||||
} |
||||
if (tId === 24 && form.connectionType !== 2) { |
||||
if (form.connectionType === 1) { |
||||
if (!this.links.length) return Util.errorMsg('请选择站内链接') |
||||
} |
||||
if (!this.otherLink.length && form.connectionType === 3) { |
||||
if (!this.otherLink.length) return Util.errorMsg('请选择栏目') |
||||
} |
||||
} |
||||
if ((tId === 22 || tId === 23 || tId === 25) && !form.mainBody) return Util.errorMsg('请输入正文') |
||||
} |
||||
if (this.uploading) return Util.errorMsg('文件正在上传，请上传完成后再发布') |
||||
if (form.connectionType === 1) { |
||||
form.linkAddress = this.links.join() |
||||
if (this.article) form.linkAddress += '-' + this.article |
||||
} else if (form.connectionType === 3) { |
||||
form.linkAddress = this.otherLink.join() |
||||
if (this.otherArticle) form.linkAddress += '-' + this.otherArticle |
||||
} |
||||
const { columnId, bannerImg, fileList, titleImg } = form |
||||
const fileId = [] |
||||
if (typeof columnId === 'object') form.columnId = columnId[columnId.length - 1] // 如果更换了栏目id，值会变成数组，需要手动获取最后一个 |
||||
// 获取几个附件的id，url后面的数字串即是附件id |
||||
if (bannerImg) fileId.push(bannerImg.substr(bannerImg.lastIndexOf('/') + 1)) |
||||
if (titleImg) fileId.push(titleImg.substr(titleImg.lastIndexOf('/') + 1)) |
||||
fileList && fileList.map(e => { |
||||
fileId.push(e[e.url ? 'url' : 'filePath'].substr(e[e.url ? 'url' : 'filePath'].lastIndexOf('/') + 1)) |
||||
}) |
||||
form.lableId = form.lableId.join(',') |
||||
|
||||
form.releaseTime = Util.formatDate('yyyy-MM-dd', new Date(form.releaseTime)) // 发布日期转化为年月日格式 |
||||
|
||||
form.isRelease = isRelease |
||||
this.submiting = true |
||||
if (form.id) { |
||||
delete form.children |
||||
form.editorId = +this.$store.state.user.userId |
||||
this.$post(this.api.updateArticle, form).then(res => { |
||||
this.updateFile(fileId, form, form.id) |
||||
Util.successMsg('修改成功') |
||||
next ? next() : this.$router.push(`list?columnId=` + form.columnId) |
||||
}).catch(err => { |
||||
this.submiting = false |
||||
}) |
||||
} else { |
||||
this.$post(this.api.saveArticle, form).then(({ data }) => { |
||||
this.updateFile(fileId, form, data) |
||||
// 新增文章完后需要把上传的附件添加到文章附件表 |
||||
form.fileList.map(e => { |
||||
this.$post(this.api.saveContentFile, { |
||||
contentId: data, |
||||
editorId: this.userId, |
||||
founderId: this.userId, |
||||
id: '', |
||||
fileName: e.name, |
||||
filePath: e.url |
||||
}).then(res => {}).catch(err => {}) |
||||
}) |
||||
Util.successMsg('创建成功') |
||||
next ? next() : this.$router.back() |
||||
}).catch(err => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$upload-width: 220px; |
||||
$upload-height: 102px; |
||||
$upload-lg-height: 102px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
border: 1px solid #DCDEE0; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
.uploader-default { |
||||
display: flex; |
||||
height: $upload-height; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
background: #FAFAFA; |
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
} |
||||
&.avatar-uploader-lg { |
||||
.el-upload { |
||||
width: 100%; |
||||
max-width: 820px; |
||||
height: $upload-lg-height; |
||||
|
||||
.uploader-default { |
||||
height: $upload-lg-height; |
||||
} |
||||
} |
||||
} |
||||
.avatar { |
||||
display: block; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
} |
||||
.avatar-lg { |
||||
display: block; |
||||
width: 100%; |
||||
height: $upload-lg-height; |
||||
} |
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
p { |
||||
font-size: 12px; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
.style-wrap { |
||||
display: flex; |
||||
margin-top: 10px; |
||||
.label { |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
.styles { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 955px; |
||||
// height: 320px; |
||||
margin-top: 20px; |
||||
overflow: auto; |
||||
li { |
||||
margin: 0 20px 10px 0; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
&:hover .review { |
||||
border-color: #2962FF; |
||||
} |
||||
} |
||||
.review { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 170px; |
||||
height: 112px; |
||||
margin-bottom: 10px; |
||||
border: 1px solid #DCDEE0; |
||||
border-radius: 2px; |
||||
img { |
||||
width: 80px; |
||||
} |
||||
.is-link { |
||||
width: 50px; |
||||
} |
||||
} |
||||
} |
||||
.info { |
||||
position: absolute; |
||||
top: 8px; |
||||
left: -32px; |
||||
cursor: pointer; |
||||
} |
||||
.plus { |
||||
margin-bottom: 10px; |
||||
font-size: 18px; |
||||
color: #2962FF; |
||||
text-align: right; |
||||
cursor: pointer; |
||||
} |
||||
.set-btn { |
||||
margin-left: 10px !important; |
||||
} |
||||
.manage-dia { |
||||
.edit, .del { |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
} |
||||
.edit { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
.input-form { |
||||
&.model { |
||||
height: calc(100vh - 200px); |
||||
padding-right: 20px; |
||||
overflow: auto; |
||||
.el-form-item__label { |
||||
padding-right: 20px; |
||||
} |
||||
.lg .el-form-item__label { |
||||
padding-right: 43px; |
||||
} |
||||
} |
||||
.item-line { |
||||
display: flex; |
||||
.el-form-item:not(:last-child) { |
||||
margin-right: 200px; |
||||
} |
||||
} |
||||
.line { |
||||
margin-bottom: 24px; |
||||
border-bottom: 1px dashed #C2C2C2; |
||||
} |
||||
.el-form-item--small.el-form-item { |
||||
margin-bottom: 24px; |
||||
} |
||||
.el-input, .el-select { |
||||
width: 300px; |
||||
} |
||||
.el-select .el-input { |
||||
width: auto; |
||||
} |
||||
.el-textarea { |
||||
width: 550px; |
||||
} |
||||
.auto, .auto .el-input { |
||||
width: auto; |
||||
} |
||||
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before { |
||||
font-size: 18px; |
||||
vertical-align: -4px; |
||||
color: #F5222D; |
||||
} |
||||
} |
||||
.btns { |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-input class="keyword" placeholder="请输入标题" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" @click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:新增'" type="primary" @click="add" >新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100"></el-table-column> |
||||
<el-table-column prop="totalBrowsing" label="已学习人数" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" label="状态" align="center" min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import { mapMutations } from 'vuex' |
||||
export default { |
||||
data() { |
||||
return { |
||||
keyword: '', |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
modifiedTimeSort: '', |
||||
publicationTimeSort: '', |
||||
ordinalSort: 0, |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
// this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData() { |
||||
const { keyword } = this |
||||
const data = { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
ordinalSort: this.ordinalSort, |
||||
title: this.field === 'title' ? keyword : '', |
||||
founder: this.field === 'founder' ? keyword : '', |
||||
column: this.field === 'column' ? keyword : '', |
||||
editor: this.field === 'editor' ? keyword : '' |
||||
} |
||||
if (this.modifiedTimeSort !== '') data.modifiedTimeSort = this.modifiedTimeSort |
||||
if (this.publicationTimeSort !== '') data.publicationTimeSort = this.publicationTimeSort |
||||
this.$post(this.api.queryArticle, data).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => {}) |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.deleteArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff(val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {}) |
||||
}, |
||||
// 新增 |
||||
add() { |
||||
this.$router.push(`/schemeSet`) |
||||
}, |
||||
// 排序回调 |
||||
sortChange(column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
// 两个时间0默认倒序 1升序 |
||||
if (column.prop === 'updateTime') { |
||||
this.modifiedTimeSort = order ? order === 'ascending' ? 1 : 0 : '' |
||||
if (order) { |
||||
this.publicationTimeSort = '' |
||||
this.ordinalSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.publicationTimeSort = order ? order === 'ascending' ? 1 : 0 : '' |
||||
if (order) { |
||||
this.modifiedTimeSort = '' |
||||
this.ordinalSort = '' |
||||
} |
||||
} |
||||
// 序号排序 0默认升序 1倒序 |
||||
if (column.prop === 'sequence') { |
||||
this.ordinalSort = order ? order === 'ascending' ? 0 : 1 : '' |
||||
if (order) { |
||||
this.publicationTimeSort = '' |
||||
this.modifiedTimeSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.$router.push(`add?id=${row.id}&columnId=${this.$refs.column.getCurrentKey()}&columnName=${this.$refs.column.getCurrentNode().columnName}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-input class="keyword" placeholder="请输入标题" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" @click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:新增'" type="primary" @click="add" >新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100"></el-table-column> |
||||
<el-table-column prop="totalBrowsing" label="总浏览" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" label="状态" align="center" min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import { mapMutations } from 'vuex' |
||||
export default { |
||||
data() { |
||||
return { |
||||
keyword: '', |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
modifiedTimeSort: '', |
||||
publicationTimeSort: '', |
||||
ordinalSort: 0, |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
// this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData() { |
||||
const { keyword } = this |
||||
const data = { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
ordinalSort: this.ordinalSort, |
||||
title: this.field === 'title' ? keyword : '', |
||||
founder: this.field === 'founder' ? keyword : '', |
||||
column: this.field === 'column' ? keyword : '', |
||||
editor: this.field === 'editor' ? keyword : '' |
||||
} |
||||
if (this.modifiedTimeSort !== '') data.modifiedTimeSort = this.modifiedTimeSort |
||||
if (this.publicationTimeSort !== '') data.publicationTimeSort = this.publicationTimeSort |
||||
this.$post(this.api.queryArticle, data).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => {}) |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.deleteArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff(val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {}) |
||||
}, |
||||
// 新增 |
||||
add() { |
||||
this.$router.push(`/learnMg`) |
||||
}, |
||||
// 排序回调 |
||||
sortChange(column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
// 两个时间0默认倒序 1升序 |
||||
if (column.prop === 'updateTime') { |
||||
this.modifiedTimeSort = order ? order === 'ascending' ? 1 : 0 : '' |
||||
if (order) { |
||||
this.publicationTimeSort = '' |
||||
this.ordinalSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.publicationTimeSort = order ? order === 'ascending' ? 1 : 0 : '' |
||||
if (order) { |
||||
this.modifiedTimeSort = '' |
||||
this.ordinalSort = '' |
||||
} |
||||
} |
||||
// 序号排序 0默认升序 1倒序 |
||||
if (column.prop === 'sequence') { |
||||
this.ordinalSort = order ? order === 'ascending' ? 0 : 1 : '' |
||||
if (order) { |
||||
this.publicationTimeSort = '' |
||||
this.modifiedTimeSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.$router.push(`add?id=${row.id}&columnId=${this.$refs.column.getCurrentKey()}&columnName=${this.$refs.column.getCurrentNode().columnName}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,891 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<p class="page-name mb">方案设置</p> |
||||
<el-form :model="form" :rules="rules" class="input-form model" label-width="140px"> |
||||
<div class="item-line"> |
||||
<el-form-item prop="source" label="标题"> |
||||
<el-input |
||||
placeholder="请输入标题" |
||||
v-model.trim="form.source" |
||||
clearable |
||||
maxlength="30" |
||||
class="inline-input" |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="author" label="所属分类"> |
||||
<el-select style="width: 234px;" v-model="form.classificationId"> |
||||
<template v-for="item in classifications"> |
||||
<el-option |
||||
v-if="item.id" |
||||
:key="item.id" |
||||
:label="item.classificationName" |
||||
:value="item.id"> |
||||
</el-option> |
||||
</template> |
||||
</el-select> |
||||
<el-button class="set-btn" type="primary" @click="setClass">设置</el-button> |
||||
</el-form-item> |
||||
</div> |
||||
<el-form-item prop="summary" label="适用专业"> |
||||
<el-input |
||||
style="width: 940px" |
||||
type="textarea" |
||||
v-model.trim="form.summary" |
||||
:rows="3" |
||||
clearable |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="summary" label="产品"> |
||||
<el-input |
||||
style="width: 940px" |
||||
type="textarea" |
||||
v-model.trim="form.summary" |
||||
:rows="3" |
||||
clearable |
||||
></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="file" label="文件上传"> |
||||
<el-upload |
||||
:before-upload="fileBeforeUpload" |
||||
:on-remove="handleRemove" |
||||
:on-success="uploadSuccessFile" |
||||
:action="this.api.fileupload" |
||||
:file-list="form.fileList" |
||||
:headers="headers" |
||||
> |
||||
<el-button>上传</el-button> |
||||
</el-upload> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="btns"> |
||||
<el-button type="primary" @click="submit(1)">发布</el-button> |
||||
<el-button @click="submit(0)">保存草稿</el-button> |
||||
<el-button @click="back">取消</el-button> |
||||
</div> |
||||
<!-- 剪裁组件弹窗 --> |
||||
<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="true" |
||||
:fixedNumber.sync="fixedNumber" |
||||
@upload="customUpload" /> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="所属分类设置" :visible.sync="classVisible" width="500px" :close-on-click-modal="false" class="manage-dia" :before-close="closeClass"> |
||||
<div class="plus"> |
||||
<i class="el-icon-circle-plus-outline" @click="addClass"></i> |
||||
</div> |
||||
<el-table :data="classifications" ref="table" header-align="center" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="classificationName" label="分类名称" align="center" min-width="130"> |
||||
<template slot-scope="scope"> |
||||
<el-input |
||||
v-if="scope.row.edit" |
||||
placeholder="请输入分类名称" |
||||
v-model="scope.row.classificationName" |
||||
clearable |
||||
maxlength="30" |
||||
></el-input> |
||||
<span v-else>{{ scope.row.classificationName }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60">否</el-table-column> |
||||
<el-table-column label="操作" align="center" min-width="60"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitClass(scope.row)"></i> |
||||
<i v-else class="el-icon-edit edit" @click="editClass(scope.row)"></i> |
||||
<i class="el-icon-delete del" @click="delClass(scope.row, scope.$index)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<span slot="footer"> |
||||
<el-button @click="closeClass">返回</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
|
||||
<el-dialog title="主题标签设置" :visible.sync="labelVisible" width="500px" :close-on-click-modal="false" class="manage-dia" :before-close="closeLabel"> |
||||
<div class="plus"> |
||||
<i class="el-icon-circle-plus-outline" @click="addLabel"></i> |
||||
</div> |
||||
<el-table :data="labels" ref="table" header-align="center" row-key="id"> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column prop="labelName" label="主题名称" align="center" min-width="130"> |
||||
<template slot-scope="scope"> |
||||
<el-input |
||||
v-if="scope.row.edit" |
||||
placeholder="请输入主题名称" |
||||
v-model="scope.row.labelName" |
||||
clearable |
||||
maxlength="30" |
||||
></el-input> |
||||
<span v-else>{{ scope.row.labelName }}</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="updateTime1" label="是否引用" align="center" min-width="60">否</el-table-column> |
||||
<el-table-column label="操作" align="center" min-width="60"> |
||||
<template slot-scope="scope"> |
||||
<i v-if="scope.row.edit" class="el-icon-check edit" @click="submitLabel(scope.row)"></i> |
||||
<i v-else class="el-icon-edit edit" @click="editLabel(scope.row)"></i> |
||||
<i class="el-icon-delete del" @click="delLabel(scope.row, scope.$index)"></i> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<span slot="footer"> |
||||
<el-button @click="closeLabel">返回</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
import { mapState } from 'vuex' |
||||
import Editor from 'tinymce' |
||||
import editorConfig from './editor' |
||||
import Cropper from '@/components/img-upload/Cropper' |
||||
import Axios from 'axios' |
||||
export default { |
||||
data() { |
||||
return { |
||||
headers: { |
||||
token: sessionStorage.getItem('token') |
||||
}, |
||||
nameRepeat: false, |
||||
sites: [], |
||||
detailStyle: [], |
||||
columns: [], |
||||
articles: [], |
||||
otherArticles: [], |
||||
columnProps: { |
||||
checkStrictly: true, |
||||
value: 'id', |
||||
label: 'columnName' |
||||
}, |
||||
links: [], |
||||
article: '', |
||||
otherColumns: [], |
||||
otherLink: [], |
||||
otherArticle: '', |
||||
form: { |
||||
id: this.$route.query.id || '', |
||||
templateStatus: 0, |
||||
articleTemplate: '', |
||||
doi: '', |
||||
quote: '', |
||||
articleKeyWord: '', |
||||
publicationTypeId: '', |
||||
publicationYear: '', |
||||
periodicalName: '', |
||||
reel: '', |
||||
documentNumber: '', |
||||
activityEndTime: '', |
||||
activityStartTime: '', |
||||
time: '', |
||||
lectureSeries: '', |
||||
onlineLocation: '', |
||||
offlineLocation: '', |
||||
keynoteSpeaker: '', |
||||
eventProfile: '', |
||||
author: '', |
||||
edit: '', |
||||
audit: '', |
||||
bannerImg: '', |
||||
lableId: [], |
||||
classificationId: '', |
||||
columnId: +this.$route.query.columnId, |
||||
file: '', |
||||
isRelease: 0, |
||||
mainBody: '', |
||||
releaseTime: new Date(), |
||||
source: '', |
||||
summary : '', |
||||
title: '', |
||||
titleImg: '', |
||||
connectionType : 1, |
||||
linkAddress: '', |
||||
siteSelection: '', |
||||
fileList: [], |
||||
isOpen: 1 |
||||
}, |
||||
rules: { |
||||
title: [ |
||||
{ required: true, message: '请输入标题', trigger: 'blur' } |
||||
], |
||||
columnId: [ |
||||
{ required: true, message: '请选择所属栏目', trigger: 'change' } |
||||
], |
||||
time: [ |
||||
{ required: true, message: '请选择起始时间', trigger: 'change' } |
||||
], |
||||
classificationId: [ |
||||
{ required: false, message: '请选择所属分类', trigger: 'change' } |
||||
], |
||||
keynoteSpeaker: [ |
||||
{ required: true, message: '请输入主讲人', trigger: 'blur' } |
||||
], |
||||
eventProfile: [ |
||||
{ required: true, message: '请输入活动简介', trigger: 'blur' } |
||||
], |
||||
releaseTime: [ |
||||
{ required: true, message: '请选择发布日期', trigger: 'change' } |
||||
], |
||||
publicationYear: [ |
||||
{ required: true, message: '请选择出版年份', trigger: 'change' } |
||||
], |
||||
titleImg: [ |
||||
{ required: true, message: '请上传封面图', trigger: 'change' } |
||||
], |
||||
mainBody: [ |
||||
{ required: true, message: '请输入正文', trigger: 'blur' } |
||||
], |
||||
connectionType: [ |
||||
{ required: true, message: '请选择连接类型', trigger: 'blur' } |
||||
], |
||||
}, |
||||
columnInfo: {}, |
||||
editorConfig, |
||||
submiting: false, // 新增编辑防抖标识 |
||||
pass: false, |
||||
uploading: 0, |
||||
updateTime: 0, |
||||
cropperModel: false, |
||||
isUpload: false, |
||||
fixedNumber: [1.76, 1], |
||||
file: {}, // 当前被选择的图片文件 |
||||
isBanner: 0, |
||||
classifications: [], |
||||
classVisible: false, |
||||
labels: [], |
||||
labelVisible: false |
||||
}; |
||||
}, |
||||
components: { |
||||
Editor, |
||||
Cropper |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler(val){ |
||||
this.updateTime++ |
||||
}, |
||||
deep:true |
||||
} |
||||
}, |
||||
// 页面离开的时候如果没有保存则提示 |
||||
beforeRouteLeave(to, from, next) { |
||||
if (this.submiting) { |
||||
next() |
||||
} else if (!this.pass) { |
||||
// 更改了信息才需要提示 |
||||
if (this.updateTime > 1) { |
||||
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.submit(this.form.isRelease, next) |
||||
}).catch(() => { |
||||
next() |
||||
}) |
||||
} else { |
||||
next() |
||||
} |
||||
} else { |
||||
next() |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.getArticle() |
||||
this.getLabel() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getArticle() { |
||||
this.$post(this.api.queryArticle, { |
||||
pageNum: 1, |
||||
pageSize: 1000, |
||||
title: '', |
||||
isDisable: 0 |
||||
}).then(({ data }) => { |
||||
this[inner ? 'articles' : 'otherArticles'] = data.records.filter(e => e.isRelease) // 只显示已发布的文章 |
||||
}).catch(err => {}) |
||||
}, |
||||
// 获取所属分类 |
||||
getClassification() { |
||||
this.$post(`${this.api.queryClassif}?siteId=${this.site.id}&templateId=${this.columnInfo.templateId}`).then(({ data }) => { |
||||
this.classifications = data |
||||
}).catch(err => {}) |
||||
}, |
||||
// 显示所属分类弹框 |
||||
setClass() { |
||||
this.classVisible = true |
||||
}, |
||||
// 新增所属分类 |
||||
addClass() { |
||||
this.classifications.push({ |
||||
edit: true, |
||||
id: '', |
||||
classificationName: '' |
||||
}) |
||||
}, |
||||
// 编辑所属分类 |
||||
editClass(row) { |
||||
this.$set(row, 'edit', 1) |
||||
}, |
||||
// 删除所属分类 |
||||
delClass(row, i) { |
||||
if (row.id) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.delClassif}?id=${row.id}`).then(res => { |
||||
Util.successMsg('删除成功') |
||||
this.getClassification() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
this.classifications.splice(i, 1) |
||||
} |
||||
}, |
||||
// 提交所属分类 |
||||
submitClass(row, showMsg = 1) { |
||||
if (!row.classificationName) return Util.errorMsg('请输入分类名称') |
||||
this.$post(`${this.api.checkClassif}?classificationName=${row.classificationName}&siteId=${this.site.id}&classificationId=${row.id}`).then(res => { |
||||
this.$post(this.api[row.id ? 'updateClassif' : 'saveClassif'], { |
||||
classificationName: row.classificationName, |
||||
templateId: this.columnInfo.templateId, |
||||
id: row.id, |
||||
siteId: this.site.id, |
||||
editorId: this.userId, |
||||
founderId: this.userId |
||||
}).then(res => { |
||||
showMsg && Util.successMsg((row.id ? '修改' : '新增') + '成功') |
||||
this.getClassification() |
||||
}).catch(res => {}) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 关闭所属分类 |
||||
closeClass() { |
||||
const list = this.classifications |
||||
if (list.find(e => e.edit && e.classificationName)) { |
||||
this.$confirm('所填写内容暂未保存，是否保存？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
list.map(e => { |
||||
e.edit && e.classificationName && this.submitClass(e, 0) |
||||
}) |
||||
this.classVisible = false |
||||
}).catch(() => { |
||||
this.classVisible = false |
||||
}) |
||||
} else { |
||||
this.classVisible = false |
||||
} |
||||
}, |
||||
|
||||
|
||||
// 获取标签 |
||||
getLabel() { |
||||
this.$post(`${this.api.queryLabel}?siteId=${this.site.id}`).then(({ data }) => { |
||||
this.labels = data |
||||
}).catch(err => {}) |
||||
}, |
||||
// 显示标签弹框 |
||||
setLabel() { |
||||
this.labelVisible = true |
||||
}, |
||||
// 新增标签 |
||||
addLabel() { |
||||
this.labels.push({ |
||||
edit: true, |
||||
id: '', |
||||
labelName: '' |
||||
}) |
||||
}, |
||||
// 编辑标签 |
||||
editLabel(row) { |
||||
this.$set(row, 'edit', 1) |
||||
}, |
||||
// 删除标签 |
||||
delLabel(row, i) { |
||||
if (row.id) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.delLabel}?id=${row.id}`).then(res => { |
||||
Util.successMsg('删除成功') |
||||
this.getLabel() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
this.labels.splice(i, 1) |
||||
} |
||||
}, |
||||
// 提交标签 |
||||
submitLabel(row, showMsg = 1) { |
||||
if (!row.labelName) return Util.errorMsg('请输入主题名称') |
||||
this.$post(`${this.api.checkLabel}?labelName=${row.labelName}&siteId=${this.site.id}&labelId=${row.id}`).then(res => { |
||||
this.$post(this.api[row.id ? 'updateLabel' : 'saveLabel'], { |
||||
labelName: row.labelName, |
||||
id: row.id, |
||||
siteId: this.site.id, |
||||
editorId: this.userId, |
||||
founderId: this.userId |
||||
}).then(res => { |
||||
showMsg && Util.successMsg((row.id ? '修改' : '新增') + '成功') |
||||
this.getLabel() |
||||
}).catch(res => {}) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 关闭所属分类 |
||||
closeLabel() { |
||||
const list = this.labels |
||||
if (list.find(e => e.edit && e.labelName)) { |
||||
this.$confirm('所填写内容暂未保存，是否保存？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
list.map(e => { |
||||
e.edit && e.labelName && this.submitLabel(e, 0) |
||||
}) |
||||
this.labelVisible = false |
||||
}).catch(() => { |
||||
this.labelVisible = false |
||||
}) |
||||
} else { |
||||
this.labelVisible = false |
||||
} |
||||
}, |
||||
|
||||
// 文章名称判重 |
||||
nameChange(){ |
||||
const { title, level, id } = this.form |
||||
if(title && title !== this.originalName){ |
||||
this.$post(this.api.checkIfTheTitleIsRepeat, { |
||||
siteId: this.site.id, |
||||
title, |
||||
id: id || '' |
||||
}).then(res => { |
||||
this.nameRepeat = false |
||||
}).catch(res => { |
||||
this.nameRepeat = true |
||||
}) |
||||
}else{ |
||||
this.nameRepeat = 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]) |
||||
} 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 }) => { |
||||
let url = this.form[this.isBanner ? 'bannerImg' : 'titleImg'] |
||||
url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) // 删除替换掉的图片 |
||||
this.form[this.isBanner ? 'bannerImg' : 'titleImg'] = data.url |
||||
}).catch(res => {}) |
||||
this.$refs.cropper.isDisabled = false |
||||
this.isUpload = false |
||||
this.cropperModel = false |
||||
}, |
||||
// 图片改变钩子 |
||||
changeFile(file, isBanner) { |
||||
this.fixedNumber = isBanner ? [1, 0.26] : [1.76, 1] |
||||
this.isBanner = isBanner |
||||
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.cropperModel = true |
||||
this.$nextTick(() => { |
||||
this.$refs.cropper.updateImg({ |
||||
url: window.URL.createObjectURL(file.raw), |
||||
size: file.size |
||||
}) |
||||
}) |
||||
}, |
||||
// 附件删除 |
||||
handleRemove(e, fileList) { |
||||
e.id ? this.$post(`${this.api.delContentFile}?id=${e.id}`).then(res => { |
||||
this.form.fileList = fileList |
||||
}).catch(res => {}) : (this.form.fileList = fileList) |
||||
}, |
||||
// banner上传成功 |
||||
uploadSuccessBanner(res) { |
||||
let url = this.form.bannerImg |
||||
url && this.$del(this.api.delFile, [url.split('/').pop()]).then(res => {}).catch(e => {}) |
||||
this.form.bannerImg = res.url |
||||
}, |
||||
// 附件上传之前的钩子 |
||||
fileBeforeUpload(file) { |
||||
this.uploading++ |
||||
}, |
||||
// 附件上传成功 |
||||
uploadSuccessFile(res) { |
||||
this.uploading-- |
||||
this.form.id ? |
||||
this.$post(this.api.saveContentFile, { |
||||
contentId: this.form.id, |
||||
editorId: this.userId, |
||||
founderId: this.userId, |
||||
id: '', |
||||
fileName: res.original, |
||||
filePath: res.url |
||||
}).then(({ data }) => { |
||||
this.form.fileList.push({ |
||||
name: res.original, |
||||
url: res.url, |
||||
id: data |
||||
}) |
||||
}).catch(res => {}) : |
||||
this.form.fileList.push({ |
||||
name: res.original, |
||||
url: res.url |
||||
}) |
||||
}, |
||||
// 预览 |
||||
preview() { |
||||
window.open((Setting.isDev ? `http://${location.hostname}:8095` : this.$store.state.content.site.domainName) + `#/article?articleId=${this.form.id}&siteId=${this.form.siteId}&id=${this.form.columnId}`) |
||||
}, |
||||
// 返回 |
||||
back() { |
||||
this.pass = true |
||||
const { updateTime } = this |
||||
// 更改了信息才需要提示 |
||||
if (updateTime > 1) { |
||||
this.$confirm(`所填写内容暂未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.submit(this.form.isRelease) |
||||
}).catch(() => { |
||||
this.$router.back() |
||||
}) |
||||
} else { |
||||
this.$router.back() |
||||
} |
||||
}, |
||||
// 更新附件的状态为发布 |
||||
updateFile(files, form, quoteId) { |
||||
files.map(e => { |
||||
this.$post(this.api.updateFile, { |
||||
id: e, |
||||
isRelease: form.isRelease, |
||||
quote: form.title, |
||||
quoteId |
||||
}).then(res => {}).catch(err => {}) |
||||
}) |
||||
}, |
||||
// 提交 |
||||
submit(isRelease, next) { |
||||
if (this.submiting) return false |
||||
const form = JSON.parse(JSON.stringify(this.form)) |
||||
if (!form.title) return Util.errorMsg('请填写标题') |
||||
if (this.nameRepeat) return Util.errorMsg('该标题已重复!') |
||||
if (typeof form.fatherId === 'object') form.fatherId = form.fatherId[form.fatherId.length - 1] |
||||
const tId = form.articleTemplate |
||||
// 如果是发布 |
||||
if (isRelease) { |
||||
if (tId !== 25) { |
||||
if (!form.releaseTime) return Util.errorMsg('请选择发布日期') |
||||
} |
||||
if (tId === 22 || tId === 23 || tId === 24) { |
||||
if (!form.titleImg ) return Util.errorMsg('请上传封面') |
||||
} |
||||
if (tId === 25) { |
||||
if ((!form.time || !form.time.length) && isRelease) return Util.errorMsg('请选择起止时间') |
||||
form.activityStartTime = form.time[0] |
||||
form.activityEndTime = form.time[1] |
||||
} |
||||
if (tId === 24 && form.connectionType !== 2) { |
||||
if (form.connectionType === 1) { |
||||
if (!this.links.length) return Util.errorMsg('请选择站内链接') |
||||
} |
||||
if (!this.otherLink.length && form.connectionType === 3) { |
||||
if (!this.otherLink.length) return Util.errorMsg('请选择栏目') |
||||
} |
||||
} |
||||
if ((tId === 22 || tId === 23 || tId === 25) && !form.mainBody) return Util.errorMsg('请输入正文') |
||||
} |
||||
if (this.uploading) return Util.errorMsg('文件正在上传，请上传完成后再发布') |
||||
if (form.connectionType === 1) { |
||||
form.linkAddress = this.links.join() |
||||
if (this.article) form.linkAddress += '-' + this.article |
||||
} else if (form.connectionType === 3) { |
||||
form.linkAddress = this.otherLink.join() |
||||
if (this.otherArticle) form.linkAddress += '-' + this.otherArticle |
||||
} |
||||
const { columnId, bannerImg, fileList, titleImg } = form |
||||
const fileId = [] |
||||
if (typeof columnId === 'object') form.columnId = columnId[columnId.length - 1] // 如果更换了栏目id，值会变成数组，需要手动获取最后一个 |
||||
// 获取几个附件的id，url后面的数字串即是附件id |
||||
if (bannerImg) fileId.push(bannerImg.substr(bannerImg.lastIndexOf('/') + 1)) |
||||
if (titleImg) fileId.push(titleImg.substr(titleImg.lastIndexOf('/') + 1)) |
||||
fileList && fileList.map(e => { |
||||
fileId.push(e[e.url ? 'url' : 'filePath'].substr(e[e.url ? 'url' : 'filePath'].lastIndexOf('/') + 1)) |
||||
}) |
||||
form.lableId = form.lableId.join(',') |
||||
|
||||
form.releaseTime = Util.formatDate('yyyy-MM-dd', new Date(form.releaseTime)) // 发布日期转化为年月日格式 |
||||
|
||||
form.isRelease = isRelease |
||||
this.submiting = true |
||||
if (form.id) { |
||||
delete form.children |
||||
form.editorId = +this.$store.state.user.userId |
||||
this.$post(this.api.updateArticle, form).then(res => { |
||||
this.updateFile(fileId, form, form.id) |
||||
Util.successMsg('修改成功') |
||||
next ? next() : this.$router.push(`list?columnId=` + form.columnId) |
||||
}).catch(err => { |
||||
this.submiting = false |
||||
}) |
||||
} else { |
||||
this.$post(this.api.saveArticle, form).then(({ data }) => { |
||||
this.updateFile(fileId, form, data) |
||||
// 新增文章完后需要把上传的附件添加到文章附件表 |
||||
form.fileList.map(e => { |
||||
this.$post(this.api.saveContentFile, { |
||||
contentId: data, |
||||
editorId: this.userId, |
||||
founderId: this.userId, |
||||
id: '', |
||||
fileName: e.name, |
||||
filePath: e.url |
||||
}).then(res => {}).catch(err => {}) |
||||
}) |
||||
Util.successMsg('创建成功') |
||||
next ? next() : this.$router.back() |
||||
}).catch(err => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
$upload-width: 220px; |
||||
$upload-height: 102px; |
||||
$upload-lg-height: 102px; |
||||
/deep/ .avatar-uploader { |
||||
.el-upload { |
||||
position: relative; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
border: 1px solid #DCDEE0; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
.uploader-default { |
||||
display: flex; |
||||
height: $upload-height; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text-align: center; |
||||
background: #FAFAFA; |
||||
p { |
||||
margin-top: 10px; |
||||
font-size: 14px; |
||||
color: #333; |
||||
line-height: 20px; |
||||
} |
||||
} |
||||
} |
||||
&.avatar-uploader-lg { |
||||
.el-upload { |
||||
width: 100%; |
||||
max-width: 820px; |
||||
height: $upload-lg-height; |
||||
|
||||
.uploader-default { |
||||
height: $upload-lg-height; |
||||
} |
||||
} |
||||
} |
||||
.avatar { |
||||
display: block; |
||||
width: $upload-width; |
||||
height: $upload-height; |
||||
} |
||||
.avatar-lg { |
||||
display: block; |
||||
width: 100%; |
||||
height: $upload-lg-height; |
||||
} |
||||
.el-upload__tip { |
||||
margin-top: 0; |
||||
p { |
||||
font-size: 12px; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
.style-wrap { |
||||
display: flex; |
||||
margin-top: 10px; |
||||
.label { |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
.styles { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 955px; |
||||
// height: 320px; |
||||
margin-top: 20px; |
||||
overflow: auto; |
||||
li { |
||||
margin: 0 20px 10px 0; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
&:hover .review { |
||||
border-color: #2962FF; |
||||
} |
||||
} |
||||
.review { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
width: 170px; |
||||
height: 112px; |
||||
margin-bottom: 10px; |
||||
border: 1px solid #DCDEE0; |
||||
border-radius: 2px; |
||||
img { |
||||
width: 80px; |
||||
} |
||||
.is-link { |
||||
width: 50px; |
||||
} |
||||
} |
||||
} |
||||
.info { |
||||
position: absolute; |
||||
top: 8px; |
||||
left: -32px; |
||||
cursor: pointer; |
||||
} |
||||
.plus { |
||||
margin-bottom: 10px; |
||||
font-size: 18px; |
||||
color: #2962FF; |
||||
text-align: right; |
||||
cursor: pointer; |
||||
} |
||||
.set-btn { |
||||
margin-left: 10px !important; |
||||
} |
||||
.manage-dia { |
||||
.edit, .del { |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
} |
||||
.edit { |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
.input-form { |
||||
&.model { |
||||
height: calc(100vh - 200px); |
||||
padding-right: 20px; |
||||
overflow: auto; |
||||
.el-form-item__label { |
||||
padding-right: 20px; |
||||
} |
||||
.lg .el-form-item__label { |
||||
padding-right: 43px; |
||||
} |
||||
} |
||||
.item-line { |
||||
display: flex; |
||||
.el-form-item:not(:last-child) { |
||||
margin-right: 200px; |
||||
} |
||||
} |
||||
.line { |
||||
margin-bottom: 24px; |
||||
border-bottom: 1px dashed #C2C2C2; |
||||
} |
||||
.el-form-item--small.el-form-item { |
||||
margin-bottom: 24px; |
||||
} |
||||
.el-input, .el-select { |
||||
width: 300px; |
||||
} |
||||
.el-select .el-input { |
||||
width: auto; |
||||
} |
||||
.el-textarea { |
||||
width: 550px; |
||||
} |
||||
.auto, .auto .el-input { |
||||
width: auto; |
||||
} |
||||
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before { |
||||
font-size: 18px; |
||||
vertical-align: -4px; |
||||
color: #F5222D; |
||||
} |
||||
} |
||||
.btns { |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,187 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<div class="tool"> |
||||
<div class="search-wrap"> |
||||
<el-input class="keyword" placeholder="请输入标题" v-model.trim="keyword" clearable></el-input> |
||||
</div> |
||||
<div class="actions"> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" @click="batchDel">批量删除</el-button> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:新增'" type="primary" @click="add" >新增文章</el-button> |
||||
</div> |
||||
</div> |
||||
<el-table :data="list" class="table" ref="table" header-align="center" @selection-change="handleSelectionChange" row-key="id" @sort-change="sortChange"> |
||||
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||
<el-table-column type="index" width="60" label="序号" align="center"></el-table-column> |
||||
<el-table-column show-overflow-tooltip prop="title" label="标题" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="classificationName" label="所属分类" align="center" min-width="120" sortable="custom"></el-table-column> |
||||
<el-table-column prop="founderName" label="录入人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="editorName" label="修改人" align="center" min-width="80"></el-table-column> |
||||
<el-table-column prop="updateTime" label="修改日期" align="center" min-width="150"></el-table-column> |
||||
<el-table-column prop="releaseTime" label="发布日期" align="center" min-width="100"></el-table-column> |
||||
<el-table-column prop="totalBrowsing" label="已学习人数" align="center" min-width="70"></el-table-column> |
||||
<el-table-column prop="workNumber" label="状态" align="center" min-width="80"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isRelease ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="170"> |
||||
<template slot-scope="scope"> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:编辑'" type="text" @click="edit(scope.row)">编辑</el-button> |
||||
<el-button v-auth="'/site/list:内容管理:文章管理:删除'" type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
<el-switch |
||||
class="m-l-10" |
||||
v-model="scope.row.isDisable" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
@change="switchOff($event, scope.row, scope.$index)"> |
||||
</el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import { mapMutations } from 'vuex' |
||||
export default { |
||||
data() { |
||||
return { |
||||
keyword: '', |
||||
list: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
modifiedTimeSort: '', |
||||
publicationTimeSort: '', |
||||
ordinalSort: 0, |
||||
multipleSelection: [], |
||||
}; |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() { |
||||
// this.getData() |
||||
}, |
||||
methods: { |
||||
// 文章列表 |
||||
getData() { |
||||
const { keyword } = this |
||||
const data = { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
ordinalSort: this.ordinalSort, |
||||
title: this.field === 'title' ? keyword : '', |
||||
founder: this.field === 'founder' ? keyword : '', |
||||
column: this.field === 'column' ? keyword : '', |
||||
editor: this.field === 'editor' ? keyword : '' |
||||
} |
||||
if (this.modifiedTimeSort !== '') data.modifiedTimeSort = this.modifiedTimeSort |
||||
if (this.publicationTimeSort !== '') data.publicationTimeSort = this.publicationTimeSort |
||||
this.$post(this.api.queryArticle, data).then(({ data }) => { |
||||
this.list = data.records |
||||
this.total = +data.total |
||||
}).catch(err => {}) |
||||
}, |
||||
currentChange(val) { |
||||
this.page = val |
||||
this.getData() |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
const list = this.multipleSelection |
||||
if (list.length) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
const data = [] |
||||
list.map(e => { |
||||
data.push('ids=' + e.id) |
||||
}) |
||||
this.$post(`${this.api.deleteArticle}?${data.join('&')}`).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
util.successMsg("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
util.errorMsg('请先选择数据 ！') |
||||
} |
||||
}, |
||||
// 删除 |
||||
handleDelete(row) { |
||||
this.$confirm('确定要删除吗？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteArticle}?ids=${row.id}`).then(res => { |
||||
util.successMsg('删除成功') |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
// 禁用启用 |
||||
switchOff(val, row) { |
||||
this.$post(`${this.api.articleEnableOrDisable}?id=${row.id}&isDisable=${val}`).then(res => {}).catch((res) => {}) |
||||
}, |
||||
// 新增 |
||||
add() { |
||||
this.$router.push(`/learnMg`) |
||||
}, |
||||
// 排序回调 |
||||
sortChange(column) { |
||||
const { order } = column |
||||
// 三个排序只能同时传1个，所以点了一个排序的时候要清除掉其余两个 |
||||
// 两个时间0默认倒序 1升序 |
||||
if (column.prop === 'updateTime') { |
||||
this.modifiedTimeSort = order ? order === 'ascending' ? 1 : 0 : '' |
||||
if (order) { |
||||
this.publicationTimeSort = '' |
||||
this.ordinalSort = '' |
||||
} |
||||
} |
||||
if (column.prop === 'releaseTime') { |
||||
this.publicationTimeSort = order ? order === 'ascending' ? 1 : 0 : '' |
||||
if (order) { |
||||
this.modifiedTimeSort = '' |
||||
this.ordinalSort = '' |
||||
} |
||||
} |
||||
// 序号排序 0默认升序 1倒序 |
||||
if (column.prop === 'sequence') { |
||||
this.ordinalSort = order ? order === 'ascending' ? 0 : 1 : '' |
||||
if (order) { |
||||
this.publicationTimeSort = '' |
||||
this.modifiedTimeSort = '' |
||||
} |
||||
} |
||||
this.getData() |
||||
}, |
||||
// 编辑 |
||||
edit(row) { |
||||
this.$router.push(`add?id=${row.id}&columnId=${this.$refs.column.getCurrentKey()}&columnName=${this.$refs.column.getCurrentNode().columnName}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue