Game-Backstage-Management-System/src/components/common/CustomDialog.vue

<!--
 * @Author: fxs bjnsfxs@163.com
 * @Date: 2024-09-04 11:21:05
 * @LastEditors: fxs bjnsfxs@163.com
 * @LastEditTime: 2024-12-07
 * @FilePath: \Game-Backstage-Management-System\src\components\common\CustomDialog.vue
 * @Description: 
 * 
-->

<script setup lang="ts">
import type { DialogConfig } from '@/types/dialog'

import { useDialog } from '@/hooks/useDialog'
import { nextTick, onMounted, reactive, ref } from 'vue'

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

interface DialogProps {
  config: DialogConfig
  configBtnText?: string
}

// 临时用的close
const { dialogClose } = useDialog()

const emits = defineEmits(['formSubmit', 'customSubmit'])

// 新增的URL与更新URL，因为有时候更新和新增在一起，有时候是分开的，所以在这里去区分
const addUrl = ref<string>('')
const updateUrl = ref<string>('')

// 对话框ref
const dialogFormRef = ref<InstanceType<typeof Form>>()

// props
const props = withDefaults(defineProps<DialogProps>(), {
  configBtnText: '确定'
})

// props中的关于配置的信息
const dialogConfigInfo = props.config

// 游戏配置对话框设置
const dialogConfig = reactive({
  dialogVisible: false,
  title: '',
  formLabelWidth: '150px',
  type: 0 // 0 是新增 1是修改
})

/**
 * 表单提交
 * 根据传入的配置决定是由用户自定义提交过程，还是由组件内部进行提交
 */
const submitForm = () => {
  // if (props.config.customSubmit) {
  //   emits('customSubmit', dialogFormRef.value?.getFormData(), dialogConfig.type)
  //   return
  // }

  dialogFormRef.value
    ?.submitFormData()
    .then((formData) => {
      emits('formSubmit', formData, dialogConfig.type)
    })
    .finally(() => {
      dialogConfig.dialogVisible = false
    })
}
//
const handleSubmit = () => {
  // 待定，并没有使用
  if (props.config.customSubmit) {
    emits('customSubmit', dialogFormRef.value?.getFormData(), dialogConfig.type)
    return
  }
  submitForm()
}

// 表单关闭
const closeDialog = () => {
  dialogClose(dialogFormRef.value, dialogConfig)
}

// 表单添加
const addForm = () => {
  dialogConfigInfo.reqConfig.url = addUrl.value
  dialogConfig.type = 0
  dialogConfig.dialogVisible = true
}

// 表单修改
const editForm = (row: any, updateURL?: string) => {
  dialogConfig.dialogVisible = true
  dialogConfig.type = 1
  if (updateURL) {
    updateUrl.value = updateURL
    dialogConfigInfo.reqConfig.url = updateUrl.value
  }

  nextTick(() => {
    dialogFormRef.value?.fillForm(row)
  })
}

/**
 * @description: 对字段进行加密
 * @param {*} fields  字段名
 * @param {*} useFormField  是否对表单的字段加密
 * @param {*} encryptMsg  加密的消息
 */
const encrypt = (fields: string, useFormField: boolean, encryptMsg: Array<string>) => {
  dialogFormRef.value?.encryptData(fields, useFormField, encryptMsg).finally(() => {
    dialogConfig.dialogVisible = false
  })
}

/**
 * @description: 获取表单数据
 */
const getFormData = () => {
  return dialogFormRef.value?.getFormData()
}

onMounted(() => {
  dialogConfig.title = dialogConfigInfo.title
  addUrl.value = props.config.reqConfig.url // 保存一下新增的URL
})

defineExpose({
  getFormData,
  addForm,
  editForm,
  encrypt
})
</script>

<template>
  <div class="dialog">
    <el-dialog
      @close="closeDialog"
      v-model="dialogConfig.dialogVisible"
      :title="dialogConfig.title"
      :close-on-click-modal="false"
      style="width: 40%"
      append-to-body
    >
      <Form
        :disabled="true"
        ref="dialogFormRef"
        :config="{
          fieldsInfo: dialogConfigInfo.fieldsInfo,
          reqConfig: dialogConfigInfo.reqConfig,
          rules: dialogConfigInfo.rules
        }"
      ></Form>
      <template #footer>
        <div class="dialog-footer">
          <slot name="otherBtn"></slot>
          <slot name="btnGroup">
            <el-button class="dialogBtn" type="primary" @click="handleSubmit()">
              {{ configBtnText }}
            </el-button>
            <el-button class="dialogBtn" @click="closeDialog">取消</el-button>
          </slot>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.dialogBtn {
  box-sizing: border-box;
  margin-right: 10px;
}
</style>