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