!210 营养知识模块优化

Merge pull request !210 from 德仔/xzj

stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysNutritionQuestionServiceImpl.java

@@ -33,7 +33,6 @@ public class SysNutritionQuestionServiceImpl implements ISysNutritionQuestionSer
 
     @Value("${lucene.index.nutritionQuestion}")
     public String index_path;
-    //private static final String index_path = "";
 
     //建立索引的字段名称
     public static final String[] index_field_array = {"id", "title", "content", "key"};

stdiet-ui/src/components/Wangeditor/index.vue

@@ -0,0 +1,118 @@
+<template lang="html">
+  <div class="editor" style="height: 350px; overflow: auto">
+    <!--<div ref="toolbar" class="toolbar">
+    </div>-->
+    <div ref="editor" class="text">
+    </div>
+  </div>
+</template>
+
+<script>
+  import E from 'wangeditor'
+  export default {
+    name: 'editoritem',
+    data() {
+      return {
+        // uploadPath,
+        editor: null,
+        info_: null
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    },
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      isClear: {
+        type: Boolean,
+        default: false
+      },
+      disable: {
+          type: Boolean,
+          default: false
+      }
+    },
+    watch: {
+      isClear(val) {
+        // 触发清除文本域内容
+        if (val) {
+          this.editor.txt.clear()
+          this.info_ = null
+        }
+      },
+      value: function(value) {
+        if (value !== this.editor.txt.html()) {
+          this.editor.txt.html(this.value == null ? "" : this.value)
+        }
+      }
+      //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
+    },
+    mounted() {
+      this.seteditor()
+      this.editor.txt.html(this.value)
+    },
+    methods: {
+      seteditor() {
+        // http://192.168.2.125:8080/admin/storage/create
+        //this.editor = new E(this.$refs.toolbar, this.$refs.editor);
+        this.editor = new E(this.$refs.editor);
+        
+        // 配置菜单
+        this.editor.config.menus = [
+          //'head', // 标题
+          //'bold', // 粗体
+          //'fontSize', // 字号
+          //'fontName', // 字体
+          //'italic', // 斜体
+          //'underline', // 下划线
+          //'strikeThrough', // 删除线
+          //'foreColor', // 文字颜色
+          //'backColor', // 背景颜色
+          //'link', // 插入链接
+          //'list', // 列表
+          'justify', // 对齐方式
+          //'quote', // 引用
+          //'emoticon', // 表情
+          //'image', // 插入图片
+          //'table', // 表格
+          //'video', // 插入视频
+          //'code', // 插入代码
+          'undo', // 撤销
+          //'redo', // 重复
+          //'fullScreen' // 全屏
+        ]
+        this.editor.config.onchange = (html) => {
+          this.info_ = html // 绑定当前逐渐地值
+          this.$emit('change', this.info_) // 将内容同步到父组件中
+        }
+        this.editor.config.showFullScreen = true
+        // 创建富文本编辑器
+        this.editor.create();
+        
+        if(this.disable){
+            this.editor.disable();
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="css">
+  .editor {
+    width: 100%;
+    margin: 0 auto;
+    position: relative;
+    z-index: 0;
+  }
+  .toolbar {
+    border: 1px solid #ccc;
+  }
+  .text {
+    border: 1px solid #ccc;
+    min-height: 300px;
+  }
+</style>

stdiet-ui/src/views/custom/nutritionQuestion/index.vue

@@ -66,18 +66,26 @@
         <AutoHideMessage :data="scope.row.title == null ? '' : (scope.row.title+'')" :maxLength="10"/>
         </template>
       </el-table-column>
-      <el-table-column label="内容" align="center" prop="content" >
-        <template slot-scope="scope">
-        <AutoHideMessage :data="scope.row.content == null ? '' : (scope.row.content+'')" :maxLength="10"/>
-        </template>
-      </el-table-column>
       <el-table-column label="关键词" align="center" prop="key" >
         <template slot-scope="scope">
         <AutoHideMessage :data="scope.row.key == null ? '' : (scope.row.key+'')" :maxLength="10"/>
         </template>
       </el-table-column>
+      <el-table-column label="内容" align="center" prop="content" >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="clickPreviewQuestion(scope.row)"
+          >预览</el-button>
+        <!--<AutoHideMessage :data="scope.row.content == null ? '' : (scope.row.content+'')" :maxLength="10"/>-->
+        </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"
@@ -105,15 +113,35 @@
     />
 
     <!-- 添加或修改营养知识小问答对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <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="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
         </el-form-item>
-        <!--<el-form-item label="内容">
-          <editor v-model="form.content" :min-height="192"/>
-        </el-form-item>-->
-        <el-form-item label="内容" prop="content" >
+        <el-form-item label="关键词" prop="keyArray">
+          <el-select
+            v-model="form.keyArray"
+            multiple
+            filterable
+            clearable
+            allow-create
+            default-first-option
+            placeholder="请创建案例关键词，按回车创建，最多5个"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in keyOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="内容" prop="content">
+          <Editor :value="form.content" :isClear="isClear" @change="questionContentChange"></Editor>
+        </el-form-item>
+        <!--<el-form-item label="内容" prop="content" >
             <el-input
               type="textarea"
               :rows="4"
@@ -122,27 +150,8 @@
               placeholder="请输入内容"
               v-model="form.content">
             </el-input>
-          </el-form-item>
-          <el-form-item label="关键词" prop="keyArray">
-            <el-select
-              v-model="form.keyArray"
-              multiple
-              filterable
-              clearable
-              allow-create
-              default-first-option
-              placeholder="请创建案例关键词，按回车创建，最多5个"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="dict in keyOptions"
-                :key="dict.dictValue"
-                :label="dict.dictLabel"
-                :value="dict.dictValue"
-              >
-              </el-option>
-            </el-select>
-          </el-form-item>
+          </el-form-item>-->
+
        <!-- <el-form-item label="关键词" prop="key">
           <el-input v-model="form.key" placeholder="请输入关键词" />
         </el-form-item>-->
@@ -153,12 +162,17 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog :title="previewQuestion.title" :visible.sync="previewOpen" width="800px" append-to-body>
+        <div style="height: 600px; overflow: auto" v-html="previewQuestion.content">
+        </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listNutritionQuestion, getNutritionQuestion, delNutritionQuestion, addNutritionQuestion, updateNutritionQuestion, exportNutritionQuestion } from "@/api/custom/nutritionQuestion";
-import Editor from '@/components/Editor';
+import Editor from '@/components/Wangeditor';
   import AutoHideMessage from "@/components/AutoHideMessage";
 export default {
   name: "NutritionQuestion",
@@ -200,7 +214,13 @@ export default {
           { required: true, message: "内容不能为空", trigger: "blur" },
         ]
       },
-      keyOptions:[]
+      keyOptions:[],
+      isClear: false,
+      previewOpen: false,
+      previewQuestion: {
+        title: "",
+        content: ""
+      }
     };
   },
   created() {
@@ -232,6 +252,10 @@ export default {
       };
       this.resetForm("form");
     },
+    questionContentChange(content){
+        console.log(content);
+        this.form.content = content;
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -248,8 +272,14 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
+    clickPreviewQuestion(row){
+      this.previewQuestion.title = row.title;
+      this.previewQuestion.content = row.content;
+      this.previewOpen = true;
+    },
     /** 新增按钮操作 */
     handleAdd() {
+      //this.isClear = true;
       this.reset();
       this.open = true;
       this.title = "添加营养小知识";