使用vuex-along实现页面刷新vuex组件不删除，优化详情返回等相关代码（1）

src/components/module_interLock/UEquipmentTree/UEquipmentTreeDrag.vue

@@ -255,6 +255,7 @@
       handleRefresh(){
         this.selectedKeys = []
         this.$store.commit('SET_CLICKSYSTEMNODE', {});
+        this.$store.commit('SET_TREESELECTKEYS', []);
         this.$emit('select')
       },
       // findParents(treeData,id){

src/store/index.js

@@ -8,6 +8,7 @@ import enhance from './modules/enhance'
 import online from './modules/online'
 import interLock from './modules/interLock'
 import getters from './getters'
+import createVuexAlong from 'vuex-along'
 
 Vue.use(Vuex)
 
@@ -20,6 +21,15 @@ export default new Vuex.Store({
     online,
     interLock,
   },
+  plugins: [createVuexAlong({
+    name: 'interLockStore',     //存放在localStroage或者sessionStroage 中的名字
+    local: false,  // 是否存放在localStroage中-关闭浏览器数据不删除
+    session: { // 是否存放在sessionStroage中-关闭浏览器删除数据
+      list: ['interLock'],
+      // isFilter: true, // 当isFilter设置为true时， list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
+    },
+    justSession: true
+  })],
   state: {
 
   },

src/views/module_interLock/InterlockSummary/InterlockSummaryList.vue

@@ -86,7 +86,7 @@
         size="middle"
         bordered
         rowKey="id"
-        :scroll="{ x:'calc(145vh - 85px)', y: 'calc(75vh - 85px)' }"
+        :scroll="{ x:'calc(145vh - 85px)', y: 'calc(100vh - 275px)' }"
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
@@ -213,39 +213,25 @@
           // },
           {
             title:'联锁名称',
-            // align:"center",
+            align:"center",
             dataIndex: 'interlockname',
-            width: 300,
-            // ellipsis: true,
+            // width: 200,
+            ellipsis: true,
             customRender:(text,record,index)=> {
               var children = (
-                <div class="item-node-container">
-                  <div class="item-node-title">
-                    <span class="item-node-name">
-                      <a-tooltip>
-                        <template slot="title">
-                          { record.interlockApparatusName } -- { record.interlockSystemName } -- {record.interlockname}
-                        </template>
-                        <span>
-                          {record.interlockname}
-                        </span>
-                      </a-tooltip>
-                    </span>
-                  </div>
-                </div>
-                // <a-tooltip>
-                //   <template slot="title">
-                //     { record.interlockApparatusName } -- { record.interlockSystemName }
-                //   </template>
-                //   { record.interlockname }
-                // </a-tooltip>
+                <a-tooltip>
+                  <template slot="title">
+                    { record.interlockApparatusName } -- { record.interlockSystemName } -- {record.interlockname}
+                  </template>
+                  {record.interlockname}
+                </a-tooltip>
               )
               const obj = {
                 children: [children],
                 attrs: {rowSpan:record.rowSpan}
               }
-               obj.attrs.align = 'left';
-               return obj;
+              obj.attrs.align = 'left';
+              return obj;
             },
             customCell: (record, index)=>{ return this.customCellDetail(record, index)}
             // sorter: (a, b) => a.interlockname - b.interlockname,
@@ -253,7 +239,8 @@
           {
             title:'联锁条件',
             align:"center",
-            // width: 100,
+            // width: 160,
+            ellipsis: true,
             dataIndex: 'interlockConditionTag'
           },
           {
@@ -496,13 +483,8 @@
           on: {
             // 点击事件
             click: (event) => {
-              // this.$router.push({path: '/interLock/detail',query:{summaryid:record.summaryid,interlockSystemId:record.interlockSystemId}})
-              var data = {
-                summaryid: record.summaryid,
-                interlockSystemId: record.interlockSystemId,
-                detailName: record.interlockname,
-              }
-              this.$emit('click', data)
+              this.$store.commit('SET_SUMMARYEDITINFO', record);
+              this.$router.push({path: '/interLock/detail'})
             },
           }
         }
@@ -775,12 +757,9 @@
   //   overflow-x: auto;
   // }
   
-  .item-node-title {
-    width: 300px;
-  }
-  .item-node-name{
+  .item-cell-name{
     padding-left: 8px;
-    width: 95%;
+    width: 100%;
     display: inline-block;
     white-space: nowrap;
     overflow: hidden; /*超出的文本隐藏*/

src/views/module_interLock/InterlockSummary/index.vue

@@ -1,82 +1,45 @@
 <template>
   <div>
-    <!-- 为了解决菜单高亮的问题，暂时的解决方式是将两个页面作为组件写入页面，通过判断显示不同组件 -->
-    <!-- 联锁总表 -->
-    <template v-if="showPage === 'summary'">
-      <!-- IoT TPM相关 修改框架 -->
-      <!-- <a-tabs v-if="layoutMode === 'iotmenu'"  type="card" default-active-key="1">
-        <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in iotTpmageList">
-          <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
-        </a-tab-pane>
-      </a-tabs> -->
-      <div class="iotmenu-content-header">
-        <a-icon type="file-text" />
-        <span>联锁总表</span>
-      </div>
-      <div class="iotmenu-content">
-        <u-equipment-tree-drag treeTitle="装置系统" @select="selectEquipment">
-          <interlock-summary-list ref="summaryList" @click="summaryListClick"></interlock-summary-list>
-        </u-equipment-tree-drag>
-      </div>
-    </template>
-    <!-- 详情 -->
-    <interlock-detail-list v-if="showPage === 'detail'" @click="showPage='summary'" ref="summaryDetailRef" :currentData="currentData"></interlock-detail-list>
+    <div class="iotmenu-content-header">
+      <a-icon type="file-text" />
+      <span>联锁总表</span>
+    </div>
+    <div class="iotmenu-content">
+      <u-equipment-tree-drag treeTitle="装置系统" @select="selectEquipment">
+        <interlock-summary-list ref="summaryList"></interlock-summary-list>
+      </u-equipment-tree-drag>
+    </div>
   </div>
 </template>
 
 <script>
   import InterlockSummaryList from './InterlockSummaryList.vue';
-  import InterlockDetailList from '../interlockSummaryDetail/InterlockSummaryDetailList.vue';
-  import store from '@/store'
 
   export default({
     components: {
       InterlockSummaryList,
-      InterlockDetailList
     },
     data () {
       return {
-        showPage: 'summary',
-        currentData: {}
       }
     },
-    beforeRouteEnter(to, from, next) {
-      if(from.path !== '/interLock/summary/set'){
-        store.commit('SET_CLICKSYSTEMNODE', {});
-        store.commit('SET_TREESELECTKEYS', []);
-        store.commit('SET_TREEEXPANDEKEYS', []);
-      }
-      next()
-    },
+    // beforeRouteEnter(to, from, next) {
+    //   // 除了进入新增编辑页面外，销毁vuex数据 -- 忘记为啥一开始这么做了
+    //   if(from.path !== '/interLock/summary/set' && from.path !== '/interLock/detail'){
+    //     store.commit('SET_CLICKSYSTEMNODE', {});
+    //     store.commit('SET_TREESELECTKEYS', []);
+    //     store.commit('SET_TREEEXPANDEKEYS', []);
+    //   }
+    //   next()
+    // },
     created() {
     },
     mounted() {
     },
-    // beforeDestroy() {
-    //   if(this.$route.path !== '/interLock/summary/set'){
-    //     // 除了进入新增编辑页面外，销毁vuex数据
-    //     this.$store.commit('SET_CLICKSYSTEMNODE', {});
-    //     this.$store.commit('SET_TREESELECTKEYS', []);
-    //     this.$store.commit('SET_TREEEXPANDEKEYS', []);
-    //   }
-    // },
     methods: {
       selectEquipment(){
         this.$refs.summaryList.loadData();
       },
-      summaryListClick(data){
-        // this.showPage='detail'
-        // this.currentData = data
-        console.log(data)
-        sessionStorage.setItem("detail_sid", data.summaryid)
-        sessionStorage.setItem("detail_isid", data.interlockSystemId)
-        sessionStorage.setItem("detail_dname", data.detailName)
-        this.$router.push({path: "/interLock/detail"})
-        // this.$nextTick(()=>{
-        //   this.$refs.summaryDetailRef.currentData = data
-        //   console.log('ref', this.$refs.summaryDetailRef.currentData)
-        // })
-      },
     },
   })
 </script>

src/views/module_interLock/interlockHistoryData/InterlockHistoryList.vue

@@ -77,7 +77,7 @@
       <a-table
         ref="table"
         size="middle"
-        :scroll="{ x:'calc(145vh - 85px)', y: 'calc(75vh - 85px)' }"
+        :scroll="{ x:'calc(145vh - 85px)', y: 'calc(100vh - 275px)' }"
         bordered
         rowKey="id"
         :columns="columns"
@@ -219,28 +219,23 @@
           },
           {
             title:'联锁名称',
-            // align:"left",            
-            width: 300,
+            align:"center",            
+            // width: 300,
             dataIndex: 'interlockname',
+            ellipsis: true,
             // customRender:(t,record,index)=> {
             //   return {children: record.interlockname,attrs: {rowSpan:record.rowSpan4}};
             // },
             customRender:(text,record,index)=> {
               var children = (
-                <div class="item-node-container">
-                  <div class="item-node-title">
-                    <span class="item-node-name">
-                      <a-tooltip>
-                        <template slot="title">
-                          { record.interlockApparatusName } -- { record.interlockSystemName } -- {record.interlockname}
-                        </template>
-                        <span>
-                          {record.interlockname}
-                        </span>
-                      </a-tooltip>
-                    </span>
-                  </div>
-                </div>
+                <a-tooltip>
+                  <template slot="title">
+                    { record.interlockApparatusName } -- { record.interlockSystemName } -- {record.interlockname}
+                  </template>
+                  <span>
+                    {record.interlockname}
+                  </span>
+                </a-tooltip>
               )
               const obj = {
                 children: [children],
@@ -254,6 +249,7 @@
           {
             title:'联锁条件',
             align:"center",
+            ellipsis: true,
             dataIndex: 'interlockConditionTag'
           },
           // {
@@ -415,13 +411,8 @@
           on: {
             // 点击事件
             click: (event) => {
-              // this.$router.push({path: '/interLock/detail',query:{summaryid:record.summaryid,interlockSystemId:record.interlockSystemId}})
-              var data = {
-                summaryid: record.summaryid,
-                interlockSystemId: record.interlockSystemId,
-                detailName: record.interlockname,
-              }
-              this.$emit('click', data)
+              this.$store.commit('SET_SUMMARYEDITINFO', record);
+              this.$router.push({path: '/interLock/history/detail'})
             },
           }
         }
@@ -709,21 +700,4 @@
   .table-operator {
     width: 10% !important;
   }  
-</style>
-<style lang="less" scoped>
-  .item-node-title {
-    width: 300px;
-  }
-  .item-node-name{
-    padding-left: 8px;
-    width: 90%;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden; /*超出的文本隐藏*/
-    text-overflow: ellipsis; /* 溢出用省略号*/
-    vertical-align: top; //设置基准线，解决display inline-block造成的错位问题
-  }
-  /deep/.ant-table-thead > tr > th {
-    text-align: center; 
-  }
 </style>

src/views/module_interLock/interlockHistoryData/index.vue

@@ -1,90 +1,53 @@
 <template>
   <div>
-    <template v-if="showPage === 'history'">
-      <a-tabs type="card">
-        <a-tab-pane key="historyData">
-          <span slot="tab">
-            <a-icon type="file-text" />
-            历史数据
-          </span>
-          <!-- <interlock-history-index></interlock-history-index> -->
-          <div class="iotmenu-content">
-            <u-equipment-tree-drag treeTitle="装置系统" @select="selectEquipment" :hasHandleBtn="false">
-              <interlock-history-list ref="summaryList" @click="historyListClick"></interlock-history-list>
-              <!-- :selectData="selectData"  -->
-            </u-equipment-tree-drag>
-          </div>
-        </a-tab-pane>
-        <a-tab-pane key="timedReport">
-          <span slot="tab">
-            <a-icon type="file-text" />
-            定时报表
-          </span>
-          <div class="iotmenu-content">
-            <interlock-timed-report></interlock-timed-report>
-          </div>
-        </a-tab-pane>
-      </a-tabs>
-    </template>
-    <!-- 详情 -->
-    <interlock-detail-list v-if="showPage === 'detail'" @click="showPage='history'" ref="summaryDetailRef" :currentData="currentData"></interlock-detail-list>
+    <a-tabs type="card">
+      <a-tab-pane key="historyData">
+        <span slot="tab">
+          <a-icon type="file-text" />
+          历史数据
+        </span>
+        <!-- <interlock-history-index></interlock-history-index> -->
+        <div class="iotmenu-content">
+          <u-equipment-tree-drag treeTitle="装置系统" @select="selectEquipment" :hasHandleBtn="false">
+            <interlock-history-list ref="summaryList"></interlock-history-list>
+            <!-- :selectData="selectData" @click="historyListClick" -->
+          </u-equipment-tree-drag>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="timedReport">
+        <span slot="tab">
+          <a-icon type="file-text" />
+          定时报表
+        </span>
+        <div class="iotmenu-content">
+          <interlock-timed-report></interlock-timed-report>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
   </div>
 </template>
 
 <script>
   import InterlockHistoryList from './InterlockHistoryList.vue'
   import InterlockTimedReport from '../interlockTimedReport/InterlockTimedReportList.vue';
-  import InterlockDetailList from '../interlockHistoryDetail/InterlockHistoryDetailList.vue';
   export default {
     name: '',
     components: {
       InterlockHistoryList,
       InterlockTimedReport,
-      InterlockDetailList,
     },
     data () {
       return {
-        showPage: 'history',
-        // selectData: {},
-        currentData: {}
       }
     },
     created () {
-      this.$store.commit('SET_CLICKSYSTEMNODE', {});
-      this.$store.commit('SET_TREESELECTKEYS', []);
-      this.$store.commit('SET_TREEEXPANDEKEYS', []);
     },
     mounted () {
     },
-    // beforeDestroy() {
-    //   this.$store.commit('SET_CLICKSYSTEMNODE', {});
-    //   this.$store.commit('SET_TREESELECTKEYS', []);
-    //   this.$store.commit('SET_TREEEXPANDEKEYS', []);
-    //   console.log('s2222222', this.$store.getters.treeExpandedKeys)
-    // },
     methods: {
       selectEquipment(selectedKeys,e){
-        // if (selectedKeys.length <= 0) {
-        //   // 左侧树重置
-        //   this.selectData.interlockType = null
-        //   this.selectData.pid = null
-        //   this.selectData.id = null
-        // } else {
-        //   let interlockChooseData = e.selectedNodes[0].data.props
-        //   this.selectData.interlockType = interlockChooseData.interlockType
-        //   this.selectData.pid = interlockChooseData.pid
-        //   this.selectData.id = interlockChooseData.id
-        // }
         this.$refs.summaryList.loadData();
       },
-      historyListClick(data){
-        // this.showPage = 'detail'
-        // this.currentData = data
-        sessionStorage.setItem("detail_sid", data.summaryid)
-        sessionStorage.setItem("detail_isid", data.interlockSystemId)
-        sessionStorage.setItem("detail_dname", data.detailName)
-        this.$router.push({path: "/interLock/history/detail"})
-      },
     }
   }
 </script>