peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(page:portfolio/post): 重构作品集

Browse Source 
refactor(page:portfolio/post): 重构作品集
This commit is contained in:
ronger 2023-08-30 20:46:09 +08:00 committed by GitHub
commit e392af950d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 126 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
pages/portfolio/post/_portfolio_id.vue
View File

@ -1,63 +1,57 @@
<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">
<el-col :span="12" :offset="3">
<el-card>
<h1>创建作品集</h1> <h1>创建作品集</h1>
</el-col> <p>作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点</p>
<el-col style="margin-bottom: 1rem;"> <el-form :model="portfolio" label-width="100px" ref="topic">
作品集需要有明确的写作方向，如果您在某个领域有深度的研究，欢迎创建自己的作品集分享自己的观点 <el-form-item label="作品集名称">
</el-col>
<el-col>
<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-input v-model="portfolio.portfolioTitle"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="作品集介绍" prop="portfolioDescription"> <br>
<el-form-item label="作品集介绍">
<div id="contentEditor"></div> <div id="contentEditor"></div>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item class="text-right">
<el-row> <el-button :loading="loading" @click="deletePortfolio" v-if="isEdit">删除</el-button>
<el-col :span="24"> <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-card>
</el-col>
<el-col :span="6">
<el-card>
<vue-cropper <vue-cropper
:aspect-ratio="1 / 1" :aspect-ratio="1"
:autoCrop="autoCrop" :autoCrop="autoCrop"
:autoCropArea="1" :autoCropArea="1"
:fixedNumber="[1,2]" :fixedNumber="[1,2]"
:checkCrossOrigin="false" :checkCrossOrigin="false"
:checkOrientation="false" :checkOrientation="false"
:imgStyle="{'width': '200px'}" :imgStyle="{'width': '200px'}"
:src="headImgUrl" :img="headImgUrl"
preview=".preview" preview=".preview"
ref="cropper" ref="cropper"
v-if="headImgUrl" v-if="headImgUrl"
/> />
</el-col>
<el-col :span="24" style="margin-top: 2rem;">
<el-col :span="8">
<el-card :body-style="{ padding: '0px' }">
<el-col>
<div class="preview preview-large"/> <div class="preview preview-large"/>
</el-col>
<el-col style="padding: 0 10px;">
<h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4> <h4 class="article-header-md">{{ portfolio.portfolioTitle }}</h4>
</el-col> <div class="portfolioDescription">
<el-col class="text-muted article-summary-md" style="padding: 0 10px;">
{{ portfolio.portfolioDescription }} {{ portfolio.portfolioDescription }}
</el-col> </div>
</el-card>
</el-col>
</el-col>
<el-col :span="24" style="margin-top: 2rem;">
<el-upload <el-upload
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
:http-request="requestUpload"
:multiple="true" :multiple="true"
:show-file-list="false" :show-file-list="false"
action="" action=""
@ -66,24 +60,16 @@
<el-button plain round type="primary">上传</el-button> <el-button plain round type="primary">上传</el-button>
</div> </div>
</el-upload> </el-upload>
<el-button @click.prevent="reset" plain round style="margin-top: 1rem;" type="primary">重置</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-button @click.prevent="cropImage" plain round type="primary">裁剪</el-button>
<el-col> <p style="color: red;padding-right: 5px;">*
<span style="color: red;padding-right: 5px;">*</span> <span style="color: black">上传图片调整至最佳效果后,请点击裁剪按钮截取</span>
<span>上传图片调整至最佳效果后,请点击裁剪按钮截取</span> </p>
</el-col> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </div>
<el-form-item class="text-right">
<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 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) {
_ts.$refs?.cropper?.replace(_ts.portfolioDetail.headImgUrl);
portfolioContent = _ts.portfolioDetail.portfolioDescription; 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>