Skip to content

Commit 3779c6d

Browse files
Little-LittleProgrammerLittle-LittleProgrammer
committed
feat: 更新事件选择组件，修复参数显示和样式问题，添加确认按钮功能
1 parent f339270 commit 3779c6d

File tree

4 files changed

+145
-129
lines changed

4 files changed

+145
-129
lines changed

‎packages/editor/src/components/form/event-choose.vue‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<a-form-item v-if="item.field && paramsData.length" label="参数">
5050
<div class="q-editor-event-select-content-uni-params" v-for="c in paramsData">
5151
<a-form-item-rest>
52-
{{ c.value }}:
52+
{{ c.value }}:
5353
<a-input class="input" v-model:value="item.params[c.value]"></a-input>
5454
<a-tooltip :title="c.description">
5555
<q-antd-icon type="QuestionCircleOutlined"></q-antd-icon>
@@ -70,27 +70,27 @@ import { IServices } from '../../types';
7070
import { PropType, computed, inject, ref, watch } from 'vue';
7171
import { Hooks } from '@quantum-lowcode/schemas';
7272
defineOptions({
73-
name: 'EventSelect',
73+
name: 'EventChoose'
7474
});
7575
const props = defineProps({
7676
value: {
7777
type: Object as PropType<Hooks>,
7878
default: () => ({
7979
hookType: 'code',
8080
hookData: []
81-
}),
81+
})
8282
}
8383
});
8484
const emits = defineEmits(['change', 'update:value', 'blur']);
8585
8686
const eventData = ref<Hooks>({});
87-
const uniOptions = [{label: '组件', value: 'component', }, {label: '数据源', value: 'dataSource', }];
87+
const uniOptions = [{label: '组件', value: 'component' }, {label: '数据源', value: 'dataSource' }];
8888
const service = inject<IServices>('services');
8989
const page = computed(() => service?.editorService.get('page'));
9090
9191
watch(() => props.value, () => {
9292
eventData.value = props.value;
93-
}, {immediate: true, });
93+
}, {immediate: true });
9494
9595
const getCompSelect = computed(() => {
9696
return service?.propsService.getMethods(page.value);
@@ -103,11 +103,11 @@ const getDsSelect = computed(() => {
103103
children: ds.methods.map((method: any) => {
104104
return {
105105
label: method.title || method.name,
106-
value: `${ds.id}:${method.name}`,
107-
}
106+
value: `${ds.id}:${method.name}`
107+
};
108108
})
109-
}
110-
})
109+
};
110+
});
111111
});
112112
113113
function changeHandler(value: any) {
@@ -120,13 +120,13 @@ function addEventUni() {
120120
eventData.value.hookData?.push({
121121
field: '',
122122
type: '',
123-
params: {},
123+
params: {}
124124
});
125-
changeHandler(eventData.value)
125+
changeHandler(eventData.value);
126126
}
127127
function removeEventUni(index: number) {
128128
eventData.value.hookData?.splice(index, 1);
129-
changeHandler(eventData.value)
129+
changeHandler(eventData.value);
130130
}
131131
132132
function selectComp(item:any) {
@@ -142,7 +142,7 @@ function getCompEventSelect(item:any) {
142142
143143
function resetEventUni(item: any) {
144144
item.params = {};
145-
item.field = {}
145+
item.field = {};
146146
}
147147
148148
function selectCompEvent(item:any) {
@@ -153,34 +153,33 @@ function selectCompEvent(item:any) {
153153
item.field = key + ':' + item.event;
154154
}
155155
156-
const paramsData = ref<any>([])
156+
const paramsData = ref<any>([]);
157157
158158
function selectDsEvent(item:any) {
159159
if (!item.field) {
160160
return;
161161
}
162-
paramsData.value = []
163-
const id = item.field.split(':')[0]
162+
paramsData.value = [];
163+
const id = item.field.split(':')[0];
164164
if (id === 'http') {
165-
return
165+
return;
166166
}
167167
const name = item.field.split(':')[1];
168-
const list = service?.editorService.get('root')?.dataSources || []
169-
item.params = {}
170-
for (let child of list) {
168+
const list = service?.editorService.get('root')?.dataSources || [];
169+
item.params = {};
170+
for (const child of list) {
171171
if (child.id === id) {
172172
if (isArray(child.methods)) {
173-
for (let sub of child.methods) {
173+
for (const sub of child.methods) {
174174
if (sub.name === name) {
175-
for (let tri of (sub.params || [])) {
176-
paramsData.value.push({label: tri.description, value: tri.name})
177-
item.params[tri.name] = ''
175+
for (const tri of (sub.params || [])) {
176+
paramsData.value.push({label: tri.description, value: tri.name});
177+
item.params[tri.name] = '';
178178
}
179179
break;
180180
}
181181
}
182182
}
183-
184183
}
185184
}
186185
}

‎packages/editor/src/components/form/event-select.vue‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@
5050
<a-tree-select v-model:value="item.field" :treeData="getDsEventSelect" @change="selectDsEvent(item)"></a-tree-select>
5151
</a-form-item>
5252
<a-form-item v-if="item.field && paramsData.length" label="参数">
53-
<div class="q-editor-event-select-content-uni-params" v-for="c in paramsData">
53+
<div class="q-editor-event-select-content-uni-params" v-for="c in paramsData" :key="c.value">
5454
<a-form-item-rest>
55-
{{ c.value }}:
55+
{{ c.value }}:
5656
<a-input class="input" v-model:value="item.params[c.value]"></a-input>
5757
<a-tooltip :title="c.description">
5858
<q-antd-icon type="QuestionCircleOutlined"></q-antd-icon>
@@ -63,7 +63,11 @@
6363
</template>
6464
</a-form>
6565
</div>
66+
<div v-if="showFooter" class="q-editor-event-select-content-footer">
67+
<a-button size="small" type="primary" @click="confirmEvent">确认</a-button>
68+
</div>
6669
</div>
70+
6771
</div>
6872
</div>
6973
</template>
@@ -74,29 +78,30 @@ import { IServices } from '../../types';
7478
import { computed, inject, reactive, ref, watch } from 'vue';
7579
import { useDsList } from '../../hooks/use-ds-list';
7680
defineOptions({
77-
name: 'EventSelect',
81+
name: 'EventSelect'
7882
});
7983
const props = defineProps({
8084
value: {
8185
type: Object,
82-
default: () => ({}),
86+
default: () => ({})
8387
},
8488
options: {
8589
type: Array,
86-
default: () => [],
87-
},
90+
default: () => []
91+
}
8892
});
93+
const showFooter = ref(false);
8994
const emits = defineEmits(['change', 'update:value', 'blur']);
9095
9196
const eventKey = ref<string[]>([]);
92-
const uniOptions = [{label: '组件', value: 'component', }, {label: '数据源', value: 'dataSource', }];
97+
const uniOptions = [{label: '组件', value: 'component' }, {label: '数据源', value: 'dataSource' }];
9398
const service = inject<IServices>('services');
9499
const page = computed(() => service?.editorService.get('page'));
95-
const {getDsEventSelect} = useDsList(service)
100+
const {getDsEventSelect} = useDsList(service);
96101
97102
watch(() => props.value, () => {
98103
eventKey.value = Object.keys(props.value || []);
99-
}, {immediate: true, });
104+
}, {immediate: true });
100105
101106
const getCompSelect = computed(() => {
102107
return service?.propsService.getMethods(page.value);
@@ -106,7 +111,7 @@ function addEvent() {
106111
const defaultEvent = {
107112
type: '',
108113
field: '',
109-
params: {},
114+
params: {}
110115
};
111116
const value:any = {};
112117
for (const eventName of eventKey.value) {
@@ -125,13 +130,19 @@ function changeHandler(value: any) {
125130
emits('update:value', value);
126131
}
127132
133+
function confirmEvent() {
134+
changeHandler(props.value);
135+
showFooter.value = false;
136+
}
137+
128138
function addEventUni(key: string) {
129139
// eslint-disable-next-line
130140
props.value[key]?.push({
131141
type: '',
132142
field: '',
133-
params: {},
143+
params: {}
134144
});
145+
showFooter.value = true;
135146
}
136147
function removeEventUni(arr: any[], index: number) {
137148
arr.splice(index, 1);
@@ -150,7 +161,8 @@ function getCompEventSelect(item:any) {
150161
151162
function resetEventUni(item: any) {
152163
item.params = {};
153-
item.field = {}
164+
item.field = {};
165+
showFooter.value = true;
154166
}
155167
156168
function selectCompEvent(item:any) {
@@ -159,38 +171,39 @@ function selectCompEvent(item:any) {
159171
}
160172
const key = item.comp.split('&&&')[1] || '';
161173
item.field = key + ':' + item.event;
174+
showFooter.value = true;
162175
}
163176
164-
const paramsData = ref<any>([])
177+
const paramsData = ref<any>([]);
165178
166179
function selectDsEvent(item:any) {
167180
if (!item.field) {
168181
return;
169182
}
170-
paramsData.value = []
171-
const id = item.field.split(':')[0]
183+
paramsData.value = [];
184+
const id = item.field.split(':')[0];
172185
if (id === 'http') {
173-
return
186+
return;
174187
}
175188
const name = item.field.split(':')[1];
176-
const list = service?.editorService.get('root')?.dataSources || []
177-
item.params = {}
178-
for (let child of list) {
189+
const list = service?.editorService.get('root')?.dataSources || [];
190+
item.params = {};
191+
for (const child of list) {
179192
if (child.id === id) {
180193
if (isArray(child.methods)) {
181-
for (let sub of child.methods) {
194+
for (const sub of child.methods) {
182195
if (sub.name === name) {
183-
for (let tri of (sub.params || [])) {
184-
paramsData.value.push({label: tri.description, value: tri.name})
185-
item.params[tri.name] = ''
196+
for (const tri of (sub.params || [])) {
197+
paramsData.value.push({label: tri.description, value: tri.name});
198+
item.params[tri.name] = '';
186199
}
187200
break;
188201
}
189202
}
190203
}
191-
192204
}
193205
}
206+
showFooter.value = true;
194207
}
195208
196209
</script>
@@ -225,6 +238,10 @@ function selectDsEvent(item:any) {
225238
}
226239
}
227240
}
241+
&-footer {
242+
margin: 4px 0;
243+
text-align: right;
244+
}
228245
}
229246
}
230247
[data-theme='dark'] {

‎packages/editor/src/components/layouts/props-editor.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } fr
2828
import { IFormValue, IServices } from '../../types';
2929
import { isArray, isNumber } from '@quantum-lowcode/utils';
3030
defineOptions({
31-
name: 'PropsEditor',
31+
name: 'PropsEditor'
3232
});
3333
3434
const services = inject<IServices>('services');
@@ -68,15 +68,15 @@ const init = async(changeNode = false) => {
6868
props: services?.propsService.getConfig(type),
6969
style: services?.propsService.getConfig('style'),
7070
ifShow: services?.propsService.getConfig('ifShow'),
71-
lifeHooks: services?.propsService.getConfig('lifeHooks'),
71+
lifeHooks: services?.propsService.getConfig('lifeHooks')
7272
};
7373
}
7474
nextTick(async() => {
7575
formModel.value = {
7676
...node.value,
7777
customStyleSwitch: curStyleSwitch.value,
78-
customStyle: node.value?.style,
79-
} || {};
78+
customStyle: node.value?.style
79+
};
8080
});
8181
};
8282
@@ -99,19 +99,19 @@ function changeValue(value) {
9999
}
100100
value.style = {
101101
...value.customStyle,
102-
...value.style,
102+
...value.style
103103
};
104104
if (value.customStyle) {
105105
Reflect.deleteProperty(value, 'customStyle');
106106
}
107107
const finValue = {
108108
...node.value,
109-
...value,
109+
...value
110110
};
111111
if (finValue.componentProps?.events) {
112112
finValue.componentProps = {
113113
...finValue.componentProps,
114-
...finValue.componentProps.events,
114+
...finValue.componentProps.events
115115
};
116116
}
117117
console.log('finValue', finValue, value);
@@ -125,7 +125,7 @@ onMounted(() => {
125125
valuesFn.value.push({
126126
setValue: item.setFieldsValue,
127127
reset: item.resetFields,
128-
getValue: item.getFieldsValue,
128+
getValue: item.getFieldsValue
129129
});
130130
});
131131
});

0 commit comments

Comments
 (0)