refactor: TableSwitch组件重构

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

@@ -1,84 +1,69 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 
 import { Switch } from 'ant-design-vue';
 import { isFunction } from 'lodash-es';
 
-export default defineComponent({
-  name: 'TableSwitch',
-  components: {
-    Switch,
-  },
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [Boolean, String, Number],
-      default: false,
-    },
-    checkedText: {
-      type: String,
-      default: '启用',
-    },
-    unCheckedText: {
-      type: String,
-      default: '禁用',
-    },
-    // 使用严格相等判断  类型要正确
-    checkedValue: {
-      type: [Boolean, String, Number],
-      default: '0',
-    },
-    unCheckedValue: {
-      type: [Boolean, String, Number],
-      default: '1',
-    },
-    api: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-    reload: {
-      type: Function,
-      required: false,
-      default: null,
-    },
-  },
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    type CheckedType = boolean | number | string;
-    async function onChange(checked: CheckedType, e: Event) {
-      // 阻止事件冒泡 否则会跟行选中冲突
-      e.stopPropagation();
-      const { checkedValue, unCheckedValue } = props;
-      // 原本的状态
-      const lastStatus =
-        checked === checkedValue ? unCheckedValue : checkedValue;
-      // 切换状态
-      emit('update:modelValue', checked);
-      const { api, reload } = props;
-      try {
-        isFunction(api) && (await api());
-        isFunction(reload) && (await reload());
-      } catch {
-        emit('update:modelValue', lastStatus);
-      }
-    }
+type CheckedType = boolean | number | string;
 
-    return {
-      onChange,
-    };
-  },
+interface Props {
+  checkedText?: string;
+  unCheckedText?: string;
+  checkedValue?: CheckedType;
+  unCheckedValue?: CheckedType;
+  disabled?: boolean;
+  /**
+   * 需要自己在内部处理更新的逻辑 因为status已经双向绑定了 可以直接获取
+   */
+  api: () => PromiseLike<void>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  checkedText: '启用',
+  unCheckedText: '禁用',
+  checkedValue: '0',
+  unCheckedValue: '1',
 });
+
+const emit = defineEmits<{ reload: [] }>();
+
+const currentChecked = defineModel<CheckedType>('value', {
+  default: false,
+});
+
+const loading = ref(false);
+
+async function handleChange(checked: CheckedType, e: Event) {
+  // 阻止事件冒泡 否则会跟行选中冲突
+  e.stopPropagation();
+  const { checkedValue, unCheckedValue } = props;
+  // 原本的状态
+  const lastStatus = checked === checkedValue ? unCheckedValue : checkedValue;
+  // 切换状态
+  currentChecked.value = checked;
+  const { api } = props;
+  try {
+    loading.value = true;
+    isFunction(api) && (await api());
+    emit('reload');
+  } catch {
+    currentChecked.value = lastStatus;
+  } finally {
+    loading.value = false;
+  }
+}
 </script>
 
 <template>
   <Switch
     v-bind="$attrs"
-    :checked="modelValue"
+    :loading="loading"
+    :disabled="disabled"
+    :checked="currentChecked"
     :checked-children="checkedText"
     :checked-value="checkedValue"
     :un-checked-children="unCheckedText"
     :un-checked-value="unCheckedValue"
-    @change="onChange"
+    @change="handleChange"
   />
 </template>