简柏林 / thingskit-front · Commits

Commit 9e4ba1a1e212a9a3ea550593f6acf4225a534540

Authored by fengwotao
1 parent c6568d8e

feat:pc端新增公共接口管理

Inline Side-by-side
Showing 8 changed files with 129 additions and 98 deletions
... ... @@ -5,8 +5,8 @@
5 5 <thead>
6 6 <tr>
7 7 <th></th>
8   - <th>Key</th>
9   - <th>Value</th>
  8 + <th>内置参数</th>
  9 + <th>参数名</th>
10 10 <th>是否必须</th>
11 11 <th>操作</th>
12 12 </tr>
... ... @@ -20,9 +20,8 @@
20 20 <Select
21 21 v-model:value="item.key"
22 22 placeholder="请选择"
23   - style="width: 14rem"
24 23 :options="selectOptions"
25   - @change="handleChange(item.key)"
  24 + @change="handleChange"
26 25 allowClear
27 26 />
28 27 </td>
... ... @@ -31,7 +30,6 @@
31 30 :disabled="item.editDisabled"
32 31 placeholder="请输入"
33 32 v-model:value="item.value"
34   - style="width: 14rem"
35 33 />
36 34 </td>
37 35 <td>
... ... @@ -58,7 +56,7 @@
58 56 import { findDictItemByCode } from '/@/api/system/dict';
59 57 import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
60 58
61   - const props = defineProps({
  59 + defineProps({
62 60 method: {
63 61 type: String,
64 62 },
... ... @@ -75,8 +73,6 @@
75 73 label: '自定义',
76 74 value: 'scope',
77 75 });
78   - if (props.method === '2')
79   - selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
80 76 };
81 77
82 78 const selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
... ... @@ -124,14 +120,14 @@
124 120 };
125 121
126 122 //Select互斥
127   - const handleChange = (value: string) => {
128   - console.log(value);
  123 + const handleChange = () => {
129 124 selectOptions.value.forEach((ele) => {
130 125 ele.disabled = false;
131 126 tableArray.content.forEach((element) => {
132 127 if (element.key === 'scope') {
133 128 element.editDisabled = false;
134 129 } else {
  130 + element.value = '';
135 131 element.editDisabled = true;
136 132 }
137 133 if (element.key === ele.value && element.key !== 'scope') {
... ... @@ -151,8 +147,8 @@
151 147 nextTick(() => (tableArray.content = data));
152 148 nextTick(() =>
153 149 setTimeout(() => {
154   - tableArray.content.forEach((it: any) => {
155   - handleChange(it.key);
  150 + tableArray.content.forEach(() => {
  151 + handleChange();
156 152 });
157 153 }, 20)
158 154 );
... ... @@ -168,8 +164,8 @@
168 164 required: false,
169 165 });
170 166 nextTick(() => {
171   - tableArray.content.forEach((it: any) => {
172   - handleChange(it.key);
  167 + tableArray.content.forEach(() => {
  168 + handleChange();
173 169 });
174 170 });
175 171 };
... ... @@ -198,6 +194,7 @@
198 194 }
199 195
200 196 table td {
  197 + width: 7vw;
201 198 padding: 5px;
202 199 white-space: nowrap;
203 200 &:extend(.table-border-color);
... ...
... ... @@ -44,6 +44,12 @@
44 44 method: {
45 45 type: String,
46 46 },
  47 + paramsType: {
  48 + type: String,
  49 + },
  50 + data: {
  51 + type: Array,
  52 + },
47 53 });
48 54
49 55 const getRequestBody = reactive({
... ...
... ... @@ -3,15 +3,36 @@
3 3 <Tabs @change="handleChange" v-model:activeKey="activeKey">
4 4 <TabPane class="tab-pane" forceRender key="Params" tab="Params">
5 5 <EditCellTable ref="editCellTableRef" :method="method" />
6   - <TestRequest ref="testParRequestRef" :method="method" :data="dataList" />
  6 + <TestRequest
  7 + @testInterface="handleTestInterface"
  8 + ref="testParRequestRef"
  9 + :method="method"
  10 + :data="dataList"
  11 + />
7 12 </TabPane>
8   - <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Body" tab="Body">
9   - <Body ref="bodyRef" :method="method" />
10   - <TestRequest ref="testBodyRequestRef" :method="method" :data="dataList" />
  13 + <TabPane
  14 + v-if="method !== '2' && paramsType !== 'GET'"
  15 + class="tab-pane"
  16 + forceRender
  17 + key="Body"
  18 + tab="Body"
  19 + >
  20 + <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataList" />
  21 + <TestRequest
  22 + @testInterface="handleTestInterface"
  23 + ref="testBodyRequestRef"
  24 + :method="method"
  25 + :data="dataList"
  26 + />
11 27 </TabPane>
12 28 <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
13 29 <EditCellTable ref="editHeaderCellTableRef" :method="method" />
14   - <TestRequest ref="testHeaderRequestRef" :method="method" :data="dataList" />
  30 + <TestRequest
  31 + @testInterface="handleTestInterface"
  32 + ref="testHeaderRequestRef"
  33 + :method="method"
  34 + :data="dataList"
  35 + />
15 36 </TabPane>
16 37 </Tabs>
17 38 </div>
... ... @@ -27,6 +48,9 @@
27 48 method: {
28 49 type: String,
29 50 },
  51 + paramsType: {
  52 + type: String,
  53 + },
30 54 });
31 55
32 56 const emits = defineEmits(['activeKey']);
... ... @@ -43,7 +67,7 @@
43 67
44 68 const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>();
45 69
46   - const dataList = ref({});
  70 + const dataList: any = ref(null);
47 71
48 72 const bodyRef = ref<InstanceType<typeof Body>>();
49 73
... ... @@ -53,19 +77,23 @@
53 77 testBodyRequestRef.value?.setValue();
54 78 };
55 79
  80 + const handleTestInterface = () => {
  81 + const value = getValue(false);
  82 + nextTick(() => (dataList.value = value));
  83 + };
  84 +
56 85 //获取数据
57   - const getValue = () => {
  86 + const getValue = (status) => {
58 87 const type = activeKey.value;
59 88 const Body = bodyRef.value?.getValue();
60 89 const Params = editCellTableRef.value?.getValue();
61 90 const Header = editHeaderCellTableRef.value?.getValue();
62   - emits('activeKey', type);
  91 + status ? emits('activeKey', type) : null;
63 92 return type === 'Params' ? Params : type === 'Body' ? Body : Header;
64 93 };
65 94
66 95 //设置数据
67 96 const setValue = (data) => {
68   - dataList.value = data;
69 97 const Objects = JSON.parse(data?.requestParams);
70 98 nextTick(() => {
71 99 if (!Objects) return;
... ... @@ -91,6 +119,7 @@
91 119 editCellTableRef.value?.resetValue();
92 120 editHeaderCellTableRef.value?.resetValue();
93 121 bodyRef.value?.resetValue();
  122 + handleChange();
94 123 });
95 124 };
96 125
... ...
... ... @@ -4,18 +4,18 @@
4 4 <thead>
5 5 <tr>
6 6 <th></th>
7   - <th>Key</th>
8   - <th>Value</th>
9   - <th>操作</th>
  7 + <th>内置参数</th>
  8 + <th>参数名</th>
10 9 </tr>
11 10 </thead>
12 11 <tbody>
13   - <tr v-for="(item, index) in tableArray.content" :key="index">
  12 + <tr v-for="(item, index) in tableTestArray.content" :key="index">
14 13 <td>
15 14 {{ index + 1 }}
16 15 </td>
17 16 <td>
18 17 <Select
  18 + :disabled="true"
19 19 v-model:value="item.key"
20 20 placeholder="请选择"
21 21 notFoundContent="请选择"
... ... @@ -73,16 +73,6 @@
73 73 @change="handleValueChange(item)"
74 74 />
75 75 </td>
76   - <td>
77   - <div>
78   - <Button type="dashed" @click="add(index)">
79   - <template #icon><PlusOutlined /></template
80   - ></Button>
81   - <Button type="dashed" style="margin-left: 5px" @click="remove(item, index)">
82   - <template #icon> <MinusOutlined /></template>
83   - </Button>
84   - </div>
85   - </td>
86 76 </tr>
87 77 </tbody>
88 78 </table>
... ... @@ -90,13 +80,12 @@
90 80 </template>
91 81 <script lang="ts" setup name="editCellTable">
92 82 import { reactive, ref, onMounted } from 'vue';
93   - import { Select, Button } from 'ant-design-vue';
  83 + import { Select } from 'ant-design-vue';
94 84 import { findDictItemByCode } from '/@/api/system/dict';
95   - import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
96 85 import { getAllDeviceByOrg } from '/@/api/dataBoard';
97 86 import { getDeviceAttributes } from '/@/api/dataBoard';
98 87 import { useApi } from '../../hooks/useApi';
99   - import { buildUUID } from '/@/utils/uuid';
  88 + import { cloneDeep } from 'lodash-es';
100 89
101 90 const props = defineProps({
102 91 method: {
... ... @@ -126,18 +115,16 @@
126 115 const treeData = ref([]);
127 116
128 117 type defaultItem = {
129   - id: string;
130 118 key: null | string;
131 119 value: null | string;
132 120 editDisabled: boolean;
133 121 };
134 122
135   - const tableArray = reactive<{
  123 + const tableTestArray = reactive<{
136 124 content: defaultItem[];
137 125 }>({
138 126 content: [
139 127 {
140   - id: buildUUID(),
141 128 key: null,
142 129 value: null,
143 130 editDisabled: false,
... ... @@ -145,49 +132,37 @@
145 132 ],
146 133 });
147 134
148   - // 新增
149   - const add = (index: number) => {
150   - tableArray.content.splice(index + 1, 0, {
151   - id: buildUUID(),
152   - key: null,
153   - value: null,
154   - editDisabled: false,
155   - });
  135 + //设置数据
  136 + const setTableArray = (data) => {
  137 + const list = cloneDeep(data);
  138 + if (Array.isArray(list)) (tableTestArray.content = list) && getApi(list);
  139 + if (list.hasOwnProperty('form-data') && Array.isArray(list['form-data']))
  140 + (tableTestArray.content = list['form-data']) && getApi(list['form-data']);
  141 + if (
  142 + list.hasOwnProperty('x-www-form-urlencoded') &&
  143 + Array.isArray(list['x-www-form-urlencoded'])
  144 + )
  145 + (tableTestArray.content = list['x-www-form-urlencoded']) &&
  146 + getApi(list['x-www-form-urlencoded']);
156 147 };
157 148
158   - // 减少
159   - const remove = (item, index: number) => {
160   - if (item.key === 'organizationId') {
161   - entityOptions.value.length = 0;
162   - tableArray.content.forEach((f) => {
163   - if (f.key === 'entityId') {
164   - f.value = null;
165   - }
166   - });
167   - }
168   - if (item.key === 'deviceProfileId') {
169   - attributeOptions.value.length = 0;
170   - tableArray.content.forEach((f) => {
171   - if (f.key === 'keys') {
172   - f.value = null;
173   - }
174   - });
175   - }
176   - if (tableArray.content.length !== 1) {
177   - selectOptions.value.forEach((ele) => {
178   - if (ele.value == item.key) {
179   - ele.disabled = false;
180   - }
181   - });
182   - tableArray.content.splice(index, 1);
183   - }
  149 + const getApi = (list) => {
  150 + list?.forEach(async (it) => {
  151 + if (it.key === 'deviceProfileId') {
  152 + const { options } = await useApi(it.key);
  153 + valueOptions.value = options;
  154 + } else if (it.key === 'organizationId') {
  155 + const { options } = await useApi(it.key);
  156 + treeData.value = options as any;
  157 + }
  158 + });
184 159 };
185 160
186 161 //Select互斥
187 162 const handleChange = async (e) => {
188 163 selectOptions.value.forEach((ele) => {
189 164 ele.disabled = false;
190   - tableArray.content.forEach((element) => {
  165 + tableTestArray.content.forEach((element) => {
191 166 if (element.key === e.key && element.key !== 'scope') {
192 167 element.value = null;
193 168 }
... ... @@ -204,7 +179,7 @@
204 179 const { options } = await useApi(e.key);
205 180 treeData.value = options as any;
206 181 } else if (e.key === 'entityId') {
207   - const getOrganizationIds = tableArray.content
  182 + const getOrganizationIds = tableTestArray.content
208 183 .map((f) => {
209 184 if (f.key === 'organizationId') {
210 185 return f.value;
... ... @@ -214,7 +189,7 @@
214 189 if (getOrganizationIds.length === 0) return;
215 190 getEntityOptions(getOrganizationIds?.at(-1));
216 191 } else if (e.key === 'keys') {
217   - const getIds = tableArray.content
  192 + const getIds = tableTestArray.content
218 193 .map((f) => {
219 194 if (f.key === 'deviceProfileId') {
220 195 return f.value;
... ... @@ -229,7 +204,7 @@
229 204 };
230 205
231 206 const handleOrgnationChange = async (e) => {
232   - tableArray.content.forEach((f) => {
  207 + tableTestArray.content.forEach((f) => {
233 208 if (f.key === 'entityId') {
234 209 f.value = null;
235 210 }
... ... @@ -253,7 +228,7 @@
253 228
254 229 const handleValueChange = (e) => {
255 230 if (e.key === 'deviceProfileId') {
256   - tableArray.content.forEach((f) => {
  231 + tableTestArray.content.forEach((f) => {
257 232 if (f.key === 'keys') {
258 233 f.value = null;
259 234 }
... ... @@ -264,10 +239,11 @@
264 239
265 240 //获取数据
266 241 const getValue = () => {
267   - return tableArray.content;
  242 + return tableTestArray.content;
268 243 };
269 244 defineExpose({
270 245 getValue,
  246 + setTableArray,
271 247 });
272 248 </script>
273 249
... ... @@ -285,6 +261,7 @@
285 261 }
286 262
287 263 table td {
  264 + width: 7vw;
288 265 padding: 5px;
289 266 white-space: nowrap;
290 267 &:extend(.table-border-color);
... ...
... ... @@ -2,7 +2,7 @@
2 2 <div>
3 3 <div class="mt-8">
4 4 <div>
5   - <Button @click="showTestEditCell = true" type="primary"> 测试接口 </Button>
  5 + <Button @click="handleTest" type="primary"> 测试接口 </Button>
6 6 </div>
7 7 <div v-if="showTestEditCell" class="mt-8">
8 8 <a-row type="flex" justify="center">
... ... @@ -35,18 +35,20 @@
35 35 </div>
36 36 </template>
37 37 <script lang="ts" setup name="testRequest">
38   - import { ref } from 'vue';
  38 + import { ref, nextTick } from 'vue';
39 39 import { Button } from 'ant-design-vue';
40 40 import { TestEditCellTable } from '../TestEditCellTable/index';
41 41 import { getAllDeviceByOrg } from '/@/api/dataBoard';
42 42 import { getDeviceAttributes } from '/@/api/dataBoard';
43 43
44   - defineProps({
  44 + const emits = defineEmits(['testInterface']);
  45 +
  46 + const props = defineProps({
45 47 method: {
46 48 type: String,
47 49 },
48 50 data: {
49   - type: Object,
  51 + type: Array,
50 52 },
51 53 });
52 54
... ... @@ -58,11 +60,23 @@
58 60
59 61 // const testNeedKeys = ['organizationId', 'deviceProfileId', 'entityId', 'keys', 'date'];
60 62
  63 + const handleTest = () => {
  64 + showTestEditCell.value = true;
  65 + emits('testInterface');
  66 + getValue();
  67 + };
  68 +
  69 + const getValue = async () => {
  70 + await nextTick();
  71 + await nextTick(() => {
  72 + testEditCellTableRef.value?.setTableArray(props.data);
  73 + });
  74 + };
  75 +
61 76 const handleExcute = async () => {
62 77 const params = testEditCellTableRef.value?.getValue();
63 78 const keys = params?.map((m) => ({ key: m.key, value: m.value }));
64 79 keys?.forEach(async (it: any) => {
65   - console.log(it);
66 80 if (it.key === 'organizationId') {
67 81 //获取设备
68 82 const data = await getAllDeviceByOrg(it.value!);
... ... @@ -83,6 +97,7 @@
83 97 };
84 98 defineExpose({
85 99 setValue,
  100 + handleTest,
86 101 });
87 102 </script>
88 103
... ...
... ... @@ -4,7 +4,7 @@
4 4 <Button @click="handleExcute" type="primary"> 测试SQL </Button>
5 5 </div>
6 6 </div>
7   - <div class="mt-8">
  7 + <div v-if="testResultStatus" class="mt-8">
8 8 <div class="mt-8">
9 9 <a-row type="flex" justify="center">
10 10 <a-col :span="3"> 测试结果 </a-col>
... ... @@ -33,7 +33,10 @@
33 33
34 34 const testResult = ref('');
35 35
  36 + const testResultStatus = ref(false);
  37 +
36 38 const handleExcute = async () => {
  39 + testResultStatus.value = true;
37 40 testResult.value = '测试结果为：1234';
38 41 };
39 42
... ...
... ... @@ -194,7 +194,7 @@ export const schemas: FormSchema[] = [
194 194 },
195 195 {
196 196 field: 'testSlot',
197   - label: '测试',
  197 + label: '',
198 198 component: 'Input',
199 199 slot: 'testSql',
200 200 colProps: { span: 24 },
... ...
... ... @@ -13,21 +13,25 @@
13 13 ref="simpleRequestRef"
14 14 v-if="model['requestContentType'] === '0'"
15 15 @activeKey="handleActiveKey"
  16 + :paramsType="model['requestHttpType']"
16 17 :method="model['requestContentType']"
17 18 />
18 19 <SimpleRequest
19 20 ref="simpleRequestRef"
20 21 @activeKey="handleActiveKey"
21 22 v-else-if="model['requestContentType'] === '2'"
  23 + :paramsType="model['requestHttpType']"
22 24 :method="model['requestContentType']"
23 25 />
24 26 </template>
25 27 <template #testSql="{ model }">
26   - <TestSql
27   - ref="testSqlRef"
28   - v-if="model['requestContentType'] === '1'"
29   - :method="model['requestContentType']"
30   - />
  28 + <div style="margin: auto 7.5rem">
  29 + <TestSql
  30 + ref="testSqlRef"
  31 + v-if="model['requestContentType'] === '1'"
  32 + :method="model['requestContentType']"
  33 + />
  34 + </div>
31 35 </template>
32 36 </BasicForm>
33 37 </BasicDrawer>
... ... @@ -71,8 +75,8 @@
71 75 setDrawerProps({ loading: true });
72 76 await nextTick();
73 77 await resetFields();
74   - nextTick(() => simpleRequestRef.value?.resetValue());
75   - nextTick(() => testSqlRef.value?.resetValue());
  78 + await nextTick(() => simpleRequestRef.value?.resetValue());
  79 + await nextTick(() => testSqlRef.value?.resetValue());
76 80 const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
77 81 setDrawerProps({ title });
78 82 isUpdate.value = data.isUpdate;
... ... @@ -112,7 +116,7 @@
112 116 try {
113 117 const values = await validate();
114 118 if (!values) return;
115   - const Objects = simpleRequestRef.value?.getValue();
  119 + const Objects = simpleRequestRef.value?.getValue(true);
116 120 const data = {
117 121 ...values,
118 122 id: !putId.value ? null : putId.value,
... ...