refactor: 优化部分 ref API 使用方式

continew-org · Mar 11, 2024 · e6fa9f6 · e6fa9f6
1 parent e9d3865
commit e6fa9f6
Show file tree

Hide file tree

Showing 21 changed files with 116 additions and 80 deletions.
diff --git a/src/views/login/components/email-login.vue b/src/views/login/components/email-login.vue
@@ -9,6 +9,7 @@
   const { t } = useI18n();
   const router = useRouter();
   const userStore = useUserStore();
+  const formRef = ref();
   const loading = ref(false);
   const captchaLoading = ref(false);
   const captchaDisable = ref(false);
@@ -47,7 +48,7 @@
    */
   const handleSendCaptcha = () => {
     if (captchaLoading.value) return;
-    proxy.$refs.formRef.validateField('email', (valid: any) => {
+    formRef.value.validateField('email', (valid: any) => {
       if (!valid) {
         captchaLoading.value = true;
         captchaBtnNameKey.value = 'login.captcha.ing';

diff --git a/src/views/login/components/phone-login.vue b/src/views/login/components/phone-login.vue
@@ -9,6 +9,7 @@
   const { t } = useI18n();
   const router = useRouter();
   const userStore = useUserStore();
+  const formRef = ref();
   const loading = ref(false);
   const captchaLoading = ref(false);
   const captchaDisable = ref(true);
@@ -43,7 +44,7 @@
    */
   const handleOpenBehaviorCaptcha = () => {
     if (captchaLoading.value) return;
-    proxy.$refs.formRef.validateField('phone', (valid: any) => {
+    formRef.value.validateField('phone', (valid: any) => {
       if (!valid) {
         proxy.$refs.verifyRef.show();
       }
@@ -65,7 +66,7 @@
    */
   const handleSendCaptcha = (captchaParam: BehaviorCaptchaReq) => {
     if (captchaLoading.value) return;
-    proxy.$refs.formRef.validateField('phone', (valid: any) => {
+    formRef.value.validateField('phone', (valid: any) => {
       if (!valid) {
         captchaLoading.value = true;
         captchaBtnNameKey.value = 'login.captcha.ing';

diff --git a/src/views/monitor/log/login/index.vue b/src/views/monitor/log/login/index.vue
@@ -10,6 +10,7 @@
     'success_failure_status_enum',
   );
 
+  const queryFormRef = ref();
   const loginLogList = ref<LoginLogRecord[]>([]);
   const total = ref(0);
   const loading = ref(false);
@@ -55,7 +56,7 @@
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 
@@ -94,7 +95,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryFormRef" :model="queryParams" layout="inline">
             <a-form-item field="status" hide-label>
               <a-select
                 v-model="queryParams.status"

diff --git a/src/views/monitor/log/operation/index.vue b/src/views/monitor/log/operation/index.vue
@@ -10,6 +10,7 @@
     'success_failure_status_enum'
   );
 
+  const queryFormRef = ref();
   const operationLogList = ref<OperationLogRecord[]>([]);
   const total = ref(0);
   const loading = ref(false);
@@ -56,7 +57,7 @@
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 
@@ -95,7 +96,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryFormRef" :model="queryParams" layout="inline">
             <a-form-item field="description" hide-label>
               <a-input
                 v-model="queryParams.description"

diff --git a/src/views/monitor/log/system/index.vue b/src/views/monitor/log/system/index.vue
@@ -12,6 +12,7 @@
 
   const { proxy } = getCurrentInstance() as any;
   const { copy, copied } = useClipboard();
+  const queryFormRef = ref();
   const systemLogList = ref<SystemLogRecord[]>([]);
   const systemLog = ref<SystemLogDetailRecord>({
     traceId: '',
@@ -112,7 +113,7 @@
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 
@@ -151,7 +152,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryFormRef" :model="queryParams" layout="inline">
             <a-form-item field="createTime" hide-label>
               <date-range-picker v-model="queryParams.createTime" />
             </a-form-item>

diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
@@ -4,7 +4,8 @@
   import checkPermission from '@/utils/permission';
 
   const { proxy } = getCurrentInstance() as any;
-
+  const queryFormRef = ref();
+  const tableRef = ref();
   const dataList = ref<DataRecord[]>([]);
   const total = ref(0);
   const loading = ref(false);
@@ -63,7 +64,7 @@
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 
@@ -102,7 +103,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryFormRef" :model="queryParams" layout="inline">
             <a-form-item field="nickname" hide-label>
               <a-input
                 v-model="queryParams.nickname"

diff --git a/src/views/system/announcement/index.vue b/src/views/system/announcement/index.vue
@@ -16,6 +16,9 @@
     'announcement_status_enum',
   );
 
+  const queryFormRef = ref();
+  const formRef = ref();
+  const tableRef = ref();
   const dataList = ref<DataRecord[]>([]);
   const dataDetail = ref<DataRecord>({});
   const total = ref(0);
@@ -97,22 +100,22 @@
    */
   const reset = () => {
     form.value = {};
-    proxy.$refs.formRef?.resetFields();
+    formRef.value?.resetFields();
   };
 
   /**
    * 取消
    */
   const handleCancel = () => {
     visible.value = false;
-    proxy.$refs.formRef.resetFields();
+    formRef.value.resetFields();
   };
 
   /**
    * 确定
    */
   const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
+    formRef.value.validate((valid: any) => {
       if (!valid) {
         if (form.value.id !== undefined) {
           update(form.value, form.value.id).then((res) => {
@@ -185,7 +188,7 @@
     del(ids).then((res) => {
       proxy.$message.success(res.msg);
       getList();
-      proxy.$refs.tableRef.selectAll(false);
+      tableRef.value.selectAll(false);
     });
   };
 
@@ -228,7 +231,7 @@
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 
@@ -267,7 +270,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div v-if="showQuery" class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryFormRef" :model="queryParams" layout="inline">
             <a-form-item field="title" hide-label>
               <a-input
                 v-model="queryParams.title"

diff --git a/src/views/system/config/components/basic-setting.vue b/src/views/system/config/components/basic-setting.vue
@@ -12,6 +12,7 @@
   import { useAppStore } from '@/store';
 
   const { proxy } = getCurrentInstance() as any;
+  const formRef = ref();
   const dataList = ref<DataRecord[]>([]);
   const isEdit = ref(false);
   const logoFile = ref<FileItem>({ uid: '-1' });
@@ -81,7 +82,7 @@
    * 保存
    */
   const handleSave = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
+    formRef.value.validate((valid: any) => {
       if (!valid) {
         const optionList: DataRecord[] = Object.entries(form.value).map(
           (item) => {

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
@@ -15,6 +15,9 @@
   const { proxy } = getCurrentInstance() as any;
   const { dis_enable_status_enum } = proxy.useDict('dis_enable_status_enum');
 
+  const queryFormRef = ref();
+  const formRef = ref();
+  const tableRef = ref();
   const dataList = ref<DataRecord[]>([]);
   const dataDetail = ref<DataRecord>({});
   const ids = ref<Array<number>>([]);
@@ -64,7 +67,7 @@
       .then((res) => {
         dataList.value = res.data;
         setTimeout(() => {
-          proxy.$refs.tableRef.expandAll();
+          tableRef.value.expandAll();
         }, 0);
       })
       .finally(() => {
@@ -110,22 +113,22 @@
     form.value = {
       sort: 999,
     };
-    proxy.$refs.formRef?.resetFields();
+    formRef.value?.resetFields();
   };
 
   /**
    * 取消
    */
   const handleCancel = () => {
     visible.value = false;
-    proxy.$refs.formRef.resetFields();
+    formRef.value.resetFields();
   };
 
   /**
    * 确定
    */
   const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
+    formRef.value.validate((valid: any) => {
       if (!valid) {
         if (form.value.id !== undefined) {
           update(form.value, form.value.id).then((res) => {
@@ -197,7 +200,7 @@
     del(ids).then((res) => {
       proxy.$message.success(res.msg);
       getList();
-      proxy.$refs.tableRef.selectAll(false);
+      tableRef.value.selectAll(false);
     });
   };
 
@@ -208,7 +211,7 @@
     if (rowKeys.find((key: any) => key === rowKey)) {
       if (record.children) {
         record.children.forEach((r) => {
-          proxy.$refs.tableRef.select(r.id);
+          tableRef.value.select(r.id);
           rowKeys.push(r.id);
           if (r.children) {
             handleSelect(rowKeys, rowKey, r);
@@ -221,7 +224,7 @@
           rowKeys.findIndex((key: number | undefined) => key === r.id),
           1,
         );
-        proxy.$refs.tableRef.select(r.id, false);
+        tableRef.value.select(r.id, false);
         if (r.children) {
           handleSelect(rowKeys, rowKey, r);
         }
@@ -297,7 +300,7 @@
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 </script>
@@ -316,7 +319,7 @@
       <div class="header">
         <!-- 搜索栏 -->
         <div v-if="showQuery" class="header-query">
-          <a-form ref="queryRef" :model="queryParams" layout="inline">
+          <a-form ref="queryFormRef" :model="queryParams" layout="inline">
             <a-form-item field="name" hide-label>
               <a-input
                 v-model="queryParams.name"

diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
@@ -14,6 +14,9 @@
 
   const { proxy } = getCurrentInstance() as any;
 
+  const queryFormRef = ref();
+  const formRef = ref();
+  const tableRef = ref();
   const dataList = ref<DataRecord[]>([]);
   const total = ref(0);
   const ids = ref<Array<number>>([]);
@@ -129,22 +132,22 @@
    */
   const reset = () => {
     form.value = {};
-    proxy.$refs.formRef?.resetFields();
+    formRef.value?.resetFields();
   };
 
   /**
    * 取消
    */
   const handleCancel = () => {
     visible.value = false;
-    proxy.$refs.formRef.resetFields();
+    formRef.value.resetFields();
   };
 
   /**
    * 确定
    */
   const handleOk = () => {
-    proxy.$refs.formRef.validate((valid: any) => {
+    formRef.value.validate((valid: any) => {
       if (!valid) {
         if (form.value.id !== undefined) {
           update(form.value, form.value.id).then((res) => {
@@ -191,7 +194,7 @@
     del(ids).then((res) => {
       proxy.$message.success(res.msg);
       getList();
-      proxy.$refs.tableRef.selectAll(false);
+      tableRef.value.selectAll(false);
     });
   };
 
@@ -223,15 +226,15 @@
    * 查询
    */
   const handleQuery = () => {
-    proxy.$refs.tableRef.selectAll(false);
+    tableRef.value.selectAll(false);
     getList();
   };
 
   /**
    * 重置
    */
   const resetQuery = () => {
-    proxy.$refs.queryRef.resetFields();
+    queryFormRef.value.resetFields();
     handleQuery();
   };
 
@@ -272,7 +275,7 @@
           <div class="header">
             <!-- 搜索栏 -->
             <div v-if="showQuery" class="header-query">
-              <a-form ref="queryRef" :model="queryParams" layout="inline">
+              <a-form ref="queryFormRef" :model="queryParams" layout="inline">
                 <a-form-item field="name" hide-label>
                   <a-input
                     v-model="queryParams.name"