update 重构 彻底删除proxy用法 改为vue3官方推荐写法

src/views/system/user/profile/index.vue

@@ -93,15 +93,15 @@
 </template>
 
 <script setup name="Profile" lang="ts">
-import UserAvatar from './userAvatar.vue';
-import UserInfo from './userInfo.vue';
-import ResetPwd from './resetPwd.vue';
-import ThirdParty from './thirdParty.vue';
-import OnlineDevice from './onlineDevice.vue';
+import { getOnline } from '@/api/monitor/online';
 import { getAuthList } from '@/api/system/social/auth';
 import { getUserProfile } from '@/api/system/user';
-import { getOnline } from '@/api/monitor/online';
 import { UserVO } from '@/api/system/user/types';
+import OnlineDevice from './onlineDevice.vue';
+import ResetPwd from './resetPwd.vue';
+import ThirdParty from './thirdParty.vue';
+import UserAvatar from './userAvatar.vue';
+import UserInfo from './userInfo.vue';
 
 const activeTab = ref('userinfo');
 interface State {

src/views/system/user/profile/onlineDevice.vue

@@ -12,7 +12,7 @@
       <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
       <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
         <template #default="scope">
-          <span>{{ proxy.parseTime(scope.row.loginTime) }}</span>
+          <span>{{ parseTime(scope.row.loginTime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -28,10 +28,13 @@
 
 <script setup name="Online" lang="ts">
 import { delOnline } from '@/api/monitor/online';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
+import { useDict } from '@/utils/dict';
 import { propTypes } from '@/utils/propTypes';
+import { parseTime } from '@/utils/ruoyi';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));
+const { sys_device_type } = toRefs<any>(useDict('sys_device_type'));
 
 const props = defineProps({
   devices: propTypes.any.isRequired
@@ -46,10 +49,10 @@ const handldDelOnline = (row: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        proxy?.$modal.msgSuccess('删除成功');
-        proxy?.$tab.refreshPage();
+        modal.msgSuccess('删除成功');
+        tab.refreshPage();
       } else {
-        proxy?.$modal.msgError(res.msg);
+        modal.msgError(res.msg);
       }
     })
     .catch(() => {});

src/views/system/user/profile/resetPwd.vue

@@ -17,10 +17,11 @@
 </template>
 
 <script setup lang="ts">
-import { updateUserPwd } from '@/api/system/user';
 import type { ResetPwdForm } from '@/api/system/user/types';
+import { updateUserPwd } from '@/api/system/user';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const pwdRef = ref<ElFormInstance>();
 const user = ref<ResetPwdForm>({
   oldPassword: '',
@@ -45,7 +46,11 @@ const rules = ref({
       message: '长度在 6 到 20 个字符',
       trigger: 'blur'
     },
-    { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\ |', trigger: 'blur' }
+    {
+      pattern: /^[^<>"'|\\]+$/,
+      message: '不能包含非法字符：< > " \' \\ |',
+      trigger: 'blur'
+    }
   ],
   confirmPassword: [
     { required: true, message: '确认密码不能为空', trigger: 'blur' },
@@ -62,13 +67,13 @@ const submit = () => {
   pwdRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       await updateUserPwd(user.value.oldPassword, user.value.newPassword);
-      proxy?.$modal.msgSuccess('修改成功');
+      modal.msgSuccess('修改成功');
     }
   });
 };
 /** 关闭按钮 */
 const close = () => {
-  proxy?.$tab.closePage();
+  tab.closePage();
 };
 </script>
 

src/views/system/user/profile/thirdParty.vue

@@ -62,10 +62,10 @@
 
 <script setup lang="ts">
 import { authUnlock, authRouterUrl } from '@/api/system/social/auth';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
 import { propTypes } from '@/utils/propTypes';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
 const props = defineProps({
   auths: propTypes.any.isRequired
 });
@@ -78,10 +78,10 @@ const unlockAuth = (row: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        proxy?.$modal.msgSuccess('解绑成功');
-        proxy?.$tab.refreshPage();
+        modal.msgSuccess('解绑成功');
+        tab.refreshPage();
       } else {
-        proxy?.$modal.msgError(res.msg);
+        modal.msgError(res.msg);
       }
     })
     .catch(() => {});
@@ -92,7 +92,7 @@ const authUrl = (source: string) => {
     if (res.code === 200) {
       window.location.href = res.data;
     } else {
-      proxy?.$modal.msgError(res.msg);
+      modal.msgError(res.msg);
     }
   });
 };

src/views/system/user/profile/userAvatar.vue

@@ -57,10 +57,11 @@
 
 <script setup lang="ts">
 import 'vue-cropper/dist/index.css';
+import { UploadRawFile } from 'element-plus';
 import { VueCropper } from 'vue-cropper';
 import { uploadAvatar } from '@/api/system/user';
+import modal from '@/plugins/modal';
 import { useUserStore } from '@/store/modules/user';
-import { UploadRawFile } from 'element-plus';
 
 interface Options {
   img: string | any; // 裁剪图片的地址
@@ -75,7 +76,6 @@ interface Options {
 }
 
 const userStore = useUserStore();
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const open = ref(false);
 const visible = ref(false);
@@ -121,7 +121,7 @@ const changeScale = (num: number) => {
 /** 上传预处理 */
 const beforeUpload = (file: UploadRawFile): any => {
   if (file.type.indexOf('image/') == -1) {
-    proxy?.$modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
+    modal.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
   } else {
     const reader = new FileReader();
     reader.readAsDataURL(file);
@@ -140,7 +140,7 @@ const uploadImg = async () => {
     open.value = false;
     options.img = res.data.imgUrl;
     userStore.setAvatar(options.img);
-    proxy?.$modal.msgSuccess('修改成功');
+    modal.msgSuccess('修改成功');
     visible.value = false;
   });
 };

src/views/system/user/profile/userInfo.vue

@@ -24,13 +24,14 @@
 
 <script setup lang="ts">
 import { updateUserProfile } from '@/api/system/user';
+import modal from '@/plugins/modal';
+import tab from '@/plugins/tab';
 import { propTypes } from '@/utils/propTypes';
 
 const props = defineProps({
   user: propTypes.any.isRequired
 });
 const userForm = computed(() => props.user);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userRef = ref<ElFormInstance>();
 const rule: ElFormRules = {
   nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
@@ -48,7 +49,11 @@ const rule: ElFormRules = {
       message: '手机号码不能为空',
       trigger: 'blur'
     },
-    { pattern: /^1[3456789][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
+    {
+      pattern: /^1[3456789][0-9]\d{8}$/,
+      message: '请输入正确的手机号码',
+      trigger: 'blur'
+    }
   ]
 };
 const rules = ref<ElFormRules>(rule);
@@ -58,13 +63,13 @@ const submit = () => {
   userRef.value?.validate(async (valid: boolean) => {
     if (valid) {
       await updateUserProfile(props.user);
-      proxy?.$modal.msgSuccess('修改成功');
+      modal.msgSuccess('修改成功');
     }
   });
 };
 /** 关闭按钮 */
 const close = () => {
-  proxy?.$tab.closePage();
+  tab.closePage();
 };
 </script>