!210 营养知识模块优化

Merge pull request !210 from 德仔/xzj
2021-04-17 18:13:49 +08:00
parent d59ab3b69b f2d2e8c8ac
commit 3e640f6eb8
3 changed files with 182 additions and 35 deletions
--- a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysNutritionQuestionServiceImpl.java
+++ b/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"};
--- a/stdiet-ui/src/components/Wangeditor/index.vue
+++ b/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>
--- a/stdiet-ui/src/views/custom/nutritionQuestion/index.vue
+++ b/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,24 +113,11 @@
    />

    <!-- 添加或修改营养知识小问答对话框 -->
-    <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-input
-              type="textarea"
-              :rows="4"
-              maxlength="1000"
-              show-word-limit
-              placeholder="请输入内容"
-              v-model="form.content">
-            </el-input>
-          </el-form-item>
        <el-form-item label="关键词" prop="keyArray">
          <el-select
            v-model="form.keyArray"
@ -143,6 +138,20 @@
            </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"
+              maxlength="1000"
+              show-word-limit
+              placeholder="请输入内容"
+              v-model="form.content">
+            </el-input>
+          </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 = "添加营养小知识";