#281 加入保存提醒

TEAMModelOS/ClientApp/src/view/teachermgmt/Index.vue

@@ -1,30 +1,28 @@
 <style lang="less" scoped>
-  @import './Index.less';
+@import './Index.less';
 </style>
 
 <style lang="less">
-.badgesty{
+.badgesty {
   margin-left: 6px;
   box-shadow: none;
 }
-</style>    
+</style>
 
 <template>
-    <div id="teachermgmt" class="backdrop">
-      <div class="mgmt-top">
-        <div class="tab-box">
-          <span class="pane" @click="paneBtn('userList')" :class="{ 'active': compts === 'userList' }" >{{$t('teachermgmt.page.text1')}}</span>
-          <span class="pane" @click="paneBtn('personnel')" :class="{ 'active': compts === 'personnel' }">{{$t('teachermgmt.page.text2')}} <Badge :count="requestedUserCount" class-name="badgesty"></Badge></span>
-        </div>
-      </div>
-      <div class="mgmt-main">
-
-        <transition name="opacity" mode="out-in">
-            <div :is="compts"></div>
-        </transition>
-
+  <div id="teachermgmt" class="backdrop">
+    <div class="mgmt-top">
+      <div class="tab-box">
+        <span class="pane" @click="paneBtn('userList')" :class="{ active: compts === 'userList' }">{{ $t('teachermgmt.page.text1') }}</span>
+        <span class="pane" @click="paneBtn('personnel')" :class="{ active: compts === 'personnel' }">{{ $t('teachermgmt.page.text2') }} <Badge :count="requestedUserCount" class-name="badgesty"></Badge></span>
       </div>
     </div>
+    <div class="mgmt-main">
+      <transition name="opacity" mode="out-in">
+        <div :is="compts"></div>
+      </transition>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -35,7 +33,7 @@ import { mapGetters, mapMutations } from 'vuex'
 export default {
   data() {
     return {
-        compts: 'userList'
+      compts: 'userList'
     }
   },
   components: {
@@ -43,42 +41,45 @@ export default {
     personnel
   },
   computed: {
-      ...mapGetters({
-          requestedUserCount: 'user/getSchoolUserRequestedCount', //申請加入此學校的使用者數
-          authList: 'user/getschoolSettingAuthList' //權限總列表
-      }),
-      user() { return this.$access.getExtendInfo('userInfo'); }
+    ...mapGetters({
+      requestedUserCount: 'user/getSchoolUserRequestedCount', //申請加入此學校的使用者數
+      authList: 'user/getschoolSettingAuthList', //權限總列表
+      isKeyInSpace: 'spaceAuth/getIsKeyInSpace'
+    }),
+    user() {
+      return this.$access.getExtendInfo('userInfo')
+    }
   },
   methods: {
     paneBtn(pane) {
-      this.compts = pane       
-    },  
+      this.compts = pane
+    },
     //由DB取得該校所有使用者並放入state.schoolUserList
     getSchoolTeacher() {
-        this.$store.dispatch('user/getSchoolTeacher').then(
-              (res) => {
-                  if (res.code == 0) {
-                      this.$Message.error('無法取得使用者資料')
-                  }
-              },
-              (err) => {
-                  this.$Message.error('user/setSchoolTeacher API error!')
-              }
-          )
+      this.$store.dispatch('user/getSchoolTeacher').then(
+        res => {
+          if (res.code == 0) {
+            this.$Message.error('無法取得使用者資料')
+          }
+        },
+        err => {
+          this.$Message.error('user/setSchoolTeacher API error!')
+        }
+      )
     },
     //由DB取得權限總列表並放入state.schoolSettingAuthList
     getSchoolAuthorityList() {
-        this.$store.dispatch('user/getSchoolAuthorityList').then(
-            (res) => {
-                if (res.code == 0) {
-                    alert('無法取得權限總列表')
-                }
-              },
-              (err) => {
-                  alert('user/getSchoolAuthorityList API error: ' + err)
-              }
-         )
-    },
+      this.$store.dispatch('user/getSchoolAuthorityList').then(
+        res => {
+          if (res.code == 0) {
+            alert('無法取得權限總列表')
+          }
+        },
+        err => {
+          alert('user/getSchoolAuthorityList API error: ' + err)
+        }
+      )
+    }
     // 取得所有學校資料
     // getAllSchoolBaesInfoTest() {
     //    this.$api.GetAllSchoolBaesInfo({}).then(
@@ -87,10 +88,28 @@ export default {
     //      })
     // }
   },
-  mounted() {
-      this.getSchoolTeacher()
-      this.getSchoolAuthorityList()
-      // this.getAllSchoolBaesInfoTest()
+  beforeRouteLeave(to, from, next) {
+    if (this.isKeyInSpace == true) {
+      let config = {
+        title: '保存提醒',
+        content: '当前空間数据尚未保存。如果离开，修改的数据将不会保存！',
+        okText: '离开',
+        onOk: () => {
+          next()
+        },
+        onCancel: () => {
+          next(false)
+        }
+      }
+      this.$Modal.confirm(config)
+    } else {
+      next()
+    }
   },
+  mounted() {
+    this.getSchoolTeacher()
+    this.getSchoolAuthorityList()
+    // this.getAllSchoolBaesInfoTest()
+  }
 }
 </script>

TEAMModelOS/ClientApp/src/view/teachermgmt/components/userList/SubComponent/SpaceAuth.vue

@@ -9,8 +9,17 @@
         <Button type="primary" @click="resetAllSpace()">確定</Button>
       </div>
     </Modal>
+    <!--未存關閉弹窗 -->
+    <Modal class="space-auth-modal" v-model="isOpenComfirmClose" :title="'保存提醒'">
+      <p>当前空間数据尚未保存。如果關閉，修改的数据将不会保存！</p>
+
+      <div slot="footer">
+        <Button type="text" @click="isOpenComfirmClose = false">取消</Button>
+        <Button type="primary" @click="closeAuth()">確定</Button>
+      </div>
+    </Modal>
     <div class="title">
-      分配教學空間<span @click="closeAuth()"><v-icon class="close-icon" iconClass="close"/></span>
+      分配教學空間<span @click="beforeCloseAuth()"><v-icon class="close-icon" iconClass="close"/></span>
       <div class="title-btn-group">
         <div class="assign-btn" @click="isOpenRemove = true">回收空間</div>
         <div class="assign-btn" @click="confirmSave()">保存變更</div>
@@ -127,8 +136,10 @@ export default {
       multiAssignValue: '-',
       color: ['#eb974e', '#fb62bb', '#00f492'],
       isOpenRemove: false,
+      isOpenComfirmClose: false,
+
       tempTeacherAssignedData: [],
-      updated: false, //是否保存
+
       previousAdvancedNum: 0,
       previousNormalNum: 0
     }
@@ -136,6 +147,7 @@ export default {
   mounted() {
     this.tempTeacherAssignedData = []
   },
+
   computed: {
     ...mapGetters({
       schoolCode: 'user/getLoginSchooCode', // 取得學校簡碼
@@ -197,12 +209,12 @@ export default {
       //等後端回傳後Loading結束才傳給使用者訊息
       if (val == 1) {
         this.$Message.success('回收成功')
-        this.updated = true
+
         this.setIsKeyInSpace(false)
       }
       if (val == 2) {
         this.$Message.success('更新成功')
-        this.updated = true
+
         this.setIsKeyInSpace(false)
       }
       this.setMsgNum(0)
@@ -244,7 +256,7 @@ export default {
     },
     setAllSpace() {
       if (this.multiAssignValue != '-') {
-        this.updated = false
+        this.setIsKeyInSpace(true)
         if (this.multiAssignValue > this.maxFixedAssignedValue / this.teacherSpaceData.length) {
           this.$Message.error('超出剩餘空間量，套用失敗')
           this.multiAssignValue = '-'
@@ -254,8 +266,6 @@ export default {
             let item = element
           })
 
-    
-
           //前端先做圖表的改變，此時還沒有寫到後端
           this.setTeacherUsedSpaceNum(this.teacherSpaceData)
           this.updatePieNumData()
@@ -272,7 +282,7 @@ export default {
       let jobFitNum = 0
       let unchangedUsingSpace = 0
       if (this.multiAssignValue != '-') {
-        this.updated = false
+        this.setIsKeyInSpace(true)
         //選擇老師
         if (this.selectJob == '教師') {
           this.teacherSpaceData.forEach(element => {
@@ -313,7 +323,6 @@ export default {
               element.size = parseInt(this.multiAssignValue)
             }
           })
-         
 
           //前端先做圖表的改變，此時還沒有寫到後端
           this.setTeacherUsedSpaceNum(this.teacherSpaceData)
@@ -345,7 +354,6 @@ export default {
               element.size = this.multiAssignValue
             }
           })
-        
 
           //前端先做圖表的改變，此時還沒有寫到後端
           this.setTeacherUsedSpaceNum(this.teacherSpaceData)
@@ -365,7 +373,7 @@ export default {
     //套用權限
     setAdvancedPerMissionSpace(type) {
       if (this.multiAssignValue != '-') {
-        this.updated = false
+        this.setIsKeyInSpace(true)
 
         let previousAdvancedNum = 0
         let previousNormalNum = 0
@@ -401,8 +409,6 @@ export default {
             }
           })
 
- 
-
           //前端先做圖表的改變，此時還沒有寫到後端
           this.setTeacherUsedSpaceNum(this.teacherSpaceData)
           this.updatePieNumData()
@@ -436,17 +442,21 @@ export default {
         return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
       }
     },
+    beforeCloseAuth() {
+      if (this.isKeyInSpace == true) {
+        this.isOpenComfirmClose = true
+      } else {
+        this.closeAuth()
+      }
+    },
     closeAuth() {
       this.tempTeacherAssignedData = [] //清空暫存
       this.$emit('closeSpaceAuth')
       this.$emit('reload') //重新整理
       this.multiAssignValue = '-'
-
-      //如果都沒有按保存，或有進行手動輸入，重置為初始值
-      if (this.updated == false || this.isKeyInSpace == true) {
-        this.resetTeacherSpaceUIData()
-        this.updatePieNumData()
-      }
+      this.resetTeacherSpaceUIData()
+      this.updatePieNumData()
+      this.isOpenComfirmClose = false
     },
     //回收空間
     resetAllSpace() {