action.vue
3.76 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
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
124
125
126
127
128
129
130
131
<template>
<CollapseContainer style="background-color: #eeeeee" :title="`执行动作 ${actionIndex + 1}`">
<template #action>
<Tooltip title="移除" v-if="actionData.length > 1">
<Icon
icon="fluent:delete-off-20-regular"
size="20"
class="mr-2 cursor-pointer"
@click="handleDelete(actionIndex)"
/>
</Tooltip>
</template>
<BasicForm @register="registerAction">
<template #doContext>
<div class="flex">
<div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
<Tooltip
title='{"method":"setDOValue","params":{"devID":"492S211218028819","data":{"DO1":1}}}'
class="ml-2"
>
<QuestionCircleOutlined style="font-size: 1rem"
/></Tooltip>
</div>
</template>
</BasicForm>
</CollapseContainer>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, nextTick, unref } from 'vue';
import { CollapseContainer } from '/@/components/Container/index';
import { BasicForm, useForm } from '/@/components/Form/index';
import { Tooltip } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import { useActionDrawerSchema } from '../config';
import jsoneditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';
import { Tooltip } from 'ant-design-vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
components: { CollapseContainer, BasicForm, Tooltip, Icon, Tooltip, QuestionCircleOutlined },
props: {
actionIndex: {
type: Number,
required: true,
},
actionData: {
type: Array,
default: () => [],
},
},
emits: ['deleteAction'],
setup(props, { emit }) {
const [
registerAction,
{ getFieldsValue, resetFields, updateSchema, setFieldsValue, validate },
] = useForm({
schemas: useActionDrawerSchema,
showActionButtonGroup: false,
});
const getFieldsValueFunc = () => ({
...getFieldsValue(),
doContext: unref(jsonInstance.value).get(),
});
const setFieldsFormValueFun = (fieldsValue) => {
setFieldsValue(fieldsValue);
};
const resetFieldsValueFunc = () => resetFields();
const updateFieldDeviceId = (deviceList) => {
updateSchema({
field: 'deviceId',
componentProps: {
options: deviceList,
},
});
};
const validateForm = () => {
return validate();
};
const handleDelete = (actionIndex) => {
emit('deleteAction', actionIndex);
};
// json 以及初始化JSON
const jsoneditorRef = ref();
const jsonValue = ref({});
const jsonInstance = ref();
onMounted(() => {
nextTick(() => {
let options = {
mode: 'code',
mainMenuBar: false,
statusBar: false,
onError(err) {
alert('EF1 ->' + err.toString());
},
};
let editor = new jsoneditor(jsoneditorRef.value, options);
editor.set(jsonValue.value);
jsonInstance.value = editor;
});
});
const getJsonValue = () => unref(jsonInstance).get();
const setJsonValue = (Json) => {
nextTick(() => {
unref(jsonInstance).set(Json);
});
};
return {
updateFieldDeviceId,
resetFieldsValueFunc,
getFieldsValueFunc,
validateForm,
registerAction,
handleDelete,
setFieldsFormValueFun,
jsoneditorRef,
jsonInstance,
getJsonValue,
setJsonValue,
};
},
});
</script>
<style>
.jsoneditor {
border: none;
}
</style>