ronger
GitHub
commit
2e75e14f5c
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-row class="wrapper">
|
||||
<el-col v-if="isAuthor">
|
||||
<el-col v-if="isEdit" style="margin-bottom: 1rem;">
|
||||
<el-col style="margin-bottom: 1rem;" v-if="isEdit">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
|
||||
</el-breadcrumb-item>
|
||||
@ -15,23 +15,28 @@
|
||||
作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-form :model="portfolio" :rules="rules" ref="topic" label-width="100px">
|
||||
<el-form :model="portfolio" :rules="rules" label-width="100px" ref="topic">
|
||||
<el-form-item label="作品集名称" prop="portfolioTitle">
|
||||
<el-input v-model="portfolio.portfolioTitle"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="作品集介绍" prop="portfolioDescription">
|
||||
<div id="contentEditor"></div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:aspect-ratio="1 / 1"
|
||||
:src="headImgUrl"
|
||||
:autoCrop="autoCrop"
|
||||
:autoCropArea="1"
|
||||
:fixedNumber="[1,2]"
|
||||
:checkCrossOrigin="false"
|
||||
:checkOrientation="false"
|
||||
:imgStyle="{width: '480px', height: '480px'}"
|
||||
:autoCropArea="1"
|
||||
:autoCrop="autoCrop"
|
||||
:imgStyle="{'width': '200px'}"
|
||||
:src="headImgUrl"
|
||||
preview=".preview"
|
||||
ref="cropper"
|
||||
v-if="headImgUrl"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: 2rem;">
|
||||
@ -51,18 +56,18 @@
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-top: 2rem;">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action=""
|
||||
:before-upload="beforeAvatarUpload"
|
||||
:http-request="requestUpload"
|
||||
:multiple="true"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
:before-upload="beforeAvatarUpload">
|
||||
action=""
|
||||
class="avatar-uploader">
|
||||
<div>
|
||||
<el-button type="primary" round plain>上传</el-button>
|
||||
<el-button plain round type="primary">上传</el-button>
|
||||
</div>
|
||||
</el-upload>
|
||||
<el-button style="margin-top: 1rem;" type="primary" round plain @click.prevent="reset">重置</el-button>
|
||||
<el-button type="primary" round plain @click.prevent="cropImage">裁剪</el-button>
|
||||
<el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置</el-button>
|
||||
<el-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
|
||||
<el-col>
|
||||
<span style="color: red;padding-right: 5px;">*</span>
|
||||
<span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
|
||||
@ -71,24 +76,21 @@
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="作品集介绍" prop="portfolioDescription">
|
||||
<div id="contentEditor"></div>
|
||||
</el-form-item>
|
||||
<el-form-item class="text-right">
|
||||
<el-button v-if="isEdit" @click="deletePortfolio" :loading="loading">删除</el-button>
|
||||
<el-button v-if="isEdit" @click="updatePortfolio" :loading="loading">更新</el-button>
|
||||
<el-button v-else @click="updatePortfolio" :loading="loading">提交</el-button>
|
||||
<el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
|
||||
<el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
|
||||
<el-button @click="updatePortfolio" v-else>提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<el-col v-else class="text-center">
|
||||
<el-col class="text-center" v-else>
|
||||
<el-alert
|
||||
title="用户无权限"
|
||||
type="warning"
|
||||
:closable="false"
|
||||
center
|
||||
show-icon
|
||||
:closable="false">
|
||||
title="用户无权限"
|
||||
type="warning">
|
||||
</el-alert>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -171,6 +173,10 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 覆盖默认的上传行为
|
||||
requestUpload(e) {
|
||||
console.log('e', e)
|
||||
},
|
||||
_initEditor(data) {
|
||||
let _ts = this;
|
||||
|
||||
@ -257,18 +263,18 @@ export default {
|
||||
placeholder: data.placeholder,
|
||||
})
|
||||
},
|
||||
handleAvatarSuccess(res) {
|
||||
let _ts = this;
|
||||
if (res && res.data && res.data.url) {
|
||||
let portfolio = _ts.portfolio;
|
||||
portfolio.headImgUrl = res.data.url;
|
||||
portfolio.headImgType = '0';
|
||||
_ts.$set(_ts, 'portfolio', portfolio);
|
||||
_ts.$set(_ts, 'headImgUrl', res.data.url);
|
||||
} else {
|
||||
_ts.$message.error('上传失败!');
|
||||
}
|
||||
},
|
||||
// handleAvatarSuccess(res) {
|
||||
// let _ts = this;
|
||||
// if (res && res.data && res.data.url) {
|
||||
// let portfolio = _ts.portfolio;
|
||||
// portfolio.headImgUrl = res.data.url;
|
||||
// portfolio.headImgType = '0';
|
||||
// _ts.$set(_ts, 'portfolio', portfolio);
|
||||
// _ts.$set(_ts, 'headImgUrl', res.data.url);
|
||||
// } else {
|
||||
// _ts.$message.error('上传失败!');
|
||||
// }
|
||||
// },
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isPNG = file.type === 'image/png';
|
||||
@ -282,18 +288,30 @@ export default {
|
||||
return false;
|
||||
}
|
||||
this.fileToBase64(file);
|
||||
return false;
|
||||
|
||||
|
||||
// this.$set(_ts, 'headImgUrl', res.data.url);
|
||||
},
|
||||
fileToBase64(file) {
|
||||
console.log('我执行了？')
|
||||
let _ts = this;
|
||||
let reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = function () {
|
||||
let portfolio = _ts.portfolio;
|
||||
portfolio.headImgUrl = this.result;
|
||||
portfolio.headImgType = '0';
|
||||
_ts.$set(_ts, 'portfolio', portfolio);
|
||||
_ts.$set(_ts, 'headImgUrl', this.result);
|
||||
_ts.$refs.cropper.replace(this.result);
|
||||
if ((_ts.portfolio.headImgUrl || undefined) != undefined) {
|
||||
_ts.$message.success('图片上传成功，可自定义裁剪');
|
||||
} else {
|
||||
_ts.$message.warning('图片上传失败，请重传');
|
||||
}
|
||||
}
|
||||
},
|
||||
async updatePortfolio() {
|
||||
//headImgUrl
|
||||
let _ts = this;
|
||||
_ts.$set(_ts, 'loading', true);
|
||||
let id = _ts.idPortfolio;
|
||||
@ -302,6 +320,12 @@ export default {
|
||||
let data = _ts.portfolio;
|
||||
data.portfolioDescription = portfolioDescription;
|
||||
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
||||
if ((data.portfolioDescription || undefined) == undefined || (data.portfolioDescriptionHtml || undefined) == undefined) {
|
||||
this.$message.error('请输入必填信息');
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
let title = id ? '更新' : '添加';
|
||||
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||
if (res && res.message) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user