Преглед изворни кода

feat(模板/设备): 为开关和删除操作添加确认弹窗

为模板管理和设备详情页面的开关状态切换和删除操作添加确认弹窗,防止误操作
liujia пре 1 месец
родитељ
комит
60711a8
2 измењених фајлова са 33 додато и 12 уклоњено
  1. 16 5
      src/views/alarm/template/index.vue
  2. 17 7
      src/views/device/detail/index.vue

+ 16 - 5
src/views/alarm/template/index.vue

@@ -56,15 +56,26 @@
           </template>
 
           <template v-if="column.key === 'enable'">
-            <a-switch
-              v-model:checked="record.isEnable"
-              @click="swtichTemplateHandler(record.id, record.enable, record)"
-            />
+            <a-popconfirm
+              :title="`确认${record.isEnable ? '禁用' : '启用'}模板吗?`"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="swtichTemplateHandler(record.id, record.enable, record)"
+            >
+              <a-switch :checked="record.isEnable" />
+            </a-popconfirm>
           </template>
 
           <template v-if="column.key === 'action'">
             <a-button type="link" @click="editTemplateHandler(record)">编辑</a-button>
-            <a-button type="link" @click="deleteTemplateHandler(record.id)">删除</a-button>
+            <a-popconfirm
+              title="确认删除模板吗?"
+              ok-text="确认"
+              cancel-text="取消"
+              @confirm="deleteTemplateHandler(record.id)"
+            >
+              <a-button type="link">删除</a-button>
+            </a-popconfirm>
           </template>
         </template>
       </a-table>

+ 17 - 7
src/views/device/detail/index.vue

@@ -244,14 +244,24 @@
                   <div class="alarmPlan-item-contant" :title="plan.name">{{ plan.name }}</div>
                   <div class="alarmPlan-item-action">
                     <a-space>
-                      <a-switch
-                        :checked="plan.enable"
-                        size="small"
-                        :loading="plan.loading"
-                        @click="swtichAlarmItem(plan.id, plan.enable, plan)"
-                      />
+                      <a-popconfirm
+                        :title="`确认${plan.enable ? '禁用' : '启用'}计划吗?`"
+                        ok-text="确认"
+                        cancel-text="取消"
+                        @confirm="swtichAlarmItem(plan.id, plan.enable, plan)"
+                      >
+                        <a-switch :checked="plan.enable" size="small" :loading="plan.loading" />
+                      </a-popconfirm>
+
                       <EditOutlined @click="editAlarmItem(plan.data as AlarmPlanItem)" />
-                      <DeleteOutlined @click="deleteAlarmItem(plan.id)" />
+                      <a-popconfirm
+                        title="确认删除计划吗?"
+                        ok-text="确认"
+                        cancel-text="取消"
+                        @confirm="deleteAlarmItem(plan.id)"
+                      >
+                        <DeleteOutlined />
+                      </a-popconfirm>
                     </a-space>
                   </div>
                 </div>