弹框

src/components/global/my-dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <t-dialog v-bind="cutAttrs" @close="readyCloseWithAnimation">
+  <t-dialog v-bind="attrs">
     <template #body v-if="isFirstOpen">
       <slot></slot>
     </template>
@@ -9,29 +9,19 @@
   </t-dialog>
 </template>
 <script setup name="MyDialog">
-import { useAttrs, useSlots, onMounted, computed, ref, watch } from 'vue';
-import { omit } from 'lodash';
+import { useAttrs, useSlots, ref, watch } from 'vue';
 const attrs = useAttrs();
 const slots = useSlots();
-const emit = defineEmits(['update:visible', 'close']);
-const cutAttrs = computed(() => {
-  return omit(attrs, 'onClose');
-});
-onMounted(() => {
-  emit('update:visible', true);
-});
-const readyCloseWithAnimation = () => {
-  emit('update:visible', false);
-  setTimeout(() => {
-    emit('close');
-  }, 200); //t-dialog的动画时间是0.2秒，所以对父组件的v-if进行200毫秒延迟置为false
-};
-
 let isFirstOpen = ref(false);
 watch(
   () => attrs.visible,
   () => {
-    if (!isFirstOpen.value) isFirstOpen.value = true;
+    if (!isFirstOpen.value) {
+      isFirstOpen.value = true;
+      if (attrs.callBacks) {
+        attrs.callBacks.forEach((item) => item());
+      }
+    }
   }
 );
 </script>

src/hooks/useClearDialog.js

@@ -22,10 +22,12 @@ export default function useClearDialog(data, props, formRef, getDetail) {
     () => props.visible,
     (visible) => {
       if (!visible) {
-        formRef?.value?.clearValidate();
+        // formRef?.value?.clearValidate();
       } else {
-        formRef?.value?.clearValidate();
         !!props.curRow && getDetail && getDetail();
+        setTimeout(() => {
+          formRef?.value?.clearValidate();
+        }, 0);
       }
     }
   );

src/views/user/auth-manage/user-manage/add-user-dialog.vue

@@ -1,10 +1,11 @@
 <template>
   <my-dialog
-    v-model:visible="visible"
-    @close="emit('close')"
-    :header="`${!!curRow ? '修改' : '新增'}用户`"
+    :visible="visible"
+    @close="emit('update:visible', false)"
+    :header="`${isEdit ? '修改' : '新增'}用户`"
     :width="600"
     :closeOnOverlayClick="false"
+    :callBacks="[run1, run2.bind(null, { pageNumber: 1, pageSize: 1000 })]"
   >
     <t-form ref="formRef" :data="formData" labelWidth="120px" :rules="rules">
       <t-form-item label="登录名" name="loginName">
@@ -38,31 +39,24 @@
       </t-form-item>
     </t-form>
     <template #foot>
-      <t-button theme="default" @click="visible = false">取消</t-button>
+      <t-button theme="default" @click="emit('update:visible', false)"
+        >取消</t-button
+      >
       <t-button theme="primary" @click="save">保存</t-button>
     </template>
   </my-dialog>
 </template>
 <script setup name="AddUserDialog">
-// import useClearDialog from '@/hooks/useClearDialog';
-import { ref, computed, reactive } from 'vue';
+import useClearDialog from '@/hooks/useClearDialog';
+import { ref, computed } from 'vue';
 import { getOrgStructList, getRoleList, addUser } from '@/api/user';
 import { useRequest } from 'vue-request';
-const visible = ref(false);
 const props = defineProps({
-  // visible: Boolean,
+  visible: Boolean,
   curRow: Object,
 });
 const emit = defineEmits(['close', 'success']);
 const formRef = ref(null);
-const formData = reactive({
-  loginName: '',
-  realName: '',
-  genderStr: '男',
-  mobileNumber: '',
-  orgId: '',
-  roleIds: [],
-});
 const getDetail = async () => {
   //编辑状态下获取回显数据的接口请求业务,如果curRow里的字段够用，就直接把curRow里的字段赋值给formData
   for (let key in formData) {
@@ -72,17 +66,21 @@ const getDetail = async () => {
   }
   formData.roleIds = props.curRow.roles.map((item) => item.id);
 };
-
-if (!!props.curRow) {
-  getDetail();
-}
-const { data: treeData } = useRequest(getOrgStructList, {
-  manual: false,
-});
-const { data: roleData } = useRequest(getRoleList, {
-  manual: false,
-  defaultParams: [{ pageNumber: 1, pageSize: 1000 }],
-});
+const { formData, isEdit } = useClearDialog(
+  {
+    loginName: '',
+    realName: '',
+    genderStr: '男',
+    mobileNumber: '',
+    orgId: '',
+    roleIds: [],
+  },
+  props,
+  formRef,
+  getDetail
+);
+const { data: treeData, run: run1 } = useRequest(getOrgStructList);
+const { data: roleData, run: run2 } = useRequest(getRoleList);
 const roleList = computed(() => {
   return roleData.value?.records.map((item) => ({
     label: item.name,

src/views/user/auth-manage/user-manage/index.vue

@@ -35,10 +35,9 @@
       </t-table>
     </div>
     <AddUserDialog
-      v-if="showAddUserDialog"
+      v-model:visible="showAddUserDialog"
       :curRow="curRow"
       @success="addSuccess"
-      @close="showAddUserDialog = false"
     ></AddUserDialog>
   </div>
 </template>