refactor(page:portfolio/post): 重构作品集
refactor(page:portfolio/post): 重构作品集
This commit is contained in:
ronger
GitHub
commit
e392af950d
@ -1,89 +1,75 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-row class="wrapper">
|
<div class="wrapper_portfolio" style="margin: 20px">
|
||||||
<el-col v-if="isAuthor">
|
<div v-if="isAuthor">
|
||||||
<el-col style="margin-bottom: 1rem;" v-if="isEdit">
|
<div style="margin-bottom: 1rem;" v-if="isEdit">
|
||||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||||
<el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
|
<el-breadcrumb-item :to="{ path: '/portfolio/manager/' + idPortfolio }">{{ portfolio.portfolioTitle }}
|
||||||
</el-breadcrumb-item>
|
</el-breadcrumb-item>
|
||||||
<el-breadcrumb-item>更新作品集</el-breadcrumb-item>
|
<el-breadcrumb-item>更新作品集</el-breadcrumb-item>
|
||||||
</el-breadcrumb>
|
</el-breadcrumb>
|
||||||
</el-col>
|
</div>
|
||||||
<el-col>
|
<el-row :gutter="20">
|
||||||
<h1>创建作品集</h1>
|
<el-col :span="12" :offset="3">
|
||||||
</el-col>
|
<el-card>
|
||||||
<el-col style="margin-bottom: 1rem;">
|
<h1>创建作品集</h1>
|
||||||
作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点
|
<p>作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点</p>
|
||||||
</el-col>
|
<el-form :model="portfolio" label-width="100px" ref="topic">
|
||||||
<el-col>
|
<el-form-item label="作品集名称">
|
||||||
<el-form :model="portfolio" :rules="rules" label-width="100px" ref="topic">
|
<el-input v-model="portfolio.portfolioTitle"></el-input>
|
||||||
<el-form-item label="作品集名称" prop="portfolioTitle">
|
</el-form-item>
|
||||||
<el-input v-model="portfolio.portfolioTitle"></el-input>
|
<br>
|
||||||
</el-form-item>
|
<el-form-item label="作品集介绍">
|
||||||
<el-form-item label="作品集介绍" prop="portfolioDescription">
|
<div id="contentEditor"></div>
|
||||||
<div id="contentEditor"></div>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item class="text-right">
|
||||||
<el-form-item>
|
<el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
|
||||||
<el-row>
|
<el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
|
||||||
<el-col :span="24">
|
<el-button @click="updatePortfolio" v-else>提交</el-button>
|
||||||
<vue-cropper
|
</el-form-item>
|
||||||
:aspect-ratio="1 / 1"
|
</el-form>
|
||||||
:autoCrop="autoCrop"
|
</el-card>
|
||||||
:autoCropArea="1"
|
</el-col>
|
||||||
:fixedNumber="[1,2]"
|
<el-col :span="6">
|
||||||
:checkCrossOrigin="false"
|
<el-card>
|
||||||
:checkOrientation="false"
|
<vue-cropper
|
||||||
:imgStyle="{'width': '200px'}"
|
:aspect-ratio="1"
|
||||||
:src="headImgUrl"
|
:autoCrop="autoCrop"
|
||||||
preview=".preview"
|
:autoCropArea="1"
|
||||||
ref="cropper"
|
:fixedNumber="[1,2]"
|
||||||
v-if="headImgUrl"
|
:checkCrossOrigin="false"
|
||||||
/>
|
:checkOrientation="false"
|
||||||
</el-col>
|
:imgStyle="{'width': '200px'}"
|
||||||
<el-col :span="24" style="margin-top: 2rem;">
|
:img="headImgUrl"
|
||||||
<el-col :span="8">
|
preview=".preview"
|
||||||
<el-card :body-style="{ padding: '0px' }">
|
ref="cropper"
|
||||||
<el-col>
|
v-if="headImgUrl"
|
||||||
<div class="preview preview-large"/>
|
/>
|
||||||
</el-col>
|
|
||||||
<el-col style="padding: 0 10px;">
|
|
||||||
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
|
|
||||||
</el-col>
|
|
||||||
<el-col class="text-muted article-summary-md" style="padding: 0 10px;">
|
|
||||||
{{ portfolio.portfolioDescription }}
|
|
||||||
</el-col>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24" style="margin-top: 2rem;">
|
|
||||||
<el-upload
|
|
||||||
:before-upload="beforeAvatarUpload"
|
|
||||||
:http-request="requestUpload"
|
|
||||||
:multiple="true"
|
|
||||||
:show-file-list="false"
|
|
||||||
action=""
|
|
||||||
class="avatar-uploader">
|
|
||||||
<div>
|
|
||||||
<el-button plain round type="primary">上传</el-button>
|
|
||||||
</div>
|
|
||||||
</el-upload>
|
|
||||||
<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>
|
|
||||||
</el-col>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item class="text-right">
|
<div class="preview preview-large"/>
|
||||||
<el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
|
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
|
||||||
<el-button :loading="loading" @click="updatePortfolio" v-if="isEdit">更新</el-button>
|
<div class="portfolioDescription">
|
||||||
<el-button @click="updatePortfolio" v-else>提交</el-button>
|
{{ portfolio.portfolioDescription }}
|
||||||
</el-form-item>
|
</div>
|
||||||
</el-form>
|
<el-upload
|
||||||
</el-col>
|
:before-upload="beforeAvatarUpload"
|
||||||
</el-col>
|
:multiple="true"
|
||||||
|
:show-file-list="false"
|
||||||
|
action=""
|
||||||
|
class="avatar-uploader">
|
||||||
|
<div>
|
||||||
|
<el-button plain round type="primary">上传</el-button>
|
||||||
|
</div>
|
||||||
|
</el-upload>
|
||||||
|
<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>
|
||||||
|
<p style="color: red;padding-right: 5px;">*
|
||||||
|
<span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
|
||||||
|
</p>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
<el-col class="text-center" v-else>
|
<el-col class="text-center" v-else>
|
||||||
<el-alert
|
<el-alert
|
||||||
:closable="false"
|
:closable="false"
|
||||||
@ -93,7 +79,7 @@
|
|||||||
type="warning">
|
type="warning">
|
||||||
</el-alert>
|
</el-alert>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -151,14 +137,14 @@ export default {
|
|||||||
idPortfolio: 0,
|
idPortfolio: 0,
|
||||||
portfolioDescription: ''
|
portfolioDescription: ''
|
||||||
},
|
},
|
||||||
rules: {
|
// rules: {
|
||||||
portfolioTitle: [
|
// portfolioTitle: [
|
||||||
{required: true, message: '请输入作品集名称', trigger: 'blur'}
|
// {required: true, message: '请输入作品集名称', trigger: 'blur'}
|
||||||
],
|
// ],
|
||||||
portfolioDescription: [
|
// portfolioDescription: [
|
||||||
{required: true, message: '请输入作品集介绍', trigger: 'blur'}
|
// {required: true, message: '请输入作品集介绍', trigger: 'blur'}
|
||||||
]
|
// ]
|
||||||
},
|
// },
|
||||||
loading: false,
|
loading: false,
|
||||||
tokenURL: {
|
tokenURL: {
|
||||||
URL: '',
|
URL: '',
|
||||||
@ -170,16 +156,13 @@ export default {
|
|||||||
isEdit: false,
|
isEdit: false,
|
||||||
autoCrop: true,
|
autoCrop: true,
|
||||||
notificationFlag: true
|
notificationFlag: true
|
||||||
|
, contentHtml: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 覆盖默认的上传行为
|
|
||||||
requestUpload(e) {
|
|
||||||
console.log('e', e)
|
|
||||||
},
|
|
||||||
_initEditor(data) {
|
_initEditor(data) {
|
||||||
|
//初始化
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
|
|
||||||
let toolbar = [
|
let toolbar = [
|
||||||
'emoji',
|
'emoji',
|
||||||
'headings',
|
'headings',
|
||||||
@ -229,7 +212,12 @@ export default {
|
|||||||
},
|
},
|
||||||
after() {
|
after() {
|
||||||
_ts.contentEditor.setValue(data.value ? data.value : '');
|
_ts.contentEditor.setValue(data.value ? data.value : '');
|
||||||
|
|
||||||
},
|
},
|
||||||
|
input: (val) => {
|
||||||
|
this.portfolio.portfolioDescription = val
|
||||||
|
},
|
||||||
|
typewriterMode: true,
|
||||||
hint: {
|
hint: {
|
||||||
emoji: Vue.emoji
|
emoji: Vue.emoji
|
||||||
},
|
},
|
||||||
@ -245,7 +233,7 @@ export default {
|
|||||||
/*url: `${process.env.Server}/api/console/markdown`,*/
|
/*url: `${process.env.Server}/api/console/markdown`,*/
|
||||||
parse: (element) => {
|
parse: (element) => {
|
||||||
if (element.style.display === 'none') {
|
if (element.style.display === 'none') {
|
||||||
return
|
return false
|
||||||
}
|
}
|
||||||
// LazyLoadImage();
|
// LazyLoadImage();
|
||||||
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
// Vue.Vditor.highlightRender({style: 'github'}, element, this.contentEditor);
|
||||||
@ -260,21 +248,21 @@ export default {
|
|||||||
enable: data.resize,
|
enable: data.resize,
|
||||||
},
|
},
|
||||||
lang: this.$store.state.locale,
|
lang: this.$store.state.locale,
|
||||||
placeholder: data.placeholder,
|
// placeholder: data.placeholder,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// handleAvatarSuccess(res) {
|
handleAvatarSuccess(res) {
|
||||||
// let _ts = this;
|
let _ts = this;
|
||||||
// if (res && res.data && res.data.url) {
|
if (res && res.data && res.data.url) {
|
||||||
// let portfolio = _ts.portfolio;
|
let portfolio = _ts.portfolio;
|
||||||
// portfolio.headImgUrl = res.data.url;
|
portfolio.headImgUrl = res.data.url;
|
||||||
// portfolio.headImgType = '0';
|
portfolio.headImgType = '0';
|
||||||
// _ts.$set(_ts, 'portfolio', portfolio);
|
_ts.$set(_ts, 'portfolio', portfolio);
|
||||||
// _ts.$set(_ts, 'headImgUrl', res.data.url);
|
_ts.$set(_ts, 'headImgUrl', res.data.url);
|
||||||
// } else {
|
} else {
|
||||||
// _ts.$message.error('上传失败!');
|
_ts.$message.error('上传失败!');
|
||||||
// }
|
}
|
||||||
// },
|
},
|
||||||
beforeAvatarUpload(file) {
|
beforeAvatarUpload(file) {
|
||||||
const isJPG = file.type === 'image/jpeg';
|
const isJPG = file.type === 'image/jpeg';
|
||||||
const isPNG = file.type === 'image/png';
|
const isPNG = file.type === 'image/png';
|
||||||
@ -288,35 +276,25 @@ export default {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
this.fileToBase64(file);
|
this.fileToBase64(file);
|
||||||
|
return false;
|
||||||
|
|
||||||
// this.$set(_ts, 'headImgUrl', res.data.url);
|
|
||||||
},
|
},
|
||||||
fileToBase64(file) {
|
fileToBase64(file) {
|
||||||
console.log('我执行了？')
|
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
let reader = new FileReader();
|
let reader = new FileReader();
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
reader.onload = function () {
|
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.$set(_ts, 'headImgUrl', this.result);
|
||||||
if ((_ts.portfolio.headImgUrl || undefined) != undefined) {
|
_ts.$refs.cropper?.replace(this.result);
|
||||||
_ts.$message.success('图片上传成功，可自定义裁剪');
|
|
||||||
} else {
|
|
||||||
_ts.$message.warning('图片上传失败，请重传');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async updatePortfolio() {
|
async updatePortfolio() {
|
||||||
//headImgUrl
|
//headImgUrl
|
||||||
let _ts = this;
|
let _ts = this;
|
||||||
|
this.cropImage()
|
||||||
_ts.$set(_ts, 'loading', true);
|
_ts.$set(_ts, 'loading', true);
|
||||||
let id = _ts.idPortfolio;
|
let id = _ts.idPortfolio;
|
||||||
let portfolioDescription = _ts.contentEditor.getValue();
|
let portfolioDescription = _ts.contentEditor.getValue();
|
||||||
let portfolioDescriptionHtml = await _ts.contentEditor.getHTML();
|
let portfolioDescriptionHtml = _ts.contentEditor.getHTML();
|
||||||
let data = _ts.portfolio;
|
let data = _ts.portfolio;
|
||||||
data.portfolioDescription = portfolioDescription;
|
data.portfolioDescription = portfolioDescription;
|
||||||
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
data.portfolioDescriptionHtml = portfolioDescriptionHtml;
|
||||||
@ -324,8 +302,6 @@ export default {
|
|||||||
this.$message.error('请输入必填信息');
|
this.$message.error('请输入必填信息');
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let title = id ? '更新' : '添加';
|
let title = id ? '更新' : '添加';
|
||||||
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
_ts.$axios[id ? '$put' : '$post']('/api/portfolio/post', data).then(function (res) {
|
||||||
if (res && res.message) {
|
if (res && res.message) {
|
||||||
@ -439,13 +415,17 @@ export default {
|
|||||||
|
|
||||||
let portfolioContent = '';
|
let portfolioContent = '';
|
||||||
if (_ts.idPortfolio) {
|
if (_ts.idPortfolio) {
|
||||||
_ts.$set(_ts, 'isEdit', true);
|
this.isEdit = true
|
||||||
|
// _ts.$set(_ts, 'isEdit', true);
|
||||||
_ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
|
_ts.$set(_ts, 'portfolio', JSON.parse(JSON.stringify(_ts.portfolioDetail)));
|
||||||
_ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
|
_ts.$set(_ts, 'headImgUrl', _ts.portfolioDetail.headImgUrl);
|
||||||
// _ts.$refs.cropper.replace(_ts.portfolioDetail.headImgUrl);
|
if (!this.isEdit) {
|
||||||
portfolioContent = _ts.portfolioDetail.portfolioDescription;
|
_ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl);
|
||||||
|
portfolioContent = _ts.portfolioDetail.portfolioDescription;
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
_ts.$set(_ts, 'isEdit', false);
|
this.isEdit = false
|
||||||
}
|
}
|
||||||
|
|
||||||
this.contentEditor = this._initEditor({
|
this.contentEditor = this._initEditor({
|
||||||
@ -454,7 +434,7 @@ export default {
|
|||||||
height: 480,
|
height: 480,
|
||||||
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
placeholder: '', //this.$t('inputContent', this.$store.state.locale)
|
||||||
resize: false,
|
resize: false,
|
||||||
value: portfolioContent
|
value: this.portfolio.portfolioDescription
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -463,6 +443,11 @@ export default {
|
|||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "~vditor/src/assets/less/index.less";
|
@import "~vditor/src/assets/less/index.less";
|
||||||
|
|
||||||
|
.wrapper_portfolio {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.preview-area {
|
.preview-area {
|
||||||
width: 16rem;
|
width: 16rem;
|
||||||
}
|
}
|
||||||
@ -498,4 +483,17 @@ export default {
|
|||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.portfolioDescription {
|
||||||
|
min-height: 50px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user