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

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

<script setup lang="ts">
import Form from '../form/Form.vue'
import { useDialog } from '@/hooks/useDialog'

import { onMounted, reactive, ref } from 'vue'

import type { DialogConfig } from '@/types/dialog'

interface DialogProps {
  config: DialogConfig
}

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

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

// props
const props = withDefaults(defineProps<DialogProps>(), {})

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

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

// 游戏配置提交
const submiteGameChange = () => {
  dialogFormRef.value?.submitFormData()
}

// 改变显示状态
const changeVisable = () => {
  dialogConfig.dialogVisible = !dialogConfig.dialogVisible
}

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

onMounted(() => {
  dialogConfig.title = dialogConfigInfo.title
})

defineExpose({
  changeVisable
})
</script>

<template>
  <div class="dialog">
    <el-dialog
      @close="closeDialog"
      v-model="dialogConfig.dialogVisible"
      :title="dialogConfig.title"
      style="width: 40vw"
    >
      <Form
        ref="dialogFormRef"
        :config="{
          fieldsInfo: dialogConfigInfo.fieldsInfo,
          reqConfig: dialogConfigInfo.reqConfig,
          rules: dialogConfigInfo.rules
        }"
      ></Form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submiteGameChange()"> 确认 </el-button>
          <el-button @click="closeDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>