1、项目初始化

package-lock.json

@@ -2371,6 +2371,29 @@
       "resolved": "https://registry.npmmirror.com/@wangeditor/list-module/-/list-module-1.0.5.tgz",
       "integrity": "sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ=="
     },
+    "@wangeditor/plugin-upload-attachment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/@wangeditor/plugin-upload-attachment/-/plugin-upload-attachment-1.1.0.tgz",
+      "integrity": "sha512-K6SsV3Cv1g+Ob1xjRRQ13Sh3lcj3yAa/aXMaKKbaPI76rNZiOpyAGH/iVv5i9enmwbZql01IXpvhK+HtrikVyQ==",
+      "requires": {
+        "dom7": "^4.0.4"
+      },
+      "dependencies": {
+        "dom7": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmmirror.com/dom7/-/dom7-4.0.6.tgz",
+          "integrity": "sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==",
+          "requires": {
+            "ssr-window": "^4.0.0"
+          }
+        },
+        "ssr-window": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz",
+          "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+        }
+      }
+    },
     "@wangeditor/table-module": {
       "version": "1.1.4",
       "resolved": "https://registry.npmmirror.com/@wangeditor/table-module/-/table-module-1.1.4.tgz",

package.json

@@ -39,6 +39,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^1.0.2",
+    "@wangeditor/plugin-upload-attachment": "^1.1.0",
     "axios": "0.21.0",
     "clipboard": "2.0.6",
     "core-js": "^3.21.1",

src/api/business/cmsNews.js

@@ -71,7 +71,14 @@ export function updateTopStatus(data) {
     data: data
   })
 }
-
+//修改轮播状态
+export function updateCarouselStatus(data) {
+  return request({
+    url: '/business/cmsNews/updateCarouselStatus',
+    method: 'put',
+    data: data
+  })
+}
 // 删除信息管理
 export function delCmsNews(newsId) {
   return request({

src/components/WangEditor/index.vue

@@ -21,15 +21,27 @@
 </template>
 <script>
 import { getToken } from "@/utils/auth";
+
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+
 export default {
   components: { Editor, Toolbar },
   data() {
     return {
       editor: null,
       currentValue: '',
-      toolbarConfig: { },
+      toolbarConfig: {
+        insertKeys:{
+          index: 0,
+          keys:['uploadAttachment']
+        }
+      },
       editorConfig: {
+        hoverbarKeys: {
+          attachment: {
+            menuKeys: ['downloadAttachment'], // “下载附件”菜单
+          },
+        },
         placeholder: '请输入内容...',
         MENU_CONF:
           {
@@ -84,6 +96,32 @@ export default {
               customInsert(res, insertFn) {
                 insertFn(BASE_URL + res.url, res.fileName)
               },
+            },
+            uploadAttachment:{
+              server: BASE_URL + "/v1/common/upload",
+              fieldName: 'file',
+              maxFileSize: this.fileSize * 1024 * 1024,
+              headers:{
+                Authorization: "Bearer " + getToken()
+              },
+              onBeforeUpload(file){
+                return file
+              },
+              onProgress(progress){
+                console.log('progress', progress)
+              },
+              onSuccess(file, res) {
+                console.log(file.name + "上传成功")
+              },
+              onFailed(file, res) {
+                console.log(file.name + "上传失败")
+              },
+              onError(file, err, res){
+                console.log(file.name + "上传失败")
+              },
+              customInsert(res, file, insertFn) {
+                insertFn(res.fileName, BASE_URL + res.url)
+              },
             }
           }
 

src/main.js

@@ -4,7 +4,9 @@ import Cookies from 'js-cookie'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
+import attachmentModule from '@wangeditor/plugin-upload-attachment'
+import {Boot} from '@wangeditor/editor'
+Boot.registerModule(attachmentModule)
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/common.scss' // common css
 import App from './App'

src/views/business/cmsNews/index.vue

@@ -89,7 +89,7 @@
           </el-table-column>
           <el-table-column label="所属分类" align="center" prop="cmsCategory.name" width="200"/>
           <el-table-column label="浏览量" align="center" prop="viewCount" width="140"/>
-          <el-table-column label="是否置顶" align="center" prop="isTop" width="140">
+          <el-table-column label="置顶" align="center" prop="isTop" width="140">
             <template slot-scope="scope">
               <el-switch
                 v-model="scope.row.isTop"
@@ -97,6 +97,14 @@
               ></el-switch>
             </template>
           </el-table-column>
+          <el-table-column label="轮播" align="center" prop="carousel" width="140">
+            <template slot-scope="scope">
+              <el-switch
+                v-model="scope.row.carousel"
+                @change="handleCarouselStatusChange(scope.row)"
+              ></el-switch>
+            </template>
+          </el-table-column>
           <el-table-column label="创建人" align="center" prop="createBy" width="150"/>
           <el-table-column label="创建时间" align="center" prop="createTime" width="150">
             <template slot-scope="scope">
@@ -142,7 +150,7 @@
 
 
     <!-- 添加或修改信息管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" style="height: 600px; margin-top: 100px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" style="height: 600px; margin-top: 100px" append-to-body append-to-body :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="所属分类" prop="categoryId">
           <el-select v-model="form.categoryId" placeholder="请选择">
@@ -172,6 +180,9 @@
         <el-form-item label="是否置顶">
             <el-switch v-model="form.isTop"></el-switch>
         </el-form-item>
+        <el-form-item label="是否轮播">
+          <el-switch v-model="form.carousel"></el-switch>
+        </el-form-item>
         <el-form-item label="缩略图">
           <image-upload :limit="1" :file-size="10" :file-type="['.png', '.jpg', '.jpeg', '.gif']"  v-model="form.thumbnail"></image-upload>
         </el-form-item>
@@ -188,7 +199,7 @@
       </div>
     </el-dialog>
     <!-- 知识库详情 -->
-    <el-dialog title="预览详情" :visible.sync="viewOpen"  width="1000px" append-to-body>
+    <el-dialog title="预览详情" :visible.sync="viewOpen"  width="1000px" append-to-body :close-on-click-modal="false">
       <el-row>
         <el-col :span="24" align="center">
           <h2>{{ cmsNewsInfo.title }}</h2>
@@ -221,7 +232,7 @@
 </template>
 
 <script>
-import { listCmsNews, getCmsNews, delCmsNews, addCmsNews, updateCmsNews, exportCmsNews, updateTopStatus ,getCmsNewsByCategoryId, frontView} from "@/api/business/cmsNews";
+import { listCmsNews, getCmsNews, delCmsNews, addCmsNews, updateCmsNews, exportCmsNews, updateTopStatus ,getCmsNewsByCategoryId, frontView, updateCarouselStatus} from "@/api/business/cmsNews";
 import { treeselect } from "@/api/business/cmsCategory";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@@ -305,6 +316,9 @@ export default {
         isTop: [
           { required: true, message: "是否置顶不能为空", trigger: "blur" }
         ],
+        carousel: [
+          { required: true, message: "是否轮播不能为空", trigger: "blur" }
+        ],
       }
     };
   },
@@ -392,6 +406,7 @@ export default {
         content: null,
         viewCount: null,
         isTop: false,
+        carousel: false,
         thumbnail: null,
         focusImgs:[],
         focusImgsStr: '',
@@ -426,6 +441,21 @@ export default {
       this.open = true;
       this.title = "添加信息";
     },
+    /** 修改轮播状态*/
+    handleCarouselStatusChange(row){
+      let text = row.carousel ? "轮播" : "取消轮播";
+      this.$modal.confirm('确认要' + text + '吗？').then(function() {
+        return updateCarouselStatus({
+          'newsId': row.newsId,
+          'carousel': row.carousel
+        });
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功");
+      }).catch(function() {
+        row.carousel = row.carousel ? false : true;
+      });
+    },
+    /**修改置顶状态**/
     handleStatusChange(row){
       let text = row.isTop ? "置顶" : "取消置顶";
       this.$modal.confirm('确认要' + text + '吗？').then(function() {
@@ -500,7 +530,7 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const newsIds = row.newsId || this.ids;
-      this.$modal.confirm('是否确认删除信息管理编号为"' + newsIds + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除？').then(function() {
         return delCmsNews(newsIds);
       }).then(() => {
         this.getList();
@@ -510,7 +540,7 @@ export default {
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$modal.confirm('是否确认导出所有信息管理数据项？').then(() => {
+      this.$modal.confirm('是否确认导出所有数据项？').then(() => {
         this.exportLoading = true;
         return exportCmsNews(queryParams);
       }).then(response => {