feat: TableSwitch增加切换前确认Modal(默认false)

apps/web-antd/src/components/table/src/table-switch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { Switch } from 'ant-design-vue';
+import { Modal, Switch } from 'ant-design-vue';
 import { isFunction } from 'lodash-es';
 
 type CheckedType = boolean | number | string;
@@ -16,6 +16,17 @@ interface Props {
    * 需要自己在内部处理更新的逻辑 因为status已经双向绑定了 可以直接获取
    */
   api: () => PromiseLike<void>;
+  /**
+   * 更新前是否弹窗确认
+   * @default false
+   */
+  confirm?: boolean;
+  /**
+   * 对应的提示内容
+   * @param checked 选中的值(更新后的值)
+   * @default string '确认要更新状态吗？'
+   */
+  confirmText?: (checked: CheckedType) => string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -23,6 +34,8 @@ const props = withDefaults(defineProps<Props>(), {
   unCheckedText: '禁用',
   checkedValue: '0',
   unCheckedValue: '1',
+  confirm: false,
+  confirmText: undefined,
 });
 
 const emit = defineEmits<{ reload: [] }>();
@@ -33,6 +46,33 @@ const currentChecked = defineModel<CheckedType>('value', {
 
 const loading = ref(false);
 
+function confirmUpdate(checked: CheckedType, lastStatus: CheckedType) {
+  const content = isFunction(props.confirmText)
+    ? props.confirmText(checked)
+    : `确认要更新状态吗？`;
+
+  Modal.confirm({
+    title: '提示',
+    content,
+    centered: true,
+    onOk: async () => {
+      try {
+        loading.value = true;
+        const { api } = props;
+        isFunction(api) && (await api());
+        emit('reload');
+      } catch {
+        currentChecked.value = lastStatus;
+      } finally {
+        loading.value = false;
+      }
+    },
+    onCancel: () => {
+      currentChecked.value = lastStatus;
+    },
+  });
+}
+
 async function handleChange(checked: CheckedType, e: Event) {
   // 阻止事件冒泡 否则会跟行选中冲突
   e.stopPropagation();
@@ -44,6 +84,12 @@ async function handleChange(checked: CheckedType, e: Event) {
   const { api } = props;
   try {
     loading.value = true;
+
+    if (props.confirm) {
+      confirmUpdate(checked, lastStatus);
+      return;
+    }
+
     isFunction(api) && (await api());
     emit('reload');
   } catch {