cpms_org/cpms_operation_platform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 优化watch 修改编辑用户弹窗样式

Browse Source
This commit is contained in:
ZhuRui
2026-07-27 09:51:30 +08:00
parent 17d5c85904
commit e3e66ec03b
11 changed files with 146 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ChangePasswordModal/index.tsx
+5 -8
View File
@@ -1,4 +1,5 @@
import { defineComponent, ref, reactive, watch } from 'vue';
import { defineComponent, ref, reactive } from 'vue';
import { useEffect } from '@/hooks';
import { Modal, Form, Input, Button, message } from 'ant-design-vue';
import { TIPS_TEXT, newPasswordRules, confirmNewPasswordRules } from './controller';
import styles from './style.module.less';
@@ -30,16 +31,12 @@ export default defineComponent({
const formData = reactive(getDefaultForm());
/** 监听 visible 重置表单 */
watch(
() => props.visible,
(val) => {
if (val) {
useEffect(() => {
if (props.visible) {
Object.assign(formData, getDefaultForm());
setTimeout(() => formRef.value?.clearValidate(), 0);
}
},
{ immediate: true },
);
}, [() => props.visible]);
/** 提交 */
const handleSubmit = async () => {
src/hooks/useAuth.ts
+4 -3
View File
@@ -1,6 +1,6 @@
// src/hooks/useAuth.ts
import { useState } from './useState';
import { watch } from 'vue';
import { useEffect } from './useEffect';
import { useMenuStore } from '@/stores/menuStore';
import { usePermissionStore } from '@/stores/permissionStore';
import router from '@/router';
@@ -10,13 +10,14 @@ const TOKEN_KEY = 'MY_APP_AUTH_TOKEN';
function createAuth() {
const [token, setToken] = useState<string | null>(window.localStorage.getItem(TOKEN_KEY));
watch(token, (newToken) => {
useEffect(() => {
const newToken = token.value;
if (newToken) {
window.localStorage.setItem(TOKEN_KEY, newToken);
} else {
window.localStorage.removeItem(TOKEN_KEY);
}
});
}, [token]);
const isLoggedIn = () => !!token.value;
src/hooks/useDebounce.ts
+6 -3
View File
@@ -1,6 +1,7 @@
// src/hooks/useDebounce.ts
import { watch, onUnmounted, Ref } from 'vue';
import { onUnmounted, Ref } from 'vue';
import { useState } from './useState';
import { useEffect } from './useEffect';
export interface UseDebounceOptions {
delay?: number;
@@ -40,7 +41,7 @@ export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOpti
isFirstCall = true;
};
watch(source, () => {
useEffect(() => {
setIsPending(true);
// 处理 maxWait
@@ -61,7 +62,9 @@ export function useDebounce<T>(source: Ref<T>, options: number | UseDebounceOpti
updateValue();
}, delay);
}
});
return clearTimers;
}, [source]);
// 卸载
onUnmounted(() => {
src/hooks/usePagination.ts
+13 -16
View File
@@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
// src/hooks/usePagination.ts
import { computed, ref, watch, Ref, triggerRef } from 'vue';
import { computed, ref, Ref, triggerRef } from 'vue';
import { useEffect } from './useEffect';
/**
* 分页配置项
@@ -77,24 +78,20 @@ export function usePagination(options: UsePaginationOptions = {}): UsePagination
const pageSizeRef = ref(options.pageSize ?? defaultPageSize);
const totalRef = ref(options.total ?? 0);
watch(
() => options.current,
(val) => {
useEffect(() => {
const val = options.current;
if (val !== undefined) currentRef.value = val;
},
);
watch(
() => options.pageSize,
(val) => {
}, [() => options.current]);
useEffect(() => {
const val = options.pageSize;
if (val !== undefined) pageSizeRef.value = val;
},
);
watch(
() => options.total,
(val) => {
}, [() => options.pageSize]);
useEffect(() => {
const val = options.total;
if (val !== undefined) totalRef.value = val;
},
);
}, [() => options.total]);
const totalPages = computed(() => {
const total = totalRef.value;
src/hooks/useRequest.ts
+12 -13
View File
@@ -1,5 +1,6 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { ref, Ref, watch, WatchSource, onUnmounted, computed } from 'vue';
import { ref, Ref, WatchSource, onUnmounted, computed } from 'vue';
import { useEffect } from './useEffect';
export interface UseRequestReturn<T> {
/** 纯净的数据，不包含后端外层壳 */
@@ -128,9 +129,8 @@ export function useRequest<T>(
const shouldAutoRun = computed(() => !manual && ready.value);
let hasAutoRun = false; // 标记是否已自动执行过，防止重复触发
watch(
shouldAutoRun,
(val) => {
useEffect(() => {
const val = shouldAutoRun.value;
if (val && !hasAutoRun) {
hasAutoRun = true;
run();
@@ -138,21 +138,20 @@ export function useRequest<T>(
// 当条件不满足时重置 hasAutoRun，使下次满足条件时能再次自动执行
hasAutoRun = false;
}
},
{ immediate: true },
);
}, [shouldAutoRun]);
// refreshDeps 变化时重新请求（初始化时不再重复触发）
if (refreshDeps && refreshDeps.length > 0) {
watch(
refreshDeps,
() => {
let skipInitialRefresh = true;
useEffect(() => {
if (skipInitialRefresh) {
skipInitialRefresh = false;
return;
}
if (shouldAutoRun.value) {
run();
}
},
{ deep: true },
);
}, refreshDeps);
}
const getSignal = () => abortController?.signal;
src/hooks/useWebSocket.ts
+9 -6
View File
@@ -1,5 +1,6 @@
import { ref, watch, onBeforeUnmount, toValue } from 'vue';
import { ref, onBeforeUnmount, toValue } from 'vue';
import type { Ref, MaybeRefOrGetter } from 'vue';
import { useEffect } from './useEffect';
// --- 类型定义 ---
export type WebSocketStatus = 'connecting' | 'open' | 'closed' | 'error';
@@ -216,14 +217,16 @@ export function useWebSocket(
// --- 监听与副作用 ---
// 监听 URL 变化，如果变了则重新连接
watch(
() => toValue(url),
() => {
let skipInitialUrlWatch = true;
useEffect(() => {
if (skipInitialUrlWatch) {
skipInitialUrlWatch = false;
return;
}
if (status.value !== 'closed') {
connect();
}
},
);
}, [() => toValue(url)]);
// 组件卸载时清理资源
onBeforeUnmount(() => {
src/pages/events/banner/components/BannerFormModal.tsx
+8 -13
View File
@@ -1,4 +1,5 @@
import { defineComponent, ref, reactive, watch } from 'vue';
import { defineComponent, ref, reactive } from 'vue';
import { useEffect } from '@/hooks';
import {
Modal,
Form,
@@ -119,23 +120,18 @@ export default defineComponent({
};
/** 监听 visible 变化重置表单 */
watch(
() => props.visible,
(val) => {
if (val) {
useEffect(() => {
if (props.visible) {
initFormFromRecord(props.record);
cropperVisible.value = false;
uploadImageUrl.value = '';
setTimeout(() => formRef.value?.clearValidate(), 0);
}
},
{ immediate: true },
);
}, [() => props.visible]);
/** 监听 jumpType 变化时清理联动字段 */
watch(
() => formData.jumpType,
(newType) => {
useEffect(() => {
const newType = formData.jumpType;
if (newType !== 'event_detail') formData.relatedEventId = '';
if (newType !== 'miniprogram_page') formData.pagePath = '';
if (newType !== 'custom_link') formData.customUrl = '';
@@ -144,8 +140,7 @@ export default defineComponent({
if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
if (newType === 'custom_link') fieldsToValidate.push('customUrl');
if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
},
);
}, [() => formData.jumpType]);
/** 触发隐藏的文件选择器 */
const triggerFilePicker = () => {
src/pages/system/roles/components/RoleFormModal.tsx
+5 -8
View File
@@ -1,4 +1,5 @@
import { defineComponent, ref, reactive, watch } from 'vue';
import { defineComponent, ref, reactive } from 'vue';
import { useEffect } from '@/hooks';
import { Modal, Form, Input, Tree, Button } from 'ant-design-vue';
import type { TreeProps } from 'ant-design-vue';
import { roleNameRules, PERMISSION_TREE } from '../controller';
@@ -60,16 +61,12 @@ export default defineComponent({
};
/** 监听 visible 重置 */
watch(
() => props.visible,
(val) => {
if (val) {
useEffect(() => {
if (props.visible) {
initFormFromRecord(props.record);
setTimeout(() => formRef.value?.clearValidate(), 0);
}
},
{ immediate: true },
);
}, [() => props.visible]);
/** Tree 勾选回调（受控） */
const handleCheck: TreeProps['onCheck'] = (checked) => {
src/pages/system/roles/components/UserListModal.tsx
+4 -7
View File
@@ -1,6 +1,6 @@
import { defineComponent, ref, reactive, computed, watch } from 'vue';
import { defineComponent, ref, reactive, computed } from 'vue';
import { Modal, Form, Input, Table, Button, Space, Pagination } from 'ant-design-vue';
import { useState } from '@/hooks';
import { useEffect, useState } from '@/hooks';
import styles from './UserListModal.module.less';
interface UserListModalProps {
@@ -35,12 +35,9 @@ export default defineComponent({
});
/** 监听 visible/users 变化重置分页 */
watch(
() => [props.visible, props.users.length],
() => {
useEffect(() => {
setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.length });
},
);
}, [() => props.visible, () => props.users.length]);
const handleSearch = () => {
setPagination({ ...pagination.value, total: filteredUsers.value.length, current: 1 });
src/pages/system/users/components/UserFormModal.module.less
+8 -17
View File
@@ -20,25 +20,16 @@
}
}
/* ===== 编辑模式密码区 ===== */
.passwordEditRow {
display: flex;
align-items: center;
gap: 8px;
height: 32px;
line-height: 32px;
}
.passwordMask {
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
letter-spacing: 1px;
color: rgba(0, 0, 0, 0.65);
/* ===== 密码区重置链接 ===== */
.resetLink {
font-size: 14px;
color: #1677ff;
cursor: pointer;
user-select: none;
}
.resetBtn {
flex-shrink: 0;
&:hover {
color: #4096ff;
}
}
/* ===== 取消重置行 ===== */
src/pages/system/users/components/UserFormModal.tsx
+25 -20
View File
@@ -1,4 +1,5 @@
import { defineComponent, ref, reactive, watch } from 'vue';
import { defineComponent, ref, reactive } from 'vue';
import { useEffect } from '@/hooks';
import { Modal, Form, Input, Select, Button } from 'ant-design-vue';
import {
ROLE_FORM_OPTIONS,
@@ -62,17 +63,13 @@ export default defineComponent({
};
/** 监听 visible 变化重置表单 */
watch(
() => props.visible,
(val) => {
if (val) {
useEffect(() => {
if (props.visible) {
initFormFromRecord(props.record);
isResetting.value = false;
setTimeout(() => formRef.value?.clearValidate(), 0);
}
},
{ immediate: true },
);
}, [() => props.visible]);
/** 点击"重置密码" */
const handleResetPassword = () => {
@@ -146,19 +143,28 @@ export default defineComponent({
</Form.Item>
</div>
{/* ====== 密码区 ====== */}
{/* ====== 密码区 + 角色 ====== */}
{isEdit && !isResetting.value ? (
/* 编辑模式 - 密码占位 + 重置密码按钮 */
/* 编辑模式未重置：密码占位 + 角色 同一行 */
<div class={styles.row}>
<Form.Item label="密码" class={styles.col}>
<div class={styles.passwordEditRow}>
<span class={styles.passwordMask}>{PASSWORD_PLACEHOLDER}</span>
<Button size="small" class={styles.resetBtn} onClick={handleResetPassword}>
<Input
value={PASSWORD_PLACEHOLDER}
readonly
suffix={
<a class={styles.resetLink} onClick={handleResetPassword}>
重置密码
</Button>
</div>
</a>
}
/>
</Form.Item>
<Form.Item label="角色" name="role" rules={roleRules} class={styles.col}>
<Select
options={ROLE_FORM_OPTIONS as any}
placeholder="请选择角色"
v-model:value={formData.role}
/>
</Form.Item>
<div class={styles.col} />
</div>
) : (
<>
@@ -189,10 +195,7 @@ export default defineComponent({
/>
</Form.Item>
</div>
</>
)}
{/* 角色：单独一行，固定宽度 */}
{/* 角色：单独一行 */}
<Form.Item label="角色" name="role" rules={roleRules}>
<Select
options={ROLE_FORM_OPTIONS as any}
@@ -201,6 +204,8 @@ export default defineComponent({
style={{ width: '200px' }}
/>
</Form.Item>
</>
)}
</Form>
{/* 底部按钮 */}