feat(noticeIssuance): 重构通知发布功能使用抽屉组件

src/views/bpm/documents/noticeIssuance/components/addOrEdit.vue

@@ -6,7 +6,9 @@
                     <MainBodyTemplate ref="mainBodyTemplate" :type="routerQuery.type" menu="notice" :disabled="disabled" @sendFiles="getFiles"></MainBodyTemplate>
                 </el-tab-pane>
                 <el-tab-pane label="正文" name="2">
-                     <tinymce-editor :disabled="disabled" v-model="formData.content" :init="tinymceConfig" />
+                     <div v-show="tabValue === '2'" style="min-height: 525px;">
+                        <tinymce-editor v-if="tinymceConfig && tabValue === '2'" :disabled="disabled" v-model="formData.content" :init="tinymceConfig" />
+                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="附件查看" name="3">
                   <div class="file-container">
@@ -79,6 +81,7 @@ export default {
   },
   data() {
     return {
+      drawer: false,
       businessId: '',
       processSubmitDialogFlag: false,
       currentFileUrl: '',
@@ -93,14 +96,24 @@ export default {
       fileList: [],
       tinymceConfig: {
         height: 525,
+        resize: false,
+        autoresize_bottom_margin: 0,
+        auto_focus: false,
+        scroll_padding: 0,
+        scroll_padding_bottom: 0,
         images_upload_handler: (blobInfo, success, error) => {
           const file = blobInfo.blob();
+          console.log('file~~~', file);
+          // 判断 file 是否为有效的文件对象
+          if (!file || !(file instanceof File) || file.size === 0) {
+            return;
+          }
           // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
           uploadFile({
                 module: 'main',
                 multiPartFile: file
             }).then((res) => {
-              
+
                 if (res.data) {
                   console.log('images_upload_handler~~~', res);
                   success(res.data.url);
@@ -110,34 +123,33 @@ export default {
             }).catch(error => {
                 this.$message.error('文件上传失败');
             });
-          // const formData = new FormData();
-          // formData.append('file', file, file.name);
-          // request.post('/file/upload', formData).then(res => {
-          //     if (res.data.data.url) {
-          //         success(res.data.data.url);
-          //     } else {
-          //         error(res.data.message);
-          //     }
-          // }).catch(e => {
-          //     console.error(e);
-          //     error(e.message);
-          // });
-      }
+        }
       },
     }
   },
   created() {
-    this.routerQuery = this.isApprove ? this.query : this.$route.query;
-
-    this.getDetail();
+    // this.routerQuery = this.isApprove ? this.query : this.$route.query;
+    this.routerQuery = this.query;
+    this.tabValue = '1';
+    console.log('this.query~~~', this.query);
+    this.$nextTick(() => {
+      this.getDetail();
+    })
  
   },
   computed: {
     disabled() {
       return this.routerQuery.type == 'detail';
-    }
+    },
   },
   methods: {
+    // openDrawer(query) {
+    //   this.routerQuery = this.isApprove ? this.query : query;
+    //   this.drawer = true;
+    //   this.$nextTick(() => {
+    //     this.getDetail();
+    //   })
+    // },
     filesOpen(item) {
       this.currentFileUrl = setFileUrl(item);
       console.log('currentFileUrl~~~', this.currentFileUrl);
@@ -224,7 +236,7 @@ export default {
             }else {
               loading.close();
               this.$message.success('保存成功');
-              this.$router.go(-1);
+              this.cancel();
             }
           })
           .catch((e) => {
@@ -260,7 +272,8 @@ export default {
       },
 
     cancel() {
-      this.$router.go(-1);
+      this.tabValue = '1';
+      this.$emit('done');
     },
   }
 }

src/views/bpm/documents/noticeIssuance/components/addOrEditDraw.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="drawer"
+    direction="rtl"
+    :append-to-body="true"
+    size="100%"
+  >
+    <add-or-edit ref="addOrEditRef" :query="query" @done="done"></add-or-edit>
+  </el-drawer>
+</template>
+<script>
+import AddOrEdit from './addOrEdit.vue'
+export default {
+  components: {
+    AddOrEdit
+  },
+  data() {
+    return {
+      drawer: false,
+      query: {},
+    }
+  },
+  computed: {
+    title() {
+      return this.query.type == 'add' ? '新增' : this.query.type == 'edit' ? '修改' : '详情';
+    }
+  },
+  methods: {
+    openDrawer(query) {
+      this.query = query;
+      this.drawer = true;
+    },
+    done() {
+      this.drawer = false;
+      this.$emit('reload');
+    }
+  }
+}
+</script>

src/views/bpm/documents/noticeIssuance/index.vue

@@ -100,6 +100,7 @@
       content="是否确定删除？"
       @done="commitBtn"
     />
+    <addOrEditDraw ref="addOrEditDrawRef" @reload="reload" />
   </div>
 </template>
 
@@ -112,13 +113,15 @@
   listOrganizations
 } from '@/api/system/organization';
 import popModal from '@/components/pop-modal';
+import addOrEditDraw from './components/addOrEditDraw.vue';
   
   export default {
     mixins: [tableColumnsMixin],
     components: {
       documentDialog,
       processSubmitDialog,
-      popModal
+      popModal,
+      addOrEditDraw
     },
 
     data() {
@@ -347,14 +350,19 @@ import popModal from '@/components/pop-modal';
         },
         toEdit(type, row = {}) {
           this.current = row;
-          this.$router.push({
-            path: '/documents/noticeIssuance/add-or-edit',
-            // query
-            query: {
-              id: this.current.id,
-              type: type
-            }
+          this.$refs.addOrEditDrawRef.openDrawer({
+            type: type,
+            id: this.current.id
           });
+          
+          // this.$router.push({
+          //   path: '/documents/noticeIssuance/add-or-edit',
+          //   // query
+          //   query: {
+          //     id: this.current.id,
+          //     type: type
+          //   }
+          // });
         },
         toDel(row) {
           const loading = this.$loading({ lock: true });
@@ -371,14 +379,18 @@ import popModal from '@/components/pop-modal';
         },
         handleSelectDone(list) {
           this.current = list[0];
-          this.$router.push({
-            path: '/documents/noticeIssuance/add-or-edit',
-            // query
-            query: {
-              id: this.current.id,
-              type: 'add'
-            }
+          this.$refs.addOrEditDrawRef.openDrawer({
+            type: 'add',
+            id: this.current.id
           });
+          // this.$router.push({
+          //   path: '/documents/noticeIssuance/add-or-edit',
+          //   // query
+          //   query: {
+          //     id: this.current.id,
+          //     type: 'add'
+          //   }
+          // });
         },
 
         toChangeStatus(row, status) {

src/views/home/index.vue

@@ -230,6 +230,9 @@
       :common-dialog-flag.sync="commonDialogFlag"
       @reload="getCommonFunctionsList"
     ></commonDialog>
+    <noticeIssuanceDetail
+      ref="noticeIssuanceDetailRef"
+    ></noticeIssuanceDetail>
   </div>
 </template>
 
@@ -249,11 +252,13 @@ import { mapGetters } from 'vuex';
 import vuedraggable from 'vuedraggable';
 import commonDialog from '@/views/home/common-dialog.vue';
 import { noticeDocumentPageV1API } from '@/api/documents/noticeIssuance/index.js';
+import noticeIssuanceDetail from '@/views/bpm/documents/noticeIssuance/components/addOrEditDraw.vue';
 export default {
   name: 'HomePage',
   components: {
     vuedraggable,
-    commonDialog
+    commonDialog,
+    noticeIssuanceDetail
   },
   data() {
     return {
@@ -329,14 +334,19 @@ export default {
     handleNotificationsClick(item) {
       console.log('item~~~', item);
       if(this.activeTab === 'system') return;
-      this.$router.push({
-        path: '/documents/noticeIssuance/add-or-edit',
-        // query
-        query: {
-          id: item.id,
-          type: 'detail'
-        }
+      
+      this.$refs.noticeIssuanceDetailRef.openDrawer({
+        id: item.id,
+        type: 'detail'
       });
+      
+      // this.$router.push({
+      //   // query
+      //   query: {
+      //     id: item.id,
+      //     type: 'detail'
+      //   }
+      // });
     },
     async getMyWorkCalendar() {
       const res = await getMyWorkCalendar({
@@ -468,8 +478,8 @@ export default {
           while ((match = imgRegex.exec(content)) !== null) {
             images.push(match[1]);
           }
-          // 提取纯文本内容（去除 HTML 标签）
-          const textContent = content.replace(/<[^>]+>/g, '').trim();
+          // 提取纯文本内容（去除 HTML 标签和空格）
+          const textContent = content.replace(/<[^>]+>/g, '').replace(/\s+/g, '').trim();
           
           return {
             id: item.id,
@@ -1080,7 +1090,7 @@ export default {
 }
 
 .notification-text {
-  font-size: 12px;
+  font-size: 14px;
   // color: #333;
   line-height: 1.4;
   flex: 1;