简柏林 / thingskit-front · Commits

Commit 9fd79720a80e6aa518f141088a53404e6d35f067

Authored by fengwotao
1 parent cf3294a0

wip:大屏设计器测试开发中

Inline Side-by-side
Showing 5 changed files with 114 additions and 46 deletions
@@ -13,10 +13,10 @@ @@ -13,10 +13,10 @@
13 </thead> 13 </thead>
14 <tbody> 14 <tbody>
15 <tr v-for="(item, index) in tableArray.content" :key="index"> 15 <tr v-for="(item, index) in tableArray.content" :key="index">
16 - <td> 16 + <td style="width: 1vw">
17 {{ index + 1 }} 17 {{ index + 1 }}
18 </td> 18 </td>
19 - <td> 19 + <td style="width: 12vw">
20 <Select 20 <Select
21 v-model:value="item.key" 21 v-model:value="item.key"
22 placeholder="请选择" 22 placeholder="请选择"
@@ -25,17 +25,17 @@ @@ -25,17 +25,17 @@
25 allowClear 25 allowClear
26 /> 26 />
27 </td> 27 </td>
28 - <td> 28 + <td style="width: 12vw">
29 <a-input 29 <a-input
30 :disabled="item.editDisabled" 30 :disabled="item.editDisabled"
31 placeholder="请输入" 31 placeholder="请输入"
32 v-model:value="item.value" 32 v-model:value="item.value"
33 /> 33 />
34 </td> 34 </td>
35 - <td> 35 + <td style="width: 4vw">
36 <a-switch v-model:checked="item.required" /> 36 <a-switch v-model:checked="item.required" />
37 </td> 37 </td>
38 - <td> 38 + <td style="width: 2vw">
39 <div> 39 <div>
40 <Button type="dashed" @click="add(item, index)"> 40 <Button type="dashed" @click="add(item, index)">
41 <template #icon><PlusOutlined /></template 41 <template #icon><PlusOutlined /></template
@@ -194,7 +194,6 @@ @@ -194,7 +194,6 @@
194 } 194 }
195 195
196 table td { 196 table td {
197 - width: 7vw;  
198 padding: 5px; 197 padding: 5px;
199 white-space: nowrap; 198 white-space: nowrap;
200 &:extend(.table-border-color); 199 &:extend(.table-border-color);
@@ -7,7 +7,9 @@ @@ -7,7 +7,9 @@
7 @testInterface="handleTestInterface" 7 @testInterface="handleTestInterface"
8 ref="testParRequestRef" 8 ref="testParRequestRef"
9 :method="method" 9 :method="method"
10 - :data="dataList" 10 + :requestOriginUrl="requestOriginUrl"
  11 + :requestUrl="requestUrl"
  12 + :data="dataMap.mapObj"
11 /> 13 />
12 </TabPane> 14 </TabPane>
13 <TabPane 15 <TabPane
@@ -17,12 +19,14 @@ @@ -17,12 +19,14 @@
17 key="Body" 19 key="Body"
18 tab="Body" 20 tab="Body"
19 > 21 >
20 - <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataList" /> 22 + <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataMap.mapObj" />
21 <TestRequest 23 <TestRequest
22 @testInterface="handleTestInterface" 24 @testInterface="handleTestInterface"
23 ref="testBodyRequestRef" 25 ref="testBodyRequestRef"
24 :method="method" 26 :method="method"
25 - :data="dataList" 27 + :requestOriginUrl="requestOriginUrl"
  28 + :requestUrl="requestUrl"
  29 + :data="dataMap.mapObj"
26 /> 30 />
27 </TabPane> 31 </TabPane>
28 <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header"> 32 <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
@@ -31,26 +35,34 @@ @@ -31,26 +35,34 @@
31 @testInterface="handleTestInterface" 35 @testInterface="handleTestInterface"
32 ref="testHeaderRequestRef" 36 ref="testHeaderRequestRef"
33 :method="method" 37 :method="method"
34 - :data="dataList" 38 + :requestOriginUrl="requestOriginUrl"
  39 + :requestUrl="requestUrl"
  40 + :data="dataMap.mapObj"
35 /> 41 />
36 </TabPane> 42 </TabPane>
37 </Tabs> 43 </Tabs>
38 </div> 44 </div>
39 </template> 45 </template>
40 <script lang="ts" setup name="simpleRequest"> 46 <script lang="ts" setup name="simpleRequest">
41 - import { ref, nextTick } from 'vue'; 47 + import { ref, nextTick, reactive } from 'vue';
42 import { Tabs, TabPane } from 'ant-design-vue'; 48 import { Tabs, TabPane } from 'ant-design-vue';
43 import { EditCellTable } from '../EditCellTable'; 49 import { EditCellTable } from '../EditCellTable';
44 import Body from './body.vue'; 50 import Body from './body.vue';
45 import { TestRequest } from '../TestRequest/index'; 51 import { TestRequest } from '../TestRequest/index';
46 52
47 - defineProps({ 53 + const props = defineProps({
48 method: { 54 method: {
49 type: String, 55 type: String,
50 }, 56 },
51 paramsType: { 57 paramsType: {
52 type: String, 58 type: String,
53 }, 59 },
  60 + requestOriginUrl: {
  61 + type: String,
  62 + },
  63 + requestUrl: {
  64 + type: String,
  65 + },
54 }); 66 });
55 67
56 const emits = defineEmits(['activeKey']); 68 const emits = defineEmits(['activeKey']);
@@ -67,7 +79,9 @@ @@ -67,7 +79,9 @@
67 79
68 const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>(); 80 const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
69 81
70 - const dataList: any = ref(null); 82 + const dataMap: any = reactive({
  83 + mapObj: {},
  84 + });
71 85
72 const bodyRef = ref<InstanceType<typeof Body>>(); 86 const bodyRef = ref<InstanceType<typeof Body>>();
73 87
@@ -79,7 +93,15 @@ @@ -79,7 +93,15 @@
79 93
80 const handleTestInterface = () => { 94 const handleTestInterface = () => {
81 const value = getValue(false); 95 const value = getValue(false);
82 - nextTick(() => (dataList.value = value)); 96 + nextTick(
  97 + () =>
  98 + (dataMap.mapObj = {
  99 + list: value,
  100 + requestOriginUrl: props.requestOriginUrl,
  101 + requestUrl: props.requestUrl,
  102 + paramsType: props.paramsType,
  103 + })
  104 + );
83 }; 105 };
84 106
85 //获取数据 107 //获取数据
@@ -6,37 +6,31 @@ @@ -6,37 +6,31 @@
6 <th></th> 6 <th></th>
7 <th>内置参数</th> 7 <th>内置参数</th>
8 <th>参数名</th> 8 <th>参数名</th>
  9 + <th>参数值</th>
9 </tr> 10 </tr>
10 </thead> 11 </thead>
11 <tbody> 12 <tbody>
12 <tr v-for="(item, index) in tableTestArray.content" :key="index"> 13 <tr v-for="(item, index) in tableTestArray.content" :key="index">
13 - <td> 14 + <td style="width: 1vw">
14 {{ index + 1 }} 15 {{ index + 1 }}
15 </td> 16 </td>
16 - <td> 17 + <td style="width: 12vw">
17 <Select 18 <Select
18 :disabled="true" 19 :disabled="true"
19 v-model:value="item.key" 20 v-model:value="item.key"
20 placeholder="请选择" 21 placeholder="请选择"
21 notFoundContent="请选择" 22 notFoundContent="请选择"
22 - style="width: 14rem"  
23 :options="selectOptions" 23 :options="selectOptions"
24 @change="handleChange(item)" 24 @change="handleChange(item)"
25 allowClear 25 allowClear
26 /> 26 />
27 </td> 27 </td>
28 - <td>  
29 - <a-input  
30 - v-if="item.key === 'scope'"  
31 - placeholder="请输入"  
32 - v-model:value="item.value"  
33 - style="width: 14rem"  
34 - /> 28 + <td style="width: 12vw">
  29 + <a-input v-if="item.key === 'scope'" placeholder="请输入" v-model:value="item.value" />
35 <a-tree-select 30 <a-tree-select
36 v-else-if="item.key === 'organizationId'" 31 v-else-if="item.key === 'organizationId'"
37 v-model:value="item.value" 32 v-model:value="item.value"
38 show-search 33 show-search
39 - style="width: 14rem"  
40 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" 34 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
41 placeholder="请选择组织" 35 placeholder="请选择组织"
42 allow-clear 36 allow-clear
@@ -49,7 +43,6 @@ @@ -49,7 +43,6 @@
49 v-model:value="item.value" 43 v-model:value="item.value"
50 placeholder="请选择" 44 placeholder="请选择"
51 notFoundContent="请选择" 45 notFoundContent="请选择"
52 - style="width: 14rem"  
53 :options="entityOptions" 46 :options="entityOptions"
54 allowClear 47 allowClear
55 /> 48 />
@@ -58,7 +51,6 @@ @@ -58,7 +51,6 @@
58 v-model:value="item.value" 51 v-model:value="item.value"
59 placeholder="请选择" 52 placeholder="请选择"
60 notFoundContent="请选择" 53 notFoundContent="请选择"
61 - style="width: 14rem"  
62 :options="attributeOptions" 54 :options="attributeOptions"
63 allowClear 55 allowClear
64 /> 56 />
@@ -67,12 +59,18 @@ @@ -67,12 +59,18 @@
67 v-model:value="item.value" 59 v-model:value="item.value"
68 placeholder="请选择" 60 placeholder="请选择"
69 notFoundContent="请选择" 61 notFoundContent="请选择"
70 - style="width: 14rem"  
71 :options="valueOptions" 62 :options="valueOptions"
72 allowClear 63 allowClear
73 @change="handleValueChange(item)" 64 @change="handleValueChange(item)"
74 /> 65 />
75 </td> 66 </td>
  67 + <td style="width: 12vw">
  68 + <a-input
  69 + :disabled="item.key !== 'scope'"
  70 + placeholder="请输入"
  71 + v-model:value="item.keyValue"
  72 + />
  73 + </td>
76 </tr> 74 </tr>
77 </tbody> 75 </tbody>
78 </table> 76 </table>
@@ -117,6 +115,7 @@ @@ -117,6 +115,7 @@
117 type defaultItem = { 115 type defaultItem = {
118 key: null | string; 116 key: null | string;
119 value: null | string; 117 value: null | string;
  118 + keyValue: null | string;
120 editDisabled: boolean; 119 editDisabled: boolean;
121 }; 120 };
122 121
@@ -127,6 +126,7 @@ @@ -127,6 +126,7 @@
127 { 126 {
128 key: null, 127 key: null,
129 value: null, 128 value: null,
  129 + keyValue: null,
130 editDisabled: false, 130 editDisabled: false,
131 }, 131 },
132 ], 132 ],
@@ -261,7 +261,6 @@ @@ -261,7 +261,6 @@
261 } 261 }
262 262
263 table td { 263 table td {
264 - width: 7vw;  
265 padding: 5px; 264 padding: 5px;
266 white-space: nowrap; 265 white-space: nowrap;
267 &:extend(.table-border-color); 266 &:extend(.table-border-color);
@@ -38,8 +38,7 @@ @@ -38,8 +38,7 @@
38 import { ref, nextTick } from 'vue'; 38 import { ref, nextTick } from 'vue';
39 import { Button } from 'ant-design-vue'; 39 import { Button } from 'ant-design-vue';
40 import { TestEditCellTable } from '../TestEditCellTable/index'; 40 import { TestEditCellTable } from '../TestEditCellTable/index';
41 - import { getAllDeviceByOrg } from '/@/api/dataBoard';  
42 - import { getDeviceAttributes } from '/@/api/dataBoard'; 41 + // import { otherHttp } from '/@/utils/http/axios';
43 42
44 const emits = defineEmits(['testInterface']); 43 const emits = defineEmits(['testInterface']);
45 44
@@ -48,7 +47,7 @@ @@ -48,7 +47,7 @@
48 type: String, 47 type: String,
49 }, 48 },
50 data: { 49 data: {
51 - type: Array, 50 + type: Object,
52 }, 51 },
53 }); 52 });
54 53
@@ -66,27 +65,71 @@ @@ -66,27 +65,71 @@
66 getValue(); 65 getValue();
67 }; 66 };
68 67
  68 + //获取多个key
  69 + const getMultipleKeys = (list) => {
  70 + let temps = [];
  71 + list?.forEach((it) => {
  72 + const keys = it.key.split(',');
  73 + const temp = keys.map((item) => {
  74 + let obj: { key: string; value: string } = { key: '', value: '' };
  75 + obj.key = item;
  76 + obj.value = item === 'scope' ? it.value : '';
  77 + return obj;
  78 + });
  79 + temps = temp;
  80 + });
  81 + return temps;
  82 + };
  83 +
69 const getValue = async () => { 84 const getValue = async () => {
70 await nextTick(); 85 await nextTick();
71 await nextTick(() => { 86 await nextTick(() => {
72 - testEditCellTableRef.value?.setTableArray(props.data); 87 + const getSingleKey = props.data?.list?.filter((it: any) => it.key.split(',').length === 1);
  88 + const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
  89 + const getMuteKeys = getMultipleKeys(getMuteKey);
  90 + const getSingleKeys = getMultipleKeys(getSingleKey);
  91 + const mergeKeys = [...getSingleKeys, ...getMuteKeys];
  92 + testEditCellTableRef.value?.setTableArray(mergeKeys);
73 }); 93 });
74 }; 94 };
75 95
  96 + //执行测试接口
76 const handleExcute = async () => { 97 const handleExcute = async () => {
77 - const params = testEditCellTableRef.value?.getValue();  
78 - const keys = params?.map((m) => ({ key: m.key, value: m.value }));  
79 - keys?.forEach(async (it: any) => {  
80 - if (it.key === 'organizationId') {  
81 - //获取设备  
82 - const data = await getAllDeviceByOrg(it.value!);  
83 - testResult.value = JSON.stringify(data);  
84 - }  
85 - if (it.key === 'deviceProfileId') {  
86 - //获取属性  
87 - const data = await getDeviceAttributes({ deviceProfileId: it.value! });  
88 - testResult.value = JSON.stringify(data);  
89 - } 98 + await nextTick();
  99 + await nextTick(async () => {
  100 + const getTable = testEditCellTableRef.value?.getValue().map((it) => {
  101 + const value = it.key === 'scope' ? it.keyValue : it.value;
  102 + const key = it.key === 'scope' ? it.value : it.key;
  103 + return {
  104 + key,
  105 + value,
  106 + };
  107 + });
  108 + const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestUrl}`;
  109 + const apiType = props.data?.paramsType.toLowerCase();
  110 + console.log(apiType);
  111 +
  112 + const formatStr = (str, args) => {
  113 + if (str.length == 0) return str;
  114 + let formatStr = '';
  115 + args?.forEach((it) => {
  116 + formatStr = str.replace(RegExp('\\{' + it.key + '\\}'), it.value);
  117 + });
  118 + return formatStr;
  119 + };
  120 +
  121 + const api = formatStr(apiGetUrl, getTable);
  122 + console.log(api);
  123 + // const rest = await otherHttp.get(
  124 + // {
  125 + // // url: api,
  126 + // },
  127 + // {
  128 + // apiUrl: api,
  129 + // joinPrefix: false,
  130 + // }
  131 + // );
  132 + // console.log(rest);
90 }); 133 });
91 }; 134 };
92 135
@@ -95,6 +138,7 @@ @@ -95,6 +138,7 @@
95 showTestEditCell.value = false; 138 showTestEditCell.value = false;
96 testResult.value = ''; 139 testResult.value = '';
97 }; 140 };
  141 +
98 defineExpose({ 142 defineExpose({
99 setValue, 143 setValue,
100 handleTest, 144 handleTest,
@@ -15,6 +15,8 @@ @@ -15,6 +15,8 @@
15 @activeKey="handleActiveKey" 15 @activeKey="handleActiveKey"
16 :paramsType="model['requestHttpType']" 16 :paramsType="model['requestHttpType']"
17 :method="model['requestContentType']" 17 :method="model['requestContentType']"
  18 + :requestOriginUrl="model['requestOriginUrl']"
  19 + :requestUrl="model['requestUrl']"
18 /> 20 />
19 <SimpleRequest 21 <SimpleRequest
20 ref="simpleRequestRef" 22 ref="simpleRequestRef"
@@ -22,6 +24,8 @@ @@ -22,6 +24,8 @@
22 v-else-if="model['requestContentType'] === '2'" 24 v-else-if="model['requestContentType'] === '2'"
23 :paramsType="model['requestHttpType']" 25 :paramsType="model['requestHttpType']"
24 :method="model['requestContentType']" 26 :method="model['requestContentType']"
  27 + :requestOriginUrl="model['requestOriginUrl']"
  28 + :requestUrl="model['requestUrl']"
25 /> 29 />
26 </template> 30 </template>
27 <template #testSql="{ model }"> 31 <template #testSql="{ model }">