refactor: TableSwitch组件重构

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - 文件上传/图片上传重构(破坏性更新 不兼容之前的api)
 - 文件上传/图片上传**不再支持**url用法 强制使用ossId
+- TableSwitch组件重构
 
 **BUG FIX**
 

apps/web-antd/src/api/system/client/index.ts

@@ -59,7 +59,11 @@ export function clientUpdate(data: Partial<Client>) {
  * @param data 状态
  */
 export function clientChangeStatus(data: any) {
-  return requestClient.putWithMsg<void>(Api.clientChangeStatus, data);
+  const requestData = {
+    clientId: data.clientId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.clientChangeStatus, requestData);
 }
 
 /**

apps/web-antd/src/api/system/oss-config/index.ts

@@ -37,5 +37,9 @@ export function ossConfigRemove(ossConfigIds: IDS) {
 
 // 更改OSS配置的状态
 export function ossConfigChangeStatus(data: any) {
-  return requestClient.putWithMsg(Api.ossConfigChangeStatus, data);
+  const requestData = {
+    ossConfigId: data.ossConfigId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg(Api.ossConfigChangeStatus, requestData);
 }

apps/web-antd/src/api/system/role/index.ts

@@ -72,7 +72,11 @@ export function roleUpdate(data: Partial<Role>) {
  * @returns void
  */
 export function roleChangeStatus(data: Partial<Role>) {
-  return requestClient.putWithMsg<void>(Api.roleChangeStatus, data);
+  const requestData = {
+    roleId: data.roleId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.roleChangeStatus, requestData);
 }
 
 /**

apps/web-antd/src/api/system/tenant-package/index.ts

@@ -74,7 +74,11 @@ export function packageUpdate(data: Partial<TenantPackage>) {
  * @returns void
  */
 export function packageChangeStatus(data: Partial<TenantPackage>) {
-  return requestClient.putWithMsg<void>(Api.packageChangeStatus, data);
+  const packageId = {
+    packageId: data.packageId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.packageChangeStatus, packageId);
 }
 
 /**

apps/web-antd/src/api/system/tenant/index.ts

@@ -67,7 +67,12 @@ export function tenantUpdate(data: Partial<Tenant>) {
  * @returns void
  */
 export function tenantStatusChange(data: Partial<Tenant>) {
-  return requestClient.putWithMsg(Api.tenantStatus, data);
+  const requestData = {
+    id: data.id,
+    tenantId: data.tenantId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg(Api.tenantStatus, requestData);
 }
 
 /**

apps/web-antd/src/api/system/user/index.ts

@@ -110,7 +110,11 @@ export function userUpdate(data: Partial<User>) {
  * @returns void
  */
 export function userStatusChange(data: Partial<User>) {
-  return requestClient.putWithMsg<void>(Api.userStatusChange, data);
+  const requestData = {
+    userId: data.userId,
+    status: data.status,
+  };
+  return requestClient.putWithMsg<void>(Api.userStatusChange, requestData);
 }
 
 /**

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

@@ -1,84 +1,69 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
+import { ref } from 'vue';
 
 import { Switch } from 'ant-design-vue';
 import { isFunction } from 'lodash-es';
 
-export default defineComponent({
+type CheckedType = boolean | number | string;
-  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);
-      }
-    }
 
-    return {
+interface Props {
-      onChange,
+  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>

apps/web-antd/src/views/system/client/index.vue

@@ -144,10 +144,10 @@ const { hasAccessByCodes } = useAccess();
         <!-- pc不允许禁用 禁用了直接登录不了 应该设置disabled -->
         <!-- 登录提示: 认证权限类型已禁用 -->
         <TableSwitch
-          v-model="row.status"
+          v-model:value="row.status"
           :api="() => clientChangeStatus(row)"
           :disabled="row.id === 1 || !hasAccessByCodes(['system:client:edit'])"
-          :reload="() => tableApi.query()"
+          @reload="tableApi.query()"
         />
       </template>
       <template #action="{ row }">

apps/web-antd/src/views/system/oss-config/index.vue

@@ -128,10 +128,10 @@ const { hasAccessByCodes } = useAccess();
       </template>
       <template #status="{ row }">
         <TableSwitch
-          v-model="row.status"
+          v-model:value="row.status"
           :api="() => ossConfigChangeStatus(row)"
           :disabled="!hasAccessByCodes(['system:ossConfig:edit'])"
-          :reload="() => tableApi.query()"
+          @reload="tableApi.query()"
         />
       </template>
       <template #action="{ row }">

apps/web-antd/src/views/system/role/index.vue

@@ -177,14 +177,14 @@ function handleAssignRole(record: Role) {
       </template>
       <template #status="{ row }">
         <TableSwitch
-          v-model="row.status"
+          v-model:value="row.status"
           :api="() => roleChangeStatus(row)"
           :disabled="
             row.roleId === 1 ||
             row.roleKey === 'admin' ||
             !hasAccessByCodes(['system:role:edit'])
           "
-          :reload="() => tableApi.query()"
+          @reload="tableApi.query()"
         />
       </template>
       <template #action="{ row }">

apps/web-antd/src/views/system/tenant/index.vue

@@ -183,10 +183,10 @@ function handleSyncTenantDict() {
       </template>
       <template #status="{ row }">
         <TableSwitch
-          v-model="row.status"
+          v-model:value="row.status"
           :api="() => tenantStatusChange(row)"
           :disabled="row.id === 1 || !hasAccessByCodes(['system:tenant:edit'])"
-          :reload="() => tableApi.query()"
+          @reload="tableApi.query()"
         />
       </template>
       <template #action="{ row }">

apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -154,10 +154,10 @@ const isSuperAdmin = computed(() => {
       </template>
       <template #status="{ row }">
         <TableSwitch
-          v-model="row.status"
+          v-model:value="row.status"
           :api="() => packageChangeStatus(row)"
           :disabled="!hasAccessByCodes(['system:tenantPackage:edit'])"
-          :reload="() => tableApi.query()"
+          @reload="tableApi.query()"
         />
       </template>
       <template #action="{ row }">

apps/web-antd/src/views/system/user/index.vue

@@ -64,7 +64,7 @@ const formOptions: VbenFormProps = {
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   handleReset: async () => {
     selectDeptId.value = [];
-    // eslint-disable-next-line no-use-before-define
+
     const { formApi, reload } = tableApi;
     await formApi.resetForm();
     const formValues = formApi.form.values;
@@ -231,12 +231,12 @@ const { hasAccessByCodes } = useAccess();
         </template>
         <template #status="{ row }">
           <TableSwitch
-            v-model="row.status"
+            v-model:value="row.status"
             :api="() => userStatusChange(row)"
             :disabled="
               row.userId === 1 || !hasAccessByCodes(['system:user:edit'])
             "
-            :reload="() => tableApi.query()"
+            @reload="() => tableApi.query()"
           />
         </template>
         <template #action="{ row }">