简柏林 / thingskit-front · Commits

Commit 5ce6278174c851fbae8dab15b79ad3f95b78fec6

Authored by xp.Huang
1 parent 15878823

Merge branch 'ft' into 'main_dev' 

pref:优化部分代码，新增表格header（key,value）形式，修改三者共存（params,body,header）

See merge request yunteng/thingskit-front!522

(cherry picked from commit 6eaf52cd)

40e65dc0 fix:修复公共接口管理表格select数据无法置空问题
255d9635 fix:修复公共接口管理表格select数据无法置空问题
ccf163b4 fix:修复公共接口管理表格select数据无法置空问题
311aa085 pref:优化部分代码，新增表格header（key,value）形式，修改三者共存（params,body,header）
Inline Side-by-side
Showing 13 changed files with 409 additions and 242 deletions
@@ -38,6 +38,7 @@ import ApiSearchSelect from './components/ApiSearchSelect.vue'; @@ -38,6 +38,7 @@ import ApiSearchSelect from './components/ApiSearchSelect.vue';
38 import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue'; 38 import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue';
39 import StructForm from './externalCompns/components/StructForm/StructForm.vue'; 39 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
40 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue'; 40 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
  41 +import InputGroup from './components/InputGroup.vue';
41 42
42 const componentMap = new Map<ComponentType, Component>(); 43 const componentMap = new Map<ComponentType, Component>();
43 44
@@ -83,6 +84,7 @@ componentMap.set('ApiSearchSelect', ApiSearchSelect); @@ -83,6 +84,7 @@ componentMap.set('ApiSearchSelect', ApiSearchSelect);
83 componentMap.set('CustomMinMaxInput', CustomMinMaxInput); 84 componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
84 componentMap.set('StructForm', StructForm); 85 componentMap.set('StructForm', StructForm);
85 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad); 86 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
  87 +componentMap.set('InputGroup', InputGroup);
86 88
87 export function add(compName: ComponentType, component: Component) { 89 export function add(compName: ComponentType, component: Component) {
88 componentMap.set(compName, component); 90 componentMap.set(compName, component);
  1 +<template>
  2 + <div>
  3 + <!-- 简易封装InputGroup -->
  4 + <!-- 待完善封装InputGroup -->
  5 + <InputGroup compact>
  6 + <Select
  7 + v-if="type !== '2'"
  8 + placeholder="请求类型"
  9 + :style="{ width: type !== '2' ? 15 + '%' : 0 + '%' }"
  10 + v-model:value="valueObj.requestHttpType"
  11 + :options="selectOptions"
  12 + allowClear
  13 + @change="emitChange"
  14 + />
  15 + <Input
  16 + @change="emitChange"
  17 + placeholder="请输入接口地址"
  18 + v-model:value="valueObj.requestUrl"
  19 + :style="{ width: type !== '2' ? 85 + '%' : 100 + '%' }"
  20 + />
  21 + </InputGroup>
  22 + </div>
  23 +</template>
  24 +<script lang="ts" setup>
  25 + import { reactive, ref, watchEffect } from 'vue';
  26 + import { InputGroup, Select, Input } from 'ant-design-vue';
  27 + import type { SelectValue } from 'ant-design-vue/lib/select';
  28 + import { findDictItemByCode } from '/@/api/system/dict';
  29 + import { propTypes } from '/@/utils/propTypes';
  30 +
  31 + type TypeInputGroup = {
  32 + requestHttpType: SelectValue | undefined;
  33 + requestUrl?: string;
  34 + disabled?: boolean;
  35 + };
  36 +
  37 + type selectType = { label: string; value: string; disabled?: boolean };
  38 +
  39 + const props = defineProps({
  40 + type: {
  41 + type: String,
  42 + },
  43 + value: propTypes.object.def({}),
  44 + });
  45 +
  46 + const emits = defineEmits(['change', 'update:value']);
  47 +
  48 + const selectOptions = ref<selectType[]>([]);
  49 +
  50 + const getOptions = async (e) => {
  51 + const res = await findDictItemByCode({
  52 + dictCode: e === '1' ? 'dataview_select_sql_request' : 'dataview_select_request',
  53 + });
  54 + if (e === '1' || e === '0') {
  55 + selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
  56 + } else {
  57 + selectOptions.value = [];
  58 + }
  59 + };
  60 +
  61 + const valueObj = reactive<TypeInputGroup>({
  62 + requestHttpType: undefined,
  63 + requestUrl: '',
  64 + });
  65 +
  66 + watchEffect(() => {
  67 + initVal();
  68 + });
  69 +
  70 + function initVal() {
  71 + if (props?.type) getOptions(props?.type);
  72 + if (props?.value) for (let i in props.value) Reflect.set(valueObj, i, props.value[i]);
  73 + }
  74 +
  75 + function emitChange() {
  76 + emits('change', valueObj);
  77 + emits('update:value', valueObj);
  78 + }
  79 +</script>
  80 +<style scoped></style>
@@ -241,6 +241,7 @@ @@ -241,6 +241,7 @@
241 </Tooltip> 241 </Tooltip>
242 <Tooltip title="设计"> 242 <Tooltip title="设计">
243 <AuthIcon 243 <AuthIcon
  244 + v-if="item.state === 0"
244 class="!text-lg" 245 class="!text-lg"
245 icon="ant-design:edit-outlined" 246 icon="ant-design:edit-outlined"
246 @click="handleDesign(item)" 247 @click="handleDesign(item)"
@@ -4,16 +4,12 @@ @@ -4,16 +4,12 @@
4 <table align="center"> 4 <table align="center">
5 <thead> 5 <thead>
6 <tr> 6 <tr>
7 - <th></th>  
8 - <th>内置参数</th>  
9 - <th>参数名</th>  
10 - <th>是否必须</th>  
11 - <th>操作</th> 7 + <th v-for="item in editCellTableTHeadConfig" :key="item">{{ item }}</th>
12 </tr> 8 </tr>
13 </thead> 9 </thead>
14 <tbody> 10 <tbody>
15 <tr v-for="(item, index) in tableArray.content" :key="index"> 11 <tr v-for="(item, index) in tableArray.content" :key="index">
16 - <td style="width: 1vw"> 12 + <td>
17 {{ index + 1 }} 13 {{ index + 1 }}
18 </td> 14 </td>
19 <td style="width: 12vw"> 15 <td style="width: 12vw">
@@ -26,7 +22,7 @@ @@ -26,7 +22,7 @@
26 /> 22 />
27 </td> 23 </td>
28 <td style="width: 12vw"> 24 <td style="width: 12vw">
29 - <div v-if="item.key === 'fixed_date' || item.key === 'date_range'"> 25 + <div v-if="item.key === 'date_range'">
30 <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" /> 26 <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
31 <span>~</span> 27 <span>~</span>
32 <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" /> 28 <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
@@ -42,7 +38,7 @@ @@ -42,7 +38,7 @@
42 <td style="width: 4vw"> 38 <td style="width: 4vw">
43 <a-switch v-model:checked="item.required" /> 39 <a-switch v-model:checked="item.required" />
44 </td> 40 </td>
45 - <td style="width: 2vw"> 41 + <td style="width: 4vw">
46 <div> 42 <div>
47 <Button type="dashed" @click="add(item, index)"> 43 <Button type="dashed" @click="add(item, index)">
48 <template #icon><PlusOutlined /></template 44 <template #icon><PlusOutlined /></template
@@ -62,6 +58,8 @@ @@ -62,6 +58,8 @@
62 import { Select, Button } from 'ant-design-vue'; 58 import { Select, Button } from 'ant-design-vue';
63 import { findDictItemByCode } from '/@/api/system/dict'; 59 import { findDictItemByCode } from '/@/api/system/dict';
64 import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'; 60 import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
  61 + import { editCellTableTHeadConfig } from '../../config';
  62 + import { selectType, tableItems } from '../../types';
65 63
66 defineProps({ 64 defineProps({
67 method: { 65 method: {
@@ -69,6 +67,8 @@ @@ -69,6 +67,8 @@
69 }, 67 },
70 }); 68 });
71 69
  70 + const selectOptions = ref<selectType[]>([]);
  71 +
72 onMounted(() => { 72 onMounted(() => {
73 getSelectOptions(); 73 getSelectOptions();
74 }); 74 });
@@ -82,23 +82,12 @@ @@ -82,23 +82,12 @@
82 }); 82 });
83 }; 83 };
84 84
85 - const selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);  
86 -  
87 - type defaultItem = {  
88 - key: null | string;  
89 - value: string;  
90 - editDisabled: boolean;  
91 - required: boolean;  
92 - date1: string;  
93 - date2: string;  
94 - };  
95 -  
96 const tableArray = reactive<{ 85 const tableArray = reactive<{
97 - content: defaultItem[]; 86 + content: tableItems[];
98 }>({ 87 }>({
99 content: [ 88 content: [
100 { 89 {
101 - key: null, 90 + key: undefined,
102 value: '', 91 value: '',
103 editDisabled: false, 92 editDisabled: false,
104 required: false, 93 required: false,
@@ -111,7 +100,7 @@ @@ -111,7 +100,7 @@
111 // 新增 100 // 新增
112 const add = (_, index: number) => { 101 const add = (_, index: number) => {
113 tableArray.content.splice(index + 1, 0, { 102 tableArray.content.splice(index + 1, 0, {
114 - key: null, 103 + key: undefined,
115 value: '', 104 value: '',
116 editDisabled: false, 105 editDisabled: false,
117 required: false, 106 required: false,
@@ -137,13 +126,13 @@ @@ -137,13 +126,13 @@
137 selectOptions.value.forEach((ele) => { 126 selectOptions.value.forEach((ele) => {
138 ele.disabled = false; 127 ele.disabled = false;
139 tableArray.content.forEach((element) => { 128 tableArray.content.forEach((element) => {
140 - if (element.key === 'scope') { 129 + if (element.key === 'scope' || element.key === 'fixed_date') {
141 element.editDisabled = false; 130 element.editDisabled = false;
142 } else { 131 } else {
143 element.value = ''; 132 element.value = '';
144 element.editDisabled = true; 133 element.editDisabled = true;
145 } 134 }
146 - if (element.key === ele.value && element.key !== 'scope') { 135 + if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
147 ele.disabled = true; 136 ele.disabled = true;
148 } 137 }
149 }); 138 });
@@ -155,12 +144,7 @@ @@ -155,12 +144,7 @@
155 const assemblyData = tableArray.content.map((it) => { 144 const assemblyData = tableArray.content.map((it) => {
156 return { 145 return {
157 key: it.key, 146 key: it.key,
158 - value:  
159 - it.key === 'fixed_date'  
160 - ? `${it.date1},${it.date2}`  
161 - : it.key === 'date_range'  
162 - ? `${it.date1},${it.date2}`  
163 - : it.value, 147 + value: it?.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
164 editDisabled: it.editDisabled, 148 editDisabled: it.editDisabled,
165 required: it.required, 149 required: it.required,
166 }; 150 };
@@ -177,8 +161,8 @@ @@ -177,8 +161,8 @@
177 value: it.value, 161 value: it.value,
178 editDisabled: it.editDisabled, 162 editDisabled: it.editDisabled,
179 required: it.required, 163 required: it.required,
180 - date1: it.key === 'date_range' || it.key === 'fixed_date' ? it.value.split(',').at(-2) : '',  
181 - date2: it.key === 'date_range' || it.key === 'fixed_date' ? it.value.split(',').at(-1) : '', 164 + date1: it.key === 'date_range' ? it.value?.split(',')?.at(-2) : '',
  165 + date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
182 }; 166 };
183 }); 167 });
184 tableArray.content = assemblyData; 168 tableArray.content = assemblyData;
@@ -191,7 +175,7 @@ @@ -191,7 +175,7 @@
191 const resetValue = () => { 175 const resetValue = () => {
192 tableArray.content = []; 176 tableArray.content = [];
193 tableArray.content.push({ 177 tableArray.content.push({
194 - key: null, 178 + key: undefined,
195 value: '', 179 value: '',
196 editDisabled: false, 180 editDisabled: false,
197 required: false, 181 required: false,
@@ -228,6 +212,10 @@ @@ -228,6 +212,10 @@
228 &:extend(.table-border-color); 212 &:extend(.table-border-color);
229 } 213 }
230 214
  215 + table thead {
  216 + white-space: nowrap;
  217 + }
  218 +
231 table td { 219 table td {
232 padding: 5px; 220 padding: 5px;
233 white-space: nowrap; 221 white-space: nowrap;
@@ -48,7 +48,7 @@ @@ -48,7 +48,7 @@
48 type: String, 48 type: String,
49 }, 49 },
50 data: { 50 data: {
51 - type: Array, 51 + type: Array || Object,
52 }, 52 },
53 }); 53 });
54 54
  1 +<template>
  2 + <div class="table-content">
  3 + <!-- 采用的原生表格 -->
  4 + <table align="center">
  5 + <thead>
  6 + <tr>
  7 + <th v-for="item in editTestCellTableTHeaderConfig" :key="item">{{ item }}</th>
  8 + </tr>
  9 + </thead>
  10 + <tbody>
  11 + <tr v-for="(item, index) in tableArray.content" :key="index">
  12 + <td>
  13 + {{ index + 1 }}
  14 + </td>
  15 + <td style="width: 12vw">
  16 + <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.key" />
  17 + </td>
  18 + <td style="width: 12vw">
  19 + <a-input style="width: 12vw" placeholder="请输入" v-model:value="item.value" />
  20 + </td>
  21 + <td style="width: 4vw">
  22 + <div>
  23 + <Button type="dashed" @click="add(item, index)">
  24 + <template #icon><PlusOutlined /></template
  25 + ></Button>
  26 + <Button type="dashed" style="margin-left: 5px" @click="remove(index)">
  27 + <template #icon> <MinusOutlined /></template>
  28 + </Button>
  29 + </div>
  30 + </td>
  31 + </tr>
  32 + </tbody>
  33 + </table>
  34 + </div>
  35 +</template>
  36 +<script lang="ts" setup name="editCellTable">
  37 + import { reactive, nextTick } from 'vue';
  38 + import { Button } from 'ant-design-vue';
  39 + import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
  40 + import { editTestCellTableTHeaderConfig } from '../../config';
  41 + import { tableItems } from '../../types';
  42 +
  43 + defineProps({
  44 + method: {
  45 + type: String,
  46 + },
  47 + });
  48 +
  49 + const tableArray = reactive<{
  50 + content: tableItems[];
  51 + }>({
  52 + content: [
  53 + {
  54 + key: '',
  55 + value: '',
  56 + },
  57 + ],
  58 + });
  59 +
  60 + // 新增
  61 + const add = (_, index: number) => {
  62 + tableArray.content.splice(index + 1, 0, {
  63 + key: '',
  64 + value: '',
  65 + });
  66 + };
  67 +
  68 + // 减少
  69 + const remove = (index: number) => {
  70 + if (tableArray.content.length !== 1) {
  71 + tableArray.content.splice(index, 1);
  72 + }
  73 + };
  74 +
  75 + //获取数据
  76 + const getValue = () => {
  77 + return tableArray.content;
  78 + };
  79 +
  80 + //设置数据
  81 + const setValue = async (data) => {
  82 + await nextTick();
  83 + tableArray.content = data;
  84 + };
  85 +
  86 + //重置数据
  87 + const resetValue = () => {
  88 + tableArray.content = [];
  89 + tableArray.content.push({
  90 + key: '',
  91 + value: '',
  92 + });
  93 + nextTick(() => {});
  94 + };
  95 + defineExpose({
  96 + getValue,
  97 + setValue,
  98 + resetValue,
  99 + });
  100 +</script>
  101 +
  102 +<style scoped lang="less">
  103 + @table-color: #e5e7eb;
  104 +
  105 + .table-border-color {
  106 + border: 1px solid #e5e7eb;
  107 + text-align: center;
  108 + }
  109 +
  110 + .table-content {
  111 + overflow-x: auto;
  112 +
  113 + table {
  114 + border-collapse: collapse;
  115 + width: 35vw;
  116 + &:extend(.table-border-color);
  117 + }
  118 +
  119 + table thead {
  120 + white-space: nowrap;
  121 + }
  122 +
  123 + table td {
  124 + padding: 5px;
  125 + white-space: nowrap;
  126 + &:extend(.table-border-color);
  127 + }
  128 +
  129 + table th {
  130 + padding: 5px;
  131 + &:extend(.table-border-color);
  132 + }
  133 + }
  134 +</style>
1 <template> 1 <template>
2 <div> 2 <div>
3 - <Tabs @change="handleChange" v-model:activeKey="activeKey"> 3 + <Tabs @change="handleTabsChange" v-model:activeKey="activeKey">
4 <TabPane class="tab-pane" forceRender key="Params" tab="Params"> 4 <TabPane class="tab-pane" forceRender key="Params" tab="Params">
5 - <EditCellTable ref="editCellTableRef" :method="method" />  
6 - <TestRequest  
7 - @testInterface="handleTestInterface"  
8 - ref="testParRequestRef"  
9 - :method="method"  
10 - :requestOriginUrl="requestOriginUrl"  
11 - :requestUrl="requestUrl"  
12 - :data="dataMap.mapObj"  
13 - /> 5 + <EditCellTable ref="editParamsCellTableRef" :method="method" />
14 </TabPane> 6 </TabPane>
15 <TabPane 7 <TabPane
16 - v-if="method !== '2' && paramsType !== 'GET'" 8 + v-if="method !== '2' && requestTypeAndUrl?.requestHttpType !== 'GET'"
17 class="tab-pane" 9 class="tab-pane"
18 forceRender 10 forceRender
19 key="Body" 11 key="Body"
20 tab="Body" 12 tab="Body"
21 > 13 >
22 - <Body ref="bodyRef" :method="method" :paramsType="paramsType" :data="dataMap.mapObj" />  
23 - <TestRequest  
24 - @testInterface="handleTestInterface"  
25 - ref="testBodyRequestRef" 14 + <Body
  15 + ref="bodyRef"
26 :method="method" 16 :method="method"
27 - :requestOriginUrl="requestOriginUrl"  
28 - :requestUrl="requestUrl" 17 + :paramsType="requestTypeAndUrl?.requestHttpType"
29 :data="dataMap.mapObj" 18 :data="dataMap.mapObj"
30 /> 19 />
31 </TabPane> 20 </TabPane>
32 <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header"> 21 <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
33 - <EditCellTable ref="editHeaderCellTableRef" :method="method" />  
34 - <TestRequest  
35 - @testInterface="handleTestInterface"  
36 - ref="testHeaderRequestRef"  
37 - :method="method"  
38 - :requestOriginUrl="requestOriginUrl"  
39 - :requestUrl="requestUrl"  
40 - :data="dataMap.mapObj"  
41 - /> 22 + <Header ref="editHeaderCellTableRef" :method="method" />
42 </TabPane> 23 </TabPane>
43 </Tabs> 24 </Tabs>
  25 + <div class="tab-pane">
  26 + <TestRequest
  27 + @testInterface="handleTestInterface"
  28 + ref="testRequestRef"
  29 + :method="method"
  30 + :requestOriginUrl="requestOriginUrl"
  31 + :requestUrl="requestTypeAndUrl?.requestUrl"
  32 + :data="dataMap.mapObj"
  33 + />
  34 + </div>
44 </div> 35 </div>
45 </template> 36 </template>
46 <script lang="ts" setup name="simpleRequest"> 37 <script lang="ts" setup name="simpleRequest">
@@ -49,61 +40,59 @@ @@ -49,61 +40,59 @@
49 import { EditCellTable } from '../EditCellTable'; 40 import { EditCellTable } from '../EditCellTable';
50 import Body from './body.vue'; 41 import Body from './body.vue';
51 import { TestRequest } from '../TestRequest/index'; 42 import { TestRequest } from '../TestRequest/index';
  43 + import Header from './header.vue';
52 44
53 const props = defineProps({ 45 const props = defineProps({
54 method: { 46 method: {
55 type: String, 47 type: String,
56 }, 48 },
57 - paramsType: {  
58 - type: String, 49 + requestTypeAndUrl: {
  50 + type: Object,
59 }, 51 },
60 requestOriginUrl: { 52 requestOriginUrl: {
61 type: String, 53 type: String,
62 }, 54 },
63 - requestUrl: {  
64 - type: String,  
65 - },  
66 }); 55 });
67 56
68 const emits = defineEmits(['activeKey']); 57 const emits = defineEmits(['activeKey']);
69 58
70 const activeKey = ref('Params'); 59 const activeKey = ref('Params');
71 60
72 - const editCellTableRef = ref<InstanceType<typeof EditCellTable>>(); 61 + const editParamsCellTableRef = ref<InstanceType<typeof EditCellTable>>();
73 62
74 const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>(); 63 const editHeaderCellTableRef = ref<InstanceType<typeof EditCellTable>>();
75 64
76 - const testParRequestRef = ref<InstanceType<typeof TestRequest>>();  
77 -  
78 - const testBodyRequestRef = ref<InstanceType<typeof TestRequest>>(); 65 + const bodyRef = ref<InstanceType<typeof Body>>();
79 66
80 - const testHeaderRequestRef = ref<InstanceType<typeof TestRequest>>(); 67 + const testRequestRef = ref<InstanceType<typeof TestRequest>>();
81 68
82 const dataMap: any = reactive({ 69 const dataMap: any = reactive({
83 mapObj: {}, 70 mapObj: {},
84 }); 71 });
85 72
86 - const bodyRef = ref<InstanceType<typeof Body>>(); 73 + const handleTabsChange = () => testRequestRef.value?.setValue();
87 74
88 - const handleChange = () => {  
89 - testParRequestRef.value?.setValue();  
90 - testHeaderRequestRef.value?.setValue();  
91 - testBodyRequestRef.value?.setValue();  
92 - }; 75 + //if-else-if-else分支优化
  76 + const dataForTypeMap = [
  77 + [(type) => type === 'Params', (data) => editParamsCellTableRef.value?.setValue(data)],
  78 + [(type) => type === 'Body', (data) => bodyRef.value?.setValue(data)],
  79 + [(type) => type === 'Header', (data) => editHeaderCellTableRef.value?.setValue(data)],
  80 + ];
93 81
  82 + //测试接口
94 const handleTestInterface = () => { 83 const handleTestInterface = () => {
95 - let value = getValue(false); 84 + let value = getValue(false) as any;
96 const type = value?.requestParamsBodyType; 85 const type = value?.requestParamsBodyType;
97 - if (type === 'none') value = [];  
98 - if (type === 'form-data') value = value['form-data'];  
99 - if (type === 'x-www-form-urlencoded') value = value['x-www-form-urlencoded']; 86 + // if (type === 'none') value = [];
  87 + // if (type === 'form-data') value = value['form-data'];
  88 + // if (type === 'x-www-form-urlencoded') value = value['x-www-form-urlencoded'];
100 nextTick( 89 nextTick(
101 () => 90 () =>
102 (dataMap.mapObj = { 91 (dataMap.mapObj = {
103 - list: value, 92 + list: value?.Params || value?.Header,
104 requestOriginUrl: props.requestOriginUrl, 93 requestOriginUrl: props.requestOriginUrl,
105 - requestUrl: props.requestUrl,  
106 - paramsType: props.paramsType, 94 + requestParamsBodyType: type,
  95 + requestTypeAndUrl: props.requestTypeAndUrl,
107 }) 96 })
108 ); 97 );
109 }; 98 };
@@ -111,30 +100,25 @@ @@ -111,30 +100,25 @@
111 //获取数据 100 //获取数据
112 const getValue = (status) => { 101 const getValue = (status) => {
113 const type = activeKey.value; 102 const type = activeKey.value;
  103 + status ? emits('activeKey', type) : null;
114 const Body = bodyRef.value?.getValue(); 104 const Body = bodyRef.value?.getValue();
115 - const Params = editCellTableRef.value?.getValue(); 105 + const Params = editParamsCellTableRef.value?.getValue();
116 const Header = editHeaderCellTableRef.value?.getValue(); 106 const Header = editHeaderCellTableRef.value?.getValue();
117 - status ? emits('activeKey', type) : null;  
118 - return type === 'Params' ? Params : type === 'Body' ? Body : Header; 107 + return {
  108 + Params,
  109 + Header,
  110 + Body,
  111 + };
119 }; 112 };
120 113
121 //设置数据 114 //设置数据
122 const setValue = (data) => { 115 const setValue = (data) => {
123 - const Objects = JSON.parse(data?.requestParams);  
124 nextTick(() => { 116 nextTick(() => {
  117 + const Objects = JSON.parse(data?.requestParams);
125 if (!Objects) return; 118 if (!Objects) return;
126 - activeKey.value = Objects?.type;  
127 - if (activeKey.value === 'Params') {  
128 - editCellTableRef.value?.setValue(Objects?.Params);  
129 - testParRequestRef.value?.setValue();  
130 - } else if (activeKey.value === 'Body') {  
131 - bodyRef.value?.setValue(Objects?.Body);  
132 - testBodyRequestRef.value?.setValue();  
133 - } else if (activeKey.value === 'Header') {  
134 - editHeaderCellTableRef.value?.setValue(Objects?.Header);  
135 - testHeaderRequestRef.value?.setValue();  
136 - } else {  
137 - } 119 + dataForTypeMap[0][1](Objects?.Params);
  120 + dataForTypeMap[1][1](Objects?.Body);
  121 + dataForTypeMap[2][1](Objects?.Header);
138 }); 122 });
139 }; 123 };
140 124
@@ -142,10 +126,10 @@ @@ -142,10 +126,10 @@
142 const resetValue = () => { 126 const resetValue = () => {
143 activeKey.value = 'Params'; 127 activeKey.value = 'Params';
144 nextTick(() => { 128 nextTick(() => {
145 - editCellTableRef.value?.resetValue(); 129 + editParamsCellTableRef.value?.resetValue();
146 editHeaderCellTableRef.value?.resetValue(); 130 editHeaderCellTableRef.value?.resetValue();
147 bodyRef.value?.resetValue(); 131 bodyRef.value?.resetValue();
148 - handleChange(); 132 + handleTabsChange();
149 }); 133 });
150 }; 134 };
151 135
1 <!-- eslint-disable vue/valid-v-model --> 1 <!-- eslint-disable vue/valid-v-model -->
2 <template> 2 <template>
3 <div class="table-content"> 3 <div class="table-content">
4 - <!-- TODO 待优化 --> 4 + <!-- TODO 待优化测试表格 -->
5 <table align="center"> 5 <table align="center">
6 <thead> 6 <thead>
7 <tr> 7 <tr>
8 - <th></th>  
9 - <th>内置参数</th>  
10 - <th>参数名</th>  
11 - <th>参数值</th> 8 + <th v-for="item in editTestCellTableTHeadConfig" :key="item">{{ item }}</th>
12 </tr> 9 </tr>
13 </thead> 10 </thead>
14 <tbody> 11 <tbody>
15 <tr v-for="(item, index) in tableTestArray.content" :key="index"> 12 <tr v-for="(item, index) in tableTestArray.content" :key="index">
16 - <td>  
17 - {{ index + 1 }}  
18 - </td>  
19 <td style="width: 7.5vw"> 13 <td style="width: 7.5vw">
20 <Select 14 <Select
21 :disabled="true" 15 :disabled="true"
22 v-model:value="item.key" 16 v-model:value="item.key"
23 placeholder="请选择" 17 placeholder="请选择"
24 - notFoundContent="请选择"  
25 :options="selectOptions" 18 :options="selectOptions"
26 - allowClear  
27 /> 19 />
28 </td> 20 </td>
29 <td style="width: 6.5vw"> 21 <td style="width: 6.5vw">
@@ -55,11 +47,14 @@ @@ -55,11 +47,14 @@
55 :options="attributeOptions" 47 :options="attributeOptions"
56 allowClear 48 allowClear
57 /> 49 />
58 - <div v-else-if="item.key === 'fixed_date' || item.key === 'date_range'"> 50 + <div v-else-if="item.key === 'date_range'">
59 <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button> 51 <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button>
60 <span>~</span> 52 <span>~</span>
61 <a-button disabled type="primary">{{ item.value?.split(',').at(-1) }}</a-button> 53 <a-button disabled type="primary">{{ item.value?.split(',').at(-1) }}</a-button>
62 </div> 54 </div>
  55 + <div v-else-if="item.key === 'fixed_date'">
  56 + <a-button disabled type="primary">{{ item.value }}</a-button>
  57 + </div>
63 <Select 58 <Select
64 v-else 59 v-else
65 v-model:value="item.value" 60 v-model:value="item.value"
@@ -72,20 +67,19 @@ @@ -72,20 +67,19 @@
72 </td> 67 </td>
73 <td style="width: 6.5vw"> 68 <td style="width: 6.5vw">
74 <a-input 69 <a-input
75 - :disabled="item.key !== 'scope'" 70 + v-if="item.key === 'scope' || item.key === 'fixed_date'"
76 placeholder="请输入" 71 placeholder="请输入"
77 v-model:value="item.keyValue" 72 v-model:value="item.keyValue"
78 /> 73 />
79 - </td>  
80 - <td style="width: 6vw">  
81 <a-range-picker 74 <a-range-picker
82 - v-if="item.key === 'fixed_date' || item.key === 'date_range'"  
83 - style="width: 6vw" 75 + v-else-if="item.key == 'date_range'"
  76 + style="width: 6.5vw"
84 v-model:value="item.dateValue" 77 v-model:value="item.dateValue"
85 :show-time="{ format: 'HH:mm' }" 78 :show-time="{ format: 'HH:mm' }"
86 format="YYYY-MM-DD HH:mm" 79 format="YYYY-MM-DD HH:mm"
87 :placeholder="['开始', '结束']" 80 :placeholder="['开始', '结束']"
88 /> 81 />
  82 + <a-input v-else disabled="true" placeholder="请输入" v-model:value="item.keyValue" />
89 </td> 83 </td>
90 </tr> 84 </tr>
91 </tbody> 85 </tbody>
@@ -100,6 +94,8 @@ @@ -100,6 +94,8 @@
100 import { getDeviceAttributes } from '/@/api/dataBoard'; 94 import { getDeviceAttributes } from '/@/api/dataBoard';
101 import { useApi } from '../../hooks/useApi'; 95 import { useApi } from '../../hooks/useApi';
102 import { cloneDeep } from 'lodash-es'; 96 import { cloneDeep } from 'lodash-es';
  97 + import { tableItems, selectType } from '../../types';
  98 + import { editTestCellTableTHeadConfig } from '../../config';
103 99
104 const props = defineProps({ 100 const props = defineProps({
105 method: { 101 method: {
@@ -118,31 +114,23 @@ @@ -118,31 +114,23 @@
118 selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope'); 114 selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
119 }); 115 });
120 116
121 - const selectOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]); 117 + const selectOptions = ref<selectType[]>([]);
122 118
123 - const valueOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]); 119 + const valueOptions = ref<selectType[]>([]);
124 120
125 - const entityOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]); 121 + const entityOptions = ref<selectType[]>([]);
126 122
127 - const attributeOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]); 123 + const attributeOptions = ref<selectType[]>([]);
128 124
129 const treeData = ref([]); 125 const treeData = ref([]);
130 126
131 - type defaultItem = {  
132 - key: null | string;  
133 - value: null | string;  
134 - keyValue: null | string;  
135 - dateValue: null | string;  
136 - editDisabled: boolean;  
137 - };  
138 -  
139 const tableTestArray = reactive<{ 127 const tableTestArray = reactive<{
140 - content: defaultItem[]; 128 + content: tableItems[];
141 }>({ 129 }>({
142 content: [ 130 content: [
143 { 131 {
144 - key: null,  
145 - value: null, 132 + key: undefined,
  133 + value: undefined,
146 keyValue: null, 134 keyValue: null,
147 editDisabled: false, 135 editDisabled: false,
148 dateValue: null, 136 dateValue: null,
@@ -229,9 +217,6 @@ @@ -229,9 +217,6 @@
229 </script> 217 </script>
230 218
231 <style scoped lang="less"> 219 <style scoped lang="less">
232 - :deep(.ant-select-selector) {  
233 - // width: 8vw !important;  
234 - }  
235 @table-color: #e5e7eb; 220 @table-color: #e5e7eb;
236 221
237 .table-border-color { 222 .table-border-color {
@@ -118,10 +118,10 @@ @@ -118,10 +118,10 @@
118 return testEditCellTableRef.value 118 return testEditCellTableRef.value
119 ?.getValue() 119 ?.getValue()
120 .concat(keyValueList) 120 .concat(keyValueList)
121 - .filter((it) => it.key !== 'date_range' && it.key !== 'fixed_date') 121 + .filter((it) => it.key !== 'date_range')
122 .map((it) => { 122 .map((it) => {
123 - const value = it.key === 'scope' ? it.keyValue : it.value;  
124 - const key = it.key === 'scope' ? it.value : it.key; 123 + const value = it.key === 'scope' || it.key === 'fixed_date' ? it.keyValue : it.value;
  124 + const key = it.key === 'scope' || it.key === 'fixed_date' ? it.value : it.key;
125 return { 125 return {
126 key, 126 key,
127 value, 127 value,
@@ -152,7 +152,7 @@ @@ -152,7 +152,7 @@
152 //TODO 待优化 项目自带第三方请求 152 //TODO 待优化 项目自带第三方请求
153 const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => { 153 const otherHttpRequest = async (apiType, params = {}, api, joinPrefix = false) => {
154 switch (apiType) { 154 switch (apiType) {
155 - case 'get': 155 + case 'GET':
156 Reflect.deleteProperty(params, 'deviceProfileId'); 156 Reflect.deleteProperty(params, 'deviceProfileId');
157 Reflect.deleteProperty(params, 'organizationId'); 157 Reflect.deleteProperty(params, 'organizationId');
158 Reflect.deleteProperty(params, 'entityId'); 158 Reflect.deleteProperty(params, 'entityId');
@@ -167,7 +167,7 @@ @@ -167,7 +167,7 @@
167 joinPrefix, 167 joinPrefix,
168 } 168 }
169 ); 169 );
170 - case 'post': 170 + case 'POST':
171 return await otherHttp.post( 171 return await otherHttp.post(
172 { url: api, data: params }, 172 { url: api, data: params },
173 { 173 {
@@ -175,7 +175,7 @@ @@ -175,7 +175,7 @@
175 joinPrefix, 175 joinPrefix,
176 } 176 }
177 ); 177 );
178 - case 'put': 178 + case 'PUT':
179 return await otherHttp.put( 179 return await otherHttp.put(
180 { url: api, data: params }, 180 { url: api, data: params },
181 { 181 {
@@ -204,8 +204,8 @@ @@ -204,8 +204,8 @@
204 await nextTick(); 204 await nextTick();
205 await nextTick(async () => { 205 await nextTick(async () => {
206 const getTable = getTestTableKeyValue(); 206 const getTable = getTestTableKeyValue();
207 - const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestUrl}`;  
208 - const apiType = props.data?.paramsType.toLowerCase(); 207 + const apiGetUrl = `${props.data?.requestOriginUrl}${props.data?.requestTypeAndUrl?.requestUrl}`;
  208 + const apiType = props.data?.requestTypeAndUrl?.requestHttpType;
209 const params: any = {}; 209 const params: any = {};
210 getTable?.map((it) => (params[it.key!] = it.value!)); 210 getTable?.map((it) => (params[it.key!] = it.value!));
211 if (props.method === '0') { 211 if (props.method === '0') {
@@ -29,9 +29,8 @@ export const columns: BasicColumn[] = [ @@ -29,9 +29,8 @@ export const columns: BasicColumn[] = [
29 dataIndex: 'state', 29 dataIndex: 'state',
30 width: 80, 30 width: 80,
31 customRender: ({ record }) => { 31 customRender: ({ record }) => {
32 - const status = record.state;  
33 - const color = status == 1 ? 'green' : 'red';  
34 - const text = status == 1 ? '发布' : '未发布'; 32 + const color = record.state == 1 ? 'green' : 'red';
  33 + const text = record.state == 1 ? '发布' : '未发布';
35 return h(Tag, { color: color }, () => text); 34 return h(Tag, { color: color }, () => text);
36 }, 35 },
37 }, 36 },
@@ -43,7 +42,7 @@ export const searchFormSchema: FormSchema[] = [ @@ -43,7 +42,7 @@ export const searchFormSchema: FormSchema[] = [
43 field: 'name', 42 field: 'name',
44 label: '接口名称', 43 label: '接口名称',
45 component: 'Input', 44 component: 'Input',
46 - colProps: { span: 8 }, 45 + colProps: { span: 9 },
47 componentProps: { 46 componentProps: {
48 maxLength: 36, 47 maxLength: 36,
49 placeholder: '请输入接口名称', 48 placeholder: '请输入接口名称',
@@ -53,7 +52,7 @@ export const searchFormSchema: FormSchema[] = [ @@ -53,7 +52,7 @@ export const searchFormSchema: FormSchema[] = [
53 field: 'state', 52 field: 'state',
54 label: '发布状态', 53 label: '发布状态',
55 component: 'Select', 54 component: 'Select',
56 - colProps: { span: 8 }, 55 + colProps: { span: 9 },
57 componentProps: { 56 componentProps: {
58 options: [ 57 options: [
59 { 58 {
@@ -79,7 +78,7 @@ export const schemas: FormSchema[] = [ @@ -79,7 +78,7 @@ export const schemas: FormSchema[] = [
79 required: true, 78 required: true,
80 component: 'Input', 79 component: 'Input',
81 componentProps: { 80 componentProps: {
82 - maxLength: 64, 81 + maxLength: 255,
83 placeholder: '请输入接口名称', 82 placeholder: '请输入接口名称',
84 }, 83 },
85 }, 84 },
@@ -91,7 +90,7 @@ export const schemas: FormSchema[] = [ @@ -91,7 +90,7 @@ export const schemas: FormSchema[] = [
91 colProps: { span: 24 }, 90 colProps: { span: 24 },
92 defaultValue: '0', 91 defaultValue: '0',
93 componentProps: ({ formActionType }) => { 92 componentProps: ({ formActionType }) => {
94 - const { setFieldsValue, updateSchema } = formActionType; 93 + const { updateSchema, setFieldsValue } = formActionType;
95 return { 94 return {
96 api: findDictItemByCode, 95 api: findDictItemByCode,
97 params: { 96 params: {
@@ -102,15 +101,16 @@ export const schemas: FormSchema[] = [ @@ -102,15 +101,16 @@ export const schemas: FormSchema[] = [
102 valueField: 'itemValue', 101 valueField: 'itemValue',
103 getPopupContainer: () => document.body, 102 getPopupContainer: () => document.body,
104 async onChange(e) { 103 async onChange(e) {
105 - setFieldsValue({ requestHttpType: e === '1' ? 'POST' : 'GET' });  
106 - const res = await findDictItemByCode({  
107 - dictCode: e === '1' ? 'dataview_select_sql_request' : 'dataview_select_request', 104 + setFieldsValue({
  105 + requestHttpTypeAndUrl: {
  106 + requestHttpType: undefined,
  107 + requestUrl: '',
  108 + },
108 }); 109 });
109 - const options = res.map((m) => ({ label: m.itemText, value: m.itemValue }));  
110 updateSchema({ 110 updateSchema({
111 - field: 'requestHttpType', 111 + field: 'requestHttpTypeAndUrl',
112 componentProps: { 112 componentProps: {
113 - options, 113 + type: e,
114 }, 114 },
115 }); 115 });
116 }, 116 },
@@ -119,13 +119,13 @@ export const schemas: FormSchema[] = [ @@ -119,13 +119,13 @@ export const schemas: FormSchema[] = [
119 }, 119 },
120 { 120 {
121 field: 'originUrlType', 121 field: 'originUrlType',
122 - label: '源地址', 122 + label: '地址类型',
123 component: 'ApiSelect', 123 component: 'ApiSelect',
124 required: true, 124 required: true,
125 colProps: { span: 24 }, 125 colProps: { span: 24 },
126 defaultValue: 'server_url', 126 defaultValue: 'server_url',
127 componentProps: { 127 componentProps: {
128 - placeholder: '请选择源地址', 128 + placeholder: '请选择地址类型',
129 api: findDictItemByCode, 129 api: findDictItemByCode,
130 params: { 130 params: {
131 dictCode: 'dataview_select_origin_type', 131 dictCode: 'dataview_select_origin_type',
@@ -136,7 +136,7 @@ export const schemas: FormSchema[] = [ @@ -136,7 +136,7 @@ export const schemas: FormSchema[] = [
136 }, 136 },
137 { 137 {
138 field: 'requestOriginUrl', 138 field: 'requestOriginUrl',
139 - label: '地址', 139 + label: '源地址',
140 colProps: { span: 24 }, 140 colProps: { span: 24 },
141 required: true, 141 required: true,
142 component: 'Input', 142 component: 'Input',
@@ -147,41 +147,22 @@ export const schemas: FormSchema[] = [ @@ -147,41 +147,22 @@ export const schemas: FormSchema[] = [
147 ifShow: ({ values }) => values['originUrlType'] === 'custom_url', 147 ifShow: ({ values }) => values['originUrlType'] === 'custom_url',
148 }, 148 },
149 { 149 {
150 - field: 'requestHttpType',  
151 - label: '请求类型',  
152 - component: 'ApiSelect',  
153 - required: true,  
154 - colProps: { span: 6 },  
155 - defaultValue: 'GET',  
156 - componentProps: {  
157 - placeholder: '请选择请求类型',  
158 - api: findDictItemByCode,  
159 - params: {  
160 - dictCode: 'dataview_select_request',  
161 - },  
162 - labelField: 'itemText',  
163 - valueField: 'itemValue',  
164 - },  
165 - ifShow: ({ values }) =>  
166 - values['requestContentType'] === '0' || values['requestContentType'] === '1',  
167 - },  
168 - {  
169 - field: 'requestUrl',  
170 - label: '',  
171 - component: 'Input', 150 + field: 'requestHttpTypeAndUrl',
  151 + label: '请求类型&地址',
  152 + component: 'InputGroup',
172 required: true, 153 required: true,
173 - colProps: { span: 18 },  
174 - componentProps: {  
175 - maxLength: 255,  
176 - placeholder: '请输入接口地址', 154 + colProps: { span: 24 },
  155 + componentProps: ({ formActionType }) => {
  156 + const { getFieldsValue } = formActionType;
  157 + return {
  158 + type: getFieldsValue().requestContentType,
  159 + };
177 }, 160 },
178 - ifShow: ({ values }) =>  
179 - values['requestContentType'] === '0' || values['requestContentType'] === '1',  
180 }, 161 },
181 { 162 {
182 field: 'requestSQLKey', 163 field: 'requestSQLKey',
183 label: '键名', 164 label: '键名',
184 - colProps: { span: 12 }, 165 + colProps: { span: 6 },
185 component: 'Input', 166 component: 'Input',
186 defaultValue: 'sql', 167 defaultValue: 'sql',
187 componentProps: { 168 componentProps: {
@@ -219,3 +200,8 @@ export const schemas: FormSchema[] = [ @@ -219,3 +200,8 @@ export const schemas: FormSchema[] = [
219 ifShow: ({ values }) => values['requestContentType'] === '1', 200 ifShow: ({ values }) => values['requestContentType'] === '1',
220 }, 201 },
221 ]; 202 ];
  203 +
  204 +//表格表头配置
  205 +export const editCellTableTHeadConfig = ['序号', '内置参数', '参数名', '是否必须', '操作'];
  206 +export const editTestCellTableTHeadConfig = ['内置参数', '参数名', '参数值'];
  207 +export const editTestCellTableTHeaderConfig = ['序号', '参数名', '参数值'];
@@ -4,28 +4,18 @@ @@ -4,28 +4,18 @@
4 showFooter 4 showFooter
5 v-bind="$attrs" 5 v-bind="$attrs"
6 @register="registerDrawer" 6 @register="registerDrawer"
7 - width="45%"  
8 - @ok="handleOnSubmit" 7 + width="50%"
  8 + @ok="handleSubmit"
9 > 9 >
10 <BasicForm @register="registerForm"> 10 <BasicForm @register="registerForm">
11 <template #selectMethods="{ model }"> 11 <template #selectMethods="{ model }">
12 <SimpleRequest 12 <SimpleRequest
13 ref="simpleRequestRef" 13 ref="simpleRequestRef"
14 - v-if="model['requestContentType'] === '0'" 14 + v-if="model['requestContentType'] === '0' || model['requestContentType'] === '2'"
15 @activeKey="handleActiveKey" 15 @activeKey="handleActiveKey"
16 - :paramsType="model['requestHttpType']" 16 + :requestTypeAndUrl="model['requestHttpTypeAndUrl']"
17 :method="model['requestContentType']" 17 :method="model['requestContentType']"
18 :requestOriginUrl="model['requestOriginUrl']" 18 :requestOriginUrl="model['requestOriginUrl']"
19 - :requestUrl="model['requestUrl']"  
20 - />  
21 - <SimpleRequest  
22 - ref="simpleRequestRef"  
23 - @activeKey="handleActiveKey"  
24 - v-else-if="model['requestContentType'] === '2'"  
25 - :paramsType="model['requestHttpType']"  
26 - :method="model['requestContentType']"  
27 - :requestOriginUrl="model['requestOriginUrl']"  
28 - :requestUrl="model['requestUrl']"  
29 /> 19 />
30 </template> 20 </template>
31 <template #testSql="{ model }"> 21 <template #testSql="{ model }">
@@ -53,7 +43,6 @@ @@ -53,7 +43,6 @@
53 updateDataViewInterface, 43 updateDataViewInterface,
54 } from '/@/api/bigscreen/center/bigscreenCenter'; 44 } from '/@/api/bigscreen/center/bigscreenCenter';
55 import { useMessage } from '/@/hooks/web/useMessage'; 45 import { useMessage } from '/@/hooks/web/useMessage';
56 - import { findDictItemByCode } from '/@/api/system/dict';  
57 46
58 const emits = defineEmits(['success', 'register']); 47 const emits = defineEmits(['success', 'register']);
59 48
@@ -76,49 +65,52 @@ @@ -76,49 +65,52 @@
76 }); 65 });
77 66
78 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { 67 const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
79 - setDrawerProps({ loading: true });  
80 - await nextTick();  
81 await resetFields(); 68 await resetFields();
82 - await nextTick(() => simpleRequestRef.value?.resetValue());  
83 - await nextTick(() => testSqlRef.value?.resetValue()); 69 + await nextTick();
  70 + updateSchema({
  71 + field: 'requestHttpTypeAndUrl',
  72 + componentProps: {
  73 + type: '0',
  74 + },
  75 + });
  76 + setFieldsValue({
  77 + requestHttpTypeAndUrl: {
  78 + requestHttpType: undefined,
  79 + requestUrl: '',
  80 + },
  81 + });
84 const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`; 82 const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
85 setDrawerProps({ title }); 83 setDrawerProps({ title });
86 isUpdate.value = data.isUpdate; 84 isUpdate.value = data.isUpdate;
87 !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id); 85 !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
  86 + simpleRequestRef.value?.resetValue() && testSqlRef.value?.resetValue();
88 if (isUpdate.value) { 87 if (isUpdate.value) {
89 await setFieldsValue({ 88 await setFieldsValue({
90 ...data.record, 89 ...data.record,
91 requestContentType: String(data.record?.requestContentType), 90 requestContentType: String(data.record?.requestContentType),
92 requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql, 91 requestSQLContent: JSON.parse(data.record?.requestParams)?.requestSQLContent?.sql,
93 - originUrlType: data.record?.requestOriginUrl.startsWith('localhost') 92 + originUrlType: data.record?.requestOriginUrl?.startsWith('localhost')
94 ? 'server_url' 93 ? 'server_url'
95 : 'custom_url', 94 : 'custom_url',
  95 + requestHttpTypeAndUrl: {
  96 + requestHttpType: data.record?.requestHttpType,
  97 + requestUrl: data.record?.requestUrl,
  98 + },
96 }); 99 });
97 - await nextTick(() =>  
98 - setTimeout(() => {  
99 - simpleRequestRef.value?.setValue(data.record);  
100 - }, 200)  
101 - );  
102 - const res = await findDictItemByCode({  
103 - dictCode:  
104 - data.record?.requestContentType === 1  
105 - ? 'dataview_select_sql_request'  
106 - : 'dataview_select_request',  
107 - });  
108 - const options = res.map((m) => ({ label: m.itemText, value: m.itemValue })); 100 + await nextTick(() => simpleRequestRef.value?.setValue(data.record));
109 updateSchema({ 101 updateSchema({
110 - field: 'requestHttpType', 102 + field: 'requestHttpTypeAndUrl',
111 componentProps: { 103 componentProps: {
112 - options, 104 + type: String(data.record?.requestContentType),
113 }, 105 },
114 }); 106 });
  107 + } else {
115 } 108 }
116 - setDrawerProps({ loading: false });  
117 }); 109 });
118 110
119 const handleActiveKey = (v) => (activeKey.value = v); 111 const handleActiveKey = (v) => (activeKey.value = v);
120 112
121 - const handleOnSubmit = async () => { 113 + const handleSubmit = async () => {
122 setDrawerProps({ loading: true }); 114 setDrawerProps({ loading: true });
123 try { 115 try {
124 const values = await validate(); 116 const values = await validate();
@@ -133,17 +125,18 @@ @@ -133,17 +125,18 @@
133 requestSQLContent: { 125 requestSQLContent: {
134 sql: values?.requestSQLContent, 126 sql: values?.requestSQLContent,
135 }, 127 },
136 - type: activeKey.value,  
137 - Params: activeKey.value === 'Params' ? Objects : {},  
138 - Body: activeKey.value === 'Body' ? Objects : {},  
139 - Header: activeKey.value === 'Header' ? Objects : {}, 128 + ...Objects,
140 }), 129 }),
141 requestOriginUrl, 130 requestOriginUrl,
  131 + requestHttpType: values['requestHttpTypeAndUrl']?.requestHttpType,
  132 + requestUrl: values['requestHttpTypeAndUrl']?.requestUrl,
142 }; 133 };
  134 + Reflect.deleteProperty(data, 'requestHttpTypeAndUrl');
  135 + if (values['requestContentType'] === '2') Reflect.deleteProperty(data, 'requestHttpType');
143 !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data); 136 !putId.value ? await saveDataViewInterface(data) : await updateDataViewInterface(data);
144 emits('success'); 137 emits('success');
145 closeDrawer(); 138 closeDrawer();
146 - createMessage.success(`${!isUpdate.value ? '新增' : '修改'}成功`); 139 + createMessage.success(`${!isUpdate.value ? '新增' : '修改'}公共接口成功`);
147 } finally { 140 } finally {
148 setDrawerProps({ loading: false }); 141 setDrawerProps({ loading: false });
149 } 142 }
@@ -93,9 +93,8 @@ @@ -93,9 +93,8 @@
93 import { Popconfirm, Modal } from 'ant-design-vue'; 93 import { Popconfirm, Modal } from 'ant-design-vue';
94 import { JsonPreview } from '/@/components/CodeEditor'; 94 import { JsonPreview } from '/@/components/CodeEditor';
95 import { useMessage } from '/@/hooks/web/useMessage'; 95 import { useMessage } from '/@/hooks/web/useMessage';
96 - import { cloneDeep } from 'lodash-es';  
97 96
98 - const [registerTable, { reload }] = useTable({ 97 + const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
99 api: getDataViewInterfacePage, 98 api: getDataViewInterfacePage,
100 columns, 99 columns,
101 showIndexColumn: false, 100 showIndexColumn: false,
@@ -129,27 +128,22 @@ @@ -129,27 +128,22 @@
129 const handleSuccess = () => { 128 const handleSuccess = () => {
130 reload(); 129 reload();
131 setStatusIsTrue(); 130 setStatusIsTrue();
  131 + clearSelectedRowKeys();
132 }; 132 };
133 133
134 const setStatusIsFalse = () => { 134 const setStatusIsFalse = () => {
135 - hasBatchDelete.value = false;  
136 - hasBatchPublish.value = false; 135 + (hasBatchDelete.value = false), (hasBatchPublish.value = false);
137 }; 136 };
138 137
139 const setStatusIsTrue = () => { 138 const setStatusIsTrue = () => {
140 - hasBatchDelete.value = true;  
141 - hasBatchPublish.value = true; 139 + (hasBatchDelete.value = true), (hasBatchPublish.value = true);
142 }; 140 };
143 141
144 const rowSelection = { 142 const rowSelection = {
145 onChange: (_, selectedRows: any[]) => { 143 onChange: (_, selectedRows: any[]) => {
146 - const list = cloneDeep(selectedRows);  
147 - batchDeleteIds.value = list.filter((it) => it.state === 0).map((it) => it.id) as never as any;  
148 - if (batchDeleteIds.value.length > 0) {  
149 - setStatusIsFalse();  
150 - } else {  
151 - setStatusIsTrue();  
152 - } 144 + batchDeleteIds.value = selectedRows.map((it) => it.id) as never as any;
  145 + if (batchDeleteIds.value.length > 0) setStatusIsFalse();
  146 + else setStatusIsTrue();
153 }, 147 },
154 getCheckboxProps: (record) => ({ 148 getCheckboxProps: (record) => ({
155 disabled: record.state === 1, 149 disabled: record.state === 1,
  1 +import type { SelectValue } from 'ant-design-vue/lib/select';
  2 +
  3 +/**
  4 + * select选择框TS类型
  5 + */
  6 +export type selectType = { label: string; value: string; disabled?: boolean };
  7 +
  8 +/**
  9 + * 表格数据TS类型
  10 + */
  11 +export type tableItems = {
  12 + key: SelectValue | undefined;
  13 + value: string | SelectValue | undefined;
  14 + editDisabled?: boolean;
  15 + required?: boolean;
  16 + date1?: string;
  17 + date2?: string;
  18 + keyValue?: null | string;
  19 + dateValue?: null | string;
  20 +};