Browse Source

增加富文本框组件

humingbo 1 year ago
parent
commit
b3a6d29ca9
3 changed files with 34 additions and 5 deletions
  1. 3 1
      package.json
  2. 31 3
      src/views/dashboard/index.vue
  3. 0 1
      src/views/enforceflow/enforceflow.vue

+ 3 - 1
package.json

@@ -17,6 +17,7 @@
     "@riophae/vue-treeselect": "0.4.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.18.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "core-js": "3.6.5",
+    "dhtmlx-gantt": "^8.0.6",
     "element-ui": "2.15.14",
     "element-ui": "2.15.14",
     "js-cookie": "2.2.0",
     "js-cookie": "2.2.0",
     "moment": "^2.29.4",
     "moment": "^2.29.4",
@@ -27,7 +28,8 @@
     "vue-easy-printer": "^1.0.6",
     "vue-easy-printer": "^1.0.6",
     "vue-router": "3.4.9",
     "vue-router": "3.4.9",
     "vue-to-pdf": "^1.0.0",
     "vue-to-pdf": "^1.0.0",
-    "vuex": "3.1.0"
+    "vuex": "3.1.0",
+    "wangeditor": "^4.7.15"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.4",
     "@vue/cli-plugin-babel": "4.4.4",

+ 31 - 3
src/views/dashboard/index.vue

@@ -170,7 +170,7 @@
     </el-dialog>
     </el-dialog>
 
 
     <!--处理实施工作任务--->
     <!--处理实施工作任务--->
-    <el-dialog title="审批处理" :visible.sync="editEnforceFormVisible" width="45%" :close-on-click-modal="false">
+    <el-dialog title="审批处理" :visible.sync="editEnforceFormVisible" width="65%" :close-on-click-modal="false">
       <el-form label-width="120px" :model="enforceForm" size="mini">
       <el-form label-width="120px" :model="enforceForm" size="mini">
         <el-descriptions title="" :column="2" border size="mini">
         <el-descriptions title="" :column="2" border size="mini">
           <el-descriptions-item>
           <el-descriptions-item>
@@ -252,7 +252,13 @@
               <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
               <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
             </el-upload>
             </el-upload>
           </el-descriptions-item>
           </el-descriptions-item>
-
+          <el-descriptions-item :span="2">
+            <template slot="label">
+              其他说明
+            </template>
+            <div id="editorElem" style="text-align:left" >
+            </div>
+          </el-descriptions-item>
         </el-descriptions>
         </el-descriptions>
       </el-form>
       </el-form>
       <div slot="footer" class="dialog-footer">
       <div slot="footer" class="dialog-footer">
@@ -281,6 +287,8 @@
 </template>
 </template>
 
 
 <script>
 <script>
+import E from 'wangeditor';
+let editor;
 import {mapGetters} from 'vuex'
 import {mapGetters} from 'vuex'
 import Pagination from '@/components/Page/Pagination'
 import Pagination from '@/components/Page/Pagination'
 import {completeTask, getPersonalTaskList} from '@/api/meeting/enforce'
 import {completeTask, getPersonalTaskList} from '@/api/meeting/enforce'
@@ -340,7 +348,8 @@ export default {
         status: 0,
         status: 0,
         flowType: null
         flowType: null
       },
       },
-      fileAction: ''
+      fileAction: '',
+      editorContent:null
     }
     }
   },
   },
   mounted() {
   mounted() {
@@ -348,8 +357,17 @@ export default {
     this.getTodoMeetingList();
     this.getTodoMeetingList();
     this.getDeptUserTrees();
     this.getDeptUserTrees();
     this.fileAction = uploadFileUrl()
     this.fileAction = uploadFileUrl()
+
   },
   },
   methods: {
   methods: {
+    createwangeditor(){
+      editor = new E('#editorElem');
+      editor.config.height = 300
+      editor.create()
+      editor.config.onchange = (html) => {
+        this.editorContent=editor.txt.html()
+      };
+    },
     getDeptUserTrees() {
     getDeptUserTrees() {
       getDeptUserTree('').then(res => {
       getDeptUserTree('').then(res => {
         this.userList = res.data
         this.userList = res.data
@@ -390,7 +408,17 @@ export default {
       this.enforceForm.taskId = row.taskId
       this.enforceForm.taskId = row.taskId
       this.enforceForm.currentStep = row.step
       this.enforceForm.currentStep = row.step
       this.enforceForm.enforceId = row.id
       this.enforceForm.enforceId = row.id
+     //
       this.editEnforceFormVisible = true
       this.editEnforceFormVisible = true
+      this.$nextTick(()=>{
+        if (editor==null){
+          this.createwangeditor()
+        }else {
+          editor.destroy();//这里做了一次判断,判断编辑器是否被创建,如果创建了就先销毁。
+          this.createwangeditor()
+        }
+      });
+
     },
     },
     openUsers() {
     openUsers() {
       this.usersVisble = true
       this.usersVisble = true

+ 0 - 1
src/views/enforceflow/enforceflow.vue

@@ -270,7 +270,6 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import E from 'wangeditor';
 
 
 import Pagination from '@/components/Page/Pagination'
 import Pagination from '@/components/Page/Pagination'
 import {
 import {