提交一下

1

src/components/Editor/index.vue

@@ -3,7 +3,7 @@
   <div class="editor">
     <quill-editor
       class="ql-editor"
-      v-model="forms.content"
+      v-model="forms[keyWord]"
       ref="myQuillEditor"
       :options="editorOption"
       @change="onEditorChange($event)"
@@ -22,7 +22,12 @@
       <Button icon="ios-cloud-upload-outline"></Button>
     </el-upload>
 
-    <el-dialog title="插入视频" width="500px" :visible.sync="dialogFormVisible" append-to-body>
+    <el-dialog
+      title="插入视频"
+      width="500px"
+      :visible.sync="dialogFormVisible"
+      append-to-body
+    >
       <el-form :model="dialogForm" ref="diologForm" :rules="dialogFormRules">
         <el-form-item label="封面图地址" label-width="90px">
           <el-upload
@@ -38,7 +43,7 @@
             :before-upload="beforeImgUpload"
           >
             <img
-            width="300px"
+              width="300px"
               v-if="dialogForm.poster"
               :src="dialogForm.poster"
               class="avatar"
@@ -128,7 +133,7 @@ const toolbarOptions = [
   [{ align: [] }], // 对齐方式
   ["clean"], // 清除文本格式
   ["image"], // 链接、图片、视频 , "video"
-  // ["link", "image", "video"] // 链接、图片、视频
+   ["link", "image", "video"] // 链接、图片、视频
 ];
 // 标题
 const titleConfig = {
@@ -163,7 +168,16 @@ import dayjs from "dayjs";
 Quill.register(Video, true);
 let that;
 export default {
-  props: ["form"],
+  // props: ["form",'key'],
+  props: {
+    keyWord: {
+      type:String,
+       default:'content'
+    },
+    form: {
+      type: Object,
+    },
+  },
   name: "editor",
   components: { quillEditor },
   data() {
@@ -205,7 +219,9 @@ export default {
                   that.dialogFormVisible = true;
                   let editor = that.$refs.myQuillEditor.quill;
                   // 光标所在位置
-                  that.editorIndex = editor.getSelection().index;
+                   console.log(editor.getContents())
+                  that.editorIndex = editor.getSelection()?.index||0;
+
                 } else {
                   this.quill.format("image", false);
                 }
@@ -216,13 +232,17 @@ export default {
       },
     };
   },
-  mounted(){
-    console.log(this.form)
+  created(){
     that = this;
   },
+  mounted() {
+
+    console.log(this.form);
+
+  },
   methods: {
     onEditorChange({ quill, html, text }) {
-      this.form.content = html;
+      this.form[this.keyWord] = html;
     },
     onVideoComfirm(formName) {
       this.$refs[formName].validate((valid) => {
@@ -237,6 +257,7 @@ export default {
           };
           quill.insertEmbed(this.editorIndex, "video", params);
           // 调整光标到最后
+          console.log(this.editorIndex,)
           quill.setSelection(this.editorIndex + 1, { preload: false });
 
           this.dialogFormVisible = false;
@@ -377,6 +398,5 @@ export default {
 /deep/.ql-container .ql-editor {
   max-height: 500px;
 }
-
 </style>
 

src/views/contentManager/contentOperation.vue

@@ -423,6 +423,7 @@ export default {
                   that.dialogFormVisible = true;
                   let editor = that.$refs.myQuillEditor.quill;
                   // 光标所在位置
+                  console.log(editor.getSelection())
                   that.editorIndex = editor.getSelection().index;
                 } else {
                   this.quill.format("image", false);

src/views/operationManual/index.vue

@@ -26,7 +26,14 @@
             placeholder="请选择菜单"
           ></el-cascader>
         </el-form-item>
+        <el-form-item>
+          <el-button native-type="submit" type="primary">搜索</el-button>
+          <el-button native-type="reset" type="danger">重置</el-button>
+        </el-form-item>
       </save-form>
+      <el-button type="primary" style="margin-bottom: 20px" @click="addManual"
+        >添加</el-button
+      >
       <div class="tableWrap">
         <el-table
           style="width: 100%"
@@ -53,17 +60,17 @@
             prop="operatorName"
             label="修改人"
           ></el-table-column>
-          <el-table-column
-            align="center"
-            prop="studentId"
-            label="操作"
-          >
-          <template slot-scope="scope">
-            <div>
-              <el-button type='text' @click="resetManual(scope.row)">修改</el-button>
-              <el-button type='text' @click="deteleManual(scope.row)">删除</el-button>
-            </div>
-          </template>
+          <el-table-column align="center" prop="studentId" label="操作">
+            <template slot-scope="scope">
+              <div>
+                <el-button type="text" @click="resetManual(scope.row)"
+                  >修改</el-button
+                >
+                <el-button type="text" @click="deteleManual(scope.row)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
           </el-table-column>
         </el-table>
         <pagination
@@ -76,6 +83,26 @@
         />
       </div>
     </div>
+    <el-dialog
+      :title="operationStatus == 'create' ? '新增操作手册' : '修改操作手册'"
+      width="800px"
+      :visible.sync="operationVisible"
+      v-if="operationVisible"
+    >
+      <setForm
+        :silderList="silderList"
+        :form="form"
+        ref="setForm"
+        @getList="getList"
+        @close="operationVisible = false"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="operationVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitOperation"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -86,14 +113,21 @@ import pagination from "@/components/Pagination/index";
 import load from "@/utils/loading";
 import { getSilder } from "@/api/silder";
 import { getSysManualList } from "./api";
+import setForm from "./modals/manualSet";
 export default {
-  components: { pagination },
+  components: { pagination, setForm },
   data() {
     return {
       searchForm: {
-        menuId: null,
+        menuId: [],
+      },
+      operationStatus: "create",
+      form: {
+        funRule: "",
+        menuId: "",
+        name: "",
+        opFlow: "",
       },
-
       tableList: [],
       organList: [],
       silderList: [],
@@ -111,6 +145,7 @@ export default {
         checkStrictly: true,
         expandTrigger: "hover",
       },
+      operationVisible: false,
     };
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -133,14 +168,16 @@ export default {
     async getList() {
       try {
         const res = await getSysManualList({
-          menuId: this.searchForm.menuId,
+          menuId: this.searchForm.menuId[this.searchForm.menuId.length - 1],
           page: this.rules.page,
           rows: this.rules.limit,
         });
         console.log(res);
         this.tableList = res.data.rows;
         this.rules.total = res.data.total;
-      } catch (e) {}
+      } catch (e) {
+        console.log(e);
+      }
     },
     search() {
       this.rules.page = 1;
@@ -190,9 +227,21 @@ export default {
     changeCategor(e) {
       this.$refs.myCascader.dropDownVisible = false;
     },
-    resetManual(row){},
-    deteleManual(row){},
-    addManual(){}
+    resetManual(row) {},
+    deteleManual(row) {},
+    addManual() {
+      this.operationStatus = "create";
+      this.form = {
+        funRule: "",
+        menuId: "",
+        name: "",
+        opFlow: "",
+      }
+      this.operationVisible = true;
+    },
+    submitOperation(){
+      console.log(this.form)
+    }
   },
 };
 </script>

src/views/operationManual/modals/manualSet.vue

@@ -25,8 +25,7 @@
         prop="name"
         :rules="[
           {
-            required: false,
-
+            required: true,
             message: '请输入手册名称',
           },
         ]"
@@ -35,23 +34,43 @@
       </el-form-item>
 
       <el-form-item
-       label="操作流程"
+        label="操作流程"
         prop="opFlow"
         :rules="[
           {
-            required: false,
-            message: '请输入操作流程',
+            required: true,
+            message: '请编辑操作流程',
           },
         ]"
       >
-        <el-input v-model="form.opFlow" placeholder="请输入手册名称"> </el-input>
+        <Editor :form="form" :keyWord="'opFlow'" />
+      </el-form-item>
+      <el-form-item
+        label="功能规则"
+        prop="funRule"
+        :rules="[
+          {
+            required: true,
+            message: '请编辑操作流程',
+          },
+        ]"
+      >
+        <Editor :form="form" :keyWord="'funRule'" />
       </el-form-item>
     </el-form>
+    <!--      funRule: "",
+        menuId: "",
+        name: "",
+        opFlow: "", -->
   </div>
 </template>
 <script>
+import Editor from "@/components/Editor";
 export default {
-  props: ["silderList"],
+  components: {
+    Editor,
+  },
+  props: ["silderList", "form"],
   data() {
     return {
       optionProps: {