富文本上传图片

hope-winery/src/main/java/com/ruoyi/winery/component/MiniComponent.java

@@ -83,6 +83,7 @@ public class MiniComponent {
         WxMaPhoneNumberInfo mobile = wxMaService.getUserService().getPhoneNoInfo(sessionKey, encryptedData, iv);
 
         user.setMobile(mobile.getPhoneNumber());
+
         wineryMauserService.saveOrUpdate(user);
 
         return mobile.getPhoneNumber();

hope-winery/src/main/java/com/ruoyi/winery/controller/NewsContentController.java

@@ -0,0 +1,127 @@
+package com.ruoyi.winery.controller;
+
+import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
+
+import java.util.List;
+import java.util.Arrays;
+
+import com.ruoyi.common.utils.StringUtils;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.enums.BusinessType;
+import com.ruoyi.winery.domain.NewsContent;
+import com.ruoyi.winery.service.INewsContentService;
+import com.ruoyi.common.utils.poi.ExcelUtil;
+import com.ruoyi.common.core.page.TableDataInfo;
+
+/**
+ * 新闻资讯Controller
+ * 
+ * @author ruoyi
+ * @date 2020-12-31
+ */
+@RequiredArgsConstructor(onConstructor_ = @Autowired)
+@RestController
+@RequestMapping("/news/news_content" )
+public class NewsContentController extends BaseController {
+
+    private final INewsContentService iNewsContentService;
+
+    /**
+     * 查询新闻资讯列表
+     */
+    @PreAuthorize("@ss.hasPermi('news:news_content:list')")
+    @GetMapping("/list")
+    public TableDataInfo list(NewsContent newsContent)
+    {
+        startPage();
+        LambdaQueryWrapper<NewsContent> lqw = Wrappers.lambdaQuery(newsContent);
+        if (newsContent.getDeptId() != null){
+            lqw.eq(NewsContent::getDeptId ,newsContent.getDeptId());
+        }
+        if (StringUtils.isNotBlank(newsContent.getNewsTitle())){
+            lqw.eq(NewsContent::getNewsTitle ,newsContent.getNewsTitle());
+        }
+        if (StringUtils.isNotBlank(newsContent.getNewsBody())){
+            lqw.eq(NewsContent::getNewsBody ,newsContent.getNewsBody());
+        }
+        if (StringUtils.isNotBlank(newsContent.getNewsImage())){
+            lqw.eq(NewsContent::getNewsImage ,newsContent.getNewsImage());
+        }
+        if (newsContent.getNewsType() != null){
+            lqw.eq(NewsContent::getNewsType ,newsContent.getNewsType());
+        }
+        if (newsContent.getState() != null){
+            lqw.eq(NewsContent::getState ,newsContent.getState());
+        }
+        List<NewsContent> list = iNewsContentService.list(lqw);
+        return getDataTable(list);
+    }
+
+    /**
+     * 导出新闻资讯列表
+     */
+    @PreAuthorize("@ss.hasPermi('news:news_content:export')" )
+    @Log(title = "新闻资讯" , businessType = BusinessType.EXPORT)
+    @GetMapping("/export" )
+    public AjaxResult export(NewsContent newsContent) {
+        LambdaQueryWrapper<NewsContent> lqw = new LambdaQueryWrapper<NewsContent>(newsContent);
+        List<NewsContent> list = iNewsContentService.list(lqw);
+        ExcelUtil<NewsContent> util = new ExcelUtil<NewsContent>(NewsContent. class);
+        return util.exportExcel(list, "news_content" );
+    }
+
+    /**
+     * 获取新闻资讯详细信息
+     */
+    @PreAuthorize("@ss.hasPermi('news:news_content:query')" )
+    @GetMapping(value = "/{id}" )
+    public AjaxResult getInfo(@PathVariable("id" ) String id) {
+        return AjaxResult.success(iNewsContentService.getById(id));
+    }
+
+    /**
+     * 新增新闻资讯
+     */
+    @PreAuthorize("@ss.hasPermi('news:news_content:add')" )
+    @Log(title = "新闻资讯" , businessType = BusinessType.INSERT)
+    @PostMapping
+    public AjaxResult add(UsernamePasswordAuthenticationToken token, @RequestBody NewsContent newsContent) {
+        newsContent.setDeptId(getDeptId(token));
+        return toAjax(iNewsContentService.save(newsContent) ? 1 : 0);
+    }
+
+    /**
+     * 修改新闻资讯
+     */
+    @PreAuthorize("@ss.hasPermi('news:news_content:edit')" )
+    @Log(title = "新闻资讯" , businessType = BusinessType.UPDATE)
+    @PutMapping
+    public AjaxResult edit(@RequestBody NewsContent newsContent) {
+        return toAjax(iNewsContentService.updateById(newsContent) ? 1 : 0);
+    }
+
+    /**
+     * 删除新闻资讯
+     */
+    @PreAuthorize("@ss.hasPermi('news:news_content:remove')" )
+    @Log(title = "新闻资讯" , businessType = BusinessType.DELETE)
+    @DeleteMapping("/{ids}" )
+    public AjaxResult remove(@PathVariable String[] ids) {
+        return toAjax(iNewsContentService.removeByIds(Arrays.asList(ids)) ? 1 : 0);
+    }
+}

hope-winery/src/main/java/com/ruoyi/winery/domain/NewsContent.java

@@ -0,0 +1,74 @@
+package com.ruoyi.winery.domain;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.NoArgsConstructor;
+import lombok.ToString;
+import lombok.experimental.Accessors;
+import com.ruoyi.common.annotation.Excel;
+import com.baomidou.mybatisplus.annotation.TableId;
+import com.baomidou.mybatisplus.annotation.TableName;
+import com.baomidou.mybatisplus.annotation.IdType;
+import java.io.Serializable;
+import java.util.Date;
+import java.math.BigDecimal;
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * 新闻资讯对象 news_content
+ * 
+ * @author ruoyi
+ * @date 2020-12-31
+ */
+@Data
+@ToString
+@EqualsAndHashCode
+@NoArgsConstructor
+@Accessors(chain = true)
+@TableName("news_content")
+public class NewsContent implements Serializable {
+
+private static final long serialVersionUID=1L;
+
+
+    /** 规格ID */
+    @TableId(value = "id", type = IdType.ASSIGN_UUID)
+    private String id;
+
+    /** 部门ID */
+    @Excel(name = "部门ID")
+    private Long deptId;
+
+    /** 创建者 */
+    private String createBy;
+
+    /** 创建时间 */
+    private Date createTime;
+
+    /** 更新者 */
+    private String updateBy;
+
+    /** 更新时间 */
+    private Date updateTime;
+
+    /** 新闻标题 */
+    @Excel(name = "新闻标题")
+    private String newsTitle;
+
+    /** 新闻详情 */
+    @Excel(name = "新闻详情")
+    private String newsBody;
+
+    /** 新闻封面图 */
+    @Excel(name = "新闻封面图")
+    private String newsImage;
+
+    /** 新闻类型 */
+    @Excel(name = "新闻类型")
+    private Integer newsType;
+
+    /** 状态 */
+    @Excel(name = "状态")
+    private Integer state;
+}

hope-winery/src/main/java/com/ruoyi/winery/mapper/NewsContentMapper.java

@@ -0,0 +1,14 @@
+package com.ruoyi.winery.mapper;
+
+import com.ruoyi.winery.domain.NewsContent;
+import com.baomidou.mybatisplus.core.mapper.BaseMapper;
+
+/**
+ * 新闻资讯Mapper接口
+ *
+ * @author ruoyi
+ * @date 2020-12-31
+ */
+public interface NewsContentMapper extends BaseMapper<NewsContent> {
+
+}

hope-winery/src/main/java/com/ruoyi/winery/service/INewsContentService.java

@@ -0,0 +1,14 @@
+package com.ruoyi.winery.service;
+
+import com.ruoyi.winery.domain.NewsContent;
+import com.baomidou.mybatisplus.extension.service.IService;
+
+/**
+ * 新闻资讯Service接口
+ *
+ * @author ruoyi
+ * @date 2020-12-31
+ */
+public interface INewsContentService extends IService<NewsContent> {
+
+}

hope-winery/src/main/java/com/ruoyi/winery/service/impl/NewsContentServiceImpl.java

@@ -0,0 +1,18 @@
+package com.ruoyi.winery.service.impl;
+
+import org.springframework.stereotype.Service;
+import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.ruoyi.winery.mapper.NewsContentMapper;
+import com.ruoyi.winery.domain.NewsContent;
+import com.ruoyi.winery.service.INewsContentService;
+
+/**
+ * 新闻资讯Service业务层处理
+ *
+ * @author ruoyi
+ * @date 2020-12-31
+ */
+@Service
+public class NewsContentServiceImpl extends ServiceImpl<NewsContentMapper, NewsContent> implements INewsContentService {
+
+}

hope-winery/src/main/resources/mapper/news/NewsContentMapper.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.winery.mapper.NewsContentMapper">
+    
+    <resultMap type="NewsContent" id="NewsContentResult">
+        <result property="id"    column="id"    />
+        <result property="deptId"    column="dept_id"    />
+        <result property="createBy"    column="create_by"    />
+        <result property="createTime"    column="create_time"    />
+        <result property="updateBy"    column="update_by"    />
+        <result property="updateTime"    column="update_time"    />
+        <result property="newsTitle"    column="news_title"    />
+        <result property="newsBody"    column="news_body"    />
+        <result property="newsImage"    column="news_image"    />
+        <result property="newsType"    column="news_type"    />
+        <result property="state"    column="state"    />
+    </resultMap>
+
+
+</mapper>

ruoyi-common/src/main/java/com/ruoyi/common/core/controller/BaseController.java

@@ -102,12 +102,12 @@ public class BaseController
      * @param token
      * @return
      */
-    public String getDeptId(UsernamePasswordAuthenticationToken token) {
+    public Long getDeptId(UsernamePasswordAuthenticationToken token) {
         JSONObject json = (JSONObject) JSONUtil.parse(token.getPrincipal());
 
-        String deptId = json.getJSONObject("user")
+        Long deptId = json.getJSONObject("user")
                 .getJSONObject("dept")
-                .getStr("deptId");
+                .getLong("deptId");
 
         return deptId;
     }

ruoyi-ui/src/api/news/news_content.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询新闻资讯列表
+export function listNews_content(query) {
+  return request({
+    url: '/news/news_content/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询新闻资讯详细
+export function getNews_content(id) {
+  return request({
+    url: '/news/news_content/' + id,
+    method: 'get'
+  })
+}
+
+// 新增新闻资讯
+export function addNews_content(data) {
+  return request({
+    url: '/news/news_content',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改新闻资讯
+export function updateNews_content(data) {
+  return request({
+    url: '/news/news_content',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除新闻资讯
+export function delNews_content(id) {
+  return request({
+    url: '/news/news_content/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出新闻资讯
+export function exportNews_content(query) {
+  return request({
+    url: '/news/news_content/export',
+    method: 'get',
+    params: query
+  })
+}

ruoyi-ui/src/api/system/file.js

@@ -0,0 +1,15 @@
+import request from "@/utils/request";
+
+export function uploadFile(file) {
+
+  let data = new FormData();
+  // 创建一个表单数据
+  data.append("file",file);
+
+  // 把图片或文件添加到data
+  return request({
+    url: '/common/upload',
+    method: 'post',
+    data
+  })
+}

ruoyi-ui/src/components/Editor/index.vue

@@ -1,5 +1,14 @@
 <template>
-    <div class="editor" ref="editor" :style="styles"></div>
+
+  <div>
+    <div class="editor" ref="editor" :style="styles"/>
+    <input
+      id="file"
+      type="file"
+      accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon"
+      @change="onFileChange"/>
+
+  </div>
 </template>
 
 <script>
@@ -7,6 +16,9 @@ import Quill from "quill";
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
 import "quill/dist/quill.bubble.css";
+import {Message} from "element-ui";
+import {getToken} from "@/utils/auth";
+import {uploadFile} from "@/api/system/file";
 
 export default {
   name: "Editor",
@@ -29,6 +41,9 @@ export default {
   },
   data() {
     return {
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
       Quill: null,
       currentValue: "",
       options: {
@@ -47,11 +62,14 @@ export default {
             [{color: []}, {background: []}],             // 字体颜色、字体背景颜色
             [{align: []}],                                 // 对齐方式
             ["clean"],                                       // 清除文本格式
-            ["link", "image", "video"]                       // 链接、图片、视频
+            // ["link", "image", "video"]                       // 链接、图片、视频
+            ["image"]                       // 图片
           ],
         },
         placeholder: "请输入内容",
         readOnly: false,
+
+
       },
     };
   },
@@ -82,6 +100,7 @@ export default {
   },
   mounted() {
     this.init();
+
   },
   beforeDestroy() {
     this.Quill = null;
@@ -91,6 +110,17 @@ export default {
       const editor = this.$refs.editor;
       this.Quill = new Quill(editor, this.options);
       this.Quill.pasteHTML(this.currentValue);
+
+
+      let toolbar = this.Quill.getModule("toolbar");       //获取工具栏模块
+
+      //对工具栏的image添加回调函数覆盖原本的方法
+      toolbar.addHandler("image", () => {
+
+        document.getElementById("file").click();
+
+      });
+
       this.Quill.on("text-change", (delta, oldDelta, source) => {
         const html = this.$refs.editor.children[0].innerHTML;
         const text = this.Quill.getText();
@@ -109,21 +139,95 @@ export default {
         this.$emit("on-editor-change", eventName, ...args);
       });
     },
+
+    onFileChange(event) {
+      //通过input本身的change钩子，对图片进行处理
+      console.log(event)
+      let tar = event.target;
+      let files = tar.files;
+      if (files[0].size > 1024 * 1024 * 2) {
+        Message.error("图片大小不能超过2M");
+        return false;
+      }
+
+      //使用FileReader读取图片成base64编码，再插入到编辑框中
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+
+
+      uploadFile(files[0]).then(r => {
+        // reader.readAsDataURL(files[0]);
+        //将图片插入需要获取当前光标的位置，参数为是否要求焦点在编辑器上
+        let selection = this.Quill.getSelection(true);
+        //调用insertEmbed 将图片插入到编辑器
+        this.Quill.insertEmbed(selection.index, "image", r.url);
+
+      }).then(e => {
+      }).finally(() => {
+        this.loading.close();
+      })
+
+
+    },
+
+
+    handleUploadSuccess(res, file, fileList) {
+
+
+      // fileList = fileList.filter(x => x.response)
+      //
+      // let temp = fileList.map(x => {
+      //   return  x.response.fileName
+      // })
+      //
+      // let result = temp.join(',')
+      //
+      // this.$emit("input", result);
+      this.loading.close();
+    },
+
+    handleBeforeUpload() {
+      this.loading = this.$loading({
+        lock: true,
+        text: "上传中",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+    },
+    handleUploadError() {
+      this.$message({
+        type: "error",
+        message: "上传失败",
+      });
+      this.loading.close();
+    },
   },
 };
 </script>
 
 <style>
+
+
+#file {
+  display: none;
+}
+
+
 .editor, .ql-toolbar {
   white-space: pre-wrap !important;
   line-height: normal !important;
 }
+
 .quill-img {
   display: none;
 }
+
 .ql-snow .ql-tooltip[data-mode="link"]::before {
   content: "请输入链接地址:";
 }
+
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   border-right: 0px;
   content: "保存";
@@ -138,14 +242,17 @@ export default {
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
   content: "14px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
   content: "10px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
   content: "18px";
 }
+
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
   content: "32px";
@@ -155,26 +262,32 @@ export default {
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
   content: "文本";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
   content: "标题1";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
   content: "标题2";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
   content: "标题3";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
   content: "标题4";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
   content: "标题5";
 }
+
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
   content: "标题6";
@@ -184,10 +297,12 @@ export default {
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
   content: "标准字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
   content: "衬线字体";
 }
+
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
   content: "等宽字体";

ruoyi-ui/src/components/UploadImageMultiple/index.vue

@@ -68,8 +68,6 @@ export default {
 
       let result = temp.join(',')
 
-      console.log(result)
-
       this.$emit("input", result);
       this.loading.close();
     },

ruoyi-ui/src/mixin/common.js

@@ -9,3 +9,5 @@ Vue.filter('getImage200', val => {
   return "https://winery-1257413599.cos.ap-beijing.myqcloud.com/" + val + "?imageMogr2/thumbnail/!200x200r/|imageMogr2/gravity/center/crop/200x200/interlace/0"
 })
 
+
+

ruoyi-ui/src/utils/utils.js

@@ -0,0 +1,16 @@
+/**
+ * 根据字典值获取名称
+ * @param value
+ * @param options
+ * @returns {string}
+ */
+export function getDictName(value,options) {
+  let actions = [];
+  Object.keys(options).some((key) => {
+    if (options[key].dictValue == ('' + value)) {
+      actions.push(options[key].dictLabel);
+      return true;
+    }
+  })
+  return actions.join('');
+}

ruoyi-ui/src/views/news/news_content/index.vue

@@ -0,0 +1,423 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="部门ID" prop="deptId">
+        <el-input
+          v-model="queryParams.deptId"
+          placeholder="请输入部门ID"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="新闻标题" prop="newsTitle">
+        <el-input
+          v-model="queryParams.newsTitle"
+          placeholder="请输入新闻标题"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!--      <el-form-item label="新闻详情" prop="newsBody">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.newsBody"-->
+      <!--          placeholder="请输入新闻详情"-->
+      <!--          clearable-->
+      <!--          size="small"-->
+      <!--          @keyup.enter.native="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <el-form-item label="新闻类型" prop="newsType">
+        <el-select v-model="queryParams.newsType" placeholder="请选择新闻类型" clearable size="small">
+          <el-option
+            v-for="dict in newsTypeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="state">
+        <el-select v-model="queryParams.state" placeholder="请选择状态" clearable size="small">
+          <el-option
+            v-for="dict in stateOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['news:news_content:add']"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['news:news_content:edit']"
+        >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['news:news_content:remove']"
+        >删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['news:news_content:export']"
+        >导出
+        </el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="news_contentList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <el-table-column label="规格ID" align="center" prop="id" v-if="false"/>
+      <el-table-column label="部门ID" align="center" prop="deptId"/>
+      <el-table-column label="新闻标题" align="center" prop="newsTitle"/>
+<!--      <el-table-column label="新闻详情" align="center" prop="newsBody"/>-->
+      <el-table-column label="新闻封面图" align="center" prop="newsImage">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.newsImage|getImageForKey" style="width: 60px; height: 60px"/>
+        </template>
+
+      </el-table-column>
+      <el-table-column label="新闻类型" align="center" prop="newsType" :formatter="newsTypeFormat"/>
+      <el-table-column label="状态" align="center" prop="state" :formatter="stateFormat">
+        <template slot-scope="scope">
+          <el-tag :type="scope.row.state === 1 ? 'success' : 'danger'">
+            {{scope.row.state | getStateName(stateOptions)}}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['news:news_content:edit']"
+          >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['news:news_content:remove']"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改新闻资讯对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <!--        <el-form-item label="部门ID" prop="deptId">-->
+        <!--          <el-input v-model="form.deptId" placeholder="请输入部门ID"/>-->
+        <!--        </el-form-item>-->
+        <el-form-item label="新闻标题" prop="newsTitle">
+          <el-input v-model="form.newsTitle" placeholder="请输入新闻标题"/>
+        </el-form-item>
+
+        <el-form-item label="新闻封面图">
+          <uploadImage v-model="form.newsImage"/>
+        </el-form-item>
+        <el-form-item label="新闻类型" prop="newsType">
+          <!--          <el-select v-model="form.newsType" placeholder="请选择新闻类型">-->
+          <!--            <el-option-->
+          <!--              v-for="dict in newsTypeOptions"-->
+          <!--              :key="dict.dictValue"-->
+          <!--              :label="dict.dictLabel"-->
+          <!--              :value="parseInt(dict.dictValue)"-->
+          <!--            ></el-option>-->
+          <!--          </el-select>-->
+          <el-radio-group v-model="form.newsType">
+            <el-radio v-for="(dict, index) in newsTypeOptions" :key="index" :label="parseInt(dict.dictValue)">
+              {{dict.dictLabel}}
+            </el-radio>
+          </el-radio-group>
+
+        </el-form-item>
+        <el-form-item label="状态" prop="state">
+          <!--          <el-select v-model="form.state" placeholder="请选择状态">-->
+          <!--            <el-option-->
+          <!--              v-for="dict in stateOptions"-->
+          <!--              :key="dict.dictValue"-->
+          <!--              :label="dict.dictLabel"-->
+          <!--              :value="parseInt(dict.dictValue)"-->
+          <!--            ></el-option>-->
+          <!--          </el-select>-->
+
+          <el-radio-group v-model="form.state">
+            <el-radio v-for="(dict, index) in stateOptions" :key="index" :label="parseInt(dict.dictValue)">{{dict.dictLabel}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="新闻详情" prop="newsBody">
+          <editor :value="form.newsBody" :height="400" :min-height="400" @on-change="onChangeNewsBody"/>
+          <!--          <el-input v-model="form.newsBody" placeholder="请输入新闻详情"/>-->
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listNews_content,
+  getNews_content,
+  delNews_content,
+  addNews_content,
+  updateNews_content,
+  exportNews_content
+} from "@/api/news/news_content";
+import UploadImage from '@/components/UploadImage';
+import CommonMixin from "@/mixin/common";
+import Editor from '@/components/Editor';
+import {getDictName} from "@/utils/utils";
+import {delTable} from "@/api/tool/gen";
+
+export default {
+  name: "News_content",
+  mixins: [CommonMixin],
+  components: {
+    UploadImage,
+    Editor
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 新闻资讯表格数据
+      news_contentList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 新闻类型字典
+      newsTypeOptions: [],
+      // 状态字典
+      stateOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deptId: undefined,
+        newsTitle: undefined,
+        newsBody: undefined,
+        newsImage: undefined,
+        newsType: undefined,
+        state: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        deptId: [
+          {required: true, message: "部门ID不能为空", trigger: "blur"}
+        ],
+        createBy: [
+          {required: true, message: "创建者不能为空", trigger: "blur"}
+        ],
+        createTime: [
+          {required: true, message: "创建时间不能为空", trigger: "blur"}
+        ],
+      }
+    };
+  },
+  filters: {
+    getStateName(value, options) {
+      return getDictName(value, options)
+    }
+  },
+  created() {
+    this.getList();
+    this.getDicts("news_type").then(response => {
+      this.newsTypeOptions = response.data;
+    });
+    this.getDicts("sys_release_status").then(response => {
+      this.stateOptions = response.data;
+    });
+  },
+  methods: {
+    /** 查询新闻资讯列表 */
+    getList() {
+      this.loading = true;
+      listNews_content(this.queryParams).then(response => {
+        this.news_contentList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 新闻类型字典翻译
+    newsTypeFormat(row, column) {
+      return this.selectDictLabel(this.newsTypeOptions, row.newsType);
+    },
+    // 状态字典翻译
+    stateFormat(row, column) {
+      return this.selectDictLabel(this.stateOptions, row.state);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        deptId: undefined,
+        createBy: undefined,
+        createTime: undefined,
+        updateBy: undefined,
+        updateTime: undefined,
+        newsTitle: undefined,
+        newsBody: undefined,
+        newsImage: undefined,
+        newsType: 0,
+        state: 0
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加新闻资讯";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getNews_content(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改新闻资讯";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateNews_content(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addNews_content(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除新闻资讯编号为"' + ids + '"的数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return delNews_content(ids);
+      }).then(() => {
+        this.getList();
+        this.msgSuccess("删除成功");
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有新闻资讯数据项?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(function () {
+        return exportNews_content(queryParams);
+      }).then(response => {
+        this.download(response.msg);
+      })
+    },
+    onChangeNewsBody(value) {
+
+      console.log(value)
+      this.form.newsBody = value.html
+    }
+  }
+};
+</script>