Modal4.vue 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <BasicModal
  3. v-bind="$attrs"
  4. @register="register"
  5. title="Modal Title"
  6. @visible-change="handleVisibleChange"
  7. >
  8. <div class="pt-3px pr-3px">
  9. <BasicForm @register="registerForm" :model="model" />
  10. </div>
  11. </BasicModal>
  12. </template>
  13. <script lang="ts">
  14. import { defineComponent, ref, nextTick } from 'vue';
  15. import { BasicModal, useModalInner } from '/@/components/Modal';
  16. import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  17. const schemas: FormSchema[] = [
  18. {
  19. field: 'field1',
  20. component: 'Input',
  21. label: '字段1',
  22. colProps: {
  23. span: 24,
  24. },
  25. defaultValue: '111',
  26. },
  27. {
  28. field: 'field2',
  29. component: 'Input',
  30. label: '字段2',
  31. colProps: {
  32. span: 24,
  33. },
  34. },
  35. ];
  36. export default defineComponent({
  37. components: { BasicModal, BasicForm },
  38. props: {
  39. userData: { type: Object },
  40. },
  41. setup(props) {
  42. const modelRef = ref({});
  43. const [
  44. registerForm,
  45. // {
  46. // // setFieldsValue,
  47. // // setProps
  48. // },
  49. ] = useForm({
  50. labelWidth: 120,
  51. schemas,
  52. showActionButtonGroup: false,
  53. actionColOptions: {
  54. span: 24,
  55. },
  56. });
  57. const [register] = useModalInner((data) => {
  58. data && onDataReceive(data);
  59. });
  60. function onDataReceive(data) {
  61. console.log('Data Received', data);
  62. // 方式1;
  63. // setFieldsValue({
  64. // field2: data.data,
  65. // field1: data.info,
  66. // });
  67. // // 方式2
  68. modelRef.value = { field2: data.data, field1: data.info };
  69. // setProps({
  70. // model:{ field2: data.data, field1: data.info }
  71. // })
  72. }
  73. function handleVisibleChange(v) {
  74. v && props.userData && nextTick(() => onDataReceive(props.userData));
  75. }
  76. return { register, schemas, registerForm, model: modelRef, handleVisibleChange };
  77. },
  78. });
  79. </script>