by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: TableSwitch组件重构

Browse Source
This commit is contained in:
dap 2025-03-30 14:43:37 +08:00
parent 6c4d15136f
commit 062e999f35
14 changed files with 97 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

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

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

@ -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);
}
/**

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

@ -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);
}

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

@ -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);
}
/**

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

@ -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);
}
/**

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

@ -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);
}
/**

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

@ -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);
}
/**

119
apps/web-antd/src/components/table/src/table-switch.vue
View File

@ -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>

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

@ -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 }">

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

@ -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 }">

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

@ -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 }">

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

@ -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 }">

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

@ -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 }">

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

@ -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 }">