简柏林 / thingskit-front · Commits

Commit cd8fea6b744fcac3fe04b103962d2a9df09fe9c6

Authored by xp.Huang
2 parents 03e4203e 828c82a5

Merge branch 'ft_local_dev' into 'main' 

联调脚本管理服务端

See merge request huang/yun-teng-iot-front!370
Inline Side-by-side
Showing 4 changed files with 67 additions and 156 deletions
... ... @@ -10,11 +10,11 @@
10 10 >
11 11 <a-form-item
12 12 :label="ifAdd ? '名称' : '输入参数'"
13   - :name="ifAdd ? 'name' : 'inputParams'"
  13 + :name="ifAdd ? 'name' : 'params'"
14 14 :rules="[{ required: true, message: ifAdd ? '请输入脚本名称' : '请输入参数' }]"
15 15 >
16 16 <a-input v-if="ifAdd" v-model:value="scriptForm.name" placeholder="请输入脚本名称" />
17   - <a-input v-else v-model:value="scriptForm.inputParams" placeholder="请输入参数" />
  17 + <a-input v-else v-model:value="scriptForm.params" placeholder="请输入参数" />
18 18 </a-form-item>
19 19 <a-form-item
20 20 label="上报数据类型"
... ... @@ -25,10 +25,13 @@
25 25 <a-radio-group v-model:value="scriptForm.reportType" :options="typeOptions" />
26 26 </a-space>
27 27 </a-form-item>
28   - <a-form-item label="脚本内容" name="convertJs">
  28 + <a-form-item label="脚本内容" :name="ifAdd ? 'convertJs' : 'script'">
29 29 <Card title="脚本内容" :bodyStyle="{ padding: 0, height: '280px' }">
30 30 <template #extra>
31 31 <a-button @click="handleFormat" size="small">格式化</a-button>
  32 + <Tooltip :title="defaultTitle" class="ml-2">
  33 + <QuestionCircleOutlined style="font-size: 1rem" />
  34 + </Tooltip>
32 35 </template>
33 36 <div ref="aceRef" class="overflow-hidden"></div>
34 37 </Card>
... ... @@ -39,21 +42,18 @@
39 42 copy
40 43 </Button>
41 44 </a-form-item>
42   - <a-form-item
43   - :label="ifAdd ? '备注' : '输出参数'"
44   - :name="ifAdd ? 'description' : 'outputParams'"
45   - >
  45 + <a-form-item :label="ifAdd ? '备注' : '输出参数'" :name="ifAdd ? 'description' : 'output'">
46 46 <a-textarea
47   - :rows="5"
  47 + :rows="3"
48 48 v-if="ifAdd"
49 49 v-model:value="scriptForm.description"
50 50 placeholder="请输入备注"
51 51 />
52 52 <a-textarea
53   - :rows="5"
  53 + :rows="3"
54 54 v-else
55   - v-model:value="scriptForm.outputParams"
56   - placeholder="请输入输出参数"
  55 + v-model:value="scriptForm.output"
  56 + placeholder="输出参数为服务端返回的内容"
57 57 />
58 58 </a-form-item>
59 59 </a-form>
... ... @@ -62,7 +62,7 @@
62 62 <script setup lang="ts">
63 63 import { ref, unref, reactive, onMounted, toRefs } from 'vue';
64 64 import ace from 'ace-builds';
65   - import { Card, Button } from 'ant-design-vue';
  65 + import { Card, Button, Tooltip } from 'ant-design-vue';
66 66 import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
67 67 import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
68 68 import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
... ... @@ -70,17 +70,20 @@
70 70 import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
71 71 import { useMessage } from '/@/hooks/web/useMessage';
72 72 import { findDictItemByCode } from '/@/api/system/dict';
  73 + import { QuestionCircleOutlined } from '@ant-design/icons-vue';
  74 + import { defaultTitle, defaultScriptContent } from './config.data';
73 75
74 76 defineEmits(['register']);
75   - defineProps({
  77 + const props = defineProps({
76 78 ifAdd: { type: Boolean, default: true },
77 79 });
78 80 const scriptForm = reactive({
79 81 name: '',
80 82 description: '',
81 83 convertJs: '',
82   - inputParams: '',
83   - outputParams: '',
  84 + script: '',
  85 + params: '',
  86 + output: '',
84 87 reportType: 'HEX',
85 88 });
86 89 const reportTypeOptions = reactive({
... ... @@ -114,18 +117,7 @@
114 117 enableBasicAutocompletion: true,
115 118 enableLiveAutocompletion: true,
116 119 });
117   - aceEditor.value.setValue(
118   - jsScript ??
119   - `
120   - var trimSource =source.replaceAll(" ","");
121   - if(trimSource.length==26 && trimSource.startsWith("020308")){
122   - var str = "";
123   - for(var i = 6;i<20;i+=2){
124   - str += String.fromCharCode(parseInt(trimSource[i]+trimSource[i+1],16));
125   - }
126   - }
127   - `
128   - );
  120 + aceEditor.value.setValue(jsScript ?? defaultScriptContent);
129 121 beautify(aceEditor.value.session);
130 122 scriptForm.convertJs = aceEditor.value.getValue();
131 123 };
... ... @@ -144,15 +136,24 @@
144 136 const formRef = ref();
145 137 const getFormData = async () => {
146 138 const value = await formRef.value.validateFields();
147   - scriptForm.convertJs = aceEditor.value.getValue();
148   - if (scriptForm.convertJs == '') {
149   - createMessage.error('请编写脚本内容');
150   - throw '请编写脚本内容';
  139 + if (props.ifAdd) {
  140 + scriptForm.convertJs = aceEditor.value.getValue();
  141 + if (scriptForm.convertJs == '') {
  142 + createMessage.error('请编写脚本内容');
  143 + throw '请编写脚本内容';
  144 + }
  145 + } else {
  146 + scriptForm.script = aceEditor.value.getValue();
  147 + if (scriptForm.script == '') {
  148 + createMessage.error('请编写脚本内容');
  149 + throw '请编写脚本内容';
  150 + }
151 151 }
152 152 if (!value) return;
153 153 return {
154 154 ...value,
155   - ...{ convertJs: scriptForm.convertJs },
  155 + ...{ convertJs: props.ifAdd ? scriptForm.convertJs : null },
  156 + ...{ script: !props.ifAdd ? scriptForm.script : null },
156 157 };
157 158 };
158 159 const setFormData = (v) => {
... ... @@ -163,7 +164,7 @@
163 164 handleFormat();
164 165 };
165 166 const setScriptContentData = (v) => {
166   - aceEditor.value.setValue(v.convertJs);
  167 + aceEditor.value.setValue(v);
167 168 handleFormat();
168 169 };
169 170 const resetFormData = () => {
... ... @@ -171,6 +172,9 @@
171 172 Reflect.set(scriptForm, i, '');
172 173 }
173 174 };
  175 + const setScriptOutputData = (v) => {
  176 + scriptForm.output = v;
  177 + };
174 178 const handleFormat = () => beautify(aceEditor.value.session);
175 179
176 180 defineExpose({
... ... @@ -179,6 +183,7 @@
179 183 resetFormData,
180 184 setFormData,
181 185 setScriptContentData,
  186 + setScriptOutputData,
182 187 });
183 188 </script>
184 189 <style lang="less" scoped>
... ...
... ... @@ -60,7 +60,7 @@
60 60 converScriptRef.value?.setFormData(data.record);
61 61 }
62 62 if (unref(isTitle) == 'test') {
63   - converScriptRef.value?.setScriptContentData(data.record);
  63 + converScriptRef.value?.setScriptContentData('');
64 64 }
65 65 setModalProps({ title, showOkBtn: true, showCancelBtn: true, okText });
66 66 if (!unref(isUpdate)) {
... ... @@ -73,14 +73,17 @@
73 73 });
74 74
75 75 const handleSubmit = async () => {
76   - setModalProps({ loading: true });
  76 + setModalProps({ confirmLoading: true });
77 77 try {
78 78 const val = await converScriptRef.value?.getFormData();
79 79 const tempObj = {
80 80 ...editData.data,
81 81 ...val,
82 82 };
83   - (await isText.value) == 'test' ? testScriptManage(val) : createOrEditScriptManage(tempObj);
  83 + const res: any =
  84 + isText.value == 'test'
  85 + ? await testScriptManage(val)
  86 + : await createOrEditScriptManage(tempObj);
84 87 createMessage.success(
85 88 unref(isTitle) == 'edit'
86 89 ? '编辑转换脚本成功'
... ... @@ -88,11 +91,18 @@
88 91 ? '新增转换脚本成功'
89 92 : '测试转换脚本成功'
90 93 );
91   - closeModal();
  94 + if (unref(isTitle) == 'add' || unref(isTitle) == 'edit') {
  95 + setTimeout(() => {
  96 + closeModal();
  97 + }, 10);
  98 + } else {
  99 + if (res) {
  100 + converScriptRef.value?.setScriptOutputData(res?.output);
  101 + }
  102 + }
92 103 emits('success');
93   - } catch {
94 104 } finally {
95   - setModalProps({ loading: false });
  105 + setModalProps({ confirmLoading: false });
96 106 }
97 107 };
98 108 const handleCancel = (flag) => {
... ...
... ... @@ -2,7 +2,6 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
2 2 import moment from 'moment';
3 3 import { h } from 'vue';
4 4 import { Tag } from 'ant-design-vue';
5   -import { findDictItemByCode } from '/@/api/system/dict';
6 5
7 6 // 表格配置
8 7 export const columns: BasicColumn[] = [
... ... @@ -43,7 +42,7 @@ export const columns: BasicColumn[] = [
43 42 // 查询配置
44 43 export const searchFormSchema: FormSchema[] = [
45 44 {
46   - field: 'reportConfigName',
  45 + field: 'name',
47 46 label: '脚本名称',
48 47 component: 'Input',
49 48 colProps: { span: 6 },
... ... @@ -65,117 +64,14 @@ export const searchFormSchema: FormSchema[] = [
65 64 },
66 65 ];
67 66
68   -// 新增编辑配置
69   -export const formSchema: FormSchema[] = [
70   - {
71   - field: 'name',
72   - label: '',
73   - required: true,
74   - component: 'Input',
75   - slot: 'scriptName',
76   - colProps: { span: 24 },
77   - },
78   - {
79   - field: 'scriptContent',
80   - label: '脚本内容',
81   - required: true,
82   - component: 'Input',
83   - slot: 'scriptContent',
84   - colProps: { span: 24 },
85   - },
86   - {
87   - field: 'unit',
88   - label: '上报数据类型',
89   - component: 'ApiSelect',
90   - colProps: {
91   - span: 23,
92   - },
93   - defaultValue: 'HEX',
94   - componentProps: {
95   - placeholder: '请上报数据类型',
96   - api: findDictItemByCode,
97   - params: {
98   - dictCode: 'report_data_type',
99   - },
100   - labelField: 'itemText',
101   - valueField: 'itemValue',
102   - },
103   - },
104   - {
105   - field: 'remark',
106   - label: '',
107   - required: true,
108   - component: 'Input',
109   - slot: 'scriptRemark',
110   - colProps: { span: 24 },
111   - },
112   -];
  67 +export const defaultTitle = '格式：' + 'out.msg= "hello"+params;';
113 68
114   -export const mockData: any = async () => {
115   - const res = await [
116   - {
117   - reportConfigName: '风机转换',
118   - organizationName: 1,
119   - dataType: 'function',
120   - executeWay: '风机转换脚本使用js',
121   - executeTime: '2022-10-20 10:24:22',
122   - },
123   - {
124   - reportConfigName: '水电转换',
125   - organizationName: 1,
126   - dataType: 'function',
127   - executeWay: '水电转换脚本使用js',
128   - executeTime: '2022-10-20 10:24:22',
129   - },
130   - {
131   - reportConfigName: '摄像头转换',
132   - organizationName: 1,
133   - dataType: 'function',
134   - executeWay: '摄像头转换脚本使用js',
135   - executeTime: '2022-10-20 10:24:22',
136   - },
137   - {
138   - reportConfigName: '变压器转换',
139   - organizationName: 1,
140   - dataType: 'function',
141   - executeWay: '变压器转换脚本使用js',
142   - executeTime: '2022-10-20 10:24:22',
143   - },
144   - {
145   - reportConfigName: '设备状态转换',
146   - organizationName: 1,
147   - dataType: 'function',
148   - executeWay: '设备状态转换脚本使用js',
149   - executeTime: '2022-10-20 10:24:22',
150   - },
151   - {
152   - reportConfigName: '电流转换',
153   - organizationName: 1,
154   - dataType: 'function',
155   - executeWay: '电流转换脚本使用js',
156   - executeTime: '2022-10-20 10:24:22',
157   - },
158   - {
159   - reportConfigName: '电压转换',
160   - organizationName: 1,
161   - dataType: 'function',
162   - executeWay: '电压转换脚本使用js',
163   - executeTime: '2022-10-20 10:24:22',
164   - },
165   - {
166   - reportConfigName: '传感器转换',
167   - organizationName: 1,
168   - dataType: 'function',
169   - executeWay: '传感器转换脚本使用js',
170   - executeTime: '2022-10-20 10:24:22',
171   - },
172   - {
173   - reportConfigName: '物模型转换',
174   - organizationName: 1,
175   - dataType: 'function',
176   - executeWay: '物模型转换脚本使用js',
177   - executeTime: '2022-10-20 10:24:22',
178   - },
179   - ];
180   - return res;
181   -};
  69 +export const defaultScriptContent = `
  70 +var trimSource =source.replaceAll(" ","");
  71 +if(trimSource.length==26 && trimSource.startsWith("020308")){
  72 + var str = "";
  73 + for(var i = 6;i<20;i+=2){
  74 + str += String.fromCharCode(parseInt(trimSource[i]+trimSource[i+1],16));
  75 + }
  76 +}
  77 + `;
... ...
... ... @@ -26,8 +26,8 @@
26 26 :actions="[
27 27 {
28 28 label: '测试',
29   - icon: 'clarity:note-edit-line',
30   - auth: '',
  29 + icon: 'ant-design:font-size-outlined',
  30 + auth: 'api:yt:js:test',
31 31 onClick: handleBindTest.bind(null, record),
32 32 },
33 33 {
... ...