index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <template>
  2. <el-dialog
  3. v-model="dialogVisible"
  4. :close-on-click-modal="false"
  5. :title="parameter.title"
  6. :destroy-on-close="true"
  7. :width="parameter.width"
  8. :top="parameter.top"
  9. draggable
  10. >
  11. <ProFrom ref="proFormRef" :items-options="parameter.itemsOptions" :form-options="_options" :model="parameter.model">
  12. <template #modelAddress="{}">
  13. <FileUpload :file-size="4096" :file-type="['pt']" />
  14. </template>
  15. </ProFrom>
  16. <template #footer>
  17. <span class="dialog-footer">
  18. <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
  19. <el-button @click="handleCancel">取消</el-button>
  20. </span>
  21. </template>
  22. </el-dialog>
  23. </template>
  24. <script setup lang="ts" name="FormDialog">
  25. import { ref, ComputedRef, computed } from 'vue'
  26. import ProFrom from '@/components/ProForm/index.vue'
  27. import { ElMessage } from 'element-plus'
  28. import FileUpload from '@/components/Upload/File.vue'
  29. // import mittBus from '@/utils/mittBus'
  30. export interface FormParameterProps {
  31. title: string // 标题
  32. width?: number // 弹框宽度
  33. labelWidth?: number // label宽度
  34. api?: (params: any) => Promise<any> // 表单提交api
  35. isEdit?: boolean // 是否编辑
  36. top?: string // 离顶部距离
  37. formOptions?: ProForm.FormOptions // 表单配置
  38. itemsOptions: ProForm.ItemsOptions[] // 动态表单字段配置
  39. model?: Record<ProForm.FormItem['prop'], ProForm.FormItem['value']> // 表单数据对象
  40. getTableList?: () => void // 获取表格数据的Api
  41. }
  42. // dialog状态
  43. const dialogVisible = ref(false)
  44. const butLoading = ref(false)
  45. // 父组件传过来的参数
  46. const parameter = ref<FormParameterProps>({
  47. title: '',
  48. width: 500,
  49. top: '10vh',
  50. itemsOptions: [],
  51. formOptions: {},
  52. isEdit: true
  53. })
  54. const _options: ComputedRef<ProForm.FormOptions> = computed(() => {
  55. const form = {
  56. labelWidth: 120,
  57. hasFooter: false,
  58. disabled: false
  59. }
  60. return Object.assign(form, parameter.value.formOptions)
  61. })
  62. const proFormRef = ref<InstanceType<typeof ProFrom> | null>(null)
  63. // 表单提交校验
  64. const handleSubmit = () => {
  65. const formEl = proFormRef.value?.proFormRef
  66. const formModel = proFormRef.value?.formModel
  67. butLoading.value = true
  68. if (!formEl) return
  69. formEl.validate(valid => {
  70. if (valid) {
  71. parameter.value.api!({ ...formModel, ...parameter.value.model }).then(res => {
  72. if (res.code == 200) {
  73. proFormRef.value?.resetForm(formEl)
  74. ElMessage.success('操作成功')
  75. dialogVisible.value = false
  76. parameter.value.getTableList && parameter.value.getTableList()
  77. } else {
  78. console.log('message', res.message)
  79. }
  80. })
  81. butLoading.value = false
  82. }
  83. butLoading.value = false
  84. })
  85. }
  86. // mittBus.on('data:fileName', (fileName: string) => {
  87. // if (fileName !== undefined && fileName !== null) {
  88. // console.log(proFormRef.value?.formModel)
  89. // if(proFormRef.value?.formModel){
  90. // proFormRef.value.formModel.name = fileName.split('.')[0]
  91. // }
  92. // }
  93. // })
  94. // 取消按钮,重置表单,关闭弹框
  95. const handleCancel = () => {
  96. console.log(parameter.value.model)
  97. const formEl = proFormRef.value?.proFormRef
  98. if (!formEl) return
  99. if (parameter.value.model?.url) {
  100. ElMessage.info('请先删除已经上传的图片')
  101. return
  102. }
  103. proFormRef.value?.resetForm(formEl)
  104. butLoading.value = false
  105. dialogVisible.value = false
  106. }
  107. // 接收父组件参数
  108. const openDialog = (params: FormParameterProps) => {
  109. parameter.value = { ...parameter.value, ...params }
  110. _options.value.disabled = !parameter.value.isEdit
  111. butLoading.value = false
  112. dialogVisible.value = true
  113. }
  114. defineExpose({
  115. openDialog
  116. })
  117. </script>