先提交一波整理的代码

project/pingchang/apps/AppOrganizationChange/AppOrganizationChange.vue

@@ -1,12 +1,13 @@
 <template>
   <section class="AppOrganizationChange">
     <keep-alive :include="['List']">
-      <component ref="component" :is="component" :instance="instance" :selected.sync="selected" :params="params" :dict="dict" @change="onChange"/>
+      <component :is="currentPage" :instance="instance" :selected.sync="selected" :params="params" :dict="dict" @change="onChange"/>
     </keep-alive>
   </section>
 </template>
 
 <script>
+import {mapState} from "vuex";
 import addChange from "./components/addChange.vue";
 import List from "./components/List.vue";
 import organizationSetting from "./components/organizationSetting.vue";
@@ -23,6 +24,16 @@ export default {
     addChange,
     organizationSetting,
   },
+  computed: {
+    ...mapState(['user']),
+    currentPage() {
+      if (this.$route.hash == "#add") {
+        return addChange
+      } else if (this.$route.hash == "#setting") {
+        return organizationSetting
+      } else return List
+    }
+  },
   data() {
     return {
       component: "List",
@@ -33,26 +44,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      if (data.type === "List") {
-        this.component = "List";
       this.params = data.params;
-      }
-
-      if (data.type === "organizationSetting") {
-        this.component = "organizationSetting";
-        this.params = data.params;
-      }
-
-      if (data.type === "addChange") {
-        this.component = "addChange";
-        this.params = data.params;
-
-        this.$nextTick(() => {
-          if (data.isRefresh) {
-            this.$refs.component.getList();
-          }
-        });
-      }
     },
   },
   created() {

project/pingchang/apps/AppOrganizationChange/components/List.vue

@@ -84,20 +84,10 @@ export default {
       return data.name.indexOf(value) !== -1
     },
     toAdd(id) {
-      this.$emit('change', {
-        type: 'addChange',
-        params: {
-          id: id || ''
-        }
-      })
+      this.$router.push({hash: "#add", query: {id}})
     },
     toSetting(id) {
-      this.$emit('change', {
-        type: 'organizationSetting',
-        params: {
-          id: id || ''
-        }
-      })
+      this.$router.push({hash: "#setting", query: {id}})
     }
   }
 }
@@ -147,6 +137,7 @@ export default {
       width: 100%;
     }
   }
+
   ::v-deep .is-current > .el-tree-node__content {
     width: 100% !important;
     padding-right: 16px !important;

project/pingchang/apps/AppOrganizationChange/components/addChange.vue

@@ -6,25 +6,22 @@
         <ai-card title="基本信息">
           <template #content>
             <div class="Form">
-              <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right">
+              <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="right" size="small">
                 <el-row type="flex">
-                  <el-col :span="12">
-                    <el-form-item label="换届时间" prop="changeTime">
+                  <el-form-item class="fill" label="换届时间" prop="changeTime">
                     <el-date-picker v-model="form.changeTime" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" style="width:338px">
                     </el-date-picker>
                   </el-form-item>
-                  </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="届次" prop="sessionTime">
+                  <el-form-item class="fill" label="届次" prop="sessionTime">
                     <el-input size="small" :maxlength="30" placeholder="请输入届次" v-model="form.sessionTime"></el-input>
                   </el-form-item>
-                  </el-col>
                 </el-row>
-                <ai-bar title="本届任职(必填)">
-                  <template slot="right">
-                    <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.serveList.push({name:null,position:null,type:0})" >添加任职人员</el-button>
+                <ai-title title="本届任职(必填)">
+                  <template slot="rightBtn">
+                    <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.serveList.push({name:null,position:null,type:0})">添加任职人员
+                    </el-button>
                   </template>
-                </ai-bar>
+                </ai-title>
                 <el-table :data="form.serveList" size="mini" border stripe>
                   <el-table-column label="职位" align="center">
                     <template slot-scope="{row}">
@@ -43,11 +40,12 @@
                   </el-table-column>
                 </el-table>
               </el-form>
-              <ai-bar title="本届候选人">
-                <template slot="right">
-                  <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.candidateList.push({name:null,position:null,type: 1})" >添加候选人</el-button>
+              <ai-title class="mar-t8" title="本届候选人">
+                <template slot="rightBtn">
+                  <el-button size="small" type="text" icon="iconfont iconAdd" @click="form.candidateList.push({name:null,position:null,type: 1})">添加候选人
+                  </el-button>
                 </template>
-              </ai-bar>
+              </ai-title>
               <el-table :data="form.candidateList" size="mini" border stripe>
                 <el-table-column label="职位" align="center">
                   <template slot-scope="{row}">
@@ -101,11 +99,8 @@ export default {
     }
   },
   methods: {
-    cancel (isRefresh) {
-      this.$emit('change', {
-        type: 'List',
-        isRefresh: !!isRefresh
-      })
+    cancel() {
+      this.$router.push({})
     },
     handleDelete(i, type) {
       this.$confirm("确定要删除该数据?").then(() => {

project/pingchang/apps/AppOrganizationChange/components/history.vue

@@ -1,6 +1,6 @@
 <template>
-  <ai-list class="history">
-    <template slot="content">
+  <section class="history">
+
     <ai-search-bar>
       <template #left>
         <el-button type="primary" icon="iconfont iconEdit" @click="fillupAdd('')">补录</el-button>
@@ -26,8 +26,7 @@
         </template>
       </el-table-column>
     </ai-table>
-    </template>
-  </ai-list>
+  </section>
 </template>
 
 <script>

project/pingchang/apps/AppOrganizationChange/components/moment.vue

@@ -1,22 +1,21 @@
 <template>
-  <ai-list class="moment">
-    <template slot="content">
-      <ai-bar title="总体概况">
-        <template slot="right">
+  <section class="moment">
+    <ai-title title="总体概况" class="mar-b8">
+      <template slot="rightBtn">
         <el-button size="small" type="text" icon="iconfont iconEdit" @click="toEdit('')">修改</el-button>
       </template>
-      </ai-bar>
+    </ai-title>
     <ai-wrapper>
       <ai-info-item label="本届换届时间" :value="111"/>
       <ai-info-item label="换届类型" :value="111"/>
       <ai-info-item label="下届换届时间" :value="111"/>
       <ai-info-item label="当前届次" :value="111"/>
     </ai-wrapper>
-      <ai-bar title="本届任职">
-        <template slot="right">
+    <ai-title title="本届任职" class="mar-b8">
+      <template slot="rightBtn">
         <el-button size="small" type="text" icon="iconfont iconAdd" @click="dialogJob=true">添加任职人员</el-button>
       </template>
-      </ai-bar>
+    </ai-title>
     <ai-table
         class="detail-table__table"
         :tableData="tableData"
@@ -32,11 +31,11 @@
         </template>
       </el-table-column>
     </ai-table>
-      <ai-bar title="本届候选人">
-      <template slot="right">
+    <ai-title title="本届候选人" class="mar-b8">
+      <template slot="rightBtn">
         <el-button size="small" type="text" icon="iconfont iconAdd" @click="dialogCandidate = true">添加候选人</el-button>
       </template>
-      </ai-bar>
+    </ai-title>
     <ai-table
         class="detail-table__table"
         :tableData="tableData"
@@ -62,7 +61,6 @@
         </el-form-item>
       </el-form>
     </ai-dialog>
-
     <ai-dialog :visible.sync="dialogCandidate" title="添加本届候选人" width="720px" @closed="CandFrom={}" @onConfirm="handleCandForm">
       <el-form ref="CandFrom" size="small" :model="CandFrom" :rules="candRules" label-width="80px">
         <el-form-item label="职位" prop="job">
@@ -73,10 +71,7 @@
         </el-form-item>
       </el-form>
     </ai-dialog>
-    </template>
-
-    
-  </ai-list>
+  </section>
 </template>
 
 <script>
@@ -132,16 +127,14 @@ export default {
     this.getList(this.selected.id)
   },
   methods: {
-    jobEdit() {},
-    jobDelete() {},
-    getJobList() {},
+    jobEdit() {
+    },
+    jobDelete() {
+    },
+    getJobList() {
+    },
     toEdit(id) {
-      this.$emit('change', {
-        type: 'addChange',
-        params: {
-          id: id || ''
-        }
-      })
+      this.$router.push({hash: "#add", query: {id}})
     },
     getList(id) {
       this.instance.post(`/app/apporganizationgeneralelection/queryDetailByOrganizationId?organizationId=${id}`).then(res => {
@@ -150,8 +143,10 @@ export default {
         }
       })
     },
-    handleJobForm() {},
-    handleCandForm() {},
+    handleJobForm() {
+    },
+    handleCandForm() {
+    },
   }
 }
 </script>

project/pingchang/apps/AppOrganizationChange/components/organizationSetting.vue

@@ -97,12 +97,12 @@
 
 <script>
 import {mapState} from 'vuex'
+
 export default {
   name: "organizationSetting",
   props: {
     instance: Function,
     dict: Object,
-    params: Object,
   },
 
   data() {
@@ -138,11 +138,8 @@ export default {
     this.getOrganization()
   },
   methods: {
-    cancel (isRefresh) {
-      this.$emit('change', {
-        type: 'List',
-        isRefresh: !!isRefresh
-      })
+    cancel() {
+      this.$router.back()
     },
     // 查询组织关系
     getOrganization() {