’富文本‘ 传值成功

src/components/jeecg/JEditor.vue

@@ -12,97 +12,148 @@
 </template>
 
 <script>
-  import tinymce from 'tinymce/tinymce'
-  import Editor from '@tinymce/tinymce-vue'
-  import 'tinymce/themes/silver/theme'
-  import 'tinymce/plugins/image'
-  import 'tinymce/plugins/link'
-  import 'tinymce/plugins/media'
-  import 'tinymce/plugins/table'
-  import 'tinymce/plugins/lists'
-  import 'tinymce/plugins/contextmenu'
-  import 'tinymce/plugins/wordcount'
-  import 'tinymce/plugins/colorpicker'
-  import 'tinymce/plugins/textcolor'
-  import 'tinymce/plugins/fullscreen'
-  
-  import 'tinymce/icons/default/icons.min.js'
-  export default {
+import tinymce from 'tinymce/tinymce'
+import Editor from '@tinymce/tinymce-vue'
+// import 'tinymce/themes/silver/theme'
+// import 'tinymce/plugins/image'
+// import 'tinymce/plugins/link'
+// import 'tinymce/plugins/media'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/contextmenu'
+// import 'tinymce/plugins/wordcount'
+import 'tinymce/plugins/colorpicker'
+import 'tinymce/plugins/textcolor'
+// import 'tinymce/plugins/fullscreen'
+// 新增
+
+import 'tinymce/themes/silver/theme' // 引用主题文件
+import 'tinymce/icons/default' // 引用图标文件
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/advlist'
+import 'tinymce/plugins/anchor'
+import 'tinymce/plugins/autolink' // 锚点
+import 'tinymce/plugins/autoresize'
+import 'tinymce/plugins/autosave'
+import 'tinymce/plugins/charmap' // 特殊字符
+import 'tinymce/plugins/code' // 查看源码
+import 'tinymce/plugins/codesample' // 插入代码
+import 'tinymce/plugins/directionality' //
+import 'tinymce/plugins/fullpage' // 页面属性编辑
+import 'tinymce/plugins/fullscreen' // 全屏
+import 'tinymce/plugins/help' // 帮助
+import 'tinymce/plugins/hr' // 横线
+import 'tinymce/plugins/image' // 图片
+import 'tinymce/plugins/imagetools' // 图片工具
+import 'tinymce/plugins/importcss' // 图片工具
+import 'tinymce/plugins/insertdatetime' // 时间插入
+import 'tinymce/plugins/media' // 媒体插入
+import 'tinymce/plugins/nonbreaking' //
+import 'tinymce/plugins/noneditable' // 不间断空格
+import 'tinymce/plugins/pagebreak' // 分页
+import 'tinymce/plugins/paste' // 粘贴
+import 'tinymce/plugins/preview' // 预览
+import 'tinymce/plugins/print' // 打印
+import 'tinymce/plugins/quickbars' // 快捷菜单
+import 'tinymce/plugins/save' // 保存
+import 'tinymce/plugins/searchreplace' // 查询替换
+import 'tinymce/plugins/spellchecker' // 拼写检查
+import 'tinymce/plugins/tabfocus' //
+import 'tinymce/plugins/template' // 插入模板
+import 'tinymce/plugins/textpattern' //
+import 'tinymce/plugins/toc' //
+import 'tinymce/plugins/visualblocks' //
+import 'tinymce/plugins/visualchars' //
+import 'tinymce/plugins/wordcount' // 数字统计
+
+import 'tinymce/icons/default/icons.min.js'
+export default {
     components: {
-      Editor
+        Editor
     },
     props: {
-      value: {
-        type: String,
-        required:false
-      },
-      triggerChange:{
-        type: Boolean,
-        default: false,
-        required:false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      plugins: {
-        type: [String, Array],
-        default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
-      },
-      toolbar: {
-        type: [String, Array],
-        default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
-        branding:false
-      }
-    },
-    data() {
-      return {
-        //初始化配置
-        init: {
-          language_url: '/tinymce/langs/zh_CN.js',
-          language: 'zh_CN',
-          skin_url: '/tinymce/skins/lightgray',
-          height: 300,
-          plugins: this.plugins,
-          toolbar: this.toolbar,
-          branding: false,
-          menubar: false,
-          toolbar_drawer: false,
-          images_upload_handler: (blobInfo, success) => {
-            const img = 'data:image/jpeg;base64,' + blobInfo.base64()
-            success(img)
-          }
+        value: {
+            type: String,
+            required: false,
+            default: null
+        },
+        triggerChange: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        plugins: {
+            type: [String, Array],
+            default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
         },
-        myValue: this.value
-      }
+        toolbar: {
+            type: [String, Array],
+            default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
+            branding: false
+        }
+    },
+    data () {
+        return {
+        // 初始化配置
+            init: {
+                language_url: '/tinymce/langs/zh_CN.js',
+                language: 'zh_CN',
+                skin_url: '/tinymce/skins/lightgray',
+                height: 300,
+                // plugins: this.plugins,
+                // toolbar: this.toolbar,
+                // 新增
+                plugins:
+          'wordcount visualchars visualblocks toc textpattern template tabfocus spellchecker searchreplace save quickbars print preview paste pagebreak noneditable nonbreaking media insertdatetime importcss imagetools image hr help fullscreen fullpage directionality codesample code charmap link code table lists advlist anchor autolink autoresize autosave', // 插件需要import进来
+                toolbar:
+          'formats undo redo paste print fontsizeselect fontselect template fullpage|wordcount ltr rtl visualchars visualblocks toc spellchecker searchreplace|save preview pagebreak nonbreaking|media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough hr charmap link insertdatetime|subscript superscript cut codesample code |anchor preview fullscreen|help',
+                content_style: 'p {margin: 5px 0; font-size: 14px}',
+                fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
+                font_formats:
+          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
+                /// ////////////
+                branding: false,
+                menubar: false,
+                toolbar_drawer: false,
+                images_upload_handler: (blobInfo, success) => {
+                    const img = 'data:image/jpeg;base64,' + blobInfo.base64()
+                    success(img)
+                }
+            },
+            myValue: this.value
+        }
     },
-    mounted() {
-      tinymce.init({})
+    mounted () {
+        tinymce.init({})
     },
     methods: {
 
-      onClick(e) {
-        this.$emit('onClick', e, tinymce)
-      },
-      //可以添加一些自己的自定义事件，如清空内容
-      clear() {
-        this.myValue = ''
-      }
+        onClick (e) {
+            this.$emit('onClick', e, tinymce)
+        },
+        // 可以添加一些自己的自定义事件，如清空内容
+        clear () {
+            this.myValue = ''
+        }
     },
     watch: {
-      value(newValue) {
-        this.myValue = (newValue == null ? '' : newValue)
-      },
-      myValue(newValue) {
-        if(this.triggerChange){
-          this.$emit('change', newValue)
-        }else{
-          this.$emit('input', newValue)
+        value (newValue) {
+            this.myValue = (newValue == null ? '' : newValue)
+        },
+        myValue (newValue) {
+            if (this.triggerChange) {
+                this.$emit('change', newValue)
+            } else {
+                this.$emit('input', newValue)
+            }
         }
-      }
     }
-  }
+}
 
 </script>
 <style scoped>
-</style>
+</style>

src/views/dashboard/MyToDo.vue

@@ -427,7 +427,7 @@ export default {
         //发送查询请求
         scheduleGetListByTime(null).then(res => {
           if (res.success) {
-            console.log('查询到的总日程结果', res)
+            // console.log('查询到的总日程结果', res)
             let list = res.result // 已经的结果
             var eventList = [] // 装新日程的
             // 循环日程
@@ -445,7 +445,7 @@ export default {
               }
               eventList.push(Object) // 把日程推到日程列表
             })
-            console.log('日程', eventList)
+            console.log('总共的日程', eventList)
             // 刷新 日程列表
             this.calendarOptions.events = eventList
           }
@@ -490,7 +490,7 @@ export default {
             if (res.success) {
               this.msg1Count = res.result.anntMsgTotal
               this.msg2Count = res.result.sysMsgTotal
-              console.log(this.msg2Count)
+              // console.log(this.msg2Count)
             }
           })
           .catch(error => {
@@ -514,7 +514,7 @@ export default {
           this.todoList = res.result || []
           console.log('首页 我的待办数字：', this.todoList.length)
           this.total = this.data.leading
-          console.log(this.data)
+          console.log('系统消息:',this.data)
         }
       })
     },

src/views/oa/enter-ann/add/addAnnModal.vue

@@ -68,11 +68,7 @@
             <a-form-item label="公告内容:"></a-form-item>
           </a-col>
           <a-col :span="21">
-            <RichText ref="RichText" :richTextVal="smallText" style="marginLeft:120px;"></RichText>
-            <!-- 富文本  --------------------------------------------------------------
-                父组件通过 ref.后的值 可拿到自组件的 方法及变量（this.$ref.RichText）
-                子组件 通过props 接收父组件 富文本的值（赋值时使用）
-            -------------------------------------------------------------------------->
+            <JEditor ref="JEditor" :value="smallText" style="margin:0 170px 0 130px;"> </JEditor>
           </a-col>
         </a-row>
       </a-form>
@@ -83,11 +79,11 @@
 <script>
 import moment from 'moment'
 import 'moment/locale/zh-cn'
-import RichText from '@views/jeecg/RichText.vue'
+import JEditor from '@/components/jeecg/JEditor'
 export default {
     name: 'AddAnnModal',
     components: {
-        RichText // 富文本组件
+        JEditor // 富文本组件
     },
     data () {
         return {
@@ -125,7 +121,7 @@ export default {
                 createBy: this.annInfo.createBy,
                 createTime: moment(this.annInfo.createTime, 'YYYY/MM/DD HH:mm:ss'),
                 isRelease: this.annInfo.isRelease,
-                content: this.annInfo.content
+                myValue: this.annInfo.myValue
             })
         },
         // 弹框保存
@@ -133,15 +129,15 @@ export default {
             // 赋值 触发表单验证、发送新增请求、提示新增成功、关闭弹框
             this.addAnnForm.validateFields((err, vals) => {
                 console.log('新增企业公告的信息：', vals)
-                if (!err && this.$refs.RichText.content !== '') {
+                if (!err && this.$refs.JEditor.myValue !== '') {
                     // -------------------------------------------------
                     var news = {}
                     news.title = vals.title
                     news.type = vals.type
                     // news.createBy = vals.createBy
                     // news.createTime = vals.createTime.format('YYYY-MM-DD HH:mm:ss')
-                    console.log(this.$refs.RichText.content)
-                    news.content = this.$refs.RichText.content // 拿到子组件的富文本 内容
+                    console.log(this.$refs.JEditor.myValue)
+                    news.myValue = this.$refs.JEditor.myValue // 拿到子组件的富文本 内容
                     console.log('这是添加的一条日程计划:', news)
                     // -----------------------------------------------
                     this.addModalVisible = false

src/views/oa/my-plan/add/savePlan.vue

@@ -140,9 +140,9 @@
         <a-col :span="12">
           <a-form-item label="日程内容:" style="marginBottom:0;"></a-form-item>
         </a-col>
-        <!-- 引入富文本组件 -->
         <a-col :span="24">
-          <RichText ref="RichText" :richTextVal="smallText" style="margin:0 170px 0 130px;"></RichText>
+          <!-- <JEditor ref="JEditor" :richTextVal="smallText" style="margin:0 170px 0 130px;"></JEditor> -->
+          <JEditor ref="JEditor" :value="smallText" style="margin:0 170px 0 130px;"> </JEditor>
         </a-col>
       </a-row>
     </a-form>
@@ -159,11 +159,12 @@ import 'moment/locale/zh-cn'
 import { scheduleAdd, scheduleUpdate } from '@api/oa/cd-schedule'
 // import { extend } from 'dayjs'
 // import { defineComponent, ref } from 'vue'
-import RichText from '@views/jeecg/RichText.vue'
+// import JEditor from '@views/jeecg/JEditor.vue'
+import JEditor from '../../../../components/jeecg/JEditor.vue'
 export default {
     name: 'SavePlan',
     components: {
-        RichText
+        JEditor
     },
     data () {
         return {
@@ -254,10 +255,9 @@ export default {
                     continue: [
                         moment(this.formData.startTime, 'YYYY/MM/DD HH:mm'),
                         moment(this.formData.endTime, 'YYYY/MM/DD HH:mm')
-                    ],
-                    content: this.$refs.RichText.content
+                    ]
                 })
-                console.log(this.$refs.RichText.content)
+                this.$refs.JEditor.myValue = this.formData.memo
             })
         },
 
@@ -265,6 +265,7 @@ export default {
         handleOk (e) {
             this.addForm.validateFields((err, values) => {
                 console.log('跑出来', values)
+                console.log('>>>>>>>', this.$refs.JEditor.myValue)
                 if (!err) {
                     // ---赋值-------------------------------------------
                     var scheduleObject = {}
@@ -274,7 +275,7 @@ export default {
                     scheduleObject.startTime = values.continue[0].format('YYYY-MM-DD HH:mm:ss')
                     scheduleObject.endTime = values.continue[1].format('YYYY-MM-DD HH:mm:ss')
                     scheduleObject.backgroundColor = values.backgroundColor
-                    scheduleObject.content = this.$refs.RichText.content
+                    scheduleObject.memo = this.$refs.JEditor.myValue
                     // 修改------------------------------------------------
                     if (this.formData.id) {
                         scheduleObject.id = this.formData.id
@@ -285,8 +286,7 @@ export default {
                                 this.$message.success('日程修改成功')
                                 this.savePlanModalVisible = false
                                 this.addForm.resetFields() // 清空
-                                // 调用父组件方法（查询数据）
-                                this.fatherMethod()
+                                this.fatherMethod()// 调用父组件的查询方法
                             }
                         })
                     } else {
@@ -296,8 +296,8 @@ export default {
                                 this.savePlanModalVisible = false
                                 this.$message.success('新增日程成功')
                                 this.addForm.resetFields() // 清空表单
-                                // 调用父组件的方法(查询数据)
-                                this.fatherMethod()
+                                this.$refs.JEditor.myValue = ''
+                                this.fatherMethod() // 调用父组件的查询方法
                             }
                         })
                     }
@@ -320,8 +320,8 @@ export default {
         },
 
         handleCancel (e) {
-            // console.log('取消按钮')
             this.addForm.resetFields() // 清空
+            this.$refs.JEditor.myValue = ''// 清空富文本
             this.savePlanModalVisible = false
         }
     }

src/views/oa/my-plan/calTable.vue

@@ -36,7 +36,7 @@
       </a-form>
     </div>
 
-    <!-- 操作按钮区域 -->
+    <!-- 新增 导入 到处 -->
     <div class="table-operator">
       <a-button @click="addPlan" type="primary">新增</a-button>
       <a-button type="primary" @click="myPlanExportXls('我的日程计划')">导出</a-button>
@@ -93,7 +93,6 @@
           bordered
           :columns="columns"
           :dataSource="planDataList"
-
           :pagination="pagination"
           :row-key="record => record.id"
           :rowSelection="rowSelection"
@@ -102,9 +101,7 @@
           <!-- 操作 -->
           <span slot="operationSlot" slot-scope="text, record">
             <a href="javascript:void(0);" @click="editPlan(record)"> 编辑 </a>
-
             <a-divider type="vertical" />
-
             <a-popconfirm title="确定删除吗？" ok-text="是" cancel-text="否">
               <a href="javascript:void(0);" @click="delPlan(record.id)" class="delRed"> 删除 </a>
             </a-popconfirm>
@@ -112,18 +109,19 @@
         </a-table>
       </a-row>
     </div>
+
+    <!-- 新增日程弹框  :fatherMethod="search"-->
+    <save-plan ref="savePlan"></save-plan>
   </a-card>
 </template>
 
 <script>
 import JEllipsis from '@/components/jeecg/JEllipsis'
-// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-// import SysCheckRuleModal from './modules/SysCheckRuleModal'
-// import SysCheckRuleTestModal from './modules/SysCheckRuleTestModal'
+import SavePlan from '@views/oa/my-plan/add/savePlan' // 子组件
+
 export default {
     name: 'CalTable',
-    // mixins: [JeecgListMixin],
-    components: { JEllipsis },
+    components: { JEllipsis, SavePlan },
     data () {
         return {
             tokenHeader: {},
@@ -151,6 +149,11 @@ export default {
                     dataIndex: 'startTime',
                     align: 'center'
                 },
+                {
+                    title: '结束时间',
+                    dataIndex: 'endTime',
+                    align: 'center'
+                },
                 {
                     title: '操作',
                     dataIndex: 'operation',
@@ -166,6 +169,7 @@ export default {
                     type: '下周计划',
                     degreeOfUrgency: '紧急',
                     startTime: '2021/11/19',
+                    endTime: '2021/11/19',
                     memo: '哈哈哈哈哈哈'
                 },
                 {
@@ -174,14 +178,16 @@ export default {
                     type: '日程记录',
                     degreeOfUrgency: '一般',
                     startTime: '2021/12/17',
+                    endTime: '2021/12/17',
                     memo: '呵呵呵呵'
                 },
                 {
                     id: '3',
-                    title: 'AAAAAAA',
+                    title: '做点什么',
                     type: '本周计划',
                     degreeOfUrgency: '重要',
                     startTime: '2022/01/30',
+                    endTime: '2022/02/15',
                     memo: '呵呵呵呵'
                 }
             ]
@@ -205,7 +211,12 @@ export default {
         }
     },
     methods: {
-    // 查询按钮
+    // 新增日程计划   弹框
+        addPlan () {
+            console.log('点击了新增日程')
+            this.$refs.savePlan.savePlanModalVisible = true
+        },
+        // 查询按钮
         searchQuery () {
             // this.loading = true
             console.log('点击了查询按钮')
@@ -213,8 +224,7 @@ export default {
         },
         // 重置 输入的查询条件
         searchReset () {},
-        // 新增日程计划   弹框
-        addPlan () {},
+
         // 清空勾选
         onClearSelected () {},
         // 导出我的日程计划

src/views/oa/my-plan/schedulePlan.vue

@@ -4,10 +4,7 @@
       <p>
         <FullCalendar :options="calendarOptions" class="eventDeal-wrap" />
         <!-- 父组件通过 savePlan 拿子组件的 属性 -->
-        <save-plan
-          ref="savePlan"
-          :fatherMethod="search"
-          :fatherData="timeList"></save-plan>
+        <save-plan ref="savePlan" :fatherMethod="search" :fatherData="timeList"></save-plan>
       </p>
     </a-card>
   </div>
@@ -137,15 +134,17 @@ export default {
             console.log('点击项的ID是', e.event.id)
             if (e.event.id) {
                 // 根据id查询日程（注意接口文档传参格式要求）
-                scheduleQueryById({ id: e.event.id }).then(res => {
-                    if (res.success) {
-                        console.log('该ID的日程', res)
-                        let formData = res.result // 查询结果赋值
-                        this.data = formData
-                        console.log('表单回显数据', this.data)
-                        this.$refs.savePlan.formData = this.data // 查询到的日程数据赋值给子组件表单
-                        this.$refs.savePlan.getFormInfo() // 调用子组件的回显数据
-                    }
+                this.$nextTick(() => {
+                    scheduleQueryById({ id: e.event.id }).then(res => {
+                        if (res.success) {
+                            // console.log('该ID的日程', res)
+                            let formData = res.result // 查询结果赋值
+                            this.data = formData
+                            console.log('表单回显数据', this.data)
+                            this.$refs.savePlan.formData = this.data // 查询到的日程数据赋值给子组件表单
+                            this.$refs.savePlan.getFormInfo() // 调用子组件的回显数据
+                        }
+                    })
                 })
             }
         },