Dialog.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. <!--
  2. * @Author: fxs bjnsfxs@163.com
  3. * @Date: 2024-09-04 11:21:05
  4. * @LastEditors: fxs bjnsfxs@163.com
  5. * @LastEditTime: 2024-10-14 16:57:09
  6. * @FilePath: \Game-Backstage-Management-System\src\components\common\Dialog.vue
  7. * @Description:
  8. *
  9. -->
  10. <script setup lang="ts">
  11. import type { DialogConfig } from '@/types/dialog'
  12. import { useDialog } from '@/hooks/useDialog'
  13. import { nextTick, onMounted, reactive, ref } from 'vue'
  14. import Form from '../form/Form.vue'
  15. interface DialogProps {
  16. config: DialogConfig
  17. configBtnText?: string
  18. }
  19. // 临时用的close
  20. const { dialogClose } = useDialog()
  21. const emits = defineEmits(['formSubmit'])
  22. // 新增的URL与更新URL,因为有时候更新和新增在一起,有时候是分开的,所以在这里去区分
  23. const addUrl = ref<string>('')
  24. const updateUrl = ref<string>('')
  25. // 对话框ref
  26. const dialogFormRef = ref<InstanceType<typeof Form>>()
  27. // props
  28. const props = withDefaults(defineProps<DialogProps>(), {
  29. configBtnText: '确定'
  30. })
  31. // props中的关于配置的信息
  32. const dialogConfigInfo = props.config
  33. // 游戏配置对话框设置
  34. const dialogConfig = reactive({
  35. dialogVisible: false,
  36. title: '',
  37. formLabelWidth: '150px',
  38. type: 0 // 0 是新增 1是修改
  39. })
  40. /**
  41. * 游戏配置提交
  42. */
  43. const submitGameChange = () => {
  44. dialogFormRef.value
  45. ?.submitFormData()
  46. .then(() => {
  47. // console.log(dialogConfigInfo.reqConfig.otherOptions.formData.gid )
  48. dialogConfig.dialogVisible = false
  49. })
  50. .catch(() => {})
  51. }
  52. // 表单关闭
  53. const closeDialog = () => {
  54. dialogClose(dialogFormRef.value, dialogConfig)
  55. }
  56. // 表单添加
  57. const addForm = () => {
  58. dialogConfigInfo.reqConfig.url = addUrl.value
  59. dialogConfig.type = 0
  60. dialogConfig.dialogVisible = true
  61. }
  62. // 表单修改
  63. const editForm = (row: any, updateURL?: string) => {
  64. dialogConfig.dialogVisible = true
  65. dialogConfig.type = 1
  66. if (updateURL) {
  67. updateUrl.value = updateURL
  68. dialogConfigInfo.reqConfig.url = updateUrl.value
  69. }
  70. nextTick(() => {
  71. dialogFormRef.value?.fillForm(row)
  72. })
  73. }
  74. onMounted(() => {
  75. dialogConfig.title = dialogConfigInfo.title
  76. addUrl.value = props.config.reqConfig.url // 保存一下新增的URL
  77. })
  78. /**
  79. * @description: 对字段进行加密
  80. * @param {*} fields 字段名
  81. * @param {*} useFormField 是否对表单的字段加密
  82. * @param {*} encryptMsg 加密的消息
  83. */
  84. const encrypt = (fields: string, useFormField: boolean, encryptMsg: Array<string>) => {
  85. dialogFormRef.value?.encryptData(fields, useFormField, encryptMsg).finally(() => {
  86. dialogConfig.dialogVisible = false
  87. })
  88. }
  89. const subForm = (FormData: any) => {
  90. emits('formSubmit', FormData, dialogConfig.type)
  91. }
  92. defineExpose({
  93. addForm,
  94. editForm,
  95. encrypt
  96. })
  97. </script>
  98. <template>
  99. <div class="dialog">
  100. <el-dialog
  101. @close="closeDialog"
  102. v-model="dialogConfig.dialogVisible"
  103. :title="dialogConfig.title"
  104. :close-on-click-modal="false"
  105. style="width: 40%"
  106. append-to-body
  107. >
  108. <Form
  109. :disabled="true"
  110. @sub-form="subForm"
  111. ref="dialogFormRef"
  112. :config="{
  113. fieldsInfo: dialogConfigInfo.fieldsInfo,
  114. reqConfig: dialogConfigInfo.reqConfig,
  115. rules: dialogConfigInfo.rules
  116. }"
  117. ></Form>
  118. <template #footer>
  119. <div class="dialog-footer">
  120. <slot name="otherBtn"></slot>
  121. <slot name="btnGroup">
  122. <el-button class="dialogBtn" type="primary" @click="submitGameChange()">
  123. {{ configBtnText }}
  124. </el-button>
  125. <el-button class="dialogBtn" @click="closeDialog">取消</el-button>
  126. </slot>
  127. </div>
  128. </template>
  129. </el-dialog>
  130. </div>
  131. </template>
  132. <style scoped>
  133. .dialogBtn {
  134. box-sizing: border-box;
  135. margin-right: 10px;
  136. }
  137. </style>