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

2026-07-27 09:51:30 +08:00
parent 17d5c85904
commit e3e66ec03b
11 changed files with 146 additions and 161 deletions
@@ -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,33 +120,27 @@ export default defineComponent({
    };

    /** 监听 visible 变化重置表单 */
-    watch(
-      () => props.visible,
-      (val) => {
-        if (val) {
-          initFormFromRecord(props.record);
-          cropperVisible.value = false;
-          uploadImageUrl.value = '';
-          setTimeout(() => formRef.value?.clearValidate(), 0);
-        }
-      },
-      { immediate: true },
-    );
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        cropperVisible.value = false;
+        uploadImageUrl.value = '';
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => props.visible]);

    /** 监听 jumpType 变化时清理联动字段 */
-    watch(
-      () => formData.jumpType,
-      (newType) => {
-        if (newType !== 'event_detail') formData.relatedEventId = '';
-        if (newType !== 'miniprogram_page') formData.pagePath = '';
-        if (newType !== 'custom_link') formData.customUrl = '';
-        const fieldsToValidate: string[] = [];
-        if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
-        if (newType === 'miniprogram_page') fieldsToValidate.push('pagePath');
-        if (newType === 'custom_link') fieldsToValidate.push('customUrl');
-        if (fieldsToValidate.length) formRef.value?.clearValidate(fieldsToValidate);
-      },
-    );
+    useEffect(() => {
+      const newType = formData.jumpType;
+      if (newType !== 'event_detail') formData.relatedEventId = '';
+      if (newType !== 'miniprogram_page') formData.pagePath = '';
+      if (newType !== 'custom_link') formData.customUrl = '';
+      const fieldsToValidate: string[] = [];
+      if (newType === 'event_detail') fieldsToValidate.push('relatedEventId');
+      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 = () => {
@@ -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) {
-          initFormFromRecord(props.record);
-          setTimeout(() => formRef.value?.clearValidate(), 0);
-        }
-      },
-      { immediate: true },
-    );
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => props.visible]);

    /** Tree 勾选回调（受控） */
    const handleCheck: TreeProps['onCheck'] = (checked) => {
@@ -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],
-      () => {
-        setPagination({ current: 1, pageSize: 10, total: filteredUsers.value.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 });
@@ -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;
+  }
 }

 /* ===== 取消重置行 ===== */
@@ -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) {
-          initFormFromRecord(props.record);
-          isResetting.value = false;
-          setTimeout(() => formRef.value?.clearValidate(), 0);
-        }
-      },
-      { immediate: true },
-    );
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        isResetting.value = false;
+        setTimeout(() => formRef.value?.clearValidate(), 0);
+      }
+    }, [() => 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}>
-                      重置密码
-                    </Button>
-                  </div>
+                  <Input
+                    value={PASSWORD_PLACEHOLDER}
+                    readonly
+                    suffix={
+                      <a class={styles.resetLink} onClick={handleResetPassword}>
+                        重置密码
+                      </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,18 +195,17 @@ export default defineComponent({
                    />
                  </Form.Item>
                </div>
+                {/* 角色：单独一行 */}
+                <Form.Item label="角色" name="role" rules={roleRules}>
+                  <Select
+                    options={ROLE_FORM_OPTIONS as any}
+                    placeholder="请选择角色"
+                    v-model:value={formData.role}
+                    style={{ width: '200px' }}
+                  />
+                </Form.Item>
              </>
            )}
-
-            {/* 角色：单独一行，固定宽度 */}
-            <Form.Item label="角色" name="role" rules={roleRules}>
-              <Select
-                options={ROLE_FORM_OPTIONS as any}
-                placeholder="请选择角色"
-                v-model:value={formData.role}
-                style={{ width: '200px' }}
-              />
-            </Form.Item>
          </Form>

          {/* 底部按钮 */}