td> 
function create(node, data) {
460 
  operateType.value = 'create';
461 
  if (node.level === 1) {
462 
    drawerType.value = 'logic';
463 
    logicForms.value = [...formConfig.value.logic.forms];
464 
    moduleTitle.value = '新增API';
465 
    showDrawer.value = true;
466 
    curModule.value = data.id;
467 
  }
468 
}
469
470 
/**
471 
 * logic end
472 
 */
473
474 
// 弹窗
475 
function closeDialog() {
476 
  showDrawer.value = false;
477 
  drawerType.value = '';
478 
  operateType.value = '';
479 
}
480
481 
// 确认
482 
function confirmDialog() {
483 
  if (drawerType.value === 'module') {
484 
    const params = { ...moduleValues.value };
485 
    switch (operateType.value) {
486 
      case 'create':
487 
        params.versionId = curVersionId.value;
488 
        createModuleApi(params);
489 
        break;
490 
      case 'clone':
491 
        params.versionId = curVersionId.value;
492 
        cloneModuleById(params);
493 
        break;
494 
      case 'edit':
495 
        updateModule(params);
496 
        break;
497 
      default:
498 
        break;
499 
    }
500 
  } else if (drawerType.value === 'logic') {
501 
    const params = {
502 
      ...logicValues.value
503 
    };
504 
    switch (operateType.value) {
505 
      case 'create':
506 
        params.moduleId = curModule.value;
507 
        createLogic(params);
508 
        break;
509 
      case 'clone':
510 
        cloneLogicById(params);
511 
        break;
512 
      case 'edit':
513 
        params.moduleId = curModule.value;
514 
        updateLogic(params);
515 
        break;
516 
      default:
517 
        break;
518 
    }
519 
  }
520 
}
521
522 
// 编辑api
523 
function editLogicApi() {
524 
  router.push({
525 
    name: 'Flow',
526 
    query: {
527 
      id: curLogic.value,
528 
      sysId: systemId.value
529 
    }
530 
  });
531 
}
532
533 
// 测试
534 
function initApiInfo() {}
535
536 
watch(curLogic.value, () => {
537 
  getApiDetail();
538 
});
539 
// watch 监听
540 
onMounted(async () => {
541 
  await getSystemDetail();
542 
  await getVersionList();
543 
  await getModuleData();
544 
});
8 545 
</script>
9 546
10 547 
<style scoped lang="scss">
11
548 
.system-tree {
549 
  height: 100%;
550 
  background: #fff;
551 
}
552 
.system-detail-btns {
553 
  display: flex;
554 
  justify-content: space-between;
555 
  padding: 0 12px;
556 
  background: #fff;
557 
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
558 
  height: 50px;
559 
  align-items: center;
560 
  width: calc(100% - 48px);
561 
  margin-left: 24px;
562 
}
12 563 
</style>

+ 13 - 11
src/views/flow/SystemList.vue
Voir le fichier 

@ -24,9 +24,11 @@
24 24
25 25 
<script setup>
26 26 
import { ref, onMounted, getCurrentInstance } from 'vue';
27 
import { useRouter } from 'vue-router';
27 28 
import * as api from '../../api/flow';
28 29 
import { formConfig } from './_config';
29 30
31 
const router = useRouter();
30 32 
const { proxy } = getCurrentInstance();
31 33 
const dialogTitle = ref('新增系统');
32 34 
const showDialog = ref(false);
 
@ -39,17 +41,6 @@ const cardNumbers = ref([
39 41 
]);
40 42 
const cardInfos = ref([]);
41 43
42 
// 新增系统
43 
// function createSystem() {}
44
45 
// 编辑系统
46 
// function updateSystemById() {}
47
48 
// 删除系统
49 
// function deleteSystemById() {
50 
//   proxy.$confirm('1231');
51 
// }
52
53 44 
// 复制系统
54 45 
// function copySystemById() {}
55 46 
// 编辑
 
@ -74,9 +65,20 @@ function deleteSystem() {
74 65 
}
75 66 
// 版本切换
76 67 
function changeVersion() {}
68
69 
// 查看详情
70 
function viewDetail(item) {
71 
  router.push({
72 
    name: 'SystemDetail',
73 
    query: {
74 
      id: item.id
75 
    }
76 
  });
77 
}
77 78 
// 复制
78 79 
function copySystem() {}
79 80 
const btns = ref([
81 
  { label: '查看', name: 'view', onClick: viewDetail, icon: 'common-chakan' },
80 82 
  { label: '编辑', name: 'edit', onClick: updateSystem, icon: 'common-bianji' },
81 83 
  {
82 84 
    label: '删除',

+ 417 - 0
src/views/flow/_components/ApiDetailPage.vue
Voir le fichier 

@ -0,0 +1,417 @@
1 
<template>
2 
  <div class="api-detail">
3 
    <h4 class="title">接口使用示例</h4>
4 
    <div class="card info">
5 
      <!-- card-hedaer -->
6 
      <div class="card-header">
7 
        <h4 class="sub-title">基本信息</h4>
8 
        <div v-if="props.type !== '0'">
9 
          <!--
10 
            UNTESTED("1", "待测试"),
11 
            TESTED("2", "已测试"),
12 
            STARTED("3", "启用"),
13 
            STOPPED("4", "停用"),
14 
            DELETED("5", "废弃");
15 
          -->
16 
          <el-button
17 
            :disabled="props.versionState === '0'"
18 
            @click.stop="stopTest"
19 
          >
20 
            测试
21 
          </el-button>
22 
          <el-button
23 
            :disabled="
24 
              apiDetail?.state !== 'STARTED' || props.versionState === '0'
25 
            "
26 
            @click.stop="stopLogic"
27 
          >
28 
            停用
29 
          </el-button>
30 
          <el-button type="success" @click.stop="editLogicApi">
31 
            编辑逻辑流
32 
          </el-button>
33 
        </div>
34 
      </div>
35
36 
      <!-- card-info -->
37 
      <el-row :gutter="18">
38 
        <el-col :span="5">
39 
          <div class="row">
40 
            <span class="row-title">接口名称</span>
41 
            <p class="row-content">{{ apiDetail?.name }}</p>
42 
          </div>
43 
        </el-col>
44
45 
        <el-col :span="5">
46 
          <div class="row">
47 
            <span class="row-title">所属模块</span>
48 
            <p class="row-content">{{ apiDetail?.name }}</p>
49 
          </div>
50 
        </el-col>
51 
        <el-col :span="5">
52 
          <div class="row">
53 
            <span class="row-title">接口状态</span>
54 
            <p class="row-content">{{ apiDetail?.stateDesc }}</p>
55 
          </div>
56 
        </el-col>
57 
        <el-col :span="9">
58 
          <div class="row">
59 
            <span class="row-title">请求url</span>
60 
            <p class="row-content">
61 
              {{ apiDetail?.totalPath }}
62 
            </p>
63 
          </div>
64 
        </el-col>
65 
      </el-row>
66 
      <div class="row">
67 
        <span class="row-title">接口描述</span>
68 
        <p class="row-content desc">
69 
          {{ apiDetail?.desc }}
70 
        </p>
71 
      </div>
72 
    </div>
73
74 
    <div class="tabs">
75 
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
76 
        <el-tab-pane label="接口信息" name="info"></el-tab-pane>
77 
        <el-tab-pane label="接口测试" name="test"></el-tab-pane>
78 
      </el-tabs>
79 
    </div>
80
81 
    <!-- 接口信息 -->
82 
    <div v-show="activeName === 'info'" class="api-info">
83 
      <div class="card">
84 
        <h4 class="sub-title">请求参数</h4>
85 
        <common-table
86 
          :table-header="request.header"
87 
          :table-data="request?.data"
88 
        ></common-table>
89 
      </div>
90 
      <div class="card">
91 
        <h4 class="sub-title">响应参数</h4>
92 
        <common-table
93 
          :table-header="request.header"
94 
          :table-data="response?.data"
95 
        ></common-table>
96 
      </div>
97 
    </div>
98
99 
    <!-- 接口测试 -->
100 
    <div v-show="activeName === 'test'" class="api-text">
101 
      <div class="card">
102 
        <h4 class="sub-title">请求URL</h4>
103 
        <el-input
104 
          v-model="testRequest.url"
105 
          placeholder="请输入请求URL"
106 
          class="input-with-select"
107 
        >
108 
          <template #prepend>
109 
            <common-select
110 
              v-model="testRequest.method"
111 
              disabled
112 
              class="select"
113 
              :options="methodOptions"
114 
            ></common-select>
115 
          </template>
116 
          <template #append>
117 
            <el-button @click.stop="test">提交</el-button>
118 
          </template>
119 
        </el-input>
120 
      </div>
121 
      <div class="card">
122 
        <h4 class="sub-title">请求参数</h4>
123 
        <!-- <ipu-input
124 
          v-model="testRequest.params"
125 
          class="result"
126 
          v-bind="attributes"
127 
        ></ipu-input> -->
128 
        <div>
129 
          <JsonEditorVue
130 
            v-model="testRequest.params"
131 
            class="editor"
132 
            @blur="validate"
133 
          ></JsonEditorVue>
134 
        </div>
135 
      </div>
136
137 
      <div class="card">
138 
        <h4 class="sub-title">响应参数</h4>
139 
        <!-- <ipu-input
140 
          v-model="testResponse"
141 
          class="result"
142 
          v-bind="attributes"
143 
          disabled
144 
        ></ipu-input> -->
145 
        <div>
146 
          <!-- <JsonEditorVue
147 
            v-model="testResponse"
148 
            class="editor"
149 
            @blur="validate"
150 
          ></JsonEditorVue> -->
151 
        </div>
152 
      </div>
153 
    </div>
154 
  </div>
155 
</template>
156
157 
<script setup>
158 
// import JsonEditorVue from 'json-editor-vue3';
159 
import { getCurrentInstance, onMounted, ref, watch } from 'vue';
160
161 
const { proxy } = getCurrentInstance();
162 
const emits = defineEmits(['editLogicApi', 'initApiInfo']);
163
164 
const activeName = ref('info');
165
166 
const props = defineProps({
167 
  apiDetail: {
168 
    type: Object,
169 
    default: () => {}
170 
  },
171 
  versionState: {
172 
    type: String,
173 
    default: '0'
174 
  },
175 
  type: {
176 
    type: String,
177 
    default: '1'
178 
  }
179 
});
180
181 
function editLogicApi() {
182 
  emits('editLogicApi');
183 
}
184
185 
function initApiInfo() {
186 
  emits('initApiInfo');
187 
}
188 
// 测试按钮
189 
function stopTest() {
190 
  proxy.$utils.confirmMessage('确定测试该接口吗？').then(() => {
191 
    const url = proxy.$api.logicMgmt;
192 
    const params = {
193 
      stateValue: 3
194 
    };
195 
    proxy
196 
      .$reqPatch(`${url}/${props.apiDetail?.id}`, params)
197 
      .then((res) => {
198 
        if (res.data.resultCode === '0') {
199 
          proxy.$utils.ipuMessage('测试成功');
200 
        } else {
201 
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
202 
        }
203 
      })
204 
      .catch((err) => {
205 
        console.log(err);
206 
      })
207 
      .finally(() => {
208 
        initApiInfo();
209 
      });
210 
  });
211 
}
212 
// 停用
213 
function stopLogic() {
214 
  proxy.$utils.confirmMessage('确定停用该api吗？').then(() => {
215 
    const url = proxy.$api.logicMgmt;
216 
    const params = {
217 
      stateValue: '4'
218 
    };
219 
    proxy
220 
      .$reqPatch(`${url}/${props.apiDetail?.id}`, params)
221 
      .then((res) => {
222 
        if (res.data.resultCode === '0') {
223 
          proxy.$utils.ipuMessage('api已下架！');
224 
        } else {
225 
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
226 
        }
227 
      })
228 
      .catch((err) => {
229 
        console.log(err);
230 
      });
231 
  });
232 
}
233 
// 接口详情
234 
function apiDetailHooks() {
235 
  const request = ref({
236 
    header: [
237 
      { label: '参数', name: 'code', 'min-width': '150' },
238 
      { label: '名称', name: 'name', 'min-width': '150' },
239 
      { label: '类型', name: 'type', 'min-width': '150' },
240 
      { label: '是否必传', name: 'required', 'min-width': '150' },
241 
      { label: '描述', name: 'desc', 'min-width': '150' }
242 
    ],
243 
    data: props.apiDetail?.request
244 
  });
245
246 
  const response = ref({
247 
    data: props.apiDetail?.response
248 
  });
249 
  // 数据初始化
250 
  function initDetailData() {
251 
    response.value = {
252 
      data: props.apiDetail?.response
253 
    };
254 
    request.value.data = props.apiDetail?.request;
255 
  }
256
257 
  return {
258 
    request,
259 
    response,
260 
    initDetailData
261 
  };
262 
}
263
264 
const { request, response, initDetailData } = apiDetailHooks();
265
266 
const dataTypeMap = {
267 
  int: 1,
268 
  string: '',
269 
  array: [],
270 
  object: {},
271 
  decimal: 0.1,
272 
  date: '2022-10-10',
273 
  datetime: '2022-10-10 12:10:10',
274 
  boolean: true,
275 
  long: 0
276 
};
277 
// 接口测试
278 
function testHooks() {
279 
  const testRequest = ref({});
280 
  const testResponse = ref({});
281 
  // 数据初始化
282 
  function updateTestData() {
283 
    // if (!request.value.data) {
284 
    //   return
285 
    // }
286 
    const params = {};
287 
    (request.value?.data || [])?.forEach((item) => {
288 
      params[item.code] = dataTypeMap[item.type];
289 
    });
290 
    testRequest.value = {
291 
      url: props.apiDetail?.totalPath,
292 
      method: props.apiDetail?.requestType,
293 
      params,
294 
      headers: {}
295 
    };
296 
    testResponse.value = {};
297 
  }
298 
  updateTestData();
299 
  function test() {
300 
    const { testLogic } = proxy.$api;
301 
    const { params } = testRequest.value;
302 
    proxy
303 
      .$reqPost(`${testLogic}/${props.apiDetail.id}`, params)
304 
      .then((res) => {
305 
        if (res.data.resultCode === '0') {
306 
          proxy.$utils.ipuMessage('请求成功！');
307 
          testResponse.value = res.data.result;
308 
        } else {
309 
          proxy.$utils.ipuMessage(res.data.resultMsg, 'error');
310 
        }
311 
      })
312 
      .catch((err) => {
313 
        console.log(err);
314 
      });
315 
  }
316 
  return {
317 
    testRequest,
318 
    test,
319 
    testResponse,
320 
    updateTestData
321 
  };
322 
}
323
324 
const { testRequest, test, updateTestData } = testHooks();
325 
function validate() {}
326 
watch(
327 
  props,
328 
  () => {
329 
    initDetailData();
330 
    updateTestData();
331 
  },
332 
  { deep: true }
333 
);
334
335 
onMounted(() => {});
336 
</script>
337
338 
<style scoped lang="scss">
339 
.api-detail {
340 
  padding: 24px;
341 
  width: auto;
342 
  height: calc(100vh - 250px);
343 
  overflow: auto;
344 
  .card {
345 
    width: 100%;
346 
    background: #fff;
347 
    padding: 24px;
348 
    border-radius: 3px;
349 
    box-sizing: border-box;
350 
    .card-header {
351 
      display: flex;
352 
      justify-content: space-between;
353 
    }
354 
    .row {
355 
      margin-top: 15px;
356 
      .row-title {
357 
        color: #909399;
358 
        font-size: 14px;
359 
        line-height: 28px;
360 
      }
361 
      .row-content {
362 
        background: #f5f7fa;
363 
        border-radius: 3px;
364 
        height: 32px;
365 
        padding: 5px 10px;
366 
        box-sizing: border-box;
367 
        border-radius: 3px;
368 
      }
369 
      .desc {
370 
        height: 70px;
371 
      }
372 
    }
373 
    .result {
374 
      :deep(.el-textarea__inner) {
375 
        padding: 20px;
376 
      }
377 
    }
378 
    .select {
379 
      width: 90px;
380 
    }
381 
  }
382 
  .tabs {
383 
    width: 100%;
384 
    background: #fff;
385 
    // padding: 24px;
386 
    padding: 0 24px;
387 
    border-radius: 3px;
388 
    box-sizing: border-box;
389 
    margin-top: 15px;
390 
  }
391 
}
392 
.title {
393 
  font-size: 18px;
394 
  color: #303133;
395 
  font-weight: 500;
396 
  margin-bottom: 10px;
397 
}
398 
.sub-title {
399 
  font-size: 16px;
400 
  color: #303133;
401 
  font-weight: 500;
402 
  margin-bottom: 10px;
403 
}
404 
.editor {
405 
  height: 300px;
406 
}
407 
</style>
408
409 
<style lang="scss">
410 
.jsoneditor {
411 
  border: 1px solid rgba(0, 0, 0, 0.4);
412 
}
413 
.jsoneditor-menu {
414 
  background: rgba(0, 0, 0, 0.4);
415 
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
416 
}
417 
</style>

+ 117 - 0
src/views/flow/_config.js
Voir le fichier 

@ -41,5 +41,122 @@ export const formConfig = ref({
41 41 
      desc: '',
42 42 
      code: ''
43 43 
    }
44 
  },
45 
  module: {
46 
    forms: [
47 
      {
48 
        name: 'name',
49 
        type: 'input',
50 
        label: '名称',
51 
        span: 24,
52 
        attrs: {
53 
          style: {
54 
            width: '276px'
55 
          },
56 
          clearable: true,
57 
          placeholder: '请输入名称'
58 
        }
59 
      },
60 
      {
61 
        name: 'code',
62 
        type: 'input',
63 
        label: '编码',
64 
        span: 24,
65 
        attrs: {
66 
          style: {
67 
            width: '276px'
68 
          },
69 
          clearable: true,
70 
          placeholder: '请输入编码'
71 
        }
72 
      },
73 
      {
74 
        name: 'desc',
75 
        type: 'input',
76 
        label: '描述',
77 
        span: 24,
78 
        attrs: {
79 
          type: 'textarea',
80 
          maxlength: 300,
81 
          clearable: true,
82 
          placeholder: '请输入描述信息，最多可输入300字',
83 
          minRows: 5,
84 
          maxRows: 8,
85 
          rows: 6,
86 
          style: {
87 
            width: '100%'
88 
          }
89 
        }
90 
      }
91 
    ]
92 
  },
93 
  logic: {
94 
    forms: [
95 
      {
96 
        name: 'name',
97 
        type: 'input',
98 
        label: '名称',
99 
        span: 24,
100 
        attrs: {
101 
          style: {
102 
            width: '276px'
103 
          },
104 
          clearable: true,
105 
          placeholder: '请输入名称'
106 
        }
107 
      },
108 
      {
109 
        name: 'requestUrl',
110 
        type: 'input',
111 
        label: 'URL',
112 
        span: 24,
113 
        attrs: {
114 
          style: {
115 
            width: '276px'
116 
          },
117 
          clearable: true,
118 
          placeholder: '请输入URL'
119 
        }
120 
      },
121 
      {
122 
        name: 'requestType',
123 
        type: 'select',
124 
        label: '请求方法',
125 
        span: 24,
126 
        attrs: {
127 
          style: {
128 
            width: '276px'
129 
          },
130 
          options: [
131 
            { label: 'GET', value: 'GET' },
132 
            { label: 'POST', value: 'POST' },
133 
            { label: 'PUT', value: 'PUT' },
134 
            { label: 'DELETE', value: 'DELETE' },
135 
            { label: 'PATCH', value: 'PATCH' },
136 
            { label: 'WS', value: 'WS' }
137 
          ],
138 
          clearable: true,
139 
          placeholder: '请输入URL'
140 
        }
141 
      },
142 
      {
143 
        name: 'desc',
144 
        type: 'input',
145 
        label: '描述',
146 
        span: 24,
147 
        attrs: {
148 
          type: 'textarea',
149 
          maxlength: 300,
150 
          clearable: true,
151 
          placeholder: '请输入描述信息，最多可输入300字',
152 
          minRows: 5,
153 
          maxRows: 8,
154 
          rows: 6,
155 
          style: {
156 
            width: '100%'
157 
          }
158 
        }
159 
      }
160 
    ]
44 161 
  }
45 162 
});

+ 9 - 1
src/views/sub-flow/SubFlow.vue
Voir le fichier 

@ -1,7 +1,7 @@
1 1 
<template>
2 2 
  <div class="subflow-logic">
3 3 
    <sub-flow
4 
      :nodes="nodes.nodes"
4 
      :nodes="nodeList"
5 5 
      :tool-list="toolList"
6 6 
      :flow-data="subFlowDetail"
7 7 
      @tool-handel-click="toolHandelClick"
 
@ -23,6 +23,14 @@ import nodes from '../_components/_flow/nodes.js';
23 23 
import * as api from '../../api/subflow';
24 24 
import NodeDataFormate from '../_components/_flow/nodeDataFormate.js';
25 25
26 
const nodeList = ref(nodes.nodes);
27 
nodeList.value.map((item) => {
28 
  if (item.nodes?.length) {
29 
    item.nodes = item.nodes.filter((el) => el.name !== 'subprocess');
30 
  }
31 
  return item;
32 
});
33
26 34 
const { proxy } = getCurrentInstance();
27 35 
const route = useRoute();
28 36 
const subFlowDetail = ref(null);

liuyang50/common-ui - Nuosi Git Service
首頁 探索 說明
登入
liuyang50
/
common-ui
關註 1
讚好 0
派生 0
代碼 問題管理 0 合併請求 0 提交歷史 20 版本發佈 0 Wiki
分支: master
分支列表 標籤列表

6 次代碼提交 (master)

作者 SHA1 備註 提交日期
  liuyang cbd21de32b add: 新增antv-x6组件模块，目前只支持上图下文字模式，后续会扩展 2 年之前
  liuyang 078f8b3015 update： 修改使用中的细节 2 年之前
  liuyang 1360efe95e update： 修改表单先关接入方式 2 年之前
  liuyang 495d3fe273 fixed: 修改表格插件 + 修改svg-icon为common-icon 2 年之前
  liuyang 1f47f42333 fixed: 修改svg图标显示颜色 + 编写UI文档 2 年之前
  liuyang b53d9d73ad create： 创建common-ui工程 2 年之前