1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <template>
| <BasicModal @register="registerModel" title="详细信息" :width="1200" :keyboard="true" @ok="handleOk" @cancel="close">
| <transition name="fade">
| <div v-if="getVisible">
| <slot name="mainForm" :row="row" :column="column" />
| </div>
| </transition>
| </BasicModal>
| </template>
| <script lang="ts">
| import { ref, defineComponent } from 'vue';
| import { cloneDeep } from 'lodash-es';
| import { useModal } from '/@/components/Modal/src/hooks/useModal';
| import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
| export default defineComponent({
| components: {
| BasicModal: createAsyncComponent(() => import('/@/components/Modal/src/BasicModal.vue'), {
| loading: true,
| }),
| },
| props: {
| trigger: {
| type: Function,
| required: true,
| },
| },
| setup(props) {
| const row = ref(null);
| const column = ref(null);
|
| const [registerModel, { openModal, closeModal, getVisible }] = useModal();
|
| function open(event) {
| let { row: $row, column: $column } = event;
| row.value = cloneDeep($row);
| column.value = $column;
| openModal();
| }
|
| function close() {
| closeModal();
| }
|
| function handleOk() {
| props.trigger('detailsConfirm', {
| row: row.value,
| column: column.value,
| callback: (success) => {
| success ? closeModal() : openModal();
| },
| });
| }
|
| return {
| getVisible,
| row,
| column,
| open,
| close,
| handleOk,
| registerModel,
| };
| },
| });
| </script>
| <style scoped lang="less">
| .fade-enter-active,
| .fade-leave-active {
| opacity: 1;
| transition: opacity 0.5s;
| }
|
| .fade-enter,
| .fade-leave-to {
| opacity: 0;
| }
| </style>
|
|
