页面整合

packages/wxwork/AppMassNotification/AppMassNotification.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="AppMassNotification">
     <keep-alive :include="['List']">
-      <component ref="component" :is="component" :instance="instance" :params="params" :dict="dict" @change="onChange"/>
+      <component ref="component" :is="currentPage" :instance="instance" :params="params" :dict="dict" @change="onChange"/>
     </keep-alive>
   </section>
 </template>
@@ -25,22 +25,18 @@ export default {
       include: [],
     }
   },
+  computed: {
+    currentPage() {
+      const {hash} = this.$route
+      return hash == "#add" ? Add : List
+    },
+  },
   methods: {
     onChange(data) {
       if (data.type === "Add") {
-        this.component = "Add";
+        this.$router.push({hash: "#add", query: data.params})
-        this.params = data.params;
+      } else {
-      }
+        this.$router.push({})
-
-      if (data.type === "List") {
-        this.component = "List";
-        this.params = data.params;
-
-        this.$nextTick(() => {
-          if (data.isRefresh) {
-            this.$refs.component.getTableData();
-          }
-        });
       }
     },
   },

packages/wxwork/AppMassNotification/components/Add.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="Add">
-    <ai-detail v-if="!params.id">
+    <ai-detail v-if="!$route.query.id">
       <template slot="title">
         <ai-title title="群发通知" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
       </template>
@@ -76,15 +76,18 @@
               </el-form-item>
               <!-- 图片 -->
               <el-form-item label="图片" style="width: 100%" v-if="form.contentType == 'image'">
-                <ai-uploader :instance="instance" isWechat v-model="imgList" acceptType=".jpg,.png,.jpeg" :limit="1" url="/app/wxcp/upload/uploadFile?type=image"></ai-uploader>
+                <ai-uploader :instance="instance" isWechat v-model="imgList" acceptType=".jpg,.png,.jpeg" :limit="1"
+                             url="/app/wxcp/upload/uploadFile?type=image"></ai-uploader>
               </el-form-item>
               <!-- 视频 -->
               <el-form-item label="视频" style="width: 100%" v-if="form.contentType == 'video'">
-                <ai-uploader :instance="instance" fileType="file" isWechat acceptType=".mp4" v-model="videoList" :limit="1" url="/app/wxcp/upload/uploadFile?type=video"></ai-uploader>
+                <ai-uploader :instance="instance" fileType="file" isWechat acceptType=".mp4" v-model="videoList" :limit="1"
+                             url="/app/wxcp/upload/uploadFile?type=video"></ai-uploader>
               </el-form-item>
               <!-- 附件 -->
               <el-form-item label="附件" style="width: 100%" v-if="form.contentType == 'file'">
-                <ai-uploader :instance="instance" fileType="file" isWechat v-model="filesList" :limit="1" url="/app/wxcp/upload/uploadFile?type=file"></ai-uploader>
+                <ai-uploader :instance="instance" fileType="file" isWechat v-model="filesList" :limit="1"
+                             url="/app/wxcp/upload/uploadFile?type=file"></ai-uploader>
               </el-form-item>
 
             </el-form>
@@ -99,7 +102,7 @@
 
     </ai-detail>
 
-    <ai-detail class="add" v-if="params.id">
+    <ai-detail class="add" v-if="$route.query.id">
       <template slot="title">
         <ai-title title="群发通知详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
       </template>
@@ -143,16 +146,13 @@
 
 <script>
 import {mapState} from "vuex";
-import AiDvWrapper from '../../../../project/dvui/layout/AiDvWrapper/AiDvWrapper.vue';
+
 export default {
-  components: { AiDvWrapper },
   name: 'Add',
   props: {
     instance: Function,
-    dict: Object,
+    dict: Object
-    params: Object
   },
-
   data() {
     return {
       isShow: false,
@@ -210,7 +210,7 @@ export default {
   },
 
   created() {
-    if (this.params.id) {
+    if (this.$route.query.id) {
       this.getInfo()
     } else {
       this.getSubTags()
@@ -247,7 +247,7 @@ export default {
       })
     },
     getInfo() {
-      this.instance.post(`/app/pushmessage/detail?id=${this.params.id}`).then(res => {
+      this.instance.post(`/app/pushmessage/detail?id=${this.$route.query.id}`).then(res => {
         if (res?.data) {
           this.data = res.data
           this.images = [{url: res.data.fileList.filter(e => e.contentType == "image")[0]?.accessUrl}]
@@ -415,8 +415,10 @@ export default {
   .tag_title {
     font-weight: 600;
   }
+
   .tag_item {
     margin: 5px 0;
+
     span {
       display: inline-block;
       // padding: 5px 10px;
@@ -429,6 +431,7 @@ export default {
       border-radius: 4px;
       margin-right: 8px;
     }
+
     .active {
       background: #53bcea;
       color: #FFFFFF;

packages/wxwork/AppMassNotification/components/List.vue

@@ -50,6 +50,7 @@
 
 <script>
 import {mapState} from 'vuex'
+
 export default {
   name: "List",
   props: {
@@ -131,6 +132,7 @@ export default {
 .List {
   height: 100%;
   background: #f3f4f5;
+
   .count {
     cursor: pointer;
     color: #2266FF;
@@ -142,6 +144,7 @@ export default {
   }
 
 }
+
 img, video {
   width: 40px;
   height: 40px;