gogo

src/components/input/normalArea.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <article :id="id" :style="styles" class="article" :class="fullScreen ? 'fullScreen' : ''">
+    <article :id="id" :style="fullScreen ? { ...fullPositionStyle, ...styles } : styles" class="article" :class="getClass">
       <!-- <textEditor :id="id" :value="inputValue" /> -->
       <span v-show="fullScreen" class="changeSizeBtn" @click="changeSize">
         <svg-icon
@@ -45,12 +45,24 @@ export default {
       default: 200,
       required: false
     },
+    fullPositionStyle: {
+      type: Object,
+      default: () => {
+        return { }
+      },
+      required: false
+    },
     styles: {
       type: Object,
       default: () => {
         return { }
       },
       required: false
+    },
+    bottomMargin: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   },
   data() {
@@ -73,12 +85,24 @@ export default {
         fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
         file_picker_types: 'image',
         images_upload_credentials: true,
-        plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
-        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect',
+        plugins: 'fullscreen lists table textcolor wordcount contextmenu', // 引入插件
+        toolbar: 'fullscreen bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect',
         table_toolbar: 'tableprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells'
       }
     }
   },
+  computed: {
+    getClass() {
+      let className = ''
+      if (this.fullScreen) {
+        className += 'fullScreen'
+      }
+      if (this.bottomMargin) {
+        className += ' bottomMargin'
+      }
+      return className
+    }
+  },
   watch: {
     value: {
       handler(newV, oldV) {
@@ -107,14 +131,29 @@ export default {
   position: relative;
   .changeSizeBtn {
     position: absolute;
-    top: 25px;
-    right: 20px;
+    top: 3px;
+    right: 4px;
     z-index: 1000;
+    height: 34px;
+    width: 34px;
+    text-align: center;
+    line-height: 34px;
+    border-radius: 3px;
+    .icon {
+      color: #409eff;
+      font-weight: 700;
+      font-size: 18px;
+    }
+    &:hover {
+      background: #c8cbcf;
+      border: 0;
+      box-shadow: none;
+    }
   }
 }
 .fullScreen {
   position: fixed;
-  top: -15px;
+  top: 0px;
   bottom: 0;
   left: 225px;
   right: 0;
@@ -123,6 +162,11 @@ export default {
   /deep/.tox-tinymce {
     height: 100vh!important;
   }
+  &.bottomMargin {
+    /deep/.tox-tinymce {
+      height: calc(100vh - 40px)!important;
+    }
+  }
 }
 .editor {
   border: 1px solid #666;

src/components/input/textArea.vue

@@ -107,8 +107,8 @@ export default {
         file_picker_types: 'image',
         images_upload_credentials: true,
         plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
-        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect',
-        table_toolbar: 'tableprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells'
+        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect ｜ fullscreen',
+        table_toolbar: 'tableprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells ｜ fullscreen'
       }
     }
   },
@@ -177,9 +177,24 @@ export default {
   position: relative;
   .changeSizeBtn {
     position: absolute;
-    top: 10px;
-    right: 20px;
+    top: 3px;
+    right: 4px;
     z-index: 1000;
+    height: 34px;
+    width: 34px;
+    text-align: center;
+    line-height: 34px;
+    border-radius: 3px;
+    .icon {
+      color: #409eff;
+      font-weight: 700;
+      font-size: 18px;
+    }
+    &:hover {
+      background: #c8cbcf;
+      border: 0;
+      box-shadow: none;
+    }
   }
 }
 .fullScreen {

src/icons/svg/icon-qp.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <path id="全屏" d="M183.792,170.667a.875.875,0,0,1,.875.875v12.25a.875.875,0,0,1-.875.875h-12.25a.875.875,0,0,1-.875-.875v-12.25a.875.875,0,0,1,.875-.875Zm0,.875h-12.25v12.25h12.25Zm-4.165,7.466,2.239,2.24v-1.568a.437.437,0,0,1,.875,0V182.3a.438.438,0,0,1-.437.438h-2.625a.437.437,0,0,1,0-.875h1.569l-2.24-2.24a.437.437,0,1,1,.618-.62Zm-3.973-6.416a.437.437,0,1,1,0,.875h-1.569l2.24,2.24a.437.437,0,1,1-.618.619l-2.241-2.241v1.569a.437.437,0,1,1-.875,0v-2.625a.437.437,0,0,1,.438-.438Z" transform="translate(-170.667 -170.667)" fill="#444"/>
+  <path id="全屏" d="M183.792,170.667a.875.875,0,0,1,.875.875v12.25a.875.875,0,0,1-.875.875h-12.25a.875.875,0,0,1-.875-.875v-12.25a.875.875,0,0,1,.875-.875Zm0,.875h-12.25v12.25h12.25Zm-4.165,7.466,2.239,2.24v-1.568a.437.437,0,0,1,.875,0V182.3a.438.438,0,0,1-.437.438h-2.625a.437.437,0,0,1,0-.875h1.569l-2.24-2.24a.437.437,0,1,1,.618-.62Zm-3.973-6.416a.437.437,0,1,1,0,.875h-1.569l2.24,2.24a.437.437,0,1,1-.618.619l-2.241-2.241v1.569a.437.437,0,1,1-.875,0v-2.625a.437.437,0,0,1,.438-.438Z" transform="translate(-170.667 -170.667)"/>
 </svg>

src/icons/svg/icon-sx.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <path id="路径_438" data-name="路径 438" d="M9.325,10.637H5.387a.438.438,0,0,0,0,.875H8.275L5.3,14.488l.613.612,2.975-2.975v2.887a.438.438,0,1,0,.875,0V11.075a.449.449,0,0,0-.438-.438Zm5.688-1.75H12.125L15.1,5.912,14.488,5.3,11.512,8.275V5.387a.438.438,0,0,0-.875,0V9.325a.449.449,0,0,0,.438.438h3.938a.413.413,0,0,0,.438-.438A.438.438,0,0,0,15.012,8.887ZM16.5,3.2H3.9a.7.7,0,0,0-.7.7V16.5a.7.7,0,0,0,.7.7H16.5a.7.7,0,0,0,.7-.7V3.9A.7.7,0,0,0,16.5,3.2Zm-.176.875v12.25H4.075V4.075Z" transform="translate(-3.2 -3.2)" fill="#444"/>
+  <path id="路径_438" data-name="路径 438" d="M9.325,10.637H5.387a.438.438,0,0,0,0,.875H8.275L5.3,14.488l.613.612,2.975-2.975v2.887a.438.438,0,1,0,.875,0V11.075a.449.449,0,0,0-.438-.438Zm5.688-1.75H12.125L15.1,5.912,14.488,5.3,11.512,8.275V5.387a.438.438,0,0,0-.875,0V9.325a.449.449,0,0,0,.438.438h3.938a.413.413,0,0,0,.438-.438A.438.438,0,0,0,15.012,8.887ZM16.5,3.2H3.9a.7.7,0,0,0-.7.7V16.5a.7.7,0,0,0,.7.7H16.5a.7.7,0,0,0,.7-.7V3.9A.7.7,0,0,0,16.5,3.2Zm-.176.875v12.25H4.075V4.075Z" transform="translate(-3.2 -3.2)"/>
 </svg>

src/utils/global.js

@@ -51,3 +51,8 @@ export function formatHMS(data) {
   time = (hours < 10 ? ('0' + hours) : hours) + '小时' + (minutes < 10 ? ('0' + minutes) : minutes) + '分' + (seconds < 10 ? ('0' + seconds) : seconds) + '秒'
   return time
 }
+
+//  生成随机数字
+export function createRandomNumber() {
+  return Math.ceil(Math.random() * 10000)
+}

src/views/projectManage/bugList/details/index.vue

@@ -356,7 +356,12 @@
             </div>
           </el-tooltip>
           <div v-show="describeEditorVisible" style="margin-top:15px">
-            <editor v-model="text_content" class="tinymce" :init="configure" @blur="describeConfirm" />
+            <!-- <editor v-model="text_content" class="tinymce" :init="configure" @blur="describeConfirm" /> -->
+            <normal-area
+              id="buglist_tinymce"
+              :value.sync="text_content"
+              :height="500"
+            />
             <div style="margin-top:40px;float: right">
               <el-button @click="describeCancel()">取 消</el-button>
               <el-button type="primary" @click="describeConfirm()">确 认</el-button>
@@ -557,10 +562,12 @@ import createdBug from '@/views/projectManage/bugList/file/createdBug'
 import axios from 'axios'
 import { deepClone } from '@/utils/global'
 import searchPeople from '@/components/select/searchPeople' // 人员select
-import tinymce from 'tinymce/tinymce'
-import Editor from '@tinymce/tinymce-vue'
-import 'tinymce/themes/silver/theme'
-import 'tinymce/icons/default/icons'
+// import tinymce from 'tinymce/tinymce'
+// import Editor from '@tinymce/tinymce-vue'
+import normalArea from '@/components/input/normalArea' // 富文本
+import 'tinymce/plugins/table'// 插入表格插件
+// import 'tinymce/themes/silver/theme'
+// import 'tinymce/icons/default/icons'
 
 document.body.onpaste = function(event) {
   const data = (event.clipboardData || window.clipboardData)
@@ -584,7 +591,7 @@ export default {
     normalDialog,
     statusChange,
     searchPeople,
-    Editor
+    normalArea
   },
   props: {
     id: {
@@ -604,22 +611,22 @@ export default {
     return {
       bugId: -1, // 当前缺陷Id
       bizId: -1, // 当前缺陷BizId
-      configure: {
-        language_url: '/tinymce/langs/zh_CN.js',
-        language: 'zh_CN',
-        skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
-        browser_spellcheck: true, // 拼写检查
-        branding: false, // 去水印
-        elementpath: false, // 禁用编辑器底部的状态栏
-        statusbar: false, // 隐藏编辑器底部的状态栏
-        paste_data_images: true, // 允许粘贴图像
-        menubar: false, // 隐藏最上方menu
-        fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
-        file_picker_types: 'image',
-        images_upload_credentials: true,
-        plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
-        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect'
-      },
+      // configure: {
+      //   language_url: '/tinymce/langs/zh_CN.js',
+      //   language: 'zh_CN',
+      //   skin_url: '/tinymce/skins/ui/oxide', // 编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
+      //   browser_spellcheck: true, // 拼写检查
+      //   branding: false, // 去水印
+      //   elementpath: false, // 禁用编辑器底部的状态栏
+      //   statusbar: false, // 隐藏编辑器底部的状态栏
+      //   paste_data_images: true, // 允许粘贴图像
+      //   menubar: false, // 隐藏最上方menu
+      //   fontsize_formats: '14px 16px 18px 20px 24px 26px 28px 30px 32px 36px', // 字体大小
+      //   file_picker_types: 'image',
+      //   images_upload_credentials: true,
+      //   plugins: 'lists table textcolor wordcount contextmenu', // 引入插件
+      //   toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | undo redo | removeformat formatselect'
+      // },
       text_content: '',
       clielIcon: true, // 所属任务交互
       active: false,
@@ -735,7 +742,7 @@ export default {
     }
   },
   mounted() {
-    tinymce.init({ selector: '.tinymce', height: '100' })
+    // tinymce.init({ selector: '.tinymce', height: '100' })
     this.bugGetEnum()
     const id = this.id === -1 ? this.bugId : this.id
     this.bugGet(id, false).then(res => {

src/views/projectManage/bugList/file/createdBug.vue

@@ -131,8 +131,15 @@
               <el-form-item label="描述" style="width:100%;">
                 <el-row v-if="editr">
                   <el-col :span="24">
-                    <div id="wange" style="background-color: #FFF;" class="toolbar" />
-                    <div id="wange1" class="text" />
+                    <!-- <div id="wange" style="background-color: #FFF;" class="toolbar" />
+                    <div id="wange1" class="text" /> -->
+                    <!-- formInline.bugDescribe -->
+                    <normal-area
+                      id="buglist_file_tinymce"
+                      :value.sync="formInline.bugDescribe"
+                      :height="200"
+                      :full-position-style="{ left:'0', bottom: '30px' }"
+                    />
                   </el-col>
                 </el-row>
               </el-form-item>
@@ -183,7 +190,7 @@
 const _ = require('lodash')
 import { mapGetters } from 'vuex'
 import { analysisBizId_id } from '@/utils/crypto-js.js'
-import E from 'wangeditor'
+// import E from 'wangeditor'
 import {
   bugGetEnum,
   settingGetBizList,
@@ -196,6 +203,8 @@ import { memberQueryMemberInfoByIDAPorName } from '@/api/projectIndex'
 import normalDialog from '@/components/dialog/normalDialog'
 import '@/views/projectManage/bugList/css/index.css'
 import '@/styles/PublicStyle/index.scss'
+import normalArea from '@/components/input/normalArea' // 富文本
+import 'tinymce/plugins/table'// 插入表格插件
 import axios from 'axios'
 
 document.body.onpaste = function(event) {
@@ -216,7 +225,8 @@ document.body.onpaste = function(event) {
 export default {
   name: 'Createdbug',
   components: {
-    normalDialog
+    normalDialog,
+    normalArea
   },
   filters: {
     limit(e, limit) {
@@ -411,24 +421,24 @@ export default {
       )
     },
     getEcharts() {
-      setTimeout(() => {
-        this.$set(this.formInline, 'bugDescribe', '')
-        const editorRemark = new E('#wange', '#wange1')
-        editorRemark.customConfig.menus = [
-          'bold',
-          'italic',
-          'underline',
-          'link',
-          'list',
-          'justify',
-          'table',
-          'foreColor'
-        ]
-        editorRemark.customConfig.onchange = html => {
-          this.formInline.bugDescribe = html
-        }
-        editorRemark.create()
-      }, 100)
+      // setTimeout(() => {
+      //   this.$set(this.formInline, 'bugDescribe', '')
+      //   // const editorRemark = new E('#wange', '#wange1')
+      //   editorRemark.customConfig.menus = [
+      //     'bold',
+      //     'italic',
+      //     'underline',
+      //     'link',
+      //     'list',
+      //     'justify',
+      //     'table',
+      //     'foreColor'
+      //   ]
+      //   editorRemark.customConfig.onchange = html => {
+      //     this.formInline.bugDescribe = html
+      //   }
+      //   editorRemark.create()
+      // }, 100)
     },
     getcurrentHandler(e) {
       this.$set(this.formInline, 'currentHandler', e)

src/views/projectManage/onlineproblem/create/index.vue

@@ -13,13 +13,13 @@
       </header>
       <div class="content">
         <!-- 复盘 -->
-        <div>
+        <div style="padding-top: 15px">
           <normal-area
             id="replay"
             :value.sync="replayDesc"
             :empty-text="'点击'"
             :input-button="'修改模板'"
-            :styles="{ padding: '15px 0px 0px 0px', maxHeight: '200px' }"
+            :styles="{ maxHeight: '200px' }"
           />
         </div>
       </div>

src/views/reportManagement/ReleaseReport/newReleaeTemplate.vue

@@ -12,7 +12,6 @@
       <div v-if="!releaseType" style=" margin-bottom: 10px;">
         <span style="color: #f56b6c">*</span>
         <span class="backStyle"> 关联任务</span><br>
-
         <el-select v-model="from.taskIds" filterable remote reserve-keyword placeholder="🔍 请输入任务名称或ID" :remote-method="remoteMethod" style="width: 30%;margin-top: 10px;" size="small" @change="colseSelect">
           <el-option v-for="item in tasksOptions" :key="item.id" :label="item.name" :value="item.id" @click.native="tasksChange(item)">
             <div class="Layout_space_between"><span>{{ item.name }}</span></div>
@@ -99,7 +98,12 @@
           <!-- <searchTeam :value.sync="from.tester" :clearable="true" :multiple="true" :disabled="releaseType" :placeholder="'请输入姓名或邮箱前缀'" :size="'small'" style="width: 100%;" /> -->
         </el-col>
       </el-row>
-      <normal-area id="report-template" :value.sync="fromData.content" :height="500" />
+      <normal-area
+        id="report-template-1"
+        :value.sync="fromData.content"
+        :height="500"
+        :full-position-style="{ top:'20px',left:'14.5%', right: '15.5%' }"
+      />
     </el-form>
     <div class="backStyle">缺陷统计</div>
     <iconDisplay :task-ids="taskId" :release-type="releaseType" />

src/views/reportManagement/Testing/newTestingTemplate.vue

@@ -123,7 +123,12 @@
       <el-table-column prop="referredClientTypeName" label="跟版客户端" min-width="300" />
     </el-table>
 
-    <normal-area id="report-template" :value.sync="fromCreateData.content" :height="500" />
+    <normal-area
+      id="report-template-2"
+      :value.sync="fromCreateData.content"
+      :height="500"
+      :full-position-style="{ top:'20px',left:'14.5%', right: '15.5%' }"
+    />
   </div>
 </template>
 

src/views/reportManagement/daily/dailyTemplate.vue

@@ -27,7 +27,12 @@
       </el-form-item>
 
       <el-form-item label="报告内容" style="margin-top: 20px;"><br>
-        <normal-area id="report-template" :value.sync="fromCreateData.content" :height="500" />
+        <normal-area
+          id="report-template-4"
+          :value.sync="fromCreateData.content"
+          :height="500"
+          :full-position-style="{ top:'20px',left:'14.5%', right: '15.5%' }"
+        />
       </el-form-item>
     </el-form>
     <icon-display :details="taskid_arr" />

src/views/reportManagement/daily/newReportTemplate.vue

@@ -10,7 +10,12 @@
         <el-input v-model="fromCreateData.moduleName" size="small" style="width:100%;" placeholder="请输入模版名称（不可与现有模版重名）" />
       </el-form-item>
       <el-form-item label="模版内容"><br>
-        <normal-area id="report-template" :value.sync="fromCreateData.content" :height="500" />
+        <normal-area
+          id="report-template-3"
+          :value.sync="fromCreateData.content"
+          :height="500"
+          :full-position-style="{ top:'20px',left:'14.5%', right: '15.5%' }"
+        />
       </el-form-item>
     </el-form>
     <div class="backStyle">缺陷统计</div>