优化抽屉

src/views/content/layoutItem/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="props.visible" :width="800" @update:show="handleUpdate">
+  <n-drawer v-model:show="isDrawer" width="800">
     <n-drawer-content :title="props.layoutId ? '编辑' : '新增'" closable>
       <template #default>
         <n-form
@@ -97,11 +97,12 @@
   /**
    * 定义参数
    */
-  const emit = defineEmits(['success', 'update:visible']);
+  const emit = defineEmits(['success']);
   const formRef = ref();
   const articleRef = ref();
   const message = useMessage();
   const chooseVisible = ref(false);
+  const isDrawer = ref(false);
   const layoutList = ref([]);
 
   /**
@@ -121,18 +122,12 @@
    * 定义接收的参数
    */
   const props = defineProps({
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
     layoutId: {
       type: Number,
       required: true,
       default: 0,
     },
   });
-
   /**
    * 定义数据
    */
@@ -171,18 +166,34 @@
       .then(async () => {
         props.layoutId ? await layoutUpdate(formData) : await layoutAdd(formData);
         message.success('操作成功');
-        emit('update:visible', false);
+        isDrawer.value = false;
         emit('success');
       })
       .catch((error) => {});
   };
   const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
 
+  /**
+   * 打开窗体
+   */
+  const openDrawer = async (layoutId) => {
+    isDrawer.value = true;
+    getAllDict();
+    for (const key in formData) {
+      formData[key] = '';
+    }
+    formData.layoutId = null;
+    formData.type = null;
+    formData.sort = 0;
+    if (layoutId) {
+      setFormData(layoutId);
+    }
+  };
   /**
    * 关闭窗体
    */
   const handleClose = () => {
-    emit('update:visible', false);
+    isDrawer.value = false;
   };
 
   /**
@@ -197,8 +208,8 @@
   /**
    * 设置表单数据
    */
-  const setFormData = async () => {
+  const setFormData = async (layoutId) => {
-    const data = await getLayoutDetail(props.layoutId);
+    const data = await getLayoutDetail(layoutId);
     for (const key in formData) {
       if (data[key] != null && data[key] != undefined) {
         //@ts-ignore
@@ -231,13 +242,7 @@
     layoutList.value = list ? list : [];
   };
 
-  /**
+  defineExpose({
-   * 钩子函数
+    openDrawer,
-   */
-  onMounted(() => {
-    getAllDict();
-    if (props.layoutId) {
-      setFormData();
-    }
   });
 </script>

src/views/content/layoutItem/index.vue

@@ -44,13 +44,7 @@
         </template>
       </BasicTable>
     </n-card>
-    <editDialog
+    <editDialog ref="createModalRef" :layoutId="layoutId" @success="reloadTable('noRefresh')" />
-      ref="createModalRef"
-      :layoutId="layoutId"
-      v-if="editVisible"
-      v-model:visible="editVisible"
-      @success="reloadTable('noRefresh')"
-    />
   </div>
 </template>
 
@@ -185,8 +179,8 @@
    */
   const handleAdd = async () => {
     layoutId.value = 0;
-    await nextTick();
+    const { openDrawer } = createModalRef.value;
-    editVisible.value = true;
+    openDrawer();
   };
 
   /**
@@ -194,8 +188,8 @@
    */
   async function handleEdit(record: Recordable) {
     layoutId.value = record.id;
-    await nextTick();
+    const { openDrawer } = createModalRef.value;
-    editVisible.value = true;
+    openDrawer(layoutId.value);
   }
 
   /**

src/views/data/notice/edit.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="props.visible" :width="size" @update:show="handleUpdate">
+  <n-drawer v-model:show="isDrawer" :width="size">
     <n-drawer-content :title="props.noticeId ? '编辑公告' : '新增公告'" closable>
       <template #default>
         <n-form
@@ -78,9 +78,20 @@
   import Editor from '@/components/Editor/tinymce.vue';
   import { useLockFn } from '@/utils/useLockFn';
 
-  const emit = defineEmits(['success', 'update:visible']);
+  const emit = defineEmits(['success']);
   const formRef = ref();
 
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    noticeId: {
+      type: Number,
+      required: true,
+      default: 0,
+    },
+  });
+
   /**
    * 定义表单参数
    */
@@ -100,22 +111,7 @@
   });
   const editorRef = ref();
   const fwbHeight = document.body.clientHeight - 400;
-
+  const isDrawer = ref(false);
-  /**
-   * 定义接收的参数
-   */
-  const props = defineProps({
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-    noticeId: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-  });
 
   /**
    * 定义通知类型
@@ -137,22 +133,32 @@
         ruleForm.content = editorRef.value.myValue;
         props.noticeId ? await noticeUpdate(ruleForm) : await noticeAdd(ruleForm);
         message.success('操作成功');
-        emit('update:visible', false);
+        isDrawer.value = false;
         emit('success');
       })
       .catch((error) => {});
   };
 
+  /**
+   * 打开窗体
+   */
+  const openDrawer = async (noticeId) => {
+    isDrawer.value = true;
+    for (const key in formData) {
+      formData[key] = '';
+    }
+    formData.status = 1;
+    formData.type = 1;
+    if (noticeId) {
+      setFormData(noticeId);
+    }
+  };
+
   /**
    * 关闭窗体
    */
   const handleClose = () => {
-    emit('update:visible', false);
+    isDrawer.value = false;
-  };
-  const handleUpdate = (show) => {
-    if (!show) {
-      handleClose();
-    }
   };
 
   const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
@@ -160,8 +166,8 @@
   /**
    * 设置表单数据
    */
-  const setFormData = async () => {
+  const setFormData = async (noticeId) => {
-    const data = await getNoticeDetail(props.noticeId);
+    const data = await getNoticeDetail(noticeId);
     for (const key in formData) {
       if (data[key] != null && data[key] != undefined) {
         //@ts-ignore
@@ -171,12 +177,7 @@
     editorRef.value.myValue = formData.content;
   };
 
-  /**
+  defineExpose({
-   * 钩子函数
+    openDrawer,
-   */
-  onMounted(() => {
-    if (props.noticeId) {
-      setFormData();
-    }
   });
 </script>

src/views/data/notice/index.vue

@@ -44,13 +44,7 @@
         </template>
       </BasicTable>
     </n-card>
-    <editDialog
+    <editDialog ref="createModalRef" @success="reloadTable('noRefresh')" :noticeId="noticeId" />
-      ref="createModalRef"
-      :noticeId="noticeId"
-      v-if="editVisible"
-      v-model:visible="editVisible"
-      @success="reloadTable('noRefresh')"
-    />
   </div>
 </template>
 
@@ -186,8 +180,8 @@
    */
   const handleAdd = async () => {
     noticeId.value = 0;
-    await nextTick();
+    const { openDrawer } = createModalRef.value;
-    editVisible.value = true;
+    openDrawer();
   };
 
   /**
@@ -195,8 +189,8 @@
    */
   async function handleEdit(record: Recordable) {
     noticeId.value = record.id;
-    await nextTick();
+    const { openDrawer } = createModalRef.value;
-    editVisible.value = true;
+    openDrawer(noticeId.value);
   }
 
   /**

src/views/monitor/job/index.vue

@@ -51,7 +51,7 @@
       v-model:visible="editVisible"
       @success="reloadTable('noRefresh')"
     />
-    <jobLog v-if="editLogVisible" :jobId="jobId" v-model:visible="editLogVisible" />
+    <jobLog :jobId="jobId" ref="jobModalRef" />
   </div>
 </template>
 
@@ -83,6 +83,7 @@
   const dialog = useDialog();
   const basicTableRef = ref();
   const createModalRef = ref();
+  const jobModalRef = ref();
   const editVisible = ref(false);
   const editLogVisible = ref(false);
   const jobId = ref(0);
@@ -299,10 +300,12 @@
    * @param record 参数
    */
   const handleJobLog = (record) => {
-    console.log(record);
     // router.push({path:'/monitorJob/log'})
-    editLogVisible.value = true;
     jobId.value = record.id;
+    // editLogVisible.value = true;
+
+    const { openDrawer } = jobModalRef.value;
+    openDrawer();
   };
 
   /**

src/views/monitor/job/log/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-drawer v-model:show="props.visible" :width="size" @update:show="handleUpdate">
+  <n-drawer v-model:show="isDrawer" :width="size">
     <n-drawer-content title="调度日志" closable>
       <template #default>
         <n-card :bordered="false" class="pt-3 mb-3 proCard">
@@ -70,10 +70,10 @@
   const basicTableRef = ref();
   const createModalRef = ref();
   const editVisible = ref(false);
+  const isDrawer = ref(false);
   const logId = ref(0);
   const size = document.body.clientWidth - 500;
   const rowKeys = ref([]);
-  const emit = defineEmits(['update:visible']);
 
   /**
    * 定义查询参数
@@ -87,11 +87,6 @@
    * 定义接收的参数
    */
   const props = defineProps({
-    visible: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
     jobId: {
       type: Number,
       required: true,
@@ -191,19 +186,21 @@
     labelWidth: 110,
     schemas,
   });
-  const handleClose = () => {
-    emit('update:visible', false);
-  };
   /**
-   * 执行更新
+   * 打开窗体
-   * @param show 参数
    */
-  const handleUpdate = (show) => {
+  const openDrawer = async (noticeId) => {
-    if (!show) {
+    isDrawer.value = true;
-      handleClose();
+    for (const key in formParams) {
+      formParams[key] = '';
     }
   };
-
+  /**
+   * 关闭窗体
+   */
+  const handleClose = () => {
+    isDrawer.value = false;
+  };
   /**
    * 执行查看详情
    */
@@ -231,6 +228,9 @@
       },
     });
   }
+  defineExpose({
+    openDrawer,
+  });
 </script>
 
 <style lang="less" scoped></style>