hjq/aircraft-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文章管理部分对接

Browse Source
This commit is contained in:
Double-_-Z 2025-07-16 18:41:13 +08:00
parent f177373e0e
commit 728b94b5ee
9 changed files with 185 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/api/platform/article.js
View File

@ -8,20 +8,34 @@ export function add(data) {
})
}
export function del(ids) {
export function del(id) {
return request({
url: 'api/article',
url: `aerocraftAdminApi/cpArticle/${id}`,
method: 'delete',
data: ids
})
}
export function edit(data) {
return request({
url: 'api/article',
url: 'aerocraftAdminApi/cpArticle',
method: 'put',
data
})
}
export default { add, edit, del }
export function single(id) {
return request({
url: `aerocraftAdminApi/cpArticle/${id}`,
method: 'get',
})
}
export function text(id) {
return request({
url: `aerocraftAdminApi/cpText/${id}`,
method: 'get',
})
}
export default { add, edit, del, single, text }

7
src/api/platform/label.js
View File

@ -1,9 +1,10 @@
import request from '@/utils/request'
export function tree(moduleId) {
export function list(moduleId) {
return request({
url: `aerocraftAdminApi/cpLabel/tree/${moduleId}`,
url: `aerocraftAdminApi/cpLabel/all`,
method: 'get',
parems: { moduleId }
})
}
@ -30,4 +31,4 @@ export function edit(data) {
})
}
export default { tree, add, edit, del }
export default { list, add, edit, del }

2
src/components/WangEditor/index.vue
View File

@ -7,7 +7,7 @@
:default-config="toolbarConfig"
:mode="editMode"
/>
<div v-else class="replace">
<div v-else-if="disableShowFullscreen" class="replace">
<i class="full el-icon-full-screen" @click="openCurrenFullscreen" />
</div>
<Editor

7
src/router/index.js
View File

@ -53,13 +53,6 @@ router.beforeEach((to, from, next) => {
export const loadMenus = (next, to) => {
buildMenus().then(res => {
// res[0].children.push({
// component: 'system/area/index',
// hidden: false,
// name: 'Area',
// path: 'area',
// meta: { title: '区域管理', icon: 'tree-table', noCache: true }
// })
const sdata = JSON.parse(JSON.stringify(res))
const rdata = JSON.parse(JSON.stringify(res))
const sidebarRoutes = filterAsyncRouter(sdata)

5
src/router/routers.js
View File

@ -79,6 +79,11 @@ export const constantRouterMap = [
},
]
},
{
path: '/article/content',
component: (resolve) => require(['@/views/platform/article/content'], resolve),
hidden: true
},
]
export default new Router({

116
src/views/platform/article/add.vue
View File

@ -86,6 +86,7 @@ import { all } from '@/api/platform/module'
import { tree } from '@/api/platform/label'
import { upload } from '@/utils/upload'
import { mapGetters } from 'vuex'
import { single } from '@/api/platform/article'
export default {
name: 'ArticleAdd',
name: 'ArticleEdit',
@ -134,7 +135,6 @@ export default {
text: { required: true, trigger: 'blur', validator: validText },
fileArray: { required: true, message: '请上传封面图', trigger: 'change' },
},
coverFile: {},
coverHide: false,
dialogImageUrl: '',
dialogVisible: false,
@ -149,8 +149,8 @@ export default {
])
},
created(){
const { moduleName, labelName, id } = this.$route.query;
if(moduleName && labelName && !this.isAdd) {
const { id } = this.$route.query;
if(id && !this.isAdd) {
this.getArticleDetailById(id);
}
this.getModules();
@ -159,18 +159,33 @@ export default {
// 封面图片更改
handleUploadChange(uploadFile, uploadFiles) {
if(uploadFile.raw.type.includes('image')){
const file = uploadFile.raw;
this.coverFile = file;
this.coverHide = true;
this.form.fileArray = uploadFiles;
try {
this.loading = true;
upload(this.imagesUploadApi, uploadFile.raw).then(res => {
if(res.status === 200){
const data = res.data;
const url = '/file/图片/' + data.newFileName;
this.form.photo = url;
this.form.fileArray = [this.baseApi+url];
this.coverHide = true;
}else{
this.$message.error('图片上传失败！');
return;
}
});
} catch (error) {
this.$message.error('图片上传失败！');
}finally{
this.loading = false;
}
}else{
this.$message.error('请上传图片文件！');
uploadFiles.pop();
this.$refs['uploadRef'].clearFiles();
}
},
// 封面删除
handleRemove(file) {
this.coverFile = {};
this.form.fileArray = [];
this.$refs['uploadRef'].clearFiles();
this.coverHide = false;
@ -201,37 +216,24 @@ export default {
this.form.cplabelId = val ? event.currentTarget.dataset.op : '';
},
// 获取文章详情-根据id
async getArticleDetailById(id){
getArticleDetailById(id){
try {
this.loading = true;
// let res = await artApi.getArticleDetail(id);
// if(res?.success) {
// state.data = res.data;
// // 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
// state.data.top = state.data.top === 1;
// state.data.moduleName = moduleName;
// state.data.labelName = labelName;
// state.data.textid = state.data.id;
// if(state.data.photo){
// const never = [{name:state.data.title,url:viteUrl+state.data.photo}];
// state.fileArray = never;
// state.coverHide = true;
// }
// }
const { moduleName, labelName } = this.$route.query;
this.form = {
moduleName: moduleName,
labelName: labelName,
title: '测试标题',
articleType: 0,
photo: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png',
text: '测试内容',
top: false,
fileArray:[{name:'测试标题',url:'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png'}]
};
this.coverHide = true;
single(id).then(res => {
if(res){
res.top = res.top ? true : false;
this.form = res;
if(res.photo) {
this.coverHide = true;
this.form.photo = res.photo;
this.form.fileArray = [{url: this.baseApi+this.form.photo}]
}
}else{
this.$message.error('文章获取失败！');
}
})
} catch (error) {
this.$message.error('获取文章详情失败');
this.$message.error('文章获取失败！');
} finally {
this.loading = false;
}
@ -244,30 +246,24 @@ export default {
// 保存
onSubmitForm(){
console.log(this.form);
this.$refs['articleFormRef'].validate(async(valid) => {
if (valid) {
const articleForm = {...this.form};
articleForm.top = articleForm.top ? 1 : 0;
upload(this.imagesUploadApi, articleForm.fileArray[0].raw).then(res => {
if(res.status === 200){
const data = res.data;
const url = this.baseApi+'/file/图片/' + data.newFileName;
articleForm.photo = url;
delete articleForm.fileArray;
const ft = this.isAdd? add : edit;
ft(articleForm).then(res => {
this.$message.success(`文章${this.isAdd?'添加':'编辑'}成功！`);
this.cancel();
})
}else{
this.$message.error('新增文章失败');
return;
}
});
}else{
this.$message.error('请完善信息！');
}
})
try {
this.$refs['articleFormRef'].validate(async(valid) => {
if (valid) {
const articleForm = {...this.form};
articleForm.top = articleForm.top ? 1 : 0;
delete articleForm.fileArray;
const ft = this.isAdd? add : edit;
ft(articleForm).then(res => {
this.$message.success(`文章${this.isAdd?'添加':'编辑'}成功！`);
this.cancel();
})
}else{
this.$message.error('请完善信息！');
}
})
} catch (error) {
this.$message.error('处理失败!');
}
},
}
}

37
src/views/platform/article/content.vue Normal file
View File

@ -0,0 +1,37 @@
<template>
<div class="article-content">
<wang-editor v-loading="loading" v-model="text" disable style="width: 100%;overflow-y: hidden;"
:disableShowFullscreen="false" ref="editor" />
</div>
</template>
<script>
import WangEditor from '@/components/WangEditor/index'
import { text } from '@/api/platform/article'
export default {
name: 'ArticleContent',
components: {WangEditor},
data() {
return {
text: '暂无文章内容',
loading: false
}
},
mounted(){
const { id } = this.$route.query;
if(id) this.getArticleContentById(id);
},
methods:{
async getArticleContentById(id){
var texts = '暂无文章内容';
await text(id).then(res => {
if(res){
texts = res.text;
}else{
this.$message.error('文章内容获取失败！');
}
})
this.text = texts;
}
}
}
</script>

58
src/views/platform/article/detail.vue
View File

@ -7,9 +7,9 @@
<el-form-item label="封面：">
<el-image
style="width: 130px;height: 130px;border-radius: 4px;"
:src="data.photo"
:src="baseApi+data.photo"
:zoom-rate="1.2"
:preview-src-list="[data.photo]"
:preview-src-list="[baseApi+data.photo]"
fit="cover"/>
</el-form-item>
</el-col>
@ -29,7 +29,7 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="文章类型：" prop="articletype">
<el-form-item label="文章类型：" prop="articleType">
图文
</el-form-item>
</el-col>
@ -41,12 +41,12 @@
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="浏览数：">
{{ data.view }}
{{ data.view || 0 }}
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
<el-form-item label="创建日期：">
{{ data.createtime }}
{{ data.createTime }}
</el-form-item>
</el-col>
</el-row>
@ -67,6 +67,8 @@
</template>
<script>
import WangEditor from '@/components/WangEditor/index'
import { single } from '@/api/platform/article'
import { mapGetters } from 'vuex'
export default {
name: 'ArticleDetail',
components: {
@ -77,24 +79,27 @@ export default {
data: {
labelName: '',
moduleName: '',
title: '测试',
articletype: 0,
createtime: '2025-01-23',
photo: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png',
text: '测试',
top: 1,
view: 17,
title: '',
articleType: '',
createTime: '',
photo: '',
text: '',
top: '',
view: '',
},
loading: false,
}
},
computed: {
...mapGetters([
'baseApi'
])
},
created(){
const { moduleName, labelName, id } = this.$route.query;
// if(moduleName && labelName && this.$route.path == '/platform/article/edit') {
// this.getArticleDetailById(id);
// }
this.data.moduleName = moduleName;
this.data.labelName = labelName;
const { id } = this.$route.query;
if(id) {
this.getArticleDetailById(id);
}
},
methods: {
// 返回
@ -102,6 +107,23 @@ export default {
this.$store.dispatch('tagsView/delView', this.$route);
this.$router.push('/platform/article');
},
// 获取文章详情
getArticleDetailById(id){
try {
this.loading = true;
single(id).then(res => {
if(res){
this.data = res;
}else{
this.$message.error('文章获取失败！');
}
})
} catch (error) {
this.$message.error('文章获取失败！');
} finally {
this.loading = false;
}
}
}
}
</script>

38
src/views/platform/article/index.vue
View File

@ -25,7 +25,8 @@
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
<el-table-column type="index" align="center" width="55" label="序号" />
<el-table-column :show-overflow-tooltip="true" prop="title" label="标题" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="articletype" label="文章类型" align="center" />
<el-table-column :show-overflow-tooltip="true" prop="articleType" label="文章类型" align="center"
:formatter="(row) => { let dot = dict.article_type.find(item => Number(item.value) === row.articleType); return dot?dot.label:''}" />
<el-table-column :show-overflow-tooltip="true" prop="top" label="置顶" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.top===1" type="success">是</el-tag>
@ -59,12 +60,19 @@ import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import { all } from '@/api/platform/module'
import { tree } from '@/api/platform/label'
import { list } from '@/api/platform/label'
export default {
name: 'Article',
components: { rrOperation, pagination },
// 数据字典
dicts: ['article_type'],
cruds() {
return CRUD({ title: '文章', url: '/aerocraftAdminApi/cpArticle', crudMethod: { ...crudArticle }, optShow: { reset: true }})
return CRUD({ title: '文章', url: '/aerocraftAdminApi/cpArticle', crudMethod: { ...crudArticle }, optShow: { reset: true },
// 查询获取data后操作
initData:(crud,data)=>{
crud.page.total = data.total
crud.data = data.records
}})
},
mixins: [presenter(), header(), crud()],
data() {
@ -86,7 +94,7 @@ export default {
copyLink(row){
if(row.id == null||row.id == ''){ this.$message.warning('链接为空');return;}
var aux = document.createElement("input");
aux.setAttribute("value", `${process.env.VUE_APP_BASE_PATH}/#article/content?id=${row.id}`);
aux.setAttribute("value", `${process.env.VUE_APP_BASE_PATH}/#/article/content?id=${row.id}`);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
@ -103,7 +111,7 @@ export default {
// 根据模块id查询标签
getLabels(){
if(this.query.moduleId){
tree(this.query.moduleId).then(res => {
list(this.query.moduleId).then(res => {
this.labels = res;
});
}else{
@ -113,11 +121,11 @@ export default {
},
// 文章详情
toShowDetail(row) {
this.$router.push({ path: '/platform/article/detail' , query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
this.$router.push({ path: '/platform/article/detail' , query: { id:row.id } });
},
// 预览
toPreview(row) {
window.open(`${process.env.VUE_APP_BASE_PATH}/#article/content?id=${row.id}`);
window.open(`${process.env.VUE_APP_BASE_PATH}/#/article/content?id=${row.id}`);
},
// 添加文章
toAddArticle() {
@ -125,7 +133,7 @@ export default {
},
// 添加文章
toEditArticle(row) {
this.$router.push({ path: '/platform/article/edit', query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
this.$router.push({ path: '/platform/article/edit', query: { id:row.id } });
},
// 文章删除
deleteArticle(id) {
@ -136,16 +144,16 @@ export default {
})
.then(async() => {
try {
// state.tableData.loading = true;
// let res = await artApi.deleteArticle(id);
// if(res?.success){
// await getTableData();
this.$message.success('文章删除成功！');
// } else ElMessage.error('文章删除失败！');
this.crud.loading = true;
crudArticle.del(id).then(res => {
const isSuccess = res.code === 200;
this.$message[isSuccess?'success':'error'](`文章删除${isSuccess?'成功':'失败'}！`);
isSuccess?this.crud.refresh():'';
});
} catch(e) {
this.$message.error('处理失败！');
} finally {
// state.tableData.loading = false;
this.crud.loading = false;
}
})
},