Game-Backstage-Management-System/src/hooks/useDialog.ts

/*
 * @Author: fxs bjnsfxs@163.com
 * @Date: 2024-08-21 17:23:32
 * @LastEditors: fxs bjnsfxs@163.com
 * @LastEditTime: 2024-10-14 17:00:57
 * @FilePath: \Game-Backstage-Management-System\src\hooks\useDialog.ts
 * @Description:
 *
 */
import type { DialogSetting } from '@/types/table'

import { nextTick } from 'vue'

import Form from '@/components/form/CustomForm.vue'

import 'element-plus/theme-chalk/el-message.css'
import 'element-plus/theme-chalk/el-message-box.css'

export function useDialog() {
  /**
   * @description: 对话框关闭
   * @param {InstanceType} formEl 表单对象
   * @param {DialogSetting} dialogConfig 对话框配置
   */
  const dialogClose = (
    formEl: InstanceType<typeof Form> | undefined,
    dialogConfig: DialogSetting
  ) => {
    if (!formEl) return

    dialogConfig.dialogVisible = false
    formEl.resetForm()
  }

  /**
   * @description: 点击修改按钮，填充数据
   * @param {any} row 行数据
   * @param {any} formData 表单数据
   * @param {DialogSetting} dialogConfig 对话框配置
   */
  const handleEdit = (row: any, formData: any, dialogConfig: DialogSetting) => {
    dialogConfig.type = 1
    dialogConfig.dialogVisible = true

    // 这里放到nextTick，因为resetFields原理是将表单重置到dom刚渲染时的数据
    // 而这个表单，如果第一次使用就点击编辑的话，会将初始值直接设置为这行的数据，导致无法重置
    void nextTick(() => {
      for (const key in row) {
        if (key in formData) {
          formData[key] = row[key]
        } else {
          console.log(key)
        }
      }
    })
  }

  return {
    dialogClose,

    handleEdit
  }
}