From 6c45483fae53677c57b9dc0c6a1e4c42b659d151 Mon Sep 17 00:00:00 2001 From: Charles7c Date: Sat, 23 Nov 2024 21:04:48 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20useForm=20=3D>=20useResetReactive?= =?UTF-8?q?=EF=BC=88=E5=90=8C=E6=AD=A5=20GiDemo=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/index.ts | 1 + src/hooks/modules/useResetReactive.ts | 15 +++++++++++++++ src/views/code/generator/GenConfigDrawer.vue | 4 ++-- src/views/open/app/AppAddModal.vue | 4 ++-- src/views/schedule/job/JobAddModal.vue | 7 +++---- src/views/setting/components/VerifyModel.vue | 4 ++-- .../setting/profile/BasicInfoUpdateModal.vue | 4 ++-- src/views/system/dept/DeptAddModal.vue | 4 ++-- src/views/system/dict/DictItemAddModal.vue | 4 ++-- src/views/system/dict/tree/DictAddModal.vue | 4 ++-- src/views/system/menu/MenuAddModal.vue | 4 ++-- src/views/system/notice/add/index.vue | 4 ++-- src/views/system/notice/detail/index.vue | 4 ++-- src/views/system/role/RoleAddModal.vue | 4 ++-- src/views/system/role/RoleUpdateDrawer.vue | 4 ++-- src/views/system/storage/StorageAddDrawer.vue | 4 ++-- src/views/system/user/UserAddDrawer.vue | 4 ++-- src/views/system/user/UserImportDrawer.vue | 4 ++-- src/views/system/user/UserResetPwdModal.vue | 4 ++-- src/views/system/user/UserUpdateRoleModal.vue | 4 ++-- 20 files changed, 53 insertions(+), 38 deletions(-) create mode 100644 src/hooks/modules/useResetReactive.ts diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 4c25d97..8a9dc90 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -7,3 +7,4 @@ export * from './modules/useForm' export * from './modules/useDevice' export * from './modules/useBreakpoint' export * from './modules/useDownload' +export * from './modules/useResetReactive' diff --git a/src/hooks/modules/useResetReactive.ts b/src/hooks/modules/useResetReactive.ts new file mode 100644 index 0000000..1ad61e2 --- /dev/null +++ b/src/hooks/modules/useResetReactive.ts @@ -0,0 +1,15 @@ +import { reactive } from 'vue' +import { cloneDeep } from 'lodash-es' + +export function useResetReactive(value: T) { + const getInitValue = () => cloneDeep(value) + + const state = reactive(getInitValue()) + + const reset = () => { + Object.keys(state).forEach((key) => delete state[key]) + Object.assign(state, getInitValue()) + } + + return [state, reset] as const +} diff --git a/src/views/code/generator/GenConfigDrawer.vue b/src/views/code/generator/GenConfigDrawer.vue index b4888e1..faae315 100644 --- a/src/views/code/generator/GenConfigDrawer.vue +++ b/src/views/code/generator/GenConfigDrawer.vue @@ -125,7 +125,7 @@ import { type FieldConfigResp, type GeneratorConfigResp, getGenConfig, listField import type { LabelValueState } from '@/types/global' import type { TableInstanceColumns } from '@/components/GiTable/type' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useDict } from '@/hooks/app' const emit = defineEmits<{ @@ -146,7 +146,7 @@ const options: Options = { grid: { cols: 2 }, btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ isOverride: false, }) const formColumns: Columns = reactive([ diff --git a/src/views/open/app/AppAddModal.vue b/src/views/open/app/AppAddModal.vue index 94a673f..80daac4 100644 --- a/src/views/open/app/AppAddModal.vue +++ b/src/views/open/app/AppAddModal.vue @@ -18,7 +18,7 @@ import { Message } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { addApp, getApp, updateApp } from '@/apis/open/app' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' const emit = defineEmits<{ (e: 'save-success'): void @@ -37,7 +37,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ status: 1, }) diff --git a/src/views/schedule/job/JobAddModal.vue b/src/views/schedule/job/JobAddModal.vue index 2488698..7b38a06 100644 --- a/src/views/schedule/job/JobAddModal.vue +++ b/src/views/schedule/job/JobAddModal.vue @@ -180,10 +180,9 @@ import { type ColProps, type FormInstance, Message } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { addJob, listGroup, updateJob } from '@/apis/schedule/job' -import { useForm } from '@/hooks' -import { useDict } from '@/hooks/app' -import CronGeneratorModal from '@/components/GenCron/CronModel/index.vue' import type { LabelValueState } from '@/types/global' +import { useResetReactive } from '@/hooks' +import { useDict } from '@/hooks/app' const emit = defineEmits<{ (e: 'save-success'): void @@ -221,7 +220,7 @@ const rules: FormInstance['rules'] = { parallelNum: [{ required: true, message: '请输入并行数' }], } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ triggerType: 2, triggerInterval: 60, taskType: 1, diff --git a/src/views/setting/components/VerifyModel.vue b/src/views/setting/components/VerifyModel.vue index 3e4fdbe..89e86a6 100644 --- a/src/views/setting/components/VerifyModel.vue +++ b/src/views/setting/components/VerifyModel.vue @@ -29,7 +29,7 @@ import { type BehaviorCaptchaReq, getEmailCaptcha, updateUserEmail, updateUserPa import { encryptByRsa } from '@/utils/encrypt' import { useUserStore } from '@/stores' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import * as Regexp from '@/utils/regexp' import modalErrorWrapper from '@/utils/modal-error-wrapper' import router from '@/router' @@ -49,7 +49,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ phone: '', email: '', captcha: '', diff --git a/src/views/setting/profile/BasicInfoUpdateModal.vue b/src/views/setting/profile/BasicInfoUpdateModal.vue index 0f4d271..832b1ea 100644 --- a/src/views/setting/profile/BasicInfoUpdateModal.vue +++ b/src/views/setting/profile/BasicInfoUpdateModal.vue @@ -18,8 +18,8 @@ import { useWindowSize } from '@vueuse/core' import { Message } from '@arco-design/web-vue' import { updateUserBaseInfo } from '@/apis/system' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' import { useUserStore } from '@/stores' +import { useResetReactive } from '@/hooks' const { width } = useWindowSize() const userStore = useUserStore() @@ -33,7 +33,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ nickname: userInfo.value.nickname, gender: userInfo.value.gender, }) diff --git a/src/views/system/dept/DeptAddModal.vue b/src/views/system/dept/DeptAddModal.vue index e1df159..73a6c2f 100644 --- a/src/views/system/dept/DeptAddModal.vue +++ b/src/views/system/dept/DeptAddModal.vue @@ -19,7 +19,7 @@ import { useWindowSize } from '@vueuse/core' import { mapTree } from 'xe-utils' import { type DeptResp, addDept, getDept, updateDept } from '@/apis/system/dept' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' interface Props { depts: DeptResp[] @@ -55,7 +55,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ sort: 999, status: 1, }) diff --git a/src/views/system/dict/DictItemAddModal.vue b/src/views/system/dict/DictItemAddModal.vue index 8042751..0a7c5c8 100644 --- a/src/views/system/dict/DictItemAddModal.vue +++ b/src/views/system/dict/DictItemAddModal.vue @@ -26,7 +26,7 @@ import { Message } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { addDictItem, getDictItem, updateDictItem } from '@/apis/system/dict' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' const emit = defineEmits<{ (e: 'save-success'): void @@ -46,7 +46,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ color: 'blue', sort: 999, status: 1, diff --git a/src/views/system/dict/tree/DictAddModal.vue b/src/views/system/dict/tree/DictAddModal.vue index eea3ff0..9777805 100644 --- a/src/views/system/dict/tree/DictAddModal.vue +++ b/src/views/system/dict/tree/DictAddModal.vue @@ -18,7 +18,7 @@ import { Message } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { addDict, getDict, updateDict } from '@/apis/system/dict' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' const emit = defineEmits<{ (e: 'save-success'): void @@ -37,7 +37,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({}) +const [form, resetForm] = useResetReactive({}) const columns: Columns = reactive([ { label: '名称', field: 'name', type: 'input', rules: [{ required: true, message: '请输入名称' }] }, diff --git a/src/views/system/menu/MenuAddModal.vue b/src/views/system/menu/MenuAddModal.vue index 54d85a2..d24a8c5 100644 --- a/src/views/system/menu/MenuAddModal.vue +++ b/src/views/system/menu/MenuAddModal.vue @@ -119,7 +119,7 @@ import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web- import { useWindowSize } from '@vueuse/core' import { mapTree } from 'xe-utils' import { type MenuResp, addMenu, getMenu, updateMenu } from '@/apis/system/menu' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { filterTree, transformPathToName } from '@/utils' interface Props { @@ -141,7 +141,7 @@ const isUpdate = computed(() => !!dataId.value) const title = computed(() => (isUpdate.value ? '修改菜单' : '新增菜单')) const formRef = ref() -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ type: 1, sort: 999, isExternal: false, diff --git a/src/views/system/notice/add/index.vue b/src/views/system/notice/add/index.vue index 29040bc..83fb830 100644 --- a/src/views/system/notice/add/index.vue +++ b/src/views/system/notice/add/index.vue @@ -64,7 +64,7 @@ import { listUserDict } from '@/apis' import { type Columns, GiForm, type Options } from '@/components/GiForm' import type { LabelValueState } from '@/types/global' import { useTabsStore } from '@/stores' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useDict } from '@/hooks/app' const { width } = useWindowSize() @@ -85,7 +85,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ title: '', type: '', effectiveTime: '', diff --git a/src/views/system/notice/detail/index.vue b/src/views/system/notice/detail/index.vue index 22a8e93..b6e8e47 100644 --- a/src/views/system/notice/detail/index.vue +++ b/src/views/system/notice/detail/index.vue @@ -41,7 +41,7 @@ import AiEditor from './components/index.vue' import { getNotice } from '@/apis/system/notice' import { useTabsStore } from '@/stores' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' const route = useRoute() const router = useRouter() @@ -49,7 +49,7 @@ const tabsStore = useTabsStore() const { id } = route.query const containerRef = ref() -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ title: '', createUserString: '', effectiveTime: '', diff --git a/src/views/system/role/RoleAddModal.vue b/src/views/system/role/RoleAddModal.vue index b1c68a4..dba78ce 100644 --- a/src/views/system/role/RoleAddModal.vue +++ b/src/views/system/role/RoleAddModal.vue @@ -105,7 +105,7 @@ import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { addRole } from '@/apis/system/role' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useDept, useDict, useMenu } from '@/hooks/app' const emit = defineEmits<{ @@ -127,7 +127,7 @@ const rules: FormInstance['rules'] = { dataScope: [{ required: true, message: '请选择数据权限' }], } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ menuCheckStrictly: true, deptCheckStrictly: true, sort: 999, diff --git a/src/views/system/role/RoleUpdateDrawer.vue b/src/views/system/role/RoleUpdateDrawer.vue index 6d4fc67..95dd74e 100644 --- a/src/views/system/role/RoleUpdateDrawer.vue +++ b/src/views/system/role/RoleUpdateDrawer.vue @@ -84,7 +84,7 @@ import { type FormInstance, Message, type TreeNodeData } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { getRole, updateRole } from '@/apis/system/role' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useDept, useDict, useMenu } from '@/hooks/app' const emit = defineEmits<{ @@ -106,7 +106,7 @@ const rules: FormInstance['rules'] = { dataScope: [{ required: true, message: '请选择数据权限' }], } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ menuCheckStrictly: true, deptCheckStrictly: true, sort: 999, diff --git a/src/views/system/storage/StorageAddDrawer.vue b/src/views/system/storage/StorageAddDrawer.vue index bbb0778..944ec54 100644 --- a/src/views/system/storage/StorageAddDrawer.vue +++ b/src/views/system/storage/StorageAddDrawer.vue @@ -95,7 +95,7 @@ import { type FormInstance, Message } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { addStorage, getStorage, updateStorage } from '@/apis/system/storage' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useDict } from '@/hooks/app' import { encryptByRsa } from '@/utils/encrypt' import { isIPv4 } from '@/utils/validate' @@ -123,7 +123,7 @@ const rules: FormInstance['rules'] = { bucketName: [{ required: true, message: '请输入桶名称' }], } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ type: 2, isDefault: false, sort: 999, diff --git a/src/views/system/user/UserAddDrawer.vue b/src/views/system/user/UserAddDrawer.vue index 2900009..6d52081 100644 --- a/src/views/system/user/UserAddDrawer.vue +++ b/src/views/system/user/UserAddDrawer.vue @@ -19,7 +19,7 @@ import { addUser, getUser, updateUser } from '@/apis/system/user' import { type Columns, GiForm, type Options } from '@/components/GiForm' import type { Gender, Status } from '@/types/global' import { GenderList } from '@/constant/common' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useDept, useRole } from '@/hooks/app' import { encryptByRsa } from '@/utils/encrypt' @@ -42,7 +42,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ gender: 1 as Gender, status: 1 as Status, }) diff --git a/src/views/system/user/UserImportDrawer.vue b/src/views/system/user/UserImportDrawer.vue index c1d7fc6..be74ed9 100644 --- a/src/views/system/user/UserImportDrawer.vue +++ b/src/views/system/user/UserImportDrawer.vue @@ -94,7 +94,7 @@ import { importUser, parseImportUser, } from '@/apis/system/user' -import { useDownload, useForm } from '@/hooks' +import { useDownload, useResetReactive } from '@/hooks' const emit = defineEmits<{ (e: 'save-success'): void @@ -106,7 +106,7 @@ const visible = ref(false) const formRef = ref() const uploadFile = ref([]) -const { form, resetForm } = useForm({ +const [form, resetForm] = useResetReactive({ errorPolicy: 1, duplicateUser: 1, duplicateEmail: 1, diff --git a/src/views/system/user/UserResetPwdModal.vue b/src/views/system/user/UserResetPwdModal.vue index 39e67fb..52efdfa 100644 --- a/src/views/system/user/UserResetPwdModal.vue +++ b/src/views/system/user/UserResetPwdModal.vue @@ -18,7 +18,7 @@ import { Message } from '@arco-design/web-vue' import { resetUserPwd } from '@/apis/system' import { type Columns, GiForm } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { encryptByRsa } from '@/utils/encrypt' const emit = defineEmits<{ @@ -34,7 +34,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({}) +const [form, resetForm] = useResetReactive({}) const columns: Columns = reactive([ { label: '密码', field: 'newPassword', type: 'input-password', rules: [{ required: true, message: '请输入密码' }] }, diff --git a/src/views/system/user/UserUpdateRoleModal.vue b/src/views/system/user/UserUpdateRoleModal.vue index bb28556..0cb3c49 100644 --- a/src/views/system/user/UserUpdateRoleModal.vue +++ b/src/views/system/user/UserUpdateRoleModal.vue @@ -18,7 +18,7 @@ import { Message } from '@arco-design/web-vue' import { useWindowSize } from '@vueuse/core' import { getUser, updateUserRole } from '@/apis/system' import { type Columns, GiForm, type Options } from '@/components/GiForm' -import { useForm } from '@/hooks' +import { useResetReactive } from '@/hooks' import { useRole } from '@/hooks/app' const emit = defineEmits<{ @@ -36,7 +36,7 @@ const options: Options = { btns: { hide: true }, } -const { form, resetForm } = useForm({}) +const [form, resetForm] = useResetReactive({}) const columns: Columns = reactive([ {