fix: 使用ElDialog:destroy-on-close属性解决对话框重新加载

Author: dhb52

src/views/mp/autoReply/index.vue

@@ -140,7 +140,7 @@
     </el-table>
 
     <!-- 添加或修改自动回复的对话框 -->
-    <el-dialog :title="title" v-model="showReplyFormDialog" width="800px" append-to-body>
+    <el-dialog :title="title" v-model="showReplyFormDialog" width="800px" destroy-on-close>
       <el-form ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
         <el-form-item label="消息类型" prop="requestMessageType" v-if="msgType === MsgType.Message">
           <el-select v-model="replyForm.requestMessageType" placeholder="请选择">
@@ -167,7 +167,7 @@
           <el-input v-model="replyForm.requestKeyword" placeholder="请输入内容" clearable />
         </el-form-item>
         <el-form-item label="回复消息">
-          <WxReplySelect :objData="objData" v-if="hackResetWxReplySelect" />
+          <WxReplySelect :objData="objData" />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -195,7 +195,7 @@ const message = useMessage()
 const formRef = ref()
 
 // 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
-// 作为tab.name
+// 作为tab.name，enum的数字不能随意修改，与api参数相关
 enum MsgType {
   Follow = 1,
   Message = 2,
@@ -277,9 +277,6 @@ const rules = {
   requestMatch: [{ required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' }]
 }
 
-// 重置 WxReplySelect 组件，解决无法清除的问题
-const hackResetWxReplySelect = ref(false)
-
 const onAccountChanged = (id?: number) => {
   queryParams.accountId = id
   getList()
@@ -314,7 +311,6 @@ const handleTabChange = (tabName: TabPaneName) => {
 /** 新增按钮操作 */
 const handleAdd = () => {
   reset()
-  resetEditor()
   // 打开表单，并设置初始化
   objData.value = {
     type: 'text',
@@ -328,7 +324,6 @@ const handleAdd = () => {
 /** 修改按钮操作 */
 const handleUpdate = async (row: any) => {
   reset()
-  resetEditor()
 
   const data = await MpAutoReplyApi.getAutoReply(row.id)
   // 设置属性
@@ -386,7 +381,7 @@ const handleSubmit = async () => {
   }
 
   showReplyFormDialog.value = false
-  getList()
+  await getList()
 }
 
 // 表单重置
@@ -408,14 +403,6 @@ const cancel = () => {
   reset()
 }
 
-// 表单 Editor 重置
-const resetEditor = () => {
-  hackResetWxReplySelect.value = false // 销毁组件
-  nextTick(() => {
-    hackResetWxReplySelect.value = true // 重建组件
-  })
-}
-
 const handleDelete = async (row) => {
   await message.confirm('是否确认删除此数据?')
   await MpAutoReplyApi.deleteAutoReply(row.id)

src/views/mp/message/index.vue

@@ -190,10 +190,9 @@
       v-model="showMessageBox"
       @click="showMessageBox = true"
       width="50%"
+      destroy-on-close
     >
-      <template #footer>
-        <WxMsg :user-id="userId" v-if="showMessageBox" />
-      </template>
+      <WxMsg :user-id="userId" />
     </el-dialog>
   </ContentWrap>
 </template>
@@ -262,6 +261,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = async () => {
+  // 暂存accountId，并在reset后恢复
   const accountId = queryParams.accountId
   queryFormRef.value?.resetFields()
   queryParams.accountId = accountId