修改帮助中心问题

src/views/helpCenter/helpContent.vue

@@ -1,8 +1,8 @@
-
 <template>
   <div class="m-container">
     <h2>
-      <div class="squrt"></div>帮助中心
+      <div class="squrt"></div>
+      帮助中心
     </h2>
     <div class="m-core">
       <el-button
@@ -15,39 +15,49 @@
       </el-button>
       <el-button
         v-permission="'/helpCategory'"
-           @click="onToUrl()"
+        @click="onToUrl()"
         type="primary"
         style="margin-bottom:20px"
       >
         分类管理
       </el-button>
       <!-- 搜索标题 -->
-      <save-form :inline="true"
-               class="searchForm"
-               @submit="search"
-               :model="searchForm">
+      <save-form
+        :inline="true"
+        class="searchForm"
+        @submit="search"
+        :model="searchForm"
+      >
         <el-form-item prop="hasPracticeCourse">
-          <el-cascader ref="cascader"
-                       :show-all-levels="false"
-                       :options="treeList"
-                       v-model="searchForm.catalogId"
-                       :props="{ checkStrictly: true }"
-                       clearable></el-cascader>
+          <el-cascader
+            ref="cascader"
+            :show-all-levels="false"
+            :options="treeList"
+            v-model="searchForm.catalogId"
+            :props="{ checkStrictly: true }"
+            clearable
+          ></el-cascader>
         </el-form-item>
         <el-form-item>
           <el-button native-type="submit" type="danger">搜索</el-button>
         </el-form-item>
       </save-form>
       <div class="tableWrap">
-        <el-table :data="tableList"
-                  :header-cell-style="{background:'#EDEEF0',color:'#444'}">>
-          <el-table-column width="120px"
-                           align="center"
-                           prop="id"
-                           label="编号"></el-table-column>
-          <el-table-column align="center"
-                           prop="title"
-                           label="标题"></el-table-column>
+        <el-table
+          :data="tableList"
+          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
+          >>
+          <el-table-column
+            width="120px"
+            align="center"
+            prop="id"
+            label="编号"
+          ></el-table-column>
+          <el-table-column
+            align="center"
+            prop="title"
+            label="标题"
+          ></el-table-column>
           <!-- <el-table-column align="center"
                            prop="content"
                            label="内容">
@@ -55,79 +65,91 @@
               <Tooltip :content="scope.row.content"></Tooltip>
             </template>
           </el-table-column> -->
-          <el-table-column align="center"
-                           prop="catalog.text"
-                           label="分类名"></el-table-column>
-          <el-table-column align="center"
-                           label="操作">
+          <el-table-column
+            align="center"
+            prop="catalog.text"
+            label="分类名"
+          ></el-table-column>
+          <el-table-column align="center" label="操作">
             <template slot-scope="scope">
-              <el-button v-permission="'helpCenterContent/modify'"
-                         @click="openTypes('update', scope.row)"
-                         type="text">修改</el-button>
-              <el-button @click="onTypeDelOpeation(scope.row)"
-                         v-permission="'helpCenterContent/delete'"
-                         type="text">删除</el-button>
+              <el-button
+                v-permission="'helpCenterContent/modify'"
+                @click="openTypes('update', scope.row)"
+                type="text"
+                >修改</el-button
+              >
+              <el-button
+                @click="onTypeDelOpeation(scope.row)"
+                v-permission="'helpCenterContent/delete'"
+                type="text"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
-        <pagination sync :total.sync="pageInfo.total"
-                    :page.sync="pageInfo.page"
-                    :limit.sync="pageInfo.limit"
-                    :page-sizes="pageInfo.page_size"
-                    @pagination="getList" />
+        <pagination
+          sync
+          :total.sync="pageInfo.total"
+          :page.sync="pageInfo.page"
+          :limit.sync="pageInfo.limit"
+          :page-sizes="pageInfo.page_size"
+          @pagination="getList"
+        />
       </div>
     </div>
-    <el-dialog :title="formTitle[formActionTitle]"
-               :visible.sync="typeStatus"
-               @close="onFormClose('ruleForm')"
-               width="1000px">
-      <el-form :model="form"
-               :rules="rules"
-               ref="ruleForm">
-        <el-form-item label="标题"
-                      prop="title"
-                      :label-width="formLabelWidth">
-          <el-input v-model.trim="form.title"
-                    autocomplete="off"
-                    placeholder="请输入标题"></el-input>
+    <el-dialog
+      :title="formTitle[formActionTitle]"
+      :visible.sync="typeStatus"
+      @close="onFormClose('ruleForm')"
+      width="1000px"
+    >
+      <el-form :model="form" :rules="rules" ref="ruleForm">
+        <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
+          <el-input
+            v-model.trim="form.title"
+            autocomplete="off"
+            placeholder="请输入标题"
+          ></el-input>
         </el-form-item>
-        <el-form-item label="分类"
-                      prop="catalogId"
-                      :label-width="formLabelWidth">
-          <el-cascader v-if="typeStatus"
-                       style="width: 100%;"
-                       :show-all-levels="false"
-                       ref="formCascader"
-                       :options="treeList"
-                       v-model="form.catalogId"
-                       :props="{ checkStrictly: true }"
-                       clearable></el-cascader>
+        <el-form-item
+          label="分类"
+          prop="catalogId"
+          :label-width="formLabelWidth"
+        >
+          <el-cascader
+            v-if="typeStatus"
+            style="width: 100%;"
+            :show-all-levels="false"
+            ref="formCascader"
+            :options="treeList"
+            v-model="form.catalogId"
+            :props="{ checkStrictly: true }"
+            clearable
+          ></el-cascader>
         </el-form-item>
-        <el-form-item label="内容"
-                      prop="content"
-                      :label-width="formLabelWidth">
+        <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
           <!-- <el-input type="textarea"
                     :rows="3"
                     placeholder="请输入内容"
                     v-model="form.content"> -->
-                    <!-- 改为富文本编辑器 -->
+          <!-- 改为富文本编辑器 -->
           <!-- </el-input> -->
-          <Editor :form='form'/>
+          <Editor :form="form.content" @onEditorChange="onEditorChange" />
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
+      <span slot="footer" class="dialog-footer">
         <el-button @click="typeStatus = false">取 消</el-button>
-        <el-button type="primary"
-                   @click="onTypeSubmit('ruleForm')">确 定</el-button>
+        <el-button type="primary" @click="onTypeSubmit('ruleForm')"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>
 </template>
 <script>
 import pagination from "@/components/Pagination/index";
-import Tooltip from '@/components/Tooltip'
-import Editor from '@/components/Editor'
+import Tooltip from "@/components/Tooltip";
+import Editor from "@/components/Editor";
 // import store from '@/store'
 import {
   helpCenterCatalogList,
@@ -136,9 +158,9 @@ import {
   helpCenterContentDelete
 } from "@/api/appTenant";
 export default {
-  components: { pagination, Tooltip,Editor },
+  components: { pagination, Tooltip, Editor },
   name: "helpCategory",
-  data () {
+  data() {
     return {
       searchForm: {
         catalogId: null
@@ -155,12 +177,14 @@ export default {
       form: {
         title: null, // 标题
         content: null, // 内容
-        catalogId: null, // 分类编号
+        catalogId: null // 分类编号
       },
       rules: {
         title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
-        catalogId: [{ required: true, message: "请输入选择分类", trigger: "blur" }]
+        content: [{ required: true, message: "请输入内容", trigger: "change" }],
+        catalogId: [
+          { required: true, message: "请输入选择分类", trigger: "blur" }
+        ]
         // subjectIds: [{ required: true, message: "请选择声部组合", trigger: "change" }]
       },
       pageInfo: {
@@ -173,37 +197,40 @@ export default {
       tempTreeList: []
     };
   },
-  mounted () {
+  mounted() {
     this.getList();
-    this.getTreeList()
+    this.getTreeList();
   },
   methods: {
     search() {
-      this.pageInfo.page = 1
-      this.getList()
+      this.pageInfo.page = 1;
+      this.getList();
     },
-    onTypeDelOpeation (row) {
-      this.$confirm('您是否删除该内容?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        helpCenterContentDelete({ id: row.id }).then(res => {
-          this.messageTips('删除', res)
-        })
-      }).catch(() => {
+    onEditorChange(html) {
+      this.form.content = html;
+    },
+    onTypeDelOpeation(row) {
+      this.$confirm("您是否删除该内容?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
       })
-
+        .then(() => {
+          helpCenterContentDelete({ id: row.id }).then(res => {
+            this.messageTips("删除", res);
+          });
+        })
+        .catch(() => {});
     },
-    onTypeSubmit (formName) {
+    onTypeSubmit(formName) {
       this.$refs[formName].validate(valid => {
         if (valid) {
           if (this.formActionTitle == "create") {
             let params = {
               title: this.form.title, // 标题
               content: this.form.content, // 内容
-              catalogId: this.form.catalogId[this.form.catalogId.length - 1], // 分类编号
-            }
+              catalogId: this.form.catalogId[this.form.catalogId.length - 1] // 分类编号
+            };
             helpCenterContentModify(params).then(res => {
               this.messageTips("添加", res);
             });
@@ -212,8 +239,8 @@ export default {
               id: this.form.id,
               title: this.form.title, // 标题
               content: this.form.content, // 内容
-              catalogId: this.form.catalogId[this.form.catalogId.length - 1], // 分类编号
-            }
+              catalogId: this.form.catalogId[this.form.catalogId.length - 1] // 分类编号
+            };
             helpCenterContentModify(params).then(res => {
               this.messageTips("修改", res);
             });
@@ -223,7 +250,7 @@ export default {
         }
       });
     },
-    messageTips (title, res) {
+    messageTips(title, res) {
       if (res.code == 200) {
         this.$message.success(title + "成功");
         this.typeStatus = false;
@@ -232,25 +259,27 @@ export default {
         this.$message.error(res.msg);
       }
     },
-    getList () {
-      let catalogId = this.searchForm.catalogId ? this.searchForm.catalogId : null
+    getList() {
+      let catalogId = this.searchForm.catalogId
+        ? this.searchForm.catalogId
+        : null;
       if (catalogId) {
-        catalogId = catalogId[catalogId.length - 1]
+        catalogId = catalogId[catalogId.length - 1];
       }
       let params = {
         catalogIds: catalogId,
         page: this.pageInfo.page,
         rows: this.pageInfo.limit
-      }
+      };
       helpCenterContentList(params).then(res => {
         let result = res.data;
         if (res.code == 200) {
           this.tableList = result.rows;
-          this.pageInfo.total = result.total
+          this.pageInfo.total = result.total;
         }
       });
     },
-    getTreeList () {
+    getTreeList() {
       helpCenterCatalogList({
         parentId: 0
       }).then(res => {
@@ -260,51 +289,52 @@ export default {
         }
       });
     },
-    setTableData (result) {
-      let list = []
+    setTableData(result) {
+      let list = [];
       list = result.map(res => {
-        let tempList = {}
+        let tempList = {};
         tempList = {
           value: res.id,
           label: res.text,
           parentId: res.parentId
-        }
+        };
         if (res.children && res.children.length > 0) {
-          tempList.children = this.setTableData(res.children)
+          tempList.children = this.setTableData(res.children);
         }
-        return tempList
-      })
-      return list
+        return tempList;
+      });
+      return list;
     },
-    openTypes (type, row) {
-      this.typeStatus = true
-      this.formActionTitle = type
+    openTypes(type, row) {
+      this.typeStatus = true;
+      this.formActionTitle = type;
       if (type == "update") {
         // 修改的时候赋值
         this.form = {
           id: row.id,
           title: row.title, // 标题
           content: row.content, // 内容
-          catalogId: this.getAllIds(row), // 分类编号
+          catalogId: this.getAllIds(row) // 分类编号
         };
       }
     },
-    onToUrl () {
-      this.$router.push('/contentManager/helpCategory')
+    onToUrl() {
+      this.$router.push("/contentManager/helpCategory");
     },
-    getAllIds (row) {
-      let idAndParent = [];// idAndParent保存 Tree所有节点的id和parentId
+    getAllIds(row) {
+      let idAndParent = []; // idAndParent保存 Tree所有节点的id和parentId
       this.getIdAndParent(this.treeList, idAndParent);
       let parentIds = []; // 用于保存选中节点的父节点及父节点的父节点
       this.getId(row.catalogId, parentIds, idAndParent);
       return parentIds.reverse(); //反转数组
     },
-    getIdAndParent (tree, idAndParentIds) {// idAndParentIds用来保存所有节点的id，parentId
+    getIdAndParent(tree, idAndParentIds) {
+      // idAndParentIds用来保存所有节点的id，parentId
       // 对原有的数据结构进行遍历，拿出所有节点的id，parentId到一个一维数组中。
       tree.forEach(item => {
         let mid = {
           id: item.value,
-          parentId: item.parentId,
+          parentId: item.parentId
         };
         idAndParentIds.push(mid);
         if (item.children) {
@@ -312,7 +342,7 @@ export default {
         }
       });
     },
-    getId (id, parentIds, idAndParent) {
+    getId(id, parentIds, idAndParent) {
       idAndParent.forEach(item => {
         if (item.id == id) {
           parentIds.push(id);
@@ -322,21 +352,20 @@ export default {
         }
       });
     },
-    onFormClose (formName) {
+    onFormClose(formName) {
       // 关闭弹窗重置验证
       this.form = {
         title: null, // 标题
         content: null, // 内容
-        catalogId: [], // 分类编号
-      }
-      this.$refs.formCascader.handleClear()
+        catalogId: [] // 分类编号
+      };
+      this.$refs.formCascader.handleClear();
       this.$refs[formName].resetFields();
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-
 ::v-deep .el-date-editor.el-input {
   width: 100% !important;
 }