feat(power): unsaved operation prompt

src/components/layout/Tabbar/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="l-flex__none l-flex--row">
-    <div class="c-tabbar">
+  <div class="l-flex__none l-flex--row c-tabbar">
+    <div class="l-flex__self c-tabbar__main">
       <div
         v-for="tab in items"
         :key="tab.key"
@@ -11,6 +11,7 @@
         {{ tab.name }}
       </div>
     </div>
+    <slot />
   </div>
 </template>
 
@@ -40,13 +41,16 @@ export default {
 
 <style lang="scss" scoped>
 .c-tabbar {
-  display: inline-flex;
-  align-items: center;
-  padding: $padding--2xs;
   margin-bottom: $spacing;
-  border-radius: $radius--sm;
-  background-color: #f4f7fb;
-  overflow-x: auto;
+
+  &__main {
+    display: inline-flex;
+    align-items: center;
+    padding: $padding--2xs;
+    border-radius: $radius--sm;
+    background-color: #f4f7fb;
+    overflow-x: auto;
+  }
 
   &__item {
     padding: $padding--2xs $padding;

src/views/device/detail/components/DeviceInvoke/MultifunctionCardPowerSwitch.vue

@@ -9,6 +9,7 @@
       ref="dialog"
       size="lg"
       title="开关电源"
+      :before-close="handleClose"
       @close="onClose"
     >
       <template #default>
@@ -16,7 +17,14 @@
           :items="tabs"
           :active="active"
           @click="onClickTab"
-        />
+        >
+          <div
+            v-if="hasChanged"
+            class="u-font-size--sm u-color--error has-padding--h"
+          >
+            设置需点击【应用】后生效
+          </div>
+        </tabbar>
         <div
           v-loading="loading"
           class="l-flex__auto l-flex--col"
@@ -233,14 +241,14 @@ export default {
     },
     taskSchema () {
       return {
+        singlePage: true,
+        list: this.getTasks,
+        condition: { type: '', action: '', enable: '' },
         buttons: [
           { type: 'add', render: () => this.timingStatus, on: this.onAdd },
           { label: '回读', on: this.getPowerTasks },
           { label: '应用', render: () => this.hasChanged, on: this.onSubmitPowerTasks }
         ],
-        singlePage: true,
-        condition: { type: '', action: '', enable: '' },
-        list: this.getTasks,
         filters: [
           this.isRelayPowerTiming
             ? null
@@ -301,7 +309,37 @@ export default {
     isExpired ({ endTime, executeTime }) {
       return endTime !== FOREVER && toDate(`${endTime} ${executeTime}`) <= Date.now()
     },
+    handleClose (done) {
+      if (this.hasChanged) {
+        this.$confirm(
+          '设置未保存，是否放弃修改？<p class="u-color--error">若需保存请点击【应用】</p>',
+          '温馨提示',
+          {
+            dangerouslyUseHTMLString: true,
+            type: 'warning',
+            confirmButtonText: '放弃'
+          }
+        ).then(done)
+        return
+      }
+      done()
+    },
     onClickTab (val) {
+      if (this.hasChanged) {
+        this.$confirm(
+          '设置未保存，是否放弃修改？<p class="u-color--error">若需保存请点击【应用】</p>',
+          '温馨提示',
+          {
+            dangerouslyUseHTMLString: true,
+            type: 'warning',
+            confirmButtonText: '放弃'
+          }
+        ).then(() => {
+          this.hasChanged = false
+          this.onClickTab(val)
+        })
+        return
+      }
       if (val !== GET_POWER_STATUS && (val !== this.active || !this.timingStatus)) {
         this.getTasksByKey(val)
       }
@@ -389,6 +427,7 @@ export default {
     },
     getPowerStatus () {
       this.$powers = []
+      this.hasChanged = false
       this.$refs.table?.pageTo(1)
       this.sendTopic(
         GET_POWER_STATUS,