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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
| <template>
| <app-dialog-form
| v-bind="dialogFormProps"
| >
| <app-form-fields v-bind="formFieldsProps"/>
| <app-collapse-form title="sql语句">
| <app-monaco-sql v-bind="monacoSqlProps"/>
| </app-collapse-form>
| </app-dialog-form>
| </template>
|
|
| <script setup>
| import * as tools from '@/utils/tools.js';
|
| import {useI18n} from 'vue-i18n';
|
| const formFieldsRef = ref();
|
| const {t} = useI18n();
|
| const dialogFormRef = ref();
|
| const monacoSqlRef = ref();
|
| const props = defineProps({
| subSubmit: {
| type: Function,
| default: () => {
| }
| },
| });
|
| const monacoSqlProps = {
| ref: monacoSqlRef,
| }
|
| const formFieldsProps = {
| ref: formFieldsRef,
| fields: [
| {
| type: 'el-input',
| prop: 'name',
| label: '标题',
| col: {
| span: 12
| },
| item: {
| label: '标题',
| prop: 'name',
| rules: [{required: true, message: '请输入标题'}],
| },
| input: {
| placeholder: '请输入标题'
| }
| },
| {
| type: 'el-select',
| prop: 'active',
| label: '是否生效',
| col: {
| span: 12
| },
| item: {
| label: '是否生效',
| prop: 'active',
| rules: [{required: true, message: '请选择是否生效'}],
| },
| select: {
| placeholder: '请选择',
| valueKey: 'name',
| labelKey: 'label',
| options: [{
| name: 'T',
| label: '是'
| }, {
| name: 'F',
| label: '否'
| }],
| }
| }
| ]
| }
|
| const dialogFormProps = {
| title: '',
| ref: dialogFormRef,
| subSubmit: async () => {
| const data = await formFieldsRef.value.onValidate();
| const {id} = formFieldsRef.value.getDefaultModel();
| const sql_segment = monacoSqlRef.value.getValue();
| props.subSubmit({id: id || tools.uuid(), ...data, sql_segment});
| },
| subReset: async () => {
| const {sql} = formFieldsRef.value.getDefaultModel();
| monacoSqlRef.value.init({sql: sql || ''});
| formFieldsRef.value.onReset();
| }
| };
|
|
| const onOpen = async (row) => {
|
| dialogFormProps.title = t(row.id ? 'common.dialog.title.edit' : 'common.dialog.title.add');
| dialogFormRef.value.$forceUpdate(dialogFormProps)
| dialogFormRef.value.onOpen();
|
| await nextTick();
|
| formFieldsRef.value.setDefaultModel(row);
| monacoSqlRef.value.init({sql: row.sql || ''});
|
| }
|
| defineExpose({
| onOpen,
| });
| </script>
|
| <style lang="scss" scoped>
| .wrapper {
| }
| </style>
|
|
