文章管理部分对接

src/api/platform/article.js

@@ -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 }

src/api/platform/label.js

@@ -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 }

src/components/WangEditor/index.vue

@@ -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

src/router/index.js

@@ -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)

src/router/routers.js

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

src/views/platform/article/add.vue

@@ -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;
+        const { id } = this.$route.query;
-        if(moduleName && labelName && !this.isAdd) {
+        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;
+                try {
-                this.coverFile = file;
+                    this.loading = true;
-                this.coverHide = true;
+                    upload(this.imagesUploadApi, uploadFile.raw).then(res => {
-                this.form.fileArray = uploadFiles;
+                        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);
+                single(id).then(res => {
-                // if(res?.success) {
+                    if(res){
-                //     state.data = res.data;
+                        res.top = res.top ? true : false;
-                //     // 下面这里处理一下，因为后端返回的是0和1，而前端需要的是true和false，到时候提交的时候再转换回来
+                        this.form = res;
-                //     state.data.top = state.data.top === 1;
+                        if(res.photo) {
-                //     state.data.moduleName = moduleName;
+                            this.coverHide = true;
-                //     state.data.labelName = labelName;
+                            this.form.photo = res.photo;
-                //     state.data.textid = state.data.id;
+                            this.form.fileArray = [{url: this.baseApi+this.form.photo}]
-                //     if(state.data.photo){ 
+                        }
-                //         const never = [{name:state.data.title,url:viteUrl+state.data.photo}];
+                    }else{
-                //         state.fileArray = never;
+                        this.$message.error('文章获取失败！');
-                //         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;
             } 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) => {
+            try {
-                if (valid) {
+                this.$refs['articleFormRef'].validate(async(valid) => {
-                    const articleForm = {...this.form};
+                    if (valid) {
-                    articleForm.top = articleForm.top ? 1 : 0;
+                        const articleForm = {...this.form};
-                    upload(this.imagesUploadApi, articleForm.fileArray[0].raw).then(res => {
+                        articleForm.top = articleForm.top ? 1 : 0;
-                        if(res.status === 200){
+                        delete articleForm.fileArray;
-                            const data = res.data;
+                        const ft = this.isAdd? add : edit;
-                            const url = this.baseApi+'/file/图片/' + data.newFileName;
+                        ft(articleForm).then(res => { 
-                            articleForm.photo = url;
+                            this.$message.success(`文章${this.isAdd?'添加':'编辑'}成功！`);
-                            delete articleForm.fileArray;
+                            this.cancel();
-                            const ft = this.isAdd? add : edit;
+                        })
-                            ft(articleForm).then(res => { 
+                    }else{
-                                this.$message.success(`文章${this.isAdd?'添加':'编辑'}成功！`);
+                        this.$message.error('请完善信息！');
-                                this.cancel();
+                    }
-                            })
+                })
-                        }else{
+            } catch (error) {
-                            this.$message.error('新增文章失败');
+                this.$message.error('处理失败!');
-                            return;
+            }
-                        }
-                    });
-                }else{
-                    this.$message.error('请完善信息！');
-                }
-            })
         },
     }
 }

src/views/platform/article/content.vue

@@ -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>

src/views/platform/article/detail.vue

@@ -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: '测试',
+            title: '',
-            articletype: 0,
+            articleType: '',
-            createtime: '2025-01-23',
+            createTime: '',
-            photo: 'https://huyun120.cn/fd/health/img/%E7%BB%84%20319@2x.f0767b46.png',
+            photo: '',
-            text: '测试',
+            text: '',
-            top: 1,
+            top: '',
-            view: 17,
+            view: '',
         },
         loading: false,
     }
   },
+  computed: {
+    ...mapGetters([
+        'baseApi'
+    ])
+  },
   created(){
-    const { moduleName, labelName, id } = this.$route.query;
+    const { id } = this.$route.query;
-    // if(moduleName && labelName && this.$route.path == '/platform/article/edit') {
+    if(id) {
-    //     this.getArticleDetailById(id);
+        this.getArticleDetailById(id);
-    // }
+    }
-    this.data.moduleName = moduleName;
-    this.data.labelName = labelName;
   },
   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>

src/views/platform/article/index.vue

@@ -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;
+          this.crud.loading = true;
-          // let res = await artApi.deleteArticle(id);
+          crudArticle.del(id).then(res => { 
-          // if(res?.success){ 
+            const isSuccess = res.code === 200;
-          //   await getTableData();
+            this.$message[isSuccess?'success':'error'](`文章删除${isSuccess?'成功':'失败'}！`);
-            this.$message.success('文章删除成功！');
+            isSuccess?this.crud.refresh():'';
-          // } else ElMessage.error('文章删除失败！');
+          });
         } catch(e) {
           this.$message.error('处理失败！');
         } finally {
-          // state.tableData.loading = false;
+          this.crud.loading = false;
         }
       })
     },