修改

src/components/RichTextEditor/index.vue

@@ -23,12 +23,17 @@ import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
 export default {
   name: "index",
   components: {Editor, Toolbar},
-  props: {},
+  props: {
+    isSimple: {
+      type: Boolean,
+      default: true
+    }
+  },
   data() {
     return {
       editor: null,
       html: undefined,
-      toolbarConfig: {
+      toolbarSimpleConfig: {
         toolbarKeys: [
           "bold",
           "underline",
@@ -47,11 +52,75 @@ export default {
 
         ]
       },
+      toolbarDefaultConfig: {
+        toolbarKeys: [
+          'headerSelect',
+          "bold",
+          "underline",
+          "italic",
+          "through",
+          "color",
+          "bgColor",
+          "|",
+          "bulletedList",
+          "numberedList",
+          "justifyLeft",
+          "justifyRight",
+          "justifyCenter",
+          'todo',
+          "|",
+          "emotion",// 表情
+          {
+            key: 'group-link',
+            title: '链接',
+            menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
+          },
+          // {
+          //   key: 'group-image', // 必填，要以 group 开头
+          //   title: '图片', // 必填
+          //   iconSvg: '<svg></svg>',
+          //   menuKeys: ['uploadImage',
+          //     'insertImage',
+          //     'deleteImage',
+          //     'editImage',
+          //     'viewImageLink']
+          // },
+          // {
+          //   key: 'group-video',
+          //   title: '视频',
+          //   iconSvg: '',
+          //   menuKeys: ['insertVideo',
+          //     'uploadVideo']
+          // },
+          {
+            key: 'group-table',
+            title: '表格',
+            menuKeys: ['insertTable',
+              'deleteTable',
+              'insertTableRow',
+              'deleteTableRow',
+              'insertTableCol',
+              'deleteTableCol',
+              'tableHeader',
+              'tableFullWidth']
+          },
+          'divider',
+          'emotion',
+          'blockquote',
+          "|",
+          "fullScreen"
+
+        ]
+      },
       editorConfig: {placeholder: '请输入内容...'},
       mode: 'simple', // or 'simple'
     }
   },
-  watch: {},
+  computed: {
+    toolbarConfig() {
+      return this.isSimple ? this.toolbarSimpleConfig : this.toolbarDefaultConfig
+    }
+  },
   beforeDestroy() {
     const editor = this.editor
     if (editor == null) return

src/views/enforceflow/enforceflow.vue

@@ -6,7 +6,8 @@
       </el-form-item>
       <el-form-item label="所属医院：">
         <el-select size="mini" clearable filterable v-model="formInline.hname" placeholder="请选择医院">
-          <el-option v-for="(item,index) in hnos" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
+          <el-option v-for="(item,index) in hnos" :label="item.dictLabel" :value="item.dictValue"
+                     :key="index"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="所属系统：">
@@ -72,7 +73,8 @@
           <el-button size="mini" v-if="scope.row.status===0" type="danger" @click="deleteEnforce(scope.row)">删除
           </el-button>
           <el-button size="mini" type="success" @click="openEnforceManageDialog(scope.row)">查看详情</el-button>
-          <el-button size="mini" v-show="false" v-if="scope.row.status!==0" type="primary" @click="getEnforceDetail(scope.row)">
+          <el-button size="mini" v-show="false" v-if="scope.row.status!==0" type="primary"
+                     @click="getEnforceDetail(scope.row)">
             查看实施详情
           </el-button>
         </template>
@@ -88,7 +90,7 @@
         <el-form-item label="实施项目名称:">
           <el-input size="mini" v-model="editForm.name"></el-input>
         </el-form-item>
-        <el-form-item label="实施负责人:" prop="recorder" >
+        <el-form-item label="实施负责人:" prop="recorder">
           <el-input size="mini" v-model="editForm.enforcer" readonly="true"
                     @keyup.enter.native="openUsers1()">
             <el-button @click="openUsers1()" icon="el-icon-search" slot="append"></el-button>
@@ -97,7 +99,8 @@
 
         <el-form-item label="实施医院:">
           <el-select size="mini" clearable filterable v-model="editForm.hname" placeholder="请选择医院">
-            <el-option v-for="(item,index) in hnos" :label="item.dictLabel" :value="item.dictValue" :key="index"></el-option>
+            <el-option v-for="(item,index) in hnos" :label="item.dictLabel" :value="item.dictValue"
+                       :key="index"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="实施系统:">
@@ -244,10 +247,10 @@
         <el-table-column
           prop="createTime" align="center"
           label="创建时间" width="130">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime) }}</span>
-            </template>
-          </el-table-column>
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="completionTime" align="center"
           label="完成时间" width="130">
@@ -267,20 +270,21 @@
       </el-table>
     </el-dialog>
 
-    <el-dialog :title="enforceFlowTitle" :visible.sync="enforceManageVisble" width="99%" fullscreen center :close-on-click-modal="false"  @click="enforceManageDialog">
+    <el-dialog :title="enforceFlowTitle" :visible.sync="enforceManageVisble" width="99%" fullscreen center
+               :close-on-click-modal="false" @click="enforceManageDialog">
       <el-steps :active="maxStep" finish-status="success">
-        <el-step @click.native="on_click(1)" title="项目启动会" :class="stepClass" />
-        <el-step @click.native="on_click(2)" title="发货" />
-        <el-step @click.native="on_click(3)" title="物流签收" />
-        <el-step @click.native="on_click(4)" title="进入现场" />
-        <el-step @click.native="on_click(5)" title="设备安装" />
-        <el-step @click.native="on_click(6)" title="系统调试" />
-        <el-step @click.native="on_click(7)" title="操作培训" />
-        <el-step @click.native="on_click(8)" title="现场值守" />
-        <el-step @click.native="on_click(9)" title="离场" />
-        <el-step @click.native="on_click(10)" title="实施复盘" />
-        <el-step @click.native="on_click(11)" title="文件归档" />
-        <el-step @click.native="on_click(12)" title="运维维护" />
+        <el-step @click.native="on_click(1)" title="项目启动会" :class="stepClass"/>
+        <el-step @click.native="on_click(2)" title="发货"/>
+        <el-step @click.native="on_click(3)" title="物流签收"/>
+        <el-step @click.native="on_click(4)" title="进入现场"/>
+        <el-step @click.native="on_click(5)" title="设备安装"/>
+        <el-step @click.native="on_click(6)" title="系统调试"/>
+        <el-step @click.native="on_click(7)" title="操作培训"/>
+        <el-step @click.native="on_click(8)" title="现场值守"/>
+        <el-step @click.native="on_click(9)" title="离场"/>
+        <el-step @click.native="on_click(10)" title="实施复盘"/>
+        <el-step @click.native="on_click(11)" title="文件归档"/>
+        <el-step @click.native="on_click(12)" title="运维维护"/>
       </el-steps>
 
       <div>
@@ -335,7 +339,8 @@
                 <template slot="label">
                   当前负责人
                 </template>
-                <el-input size="small" v-model="enforceForm.director" :disabled="true" @keyup.enter.native="openUsers()">
+                <el-input size="small" v-model="enforceForm.director" :disabled="true"
+                          @keyup.enter.native="openUsers()">
                   <el-button @click="openUsers" icon="el-icon-search" slot="append"></el-button>
                 </el-input>
               </el-descriptions-item>
@@ -363,21 +368,21 @@
                 <template slot="label">
                   其他说明
                 </template>
-                <div id="editorElem" style="text-align:left" >
-                </div>
+                <rich-text-editor ref="rtEditor" :is-simple="false" @getHtml="(val)=>enforceForm.content=val"></rich-text-editor>
               </el-descriptions-item>
             </el-descriptions>
           </el-form>
           <div slot="footer" style="margin-top: 25px;text-align: right;margin-right: 85px">
             <el-button size="medium" @click="enforceManageDialog">取消</el-button>
-            <el-button size="medium" type="primary" class="title" @click="submitEnforceForm('editForm')">确定处理</el-button>
+            <el-button size="medium" type="primary" class="title" @click="submitEnforceForm('editForm')">确定处理
+            </el-button>
           </div>
         </div>
         <div v-else-if="active===12" style="margin-top:5px ">
           <el-tabs type="card" @tab-click="chooseTab" v-model="activeName">
             <el-tab-pane label="运维提醒设置" name="1">
               <el-button type="primary" size="mini" @click="addenforceRemindRow">添加</el-button>
-              <el-table :data="enforceRemindData" stripe  size="mini" style="width: 100%;margin-top: 15px" >
+              <el-table :data="enforceRemindData" stripe size="mini" style="width: 100%;margin-top: 15px">
                 <el-table-column type="index" label="序号" width="60"></el-table-column>
                 <el-table-column prop="msg" label="提醒信息" width="250">
                   <template scope="scope">
@@ -386,7 +391,7 @@
                 </el-table-column>
                 <el-table-column prop="term" label="有限期限" width="180">
                   <template scope="scope">
-                    <el-select v-model="scope.row.term"   placeholder="请选择提醒时间" >
+                    <el-select v-model="scope.row.term" placeholder="请选择提醒时间">
                       <el-option label="3个月" :value="90" key="90">3个月</el-option>
                       <el-option label="6个月" :value="180" key="180">6个月</el-option>
                       <el-option label="1年" :value="360" key="360">1年</el-option>
@@ -396,21 +401,26 @@
                 </el-table-column>
                 <el-table-column prop="op" label="操作">
                   <template scope="scope">
-                    <el-button type="primary" size="mini" v-if="scope.row.id!==null" @click="addenforceRemind((scope.row))">修改</el-button>
-                    <el-button type="primary" size="mini" v-if="scope.row.id===null" @click="addenforceRemind(scope.row)">确认</el-button>
-                    <el-button type="danger" size="mini" @click="deleteEnforceRemind(scope.$index, scope.row)">删除</el-button>
+                    <el-button type="primary" size="mini" v-if="scope.row.id!==null"
+                               @click="addenforceRemind((scope.row))">修改
+                    </el-button>
+                    <el-button type="primary" size="mini" v-if="scope.row.id===null"
+                               @click="addenforceRemind(scope.row)">确认
+                    </el-button>
+                    <el-button type="danger" size="mini" @click="deleteEnforceRemind(scope.$index, scope.row)">删除
+                    </el-button>
                   </template>
                 </el-table-column>
               </el-table>
             </el-tab-pane>
             <el-tab-pane label="运维记录" name="2">
               <el-button type="primary" size="mini" @click="addEnforceRecordClick">添加</el-button>
-              <el-table :data="enforceRecordData" stripe  style="width: 100%;margin-top: 15px;">
+              <el-table :data="enforceRecordData" stripe style="width: 100%;margin-top: 15px;">
                 <el-table-column type="index" label="序号" width="60"></el-table-column>
                 <el-table-column prop="enforceType" label="运维类型" width="180"></el-table-column>
                 <el-table-column prop="enforceTime" label="运维时间">
                   <template slot-scope="scope">
-                    <div>{{scope.row.enforceTime.substr(0,10)}}</div>
+                    <div>{{ scope.row.enforceTime.substr(0, 10) }}</div>
                   </template>
                 </el-table-column>
                 <el-table-column prop="enforcer" label="运维人员"></el-table-column>
@@ -424,7 +434,7 @@
           </el-tabs>
         </div>
         <div v-else>
-          <el-table :data="enforceFileData" stripe  style="width: 100%;margin-top: 15px;">
+          <el-table :data="enforceFileData" stripe style="width: 100%;margin-top: 15px;">
             <el-table-column type="index" label="序号" width="60"></el-table-column>
             <el-table-column prop="fileName" label="文件名称" min-width="500">
             </el-table-column>
@@ -473,9 +483,6 @@
 </template>
 
 <script>
-// import E from 'wangeditor';
-let editor;
-let editorEnforce;
 import Pagination from '@/components/Page/Pagination'
 import {
   getEnforcesByPage,
@@ -487,22 +494,24 @@ import {
   getEnforceFlowsByEnforceId, getEnforceFlowsByEnforceIdAndStep, getEnforceFlowFiles
 } from '@/api/meeting/enforce'
 import {getDeptUserTree} from '@/api/system/user'
-import { deleteEnforceRemindById, editEnforceRemind, getEnforceRemindList } from '@/api/meeting/enforceRemind'
-import { editEnforceRecord, getEnforceRecordList } from '@/api/meeting/enforceRecord'
+import {deleteEnforceRemindById, editEnforceRemind, getEnforceRemindList} from '@/api/meeting/enforceRemind'
+import {editEnforceRecord, getEnforceRecordList} from '@/api/meeting/enforceRecord'
+import RichTextEditor from '@/components/RichTextEditor'
 
 export default {
   name: 'enforceflow',
+
   data() {
     return {
-      editEnforceRecord:{
-        id:null,
-        enforceType:'',
-        enforceTime:null,
-        enforceId:null,
-        remark:''
+      editEnforceRecord: {
+        id: null,
+        enforceType: '',
+        enforceTime: null,
+        enforceId: null,
+        remark: ''
       },
-      enforceFileData:[],
-      addEnforceRecordWin:false,
+      enforceFileData: [],
+      addEnforceRecordWin: false,
       enforceFlowVisble: false,
       usersVisble: false,
       tableData: [],
@@ -511,7 +520,7 @@ export default {
         size: 10,
         total: 0
       },
-      stepClass:'stepClass',
+      stepClass: 'stepClass',
       formInline: {
         current: 1,
         size: 10,
@@ -541,21 +550,21 @@ export default {
         director: null,
         directorId: null,
         remark: null,
-        content:null
+        content: null
       },
       enforceFlow: {
         name: '',
         enforcer: '',
         time: null,
         hno: null,
-        hname:'',
+        hname: '',
         hsytem: null,
         content: '',
-        beginTime:null,
-        endTime:null
+        beginTime: null,
+        endTime: null
       },
-      enforceFlowId:null,
-      enforceFlowTitle:null,
+      enforceFlowId: null,
+      enforceFlowTitle: null,
       fileList: [],
       userList: [],
       userForm: {
@@ -568,15 +577,15 @@ export default {
       users1Flag: '',
       enforceManageVisble: false,
       active: 1,
-      activeName:'1',
-      enforceRemindData:[],
-      enforceDetail:null,
-      enforceRecordData:[]
+      activeName: '1',
+      enforceRemindData: [],
+      enforceDetail: null,
+      enforceRecordData: []
     }
   },
   // 注册组件
   components: {
-    Pagination
+    Pagination, RichTextEditor
   },
   mounted() {
     this.getHosInfos()
@@ -735,13 +744,13 @@ export default {
     enforceFlowDialog() {
       this.enforceFlowVisble = false
     },
-    closeUser1Dialog(){
-      this.users1Visble=false
+    closeUser1Dialog() {
+      this.users1Visble = false
     },
-    openUsers1(){
-      this.users1Visble=true
+    openUsers1() {
+      this.users1Visble = true
     },
-    submitUser1Form(){
+    submitUser1Form() {
       let node = this.$refs.dept1.getCurrentNode();
       if (node === undefined || node === null) {
         this.$message({
@@ -758,182 +767,164 @@ export default {
         return;
       }
       this.editForm.enforcer = node.name
-     // this.enforceForm.directorId = node.id
+      // this.enforceForm.directorId = node.id
       this.closeUser1Dialog();
     },
-    enforceManageDialog(){
-      this.enforceManageVisble=false
+    enforceManageDialog() {
+      this.enforceManageVisble = false
     },
-    openEnforceManageDialog(row){
-      this.enforceManageVisble=true
-      this.enforceFlowId=row.id
-      this.enforceFlowTitle=row.name+"实施流程明细"
+    openEnforceManageDialog(row) {
+      this.enforceManageVisble = true
+      this.enforceFlowId = row.id
+      this.enforceFlowTitle = row.name + "实施流程明细"
       this.on_click(1)
-      this.enforceDetail=row
-    },
-    createwangeditor(){
-      editor = new E('#editorElem');
-      editor.config.height = 300
-      editor.create()
-      editor.txt.html(this.enforceForm.content)
-      editor.config.onchange = (html) => {
-        this.enforceForm.content=editor.txt.html()
-      };
-    },
-    createEnforceEditor(){
-      editorEnforce = new E('#editorEnforceRecord');
-      editorEnforce.config.height = 300
-      editorEnforce.create()
-      editorEnforce.txt.html(this.editEnforceRecord.remark)
-      editorEnforce.config.onchange = (html) => {
-        this.editEnforceRecord.remark=editor.txt.html()
-      };
+      this.enforceDetail = row
     },
 
-    on_click(e){
-      if(e !== "" || e != null){
-        if(e!==12 && e !=11){
+    on_click(e) {
+      if (e !== "" || e != null) {
+        if (e !== 12 && e != 11) {
           let id = this.enforceFlowId
-          getEnforceFlowsByEnforceIdAndStep(id,e).then(res=>{
+          getEnforceFlowsByEnforceIdAndStep(id, e).then(res => {
             console.log(JSON.stringify(res))
-            let data=res.data;
-            this.enforceFlow=data.enforceFlow
-            this.maxStep=data.maxStep
-            let dtos=data.dtos
-            if(dtos.length>0){
-              this.enforceForm=dtos[0]
+            let data = res.data;
+            this.enforceFlow = data.enforceFlow
+            this.maxStep = data.maxStep
+            let dtos = data.dtos
+            if (dtos.length > 0) {
+              this.enforceForm = dtos[0]
             }
-            this.$nextTick(()=>{
-              if (editor==null){
-                this.createwangeditor()
-              }else {
-                editor.destroy();//这里做了一次判断，判断编辑器是否被创建，如果创建了就先销毁。
-                this.createwangeditor()
-              }
-            });
+            // this.$nextTick(()=>{
+            //   if (editor==null){
+            //     this.createwangeditor()
+            //   }else {
+            //     editor.destroy();//这里做了一次判断，判断编辑器是否被创建，如果创建了就先销毁。
+            //     this.createwangeditor()
+            //   }
+            // });
             this.active = e
           })
-        }else if (e===12){
+        } else if (e === 12) {
           this.getEnforceRemindList()
           this.active = e
-        }else{
+        } else {
           this.getEnforceFlowFileList();
           this.active = e
         }
       }
     },
-    addenforceRemindRow(){
-      let row = {id: null, msg: '', term: null, termTime: null,enforceId:null,startTime:null}
+    addenforceRemindRow() {
+      let row = {id: null, msg: '', term: null, termTime: null, enforceId: null, startTime: null}
       this.enforceRemindData.push(row)
     },
-    addenforceRemind(row){
-      let data=row;
-      if(data.msg===''){
+    addenforceRemind(row) {
+      let data = row;
+      if (data.msg === '') {
         this.$message.warning("请输入提醒信息!")
         return
       }
-      if(data.term===null){
+      if (data.term === null) {
         this.$message.warning("请选择提醒时间!")
         return
       }
-      data.enforceId=this.enforceDetail.id
-      editEnforceRemind(data).then(res=>{
+      data.enforceId = this.enforceDetail.id
+      editEnforceRemind(data).then(res => {
         this.$message.success("操作成功!")
         this.getEnforceRemindList()
       });
     },
-    getEnforceRemindList(){
-      let id=this.enforceDetail.id
-      getEnforceRemindList(id).then(res=>{
-        this.enforceRemindData=res.data
+    getEnforceRemindList() {
+      let id = this.enforceDetail.id
+      getEnforceRemindList(id).then(res => {
+        this.enforceRemindData = res.data
       })
     },
-    deleteEnforceRemind(index,row){
-      let id=row.id
-      if(id===null){
+    deleteEnforceRemind(index, row) {
+      let id = row.id
+      if (id === null) {
         this.workPlanDatas.splice(index, 1)
-      }else{
-        deleteEnforceRemindById(id).then(res=>{
+      } else {
+        deleteEnforceRemindById(id).then(res => {
           this.$message.success("操作成功!");
           this.getEnforceRemindList()
         })
       }
     },
-    getEnforceRecordLists(){
-      let id=this.enforceDetail.id
-      getEnforceRecordList(id).then(res=>{
-        this.enforceRecordData=res.data
+    getEnforceRecordLists() {
+      let id = this.enforceDetail.id
+      getEnforceRecordList(id).then(res => {
+        this.enforceRecordData = res.data
       });
     },
-    addEnforceRecordClick(){
-      this.addEnforceRecordWin=true
-      this.$nextTick(()=>{
-        if (editorEnforce==null){
+    addEnforceRecordClick() {
+      this.addEnforceRecordWin = true
+      this.$nextTick(() => {
+        if (editorEnforce == null) {
           this.createEnforceEditor()
-        }else {
+        } else {
           editorEnforce.destroy();
           this.createEnforceEditor()
         }
       });
     },
-    closeEnforceRecordWin(){
-      this.addEnforceRecordWin=false
+    closeEnforceRecordWin() {
+      this.addEnforceRecordWin = false
     },
-    updateEnforceRecord(row){
-      this.editEnforceRecord=row
-      this.addEnforceRecordWin=true
-      this.$nextTick(()=>{
-        if (editorEnforce==null){
+    updateEnforceRecord(row) {
+      this.editEnforceRecord = row
+      this.addEnforceRecordWin = true
+      this.$nextTick(() => {
+        if (editorEnforce == null) {
           this.createEnforceEditor()
-        }else {
+        } else {
           editorEnforce.destroy();
           this.createEnforceEditor()
         }
       });
     },
-    editEnforceRecords(){
-      let data=this.editEnforceRecord
-      let enforceType=data.enforceType
-      if(enforceType===''){
+    editEnforceRecords() {
+      let data = this.editEnforceRecord
+      let enforceType = data.enforceType
+      if (enforceType === '') {
         this.$message.warning("请选择运维事项!")
         return
       }
-      let enforceTime=data.enforceTime
-      if(enforceTime===null){
+      let enforceTime = data.enforceTime
+      if (enforceTime === null) {
         this.$message.warning("请选择运维日期!")
         return
       }
-      let remark=data.remark
-      if(remark===''){
+      let remark = data.remark
+      if (remark === '') {
         this.$message.warning("请填写运维内容!")
         return
       }
-      let enforceId=this.enforceDetail.id
-      data.enforceId=enforceId
-      data.enforceTime=new Date(enforceTime).getTime()
-      editEnforceRecord(data).then(res=>{
+      let enforceId = this.enforceDetail.id
+      data.enforceId = enforceId
+      data.enforceTime = new Date(enforceTime).getTime()
+      editEnforceRecord(data).then(res => {
         this.$message.success("操作成功!")
-        this.addEnforceRecordWin=false
+        this.addEnforceRecordWin = false
         this.getEnforceRecordLists()
       });
     },
-    downEnforceFile(row){
-      let url=row.url
-      window.location.href=url
+    downEnforceFile(row) {
+      let url = row.url
+      window.location.href = url
     },
-    getEnforceFlowFileList(){
-      let id=this.enforceDetail.id
-      getEnforceFlowFiles(id).then(res=>{
+    getEnforceFlowFileList() {
+      let id = this.enforceDetail.id
+      getEnforceFlowFiles(id).then(res => {
         console.log(res.data)
-        this.enforceFileData=res.data
+        this.enforceFileData = res.data
       });
     },
-    chooseTab(tab, event){
-      let active=this.activeName
-      if(active==='1'){
+    chooseTab(tab, event) {
+      let active = this.activeName
+      if (active === '1') {
         this.getEnforceRemindList()
       }
-      if(active==='2'){
+      if (active === '2') {
         this.getEnforceRecordLists();
       }
     }
@@ -947,9 +938,9 @@ export default {
   margin-bottom: 10px;
 }
 
-.stepClass{
-    height: 36px !important;
-    width: 36px !important;
+.stepClass {
+  height: 36px !important;
+  width: 36px !important;
 
 }
 </style>