Commit 91ea8d9473dd52a18b7653be84e1535f70f80b05

Authored by fengwotao
1 parent 8353fbf4

pref:DEFECT-1158 新增转换脚本时,加一个测试功能

1   -<template>
2   - <div>
3   - <a-form
4   - ref="formRef"
5   - :model="scriptForm"
6   - name="basic"
7   - :label-col="{ span: 4 }"
8   - :wrapper-col="{ span: 16 }"
9   - autocomplete="off"
10   - >
11   - <a-form-item
12   - :label="ifAdd ? '名称' : '输入参数(params)'"
13   - :name="ifAdd ? 'name' : 'params'"
14   - :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
15   - >
16   - <a-input
17   - v-if="ifAdd"
18   - :maxlength="36"
19   - @change="handleInputChange"
20   - v-model:value="scriptForm.name"
21   - placeholder="请输入脚本名称"
22   - />
23   - <a-input
24   - @change="handleInputChange"
25   - v-else
26   - v-model:value="scriptForm.params"
27   - placeholder="请输入参数"
28   - />
29   - </a-form-item>
30   - <a-form-item
31   - label="脚本类型"
32   - name="scriptType"
33   - :rules="[{ required: true, message: '请选择脚本类型' }]"
34   - >
35   - <a-space direction="vertical">
36   - <a-radio-group
37   - @change="handleScriptType"
38   - v-model:value="scriptForm.scriptType"
39   - :options="scriptTypeOptions"
40   - />
41   - </a-space>
42   - </a-form-item>
43   - <a-form-item
44   - label="保存原始数据"
45   - name="saveOriginalData"
46   - :rules="[{ required: true, message: '请选择保存原始数据' }]"
47   - >
48   - <a-space direction="vertical">
49   - <a-radio-group v-model:value="scriptForm.saveOriginalData" :options="originalOptions" />
50   - </a-space>
51   - </a-form-item>
52   - <a-form-item label="脚本内容" :name="ifAdd ? 'convertJs' : 'script'">
53   - <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
54   - <template #extra>
55   - <a-button @click="handleFormat" size="small">格式化</a-button>
56   - <Tooltip :title="defaultAuthTitle" class="ml-2">
57   - <QuestionCircleOutlined style="font-size: 1rem" />
58   - </Tooltip>
59   - <Tooltip :title="defaultUpTitle" class="ml-2">
60   - <QuestionCircleOutlined style="font-size: 1rem" />
61   - </Tooltip>
62   - </template>
63   - <div ref="aceRef" class="overflow-hidden"></div>
64   - </Card>
65   - <Button @click="handleCopy" class="mt-4">
66   - <template #icon>
67   - <CopyOutlined />
68   - </template>
69   - copy
70   - </Button>
71   - </a-form-item>
72   - <a-form-item
73   - :label="ifAdd ? '备注' : '输出参数(output)'"
74   - :name="ifAdd ? 'description' : 'output'"
75   - >
76   - <a-textarea
77   - :rows="3"
78   - v-if="ifAdd"
79   - v-model:value="scriptForm.description"
80   - placeholder="请输入备注"
81   - :maxlength="255"
82   - />
83   - <a-textarea
84   - disabled
85   - :rows="5"
86   - v-else
87   - v-model:value="scriptForm.output"
88   - placeholder="输出参数为服务端返回的内容"
89   - :maxlength="255"
90   - />
91   - </a-form-item>
92   - </a-form>
93   - </div>
94   -</template>
95   -<script setup lang="ts">
96   - import { ref, unref, reactive, onMounted, toRefs, nextTick, computed } from 'vue';
97   - import ace from 'ace-builds';
98   - import { Card, Button, Tooltip } from 'ant-design-vue';
99   - import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
100   - import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题
101   - import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
102   - import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
103   - import { CopyOutlined } from '@ant-design/icons-vue';
104   - import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
105   - import { useMessage } from '/@/hooks/web/useMessage';
106   - import { findDictItemByCode } from '/@/api/system/dict';
107   - import { QuestionCircleOutlined } from '@ant-design/icons-vue';
108   - import { defaultAuthTitle, defaultUpTitle, defaultScriptTypeContent } from './config.data';
109   - import { useAppStore } from '/@/store/modules/app';
110   -
111   - defineEmits(['register']);
112   - const props = defineProps({
113   - ifAdd: { type: Boolean, default: true },
114   - });
115   -
116   - const scriptForm = reactive({
117   - name: '',
118   - description: '',
119   - convertJs: '',
120   - script: '',
121   - params: '',
122   - output: '',
123   - scriptType: 'TRANSPORT_TCP_UP',
124   - saveOriginalData: 'true',
125   - });
126   -
127   - const reportTypeOptions = reactive({
128   - originalOptions: [],
129   - scriptTypeOptions: [],
130   - });
131   -
132   - const { originalOptions, scriptTypeOptions } = toRefs(reportTypeOptions);
133   -
134   - const { createMessage } = useMessage();
135   -
136   - const { clipboardRef, copiedRef } = useCopyToClipboard();
137   -
138   - const aceEditor = ref();
139   -
140   - const aceRef = ref();
141   -
142   - const userStore = useAppStore();
143   -
144   - const getAceClass = computed((): string => userStore.getDarkMode);
145   -
146   - const setDefaultRadio = (p2, p3) => {
147   - scriptForm.saveOriginalData = p2;
148   - scriptForm.scriptType = p3;
149   - };
150   -
151   - const getDictValue = async (dict_type) => {
152   - const res = await findDictItemByCode({
153   - dictCode: dict_type,
154   - });
155   - return res.map((m) => {
156   - return { label: m.itemText, value: m.itemValue };
157   - });
158   - };
159   -
160   - onMounted(async () => {
161   - reportTypeOptions.originalOptions = (await getDictValue('original_data')) as never as any;
162   - reportTypeOptions.scriptTypeOptions = (await getDictValue('script_type')) as never as any;
163   - });
164   -
165   - // 初始化编辑器
166   - const initEditor = () => {
167   - aceEditor.value = ace.edit(aceRef.value, {
168   - maxLines: 12, // 最大行数,超过会自动出现滚动条
169   - minLines: 12, // 最小行数,还未到最大行数时,编辑器会自动伸缩大小
170   - fontSize: 14, // 编辑器内字体大小
171   - theme: 'ace/theme/chrome', // 默认设置的主题
172   - mode: 'ace/mode/javascript', // 默认设置的语言模式
173   - tabSize: 2, // 制表符设置为 4 个空格大小
174   - });
175   -
176   - aceEditor.value.setOptions({
177   - enableBasicAutocompletion: true,
178   - enableLiveAutocompletion: true,
179   - theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
180   - });
181   - aceEditor.value.setValue('');
182   - beautify(aceEditor.value.session);
183   - switchScriptTypeGetContent('TRANSPORT_TCP_UP');
184   - };
185   -
186   - const handleScriptType = ({ target }) => {
187   - const { value } = target;
188   - switchScriptTypeGetContent(value);
189   - };
190   -
191   - const switchScriptTypeGetContent = (type) => {
192   - aceEditor.value.setValue(defaultScriptTypeContent[type]);
193   - };
194   -
195   - const handleCopy = () => {
196   - const valueRef = aceEditor.value.getValue();
197   - const value = unref(valueRef);
198   - if (!value) {
199   - createMessage.warning('请输入要拷贝的内容!');
200   - return;
201   - }
202   - clipboardRef.value = value;
203   - if (unref(copiedRef)) {
204   - createMessage.success('复制成功!');
205   - }
206   - };
207   -
208   - const formRef = ref();
209   -
210   - const getFormData = async () => {
211   - const value = await formRef.value.validateFields();
212   - if (props.ifAdd) {
213   - scriptForm.convertJs = aceEditor.value.getValue();
214   - if (scriptForm.convertJs == '') {
215   - createMessage.error('请编写脚本内容');
216   - throw '请编写脚本内容';
217   - }
218   - } else {
219   - scriptForm.script = aceEditor.value.getValue();
220   - if (scriptForm.script == '') {
221   - createMessage.error('请编写脚本内容');
222   - throw '请编写脚本内容';
223   - }
224   - }
225   - if (!value) return;
226   - if (scriptForm.params) {
227   - const trimParams = scriptForm.params.replace(/\s*/g, '');
228   - Reflect.set(value, 'params', trimParams);
229   - }
230   - if (scriptForm.convertJs.length > 1000) {
231   - createMessage.error('脚本内容长度不能大于1000');
232   - throw '脚本内容长度不能大于1000';
233   - }
234   - return {
235   - ...value,
236   - ...{ convertJs: props.ifAdd ? scriptForm.convertJs : null },
237   - ...{ script: !props.ifAdd ? scriptForm.script : null },
238   - ...{ saveOriginalData: scriptForm.saveOriginalData === 'false' ? false : true },
239   - };
240   - };
241   -
242   - const handleInputChange = (e) => {
243   - const trimParams = e.target.value.replace(/\s*/g, '');
244   - Reflect.set(scriptForm, 'params', trimParams);
245   - if (scriptForm.scriptType === 'TRANSPORT_TCP_DOWN') {
246   - aceEditor.value.setValue(`out.datas = "${scriptForm.params}";out.deviceName = "sensor";`);
247   - }
248   - };
249   -
250   - const setFormData = (v) => {
251   - if (v) {
252   - for (let i in scriptForm) {
253   - Reflect.set(scriptForm, i, v[i]);
254   - }
255   - nextTick(() => {
256   - setTimeout(() => {
257   - scriptForm.saveOriginalData = v.saveOriginalData === false ? 'false' : 'true';
258   - }, 10);
259   - });
260   - aceEditor.value.setValue(v.convertJs);
261   - handleFormat();
262   - }
263   - };
264   -
265   - const setScriptContentData = (v) => {
266   - aceEditor.value.setValue(v);
267   - handleFormat();
268   - };
269   -
270   - const resetFormData = () => {
271   - for (let i in scriptForm) {
272   - Reflect.set(scriptForm, i, '');
273   - }
274   - };
275   -
276   - const setScriptOutputData = (v) => {
277   - scriptForm.output = v;
278   - };
279   -
280   - const handleFormat = () => {
281   - beautify(aceEditor.value.session);
282   - aceEditor.value.getSession().setUseWrapMode(true);
283   - };
284   -
285   - defineExpose({
286   - initEditor,
287   - getFormData,
288   - resetFormData,
289   - setFormData,
290   - setScriptContentData,
291   - setScriptOutputData,
292   - setDefaultRadio,
293   - });
294   -</script>
295   -<style lang="less" scoped>
296   - @import url('./ConverScriptModal.less');
297   -</style>
  1 +<template>
  2 + <div>
  3 + <a-form
  4 + ref="formRef"
  5 + :model="scriptForm"
  6 + name="basic"
  7 + :label-col="{ span: 4 }"
  8 + :wrapper-col="{ span: 16 }"
  9 + autocomplete="off"
  10 + >
  11 + <a-form-item
  12 + :label="ifAdd ? '名称' : '输入参数(params)'"
  13 + :name="ifAdd ? 'name' : 'params'"
  14 + :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
  15 + >
  16 + <a-input-group compact>
  17 + <a-input
  18 + style="width: calc(100% - 200px)"
  19 + v-if="ifAdd"
  20 + :maxlength="36"
  21 + @change="handleInputChange"
  22 + v-model:value="scriptForm.name"
  23 + placeholder="请输入脚本名称"
  24 + />
  25 + <a-input
  26 + @change="handleInputChange"
  27 + v-else
  28 + v-model:value="scriptForm.params"
  29 + placeholder="请输入参数"
  30 + />
  31 + <a-button @click="onHandleClick(text)" v-show="ifAdd && !view" type="primary">
  32 + 测试
  33 + </a-button>
  34 + </a-input-group>
  35 + </a-form-item>
  36 + <a-form-item
  37 + label="脚本类型"
  38 + name="scriptType"
  39 + :rules="[{ required: true, message: '请选择脚本类型' }]"
  40 + >
  41 + <a-space direction="vertical">
  42 + <a-radio-group
  43 + @change="handleScriptType"
  44 + v-model:value="scriptForm.scriptType"
  45 + :options="scriptTypeOptions"
  46 + />
  47 + </a-space>
  48 + </a-form-item>
  49 + <a-form-item
  50 + label="保存原始数据"
  51 + name="saveOriginalData"
  52 + :rules="[{ required: true, message: '请选择保存原始数据' }]"
  53 + >
  54 + <a-space direction="vertical">
  55 + <a-radio-group v-model:value="scriptForm.saveOriginalData" :options="originalOptions" />
  56 + </a-space>
  57 + </a-form-item>
  58 + <a-form-item label="脚本内容" :name="ifAdd ? 'convertJs' : 'script'">
  59 + <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
  60 + <template #extra>
  61 + <a-button @click="handleFormat" size="small">格式化</a-button>
  62 + <Tooltip v-if="!ifAdd" :title="defaultAuthTitle" class="ml-2">
  63 + <QuestionCircleOutlined style="font-size: 1rem" />
  64 + </Tooltip>
  65 + <Tooltip v-if="!ifAdd" :title="defaultUpTitle" class="ml-2">
  66 + <QuestionCircleOutlined style="font-size: 1rem" />
  67 + </Tooltip>
  68 + </template>
  69 + <div ref="aceRef" class="overflow-hidden"></div>
  70 + </Card>
  71 + <Button @click="handleCopy" class="mt-4">
  72 + <template #icon>
  73 + <CopyOutlined />
  74 + </template>
  75 + copy
  76 + </Button>
  77 + </a-form-item>
  78 + <a-form-item
  79 + :label="ifAdd ? '备注' : '输出参数(output)'"
  80 + :name="ifAdd ? 'description' : 'output'"
  81 + >
  82 + <a-textarea
  83 + :rows="3"
  84 + v-if="ifAdd"
  85 + v-model:value="scriptForm.description"
  86 + placeholder="请输入备注"
  87 + :maxlength="255"
  88 + />
  89 + <a-textarea
  90 + :rows="5"
  91 + v-else
  92 + v-model:value="scriptForm.output"
  93 + placeholder="输出参数为服务端返回的内容"
  94 + :maxlength="255"
  95 + />
  96 + </a-form-item>
  97 + </a-form>
  98 + <TestScriptModal @register="registerModal" @success="handleSuccess" />
  99 + </div>
  100 +</template>
  101 +<script setup lang="ts">
  102 + import { ref, unref, reactive, onMounted, toRefs, nextTick, computed } from 'vue';
  103 + import ace from 'ace-builds';
  104 + import { Card, Button, Tooltip } from 'ant-design-vue';
  105 + import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
  106 + import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题
  107 + import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
  108 + import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
  109 + import { CopyOutlined } from '@ant-design/icons-vue';
  110 + import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  111 + import { useMessage } from '/@/hooks/web/useMessage';
  112 + import { findDictItemByCode } from '/@/api/system/dict';
  113 + import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  114 + import { defaultAuthTitle, defaultUpTitle, defaultScriptTypeContent } from './config.data';
  115 + import { useAppStore } from '/@/store/modules/app';
  116 + import TestScriptModal from './TestScriptModal.vue';
  117 + import { useModal } from '/@/components/Modal';
  118 +
  119 + defineEmits(['register']);
  120 + const props = defineProps({
  121 + ifAdd: { type: Boolean, default: true },
  122 + text: { type: String, default: '' },
  123 + view: { type: Boolean, default: false },
  124 + });
  125 +
  126 + const scriptForm = reactive({
  127 + name: '',
  128 + description: '',
  129 + convertJs: '',
  130 + script: '',
  131 + params: '',
  132 + output: '',
  133 + scriptType: 'TRANSPORT_TCP_UP',
  134 + saveOriginalData: 'true',
  135 + });
  136 +
  137 + const reportTypeOptions = reactive({
  138 + originalOptions: [],
  139 + scriptTypeOptions: [],
  140 + });
  141 +
  142 + const { originalOptions, scriptTypeOptions } = toRefs(reportTypeOptions);
  143 +
  144 + const { createMessage } = useMessage();
  145 +
  146 + const { clipboardRef, copiedRef } = useCopyToClipboard();
  147 +
  148 + const aceEditor = ref();
  149 +
  150 + const aceRef = ref();
  151 +
  152 + const userStore = useAppStore();
  153 +
  154 + const getAceClass = computed((): string => userStore.getDarkMode);
  155 +
  156 + const setDefaultRadio = (p2, p3) => {
  157 + scriptForm.saveOriginalData = p2;
  158 + scriptForm.scriptType = p3;
  159 + };
  160 +
  161 + const getDictValue = async (dict_type) => {
  162 + const res = await findDictItemByCode({
  163 + dictCode: dict_type,
  164 + });
  165 + return res.map((m) => {
  166 + return { label: m.itemText, value: m.itemValue };
  167 + });
  168 + };
  169 +
  170 + onMounted(async () => {
  171 + reportTypeOptions.originalOptions = (await getDictValue('original_data')) as never as any;
  172 + reportTypeOptions.scriptTypeOptions = (await getDictValue('script_type')) as never as any;
  173 + });
  174 +
  175 + // 初始化编辑器
  176 + const initEditor = () => {
  177 + aceEditor.value = ace.edit(aceRef.value, {
  178 + maxLines: 12, // 最大行数,超过会自动出现滚动条
  179 + minLines: 12, // 最小行数,还未到最大行数时,编辑器会自动伸缩大小
  180 + fontSize: 14, // 编辑器内字体大小
  181 + theme: 'ace/theme/chrome', // 默认设置的主题
  182 + mode: 'ace/mode/javascript', // 默认设置的语言模式
  183 + tabSize: 2, // 制表符设置为 4 个空格大小
  184 + });
  185 +
  186 + aceEditor.value.setOptions({
  187 + enableBasicAutocompletion: true,
  188 + enableLiveAutocompletion: true,
  189 + theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
  190 + });
  191 + aceEditor.value.setValue('');
  192 + beautify(aceEditor.value.session);
  193 + switchScriptTypeGetContent('TRANSPORT_TCP_UP');
  194 + };
  195 +
  196 + const handleScriptType = ({ target }) => {
  197 + const { value } = target;
  198 + switchScriptTypeGetContent(value);
  199 + };
  200 +
  201 + const switchScriptTypeGetContent = (type) => {
  202 + aceEditor.value.setValue(defaultScriptTypeContent[type]);
  203 + };
  204 +
  205 + const handleCopy = () => {
  206 + const valueRef = aceEditor.value.getValue();
  207 + const value = unref(valueRef);
  208 + if (!value) {
  209 + createMessage.warning('请输入要拷贝的内容!');
  210 + return;
  211 + }
  212 + clipboardRef.value = value;
  213 + if (unref(copiedRef)) {
  214 + createMessage.success('复制成功!');
  215 + }
  216 + };
  217 +
  218 + const formRef = ref();
  219 +
  220 + const getFormData = async () => {
  221 + const value = await formRef.value.validateFields();
  222 + if (props.ifAdd) {
  223 + scriptForm.convertJs = aceEditor.value.getValue();
  224 + if (scriptForm.convertJs == '') {
  225 + createMessage.error('请编写脚本内容');
  226 + throw '请编写脚本内容';
  227 + }
  228 + } else {
  229 + scriptForm.script = aceEditor.value.getValue();
  230 + if (scriptForm.script == '') {
  231 + createMessage.error('请编写脚本内容');
  232 + throw '请编写脚本内容';
  233 + }
  234 + }
  235 + if (!value) return;
  236 + if (scriptForm.params) {
  237 + const trimParams = scriptForm.params.replace(/\s*/g, '');
  238 + Reflect.set(value, 'params', trimParams);
  239 + }
  240 + if (scriptForm.convertJs.length > 1000) {
  241 + createMessage.error('脚本内容长度不能大于1000');
  242 + throw '脚本内容长度不能大于1000';
  243 + }
  244 + return {
  245 + ...value,
  246 + ...{ convertJs: props.ifAdd ? scriptForm.convertJs : null },
  247 + ...{ script: !props.ifAdd ? scriptForm.script : null },
  248 + ...{ saveOriginalData: scriptForm.saveOriginalData === 'false' ? false : true },
  249 + };
  250 + };
  251 +
  252 + const handleInputChange = (e) => {
  253 + const trimParams = e.target.value.replace(/\s*/g, '');
  254 + Reflect.set(scriptForm, 'params', trimParams);
  255 + if (scriptForm.scriptType === 'TRANSPORT_TCP_DOWN') {
  256 + aceEditor.value.setValue(`out.datas = "${scriptForm.params}";out.deviceName = "sensor";`);
  257 + }
  258 + };
  259 +
  260 + const getRecordId = ref('');
  261 +
  262 + const setFormData = (v) => {
  263 + if (v) {
  264 + getRecordId.value = v?.id;
  265 + for (let i in scriptForm) {
  266 + Reflect.set(scriptForm, i, v[i]);
  267 + }
  268 + nextTick(() => {
  269 + setTimeout(() => {
  270 + scriptForm.saveOriginalData = v.saveOriginalData === false ? 'false' : 'true';
  271 + }, 10);
  272 + });
  273 + aceEditor.value.setValue(v.convertJs);
  274 + handleFormat();
  275 + }
  276 + };
  277 +
  278 + const setScriptContentData = (v) => {
  279 + aceEditor.value.setValue(v);
  280 + handleFormat();
  281 + };
  282 +
  283 + const resetFormData = () => {
  284 + for (let i in scriptForm) {
  285 + Reflect.set(scriptForm, i, '');
  286 + }
  287 + };
  288 +
  289 + const setScriptOutputData = (v) => {
  290 + scriptForm.output = v;
  291 + };
  292 +
  293 + const handleFormat = () => {
  294 + beautify(aceEditor.value.session);
  295 + aceEditor.value.getSession().setUseWrapMode(true);
  296 + };
  297 +
  298 + const [registerModal, { openModal }] = useModal();
  299 +
  300 + const onHandleClick = (o) => {
  301 + openModal(true, {
  302 + isAuth: '',
  303 + isUpdate: false,
  304 + record: o === 'add' ? null : getRecordId.value,
  305 + isTest: true,
  306 + isText: 'test',
  307 + isTitle: 'test',
  308 + });
  309 + };
  310 +
  311 + defineExpose({
  312 + initEditor,
  313 + getFormData,
  314 + resetFormData,
  315 + setFormData,
  316 + setScriptContentData,
  317 + setScriptOutputData,
  318 + setDefaultRadio,
  319 + });
  320 +</script>
  321 +<style lang="less" scoped>
  322 + @import url('./ConverScriptModal.less');
  323 +</style>
... ...
... ... @@ -10,7 +10,12 @@
10 10 @cancel="handleCancel"
11 11 @ok="handleSubmit"
12 12 >
13   - <ConverScript :ifAdd="isTest ? false : true" ref="converScriptRef" />
  13 + <ConverScript
  14 + :view="isViewDetail"
  15 + :text="isTitle"
  16 + :ifAdd="isTest ? false : true"
  17 + ref="converScriptRef"
  18 + />
14 19 </BasicModal>
15 20 </div>
16 21 </template>
... ...
  1 +<template>
  2 + <div>
  3 + <BasicModal
  4 + destroyOnClose
  5 + v-bind="$attrs"
  6 + width="60rem"
  7 + @register="register"
  8 + :title="getTitle"
  9 + :minHeight="500"
  10 + @cancel="handleCancel"
  11 + @ok="handleSubmit"
  12 + >
  13 + <ConverScript
  14 + :view="isViewDetail"
  15 + :text="isTitle"
  16 + :ifAdd="isTest ? false : true"
  17 + ref="converScriptRef"
  18 + />
  19 + </BasicModal>
  20 + </div>
  21 +</template>
  22 +<script setup lang="ts">
  23 + import { ref, computed, unref, reactive } from 'vue';
  24 + import { BasicModal, useModalInner } from '/@/components/Modal';
  25 + import ConverScript from './ConverScript.vue';
  26 + import {
  27 + createOrEditScriptManage,
  28 + getScriptManageDetail,
  29 + testScriptManage,
  30 + } from '/@/api/scriptmanage/scriptManager';
  31 + import { useMessage } from '/@/hooks/web/useMessage';
  32 +
  33 + const emits = defineEmits(['success', 'register']);
  34 + const { createMessage } = useMessage();
  35 + const converScriptRef = ref<InstanceType<typeof ConverScript>>();
  36 + const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
  37 + const isUpdate = ref(false);
  38 + const isViewDetail = ref('');
  39 + const isTest = ref(false);
  40 + const isText = ref('');
  41 + const isTitle = ref('');
  42 + const editData = reactive({
  43 + data: {},
  44 + });
  45 + const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  46 + setModalProps({ loading: true });
  47 + handleCancel(false);
  48 + isUpdate.value = data.isUpdate;
  49 + isViewDetail.value = data.isView;
  50 + isTest.value = data.isTest;
  51 + isText.value = data.isText;
  52 + isTitle.value = data.isTitle;
  53 + editData.data = data.record;
  54 + setModalProps({ loading: false });
  55 + converScriptRef.value?.initEditor();
  56 + if (!unref(isViewDetail)) {
  57 + const title =
  58 + unref(isTitle) == 'edit'
  59 + ? '编辑转换脚本'
  60 + : unref(isTitle) == 'add'
  61 + ? '新增转换脚本'
  62 + : '测试转换脚本';
  63 + const okText = isText.value == 'test' ? '测试' : '确定';
  64 + if (unref(isTitle) == 'add') {
  65 + converScriptRef.value?.setDefaultRadio('true', 'TRANSPORT_TCP_UP');
  66 + }
  67 + if (unref(isTitle) == 'edit') {
  68 + converScriptRef.value?.setFormData(data.record);
  69 + }
  70 + if (unref(isTitle) == 'test') {
  71 + if (data.record) {
  72 + const res = await getScriptManageDetail(data.record);
  73 + converScriptRef.value?.setFormData(res);
  74 + } else {
  75 + converScriptRef.value?.setDefaultRadio('true', 'TRANSPORT_TCP_UP');
  76 + }
  77 + }
  78 + setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
  79 + if (!unref(isUpdate)) {
  80 + }
  81 + } else {
  82 + setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看转换脚本' });
  83 + const res = await getScriptManageDetail(data.record.id);
  84 + converScriptRef.value?.setFormData(res || {});
  85 + }
  86 + });
  87 +
  88 + const handleSubmit = async () => {
  89 + setModalProps({ confirmLoading: true });
  90 + try {
  91 + const val = await converScriptRef.value?.getFormData();
  92 + const tempObj = {
  93 + ...editData.data,
  94 + ...val,
  95 + };
  96 + const res: any =
  97 + isText.value == 'test'
  98 + ? await testScriptManage(val)
  99 + : await createOrEditScriptManage(tempObj);
  100 + createMessage.success(
  101 + unref(isTitle) == 'edit'
  102 + ? '编辑转换脚本成功'
  103 + : unref(isTitle) == 'add'
  104 + ? '新增转换脚本成功'
  105 + : '测试转换脚本成功'
  106 + );
  107 + if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
  108 + setTimeout(() => {
  109 + closeModal();
  110 + }, 10);
  111 + emits('success', {
  112 + res,
  113 + text: isText.value,
  114 + });
  115 + } else {
  116 + if (res) {
  117 + converScriptRef.value?.setScriptOutputData(res?.output || res?.error);
  118 + }
  119 + }
  120 + } finally {
  121 + setModalProps({ confirmLoading: false });
  122 + }
  123 + };
  124 + const handleCancel = (flag) => {
  125 + if (flag) {
  126 + closeModal();
  127 + }
  128 + converScriptRef.value?.resetFormData();
  129 + };
  130 +</script>
  131 +<style lang="less" scoped>
  132 + @import url('./ConverScriptModal.less');
  133 +</style>
... ...