|
|
|
@ -1,74 +1,41 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<div class="flex-between"> |
|
|
|
|
<el-page-header @back="back" |
|
|
|
|
:content="'新增文章'"></el-page-header> |
|
|
|
|
<el-page-header @back="back" :content="'新增文章'"></el-page-header> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<el-card shadow="hover" |
|
|
|
|
class="m-b-20"> |
|
|
|
|
<el-form :model="form" |
|
|
|
|
:rules="rules" |
|
|
|
|
ref="form" |
|
|
|
|
label-width="90px" |
|
|
|
|
label-suffix=":" |
|
|
|
|
size="small"> |
|
|
|
|
<el-form-item prop="coverUrl" |
|
|
|
|
label="封面图"> |
|
|
|
|
<el-upload class="avatar-uploader" |
|
|
|
|
accept=".jpg,.png,.jpeg" |
|
|
|
|
:on-remove="handleRemove" |
|
|
|
|
:on-error="uploadError" |
|
|
|
|
:before-remove="beforeRemove" |
|
|
|
|
:limit="1" |
|
|
|
|
:on-exceed="handleExceed" |
|
|
|
|
action="" |
|
|
|
|
:http-request="handleRequest"> |
|
|
|
|
<img v-if="form.coverUrl" |
|
|
|
|
:src="form.coverUrl" |
|
|
|
|
class="avatar"> |
|
|
|
|
<div class="uploader-default" |
|
|
|
|
v-else> |
|
|
|
|
<el-card shadow="hover" class="m-b-20"> |
|
|
|
|
<el-form :model="form" :rules="rules" ref="form" label-width="90px" label-suffix=":" size="small"> |
|
|
|
|
<el-form-item prop="coverUrl" label="封面图"> |
|
|
|
|
<el-upload class="avatar-uploader" accept=".jpg,.png,.jpeg" :on-remove="handleRemove" :on-error="uploadError" |
|
|
|
|
:before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" action="" :http-request="handleRequest"> |
|
|
|
|
<img v-if="form.coverUrl" :src="form.coverUrl" class="avatar"> |
|
|
|
|
<div class="uploader-default" v-else> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
<p>上传封面</p> |
|
|
|
|
</div> |
|
|
|
|
</el-upload> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="author" |
|
|
|
|
label="作者"> |
|
|
|
|
<el-form-item prop="author" label="作者"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-input placeholder="请输入作者" |
|
|
|
|
v-model="form.author" |
|
|
|
|
clearable></el-input> |
|
|
|
|
<el-input placeholder="请输入作者" v-model="form.author" clearable></el-input> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="date" |
|
|
|
|
label="日期"> |
|
|
|
|
<el-form-item prop="date" label="日期"> |
|
|
|
|
<div class="d-inline-block"> |
|
|
|
|
<el-date-picker v-model="form.date" |
|
|
|
|
type="date" |
|
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
|
placeholder="选择日期"></el-date-picker> |
|
|
|
|
<el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
|
placeholder="选择日期"></el-date-picker> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="title" |
|
|
|
|
label="文章标题"> |
|
|
|
|
<el-input placeholder="请输入文章标题" |
|
|
|
|
v-model="form.title" |
|
|
|
|
clearable></el-input> |
|
|
|
|
<el-form-item prop="title" label="文章标题"> |
|
|
|
|
<el-input placeholder="请输入文章标题" v-model="form.title" clearable></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="content" |
|
|
|
|
label="文章内容"> |
|
|
|
|
<quill :border="true" |
|
|
|
|
v-model="form.content" |
|
|
|
|
:uploading.sync="uploading" |
|
|
|
|
:height="400" /> |
|
|
|
|
<el-form-item prop="content" label="文章内容"> |
|
|
|
|
<quill :border="true" v-model="form.content" :uploading.sync="uploading" :height="400" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item> |
|
|
|
|
<el-button type="primary" |
|
|
|
|
@click="save(0)">确定</el-button> |
|
|
|
|
<el-button type="primary" @click="save(0)">确定</el-button> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
</el-card> |
|
|
|
@ -98,7 +65,7 @@ export default { |
|
|
|
|
date: '', |
|
|
|
|
title: '', |
|
|
|
|
content: '', |
|
|
|
|
createUser: this.customerName || this.userName |
|
|
|
|
createUser: this.userName |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
coverUrl: [ |
|
|
|
@ -126,7 +93,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
...mapState("user", [ |
|
|
|
|
"userName", "customerName" |
|
|
|
|
"userName" |
|
|
|
|
]) |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
@ -231,7 +198,7 @@ export default { |
|
|
|
|
this.submiting = false; |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
this.createUser = this.customerName || this.userName |
|
|
|
|
this.createUser = this.userName |
|
|
|
|
this.$post(this.api.addArticle, form).then(res => { |
|
|
|
|
this.submiting = false; |
|
|
|
|
util.successMsg("创建成功"); |
|
|
|
@ -268,70 +235,71 @@ export default { |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
$avatar-width: 104px; |
|
|
|
|
|
|
|
|
|
/deep/ .avatar-uploader { |
|
|
|
|
.el-upload { |
|
|
|
|
position: relative; |
|
|
|
|
width: $avatar-width; |
|
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
.el-upload { |
|
|
|
|
position: relative; |
|
|
|
|
width: $avatar-width; |
|
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
border-color: #409eff; |
|
|
|
|
} |
|
|
|
|
&:hover { |
|
|
|
|
border-color: #409eff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: $avatar-width !important; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
|
.uploader-default { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: $avatar-width !important; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
text-align: center; |
|
|
|
|
background: rgba(0, 0, 0, 0.04); |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #8c939d; |
|
|
|
|
} |
|
|
|
|
i { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #8c939d; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
line-height: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.65); |
|
|
|
|
line-height: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
width: $avatar-width; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
.avatar { |
|
|
|
|
width: $avatar-width; |
|
|
|
|
height: $avatar-width; |
|
|
|
|
display: block; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-upload__tip { |
|
|
|
|
margin-top: 0; |
|
|
|
|
.el-upload__tip { |
|
|
|
|
margin-top: 0; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
|
line-height: 1; |
|
|
|
|
p { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
|
line-height: 1; |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&:first-child { |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/ .d-inline-block { |
|
|
|
|
width: 216px; |
|
|
|
|
width: 216px; |
|
|
|
|
|
|
|
|
|
.el-select, |
|
|
|
|
.el-input { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.el-select, |
|
|
|
|
.el-input { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |