DataFlowMethod.vue
2.5 KB
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
<template>
<div class="data-flow-method">
<BasicForm @register="register" />
<Button
type="primary"
class="data-flow-method-button"
@click="currentDataFlowMethodHanleNextStep"
>下一步</Button
>
</div>
</template>
<script lang="ts" setup name="DataFlowMethod">
import { BasicForm, useForm } from '/@/components/Form';
import { modeForm, modelFormPublicConfig } from './config';
import { BasicInfoFormField } from './enum';
import { BasicInfoRecord } from './types';
import { Button } from 'ant-design-vue';
import { ref, unref } from 'vue';
defineProps({
saveContent: {
type: Function,
},
});
const emit = defineEmits(['currentDataFlowMethodEmitNext']);
const disabled = ref<boolean>(false);
const [register, { validateFields, setFieldsValue, resetFields, setProps }] = useForm({
schemas: modeForm(unref(disabled)),
...modelFormPublicConfig,
});
const getValue = async () => {
const record = (await validateFields()) || {};
const { type, remark } = record;
const datasourceType = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_TYPE);
const convertDevices = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_DEVICE);
const convertProducts = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_PRODUCT);
return {
type,
remark,
datasourceType,
datasourceContent: {
convertProducts,
convertDevices,
} as unknown as BasicInfoRecord,
};
};
const setValue = (record: Recordable) => {
const value = {
...record,
[BasicInfoFormField.DATA_SOURCE_PRODUCT]: record?.datasourceContent?.convertProducts || [],
[BasicInfoFormField.DATA_SOURCE_DEVICE]: record?.datasourceContent?.convertDevices,
[BasicInfoFormField.CONVERT_CONFIG_ID]: record?.id,
};
setFieldsValue(value);
};
const currentDataFlowMethodHanleNextStep = () => {
emit('currentDataFlowMethodEmitNext', getValue());
};
const setDisabledProps = (value) => {
setProps(value);
disabled.value = false;
};
const setCancelDisabled = () => {
disabled.value = false;
};
const resetValue = () => resetFields();
defineExpose({
getValue,
setValue,
resetValue,
setDisabledProps,
setCancelDisabled,
});
</script>
<style lang="less" scoped>
.data-flow-method {
margin: 0 auto;
width: 600px;
.data-flow-method-button {
position: absolute;
bottom: 10%;
right: 50%;
transform: translateX(50%);
}
}
</style>