xjs
4 years ago
parent
94f4c23ea0
commit
98e5af2ef2
@ -0,0 +1,62 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 查询英语文章列表
|
||||||
|
export function listArticle(query) {
|
||||||
|
return request({
|
||||||
|
url: '/english/article/list',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询英语文章详细
|
||||||
|
export function getArticle(id) {
|
||||||
|
return request({
|
||||||
|
url: '/english/article/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新增英语文章
|
||||||
|
export function addArticle(data) {
|
||||||
|
return request({
|
||||||
|
url: '/english/article',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//上传图片
|
||||||
|
export function uploadImg(data){
|
||||||
|
return request({
|
||||||
|
url: '/file/upload',
|
||||||
|
method: 'post',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//删除图片
|
||||||
|
export function removeImg(url){
|
||||||
|
return request({
|
||||||
|
url: '/file/remove',
|
||||||
|
method: 'delete',
|
||||||
|
params: url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改英语文章
|
||||||
|
export function updateArticle(data) {
|
||||||
|
return request({
|
||||||
|
url: '/english/article',
|
||||||
|
method: 'put',
|
||||||
|
data: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除英语文章
|
||||||
|
export function delArticle(id) {
|
||||||
|
return request({
|
||||||
|
url: '/english/article/' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-row :gutter="15">
|
||||||
|
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="标题" prop="titleChinese">
|
||||||
|
<el-input v-model="formData.titleChinese" placeholder="请输入标题" :maxlength="100" clearable
|
||||||
|
prefix-icon='el-icon-eleme' :style="{width: '100%'}"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="内容" prop="contentChinese">
|
||||||
|
<el-input v-model="formData.contentChinese" type="textarea" placeholder="请输入内容" :maxlength="1000"
|
||||||
|
:autosize="{minRows: 8, maxRows: 12}" :style="{width: '100%'}"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item label="上传封面" prop="pictureUrl" required>
|
||||||
|
<el-upload ref="pictureUrl"
|
||||||
|
action="#" :http-request="requestUpload"
|
||||||
|
:limit="1"
|
||||||
|
:before-remove="removeImg"
|
||||||
|
:before-upload="picture_rulBeforeUpload" list-type="picture-card" accept="image/*"
|
||||||
|
name="pictureUrl">
|
||||||
|
<i class="el-icon-plus"></i>
|
||||||
|
</el-upload>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-form-item size="large">
|
||||||
|
<el-button type="primary"
|
||||||
|
v-hasPermi="['english:article:add']"
|
||||||
|
@click="submitForm">提交
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="resetForm">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-form>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {addArticle, uploadImg, removeImg} from "@/api/business/english/article";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ArticleAdd",
|
||||||
|
components: {},
|
||||||
|
props: [],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formData: {
|
||||||
|
titleChinese: undefined,
|
||||||
|
contentChinese: undefined,
|
||||||
|
pictureUrl: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
titleChinese: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入标题',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
contentChinese: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入内容',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
//添加文章
|
||||||
|
addArticle() {
|
||||||
|
|
||||||
|
this.$modal.loading("请稍候...");
|
||||||
|
|
||||||
|
addArticle(this.formData).then(res => {
|
||||||
|
this.$modal.notifySuccess("添加成功");
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
this.$router.push({path: '/business/english/article/articleList'})
|
||||||
|
}).catch(err =>{
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
submitForm() {
|
||||||
|
this.$refs['elForm'].validate(valid => {
|
||||||
|
if (!valid) return
|
||||||
|
|
||||||
|
this.addArticle()
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
resetForm() {
|
||||||
|
this.$refs['elForm'].resetFields()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 覆盖默认的上传行为
|
||||||
|
requestUpload() {
|
||||||
|
},
|
||||||
|
|
||||||
|
picture_rulBeforeUpload(file) {
|
||||||
|
let isRightSize = file.size / 1024 / 1024 < 10
|
||||||
|
if (!isRightSize) {
|
||||||
|
this.$message.error('文件大小超过 10MB')
|
||||||
|
}
|
||||||
|
let isAccept = new RegExp('image/*').test(file.type)
|
||||||
|
if (!isAccept) {
|
||||||
|
this.$message.error('应该选择image/*类型的文件')
|
||||||
|
}
|
||||||
|
|
||||||
|
let formData = new FormData();
|
||||||
|
formData.append("file", file);
|
||||||
|
this.$modal.loading("请稍候...");
|
||||||
|
uploadImg(formData).then(res => {
|
||||||
|
this.formData.pictureUrl = res.data.url
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
this.$modal.notifySuccess("上传成功");
|
||||||
|
}).catch(err =>{
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
})
|
||||||
|
|
||||||
|
return isRightSize && isAccept
|
||||||
|
},
|
||||||
|
|
||||||
|
//删除图片
|
||||||
|
removeImg() {
|
||||||
|
if (this.formData.pictureUrl) {
|
||||||
|
let pictureUrl = {"url": this.formData.pictureUrl};
|
||||||
|
removeImg(pictureUrl).then(res => {})
|
||||||
|
|
||||||
|
this.formData.pictureUrl = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.el-upload__tip {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="chinese">
|
||||||
|
<h2>{{article.titleChinese}}</h2>
|
||||||
|
<span>{{article.contentChinese}}</span>
|
||||||
|
</div>
|
||||||
|
<el-divider content-position="center">华丽的分割线</el-divider>
|
||||||
|
<div class="english">
|
||||||
|
<h2>{{article.titleEnglish}}</h2>
|
||||||
|
<span>{{article.contentEnglish}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-image
|
||||||
|
style="width: 200px;height: auto"
|
||||||
|
:src="article.pictureUrl"
|
||||||
|
></el-image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getArticle} from "@/api/business/english/article";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "ArticleDetails",
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
id: null,
|
||||||
|
|
||||||
|
article: {},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
//初始化id值
|
||||||
|
this.id = this.$route.query.id;
|
||||||
|
if (this.id) {
|
||||||
|
this.getArticle();
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
getArticle() {
|
||||||
|
this.$modal.loading("请稍候...");
|
||||||
|
|
||||||
|
getArticle(this.id).then(res => {
|
||||||
|
this.article = res.data;
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
}).catch(err =>{
|
||||||
|
this.$modal.closeLoading()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.app-container > div {
|
||||||
|
text-align:center;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue