简柏林 / 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 13 </thead>
14 14 <tbody>
15 15 <tr v-for="(item, index) in tableArray.content" :key="index">
16   - <td>
  16 + <td style="width: 1vw">
17 17 {{ index + 1 }}
18 18 </td>
19   - <td>
  19 + <td style="width: 12vw">
20 20 <Select
21 21 v-model:value="item.key"
22 22 placeholder="请选择"
... ... @@ -25,17 +25,17 @@
25 25 allowClear
26 26 />
27 27 </td>
28   - <td>
  28 + <td style="width: 12vw">
29 29 <a-input
30 30 :disabled="item.editDisabled"
31 31 placeholder="请输入"
32 32 v-model:value="item.value"
33 33 />
34 34 </td>
35   - <td>
  35 + <td style="width: 4vw">
36 36 <a-switch v-model:checked="item.required" />
37 37 </td>
38   - <td>
  38 + <td style="width: 2vw">
39 39 <div>
40 40 <Button type="dashed" @click="add(item, index)">
41 41 <template #icon><PlusOutlined /></template
... ... @@ -194,7 +194,6 @@
194 194 }
195 195
196 196 table td {
197   - width: 7vw;
198 197 padding: 5px;
199 198 white-space: nowrap;
200 199 &:extend(.table-border-color);
... ...
... ... @@ -7,7 +7,9 @@
7 7 @testInterface="handleTestInterface"
8 8 ref="testParRequestRef"
9 9 :method="method"
10   - :data="dataList"
  10 + :requestOriginUrl="requestOriginUrl"
  11 + :requestUrl="requestUrl"
  12 + :data="dataMap.mapObj"
11 13 />
12 14 </TabPane>
13 15 <TabPane
... ... @@ -17,12 +19,14 @@
17 19 key="Body"
18 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 23 <TestRequest
22 24 @testInterface="handleTestInterface"
23 25 ref="testBodyRequestRef"
24 26 :method="method"
25   - :data="dataList"
  27 + :requestOriginUrl="requestOriginUrl"
  28 + :requestUrl="requestUrl"
  29 + :data="dataMap.mapObj"
26 30 />
27 31 </TabPane>
28 32 <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
... ... @@ -31,26 +35,34 @@
31 35 @testInterface="handleTestInterface"
32 36 ref="testHeaderRequestRef"
33 37 :method="method"
34   - :data="dataList"
  38 + :requestOriginUrl="requestOriginUrl"
  39 + :requestUrl="requestUrl"
  40 + :data="dataMap.mapObj"
35 41 />
36 42 </TabPane>
37 43 </Tabs>
38 44 </div>
39 45 </template>
40 46 <script lang="ts" setup name="simpleRequest">
41   - import { ref, nextTick } from 'vue';
  47 + import { ref, nextTick, reactive } from 'vue';
42 48 import { Tabs, TabPane } from 'ant-design-vue';
43 49 import { EditCellTable } from '../EditCellTable';
44 50 import Body from './body.vue';
45 51 import { TestRequest } from '../TestRequest/index';
46 52
47   - defineProps({
  53 + const props = defineProps({
48 54 method: {
49 55 type: String,
50 56 },
51 57 paramsType: {
52 58 type: String,
53 59 },
  60 + requestOriginUrl: {
  61 + type: String,
  62 + },
  63 + requestUrl: {
  64 + type: String,
  65 + },
54 66 });
55 67
56 68 const emits = defineEmits(['activeKey']);
... ... @@ -67,7 +79,9 @@
67 79
68 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 86 const bodyRef = ref<InstanceType<typeof Body>>();
73 87
... ... @@ -79,7 +93,15 @@
79 93
80 94 const handleTestInterface = () => {
81 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 6 <th></th>
7 7 <th>内置参数</th>
8 8 <th>参数名</th>
  9 + <th>参数值</th>
9 10 </tr>
10 11 </thead>
11 12 <tbody>
12 13 <tr v-for="(item, index) in tableTestArray.content" :key="index">
13   - <td>
  14 + <td style="width: 1vw">
14 15 {{ index + 1 }}
15 16 </td>
16   - <td>
  17 + <td style="width: 12vw">
17 18 <Select
18 19 :disabled="true"
19 20 v-model:value="item.key"
20 21 placeholder="请选择"
21 22 notFoundContent="请选择"
22   - style="width: 14rem"
23 23 :options="selectOptions"
24 24 @change="handleChange(item)"
25 25 allowClear
26 26 />
27 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 30 <a-tree-select
36 31 v-else-if="item.key === 'organizationId'"
37 32 v-model:value="item.value"
38 33 show-search
39   - style="width: 14rem"
40 34 :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
41 35 placeholder="请选择组织"
42 36 allow-clear
... ... @@ -49,7 +43,6 @@
49 43 v-model:value="item.value"
50 44 placeholder="请选择"
51 45 notFoundContent="请选择"
52   - style="width: 14rem"
53 46 :options="entityOptions"
54 47 allowClear
55 48 />
... ... @@ -58,7 +51,6 @@
58 51 v-model:value="item.value"
59 52 placeholder="请选择"
60 53 notFoundContent="请选择"
61   - style="width: 14rem"
62 54 :options="attributeOptions"
63 55 allowClear
64 56 />
... ... @@ -67,12 +59,18 @@
67 59 v-model:value="item.value"
68 60 placeholder="请选择"
69 61 notFoundContent="请选择"
70   - style="width: 14rem"
71 62 :options="valueOptions"
72 63 allowClear
73 64 @change="handleValueChange(item)"
74 65 />
75 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 74 </tr>
77 75 </tbody>
78 76 </table>
... ... @@ -117,6 +115,7 @@
117 115 type defaultItem = {
118 116 key: null | string;
119 117 value: null | string;
  118 + keyValue: null | string;
120 119 editDisabled: boolean;
121 120 };
122 121
... ... @@ -127,6 +126,7 @@
127 126 {
128 127 key: null,
129 128 value: null,
  129 + keyValue: null,
130 130 editDisabled: false,
131 131 },
132 132 ],
... ... @@ -261,7 +261,6 @@
261 261 }
262 262
263 263 table td {
264   - width: 7vw;
265 264 padding: 5px;
266 265 white-space: nowrap;
267 266 &:extend(.table-border-color);
... ...
... ... @@ -38,8 +38,7 @@
38 38 import { ref, nextTick } from 'vue';
39 39 import { Button } from 'ant-design-vue';
40 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 43 const emits = defineEmits(['testInterface']);
45 44
... ... @@ -48,7 +47,7 @@
48 47 type: String,
49 48 },
50 49 data: {
51   - type: Array,
  50 + type: Object,
52 51 },
53 52 });
54 53
... ... @@ -66,27 +65,71 @@
66 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 84 const getValue = async () => {
70 85 await nextTick();
71 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 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 138 showTestEditCell.value = false;
96 139 testResult.value = '';
97 140 };
  141 +
98 142 defineExpose({
99 143 setValue,
100 144 handleTest,
... ...
... ... @@ -15,6 +15,8 @@
15 15 @activeKey="handleActiveKey"
16 16 :paramsType="model['requestHttpType']"
17 17 :method="model['requestContentType']"
  18 + :requestOriginUrl="model['requestOriginUrl']"
  19 + :requestUrl="model['requestUrl']"
18 20 />
19 21 <SimpleRequest
20 22 ref="simpleRequestRef"
... ... @@ -22,6 +24,8 @@
22 24 v-else-if="model['requestContentType'] === '2'"
23 25 :paramsType="model['requestHttpType']"
24 26 :method="model['requestContentType']"
  27 + :requestOriginUrl="model['requestOriginUrl']"
  28 + :requestUrl="model['requestUrl']"
25 29 />
26 30 </template>
27 31 <template #testSql="{ model }">
... ...