Browse Source

update: 流程编排系统管理功能完善

liuyang 2 years ago
parent
commit
865154d726
8 changed files with 330 additions and 34 deletions
  1. 5 0
      package-lock.json
  2. 1 0
      package.json
  3. 15 1
      src/App.vue
  4. 18 4
      src/api/flow.ts
  5. 45 3
      src/views/flow/SystemDetail.vue
  6. 168 26
      src/views/flow/SystemList.vue
  7. 43 0
      src/views/flow/_config.js
  8. 35 0
      src/views/flow/enum.js

+ 5 - 0
package-lock.json

7064
      "resolved": "https://registry.npmjs.org/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz",
7064
      "resolved": "https://registry.npmjs.org/mobius1-selectr/-/mobius1-selectr-2.4.13.tgz",
7065
      "integrity": "sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw=="
7065
      "integrity": "sha512-Mk9qDrvU44UUL0EBhbAA1phfQZ7aMZPjwtL7wkpiBzGh8dETGqfsh50mWoX9EkjDlkONlErWXArHCKfoxVg0Bw=="
7066
    },
7066
    },
7067
    "moment": {
7068
      "version": "2.29.4",
7069
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
7070
      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
7071
    },
7067
    "mousetrap": {
7072
    "mousetrap": {
7068
      "version": "1.6.5",
7073
      "version": "1.6.5",
7069
      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
7074
      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",

+ 1 - 0
package.json

32
    "eslint-plugin-vue": "^9.7.0",
32
    "eslint-plugin-vue": "^9.7.0",
33
    "json-editor-vue3": "^1.0.8",
33
    "json-editor-vue3": "^1.0.8",
34
    "mitt": "^3.0.0",
34
    "mitt": "^3.0.0",
35
    "moment": "^2.29.4",
35
    "prettier": "^2.7.1",
36
    "prettier": "^2.7.1",
36
    "qs": "^6.11.1",
37
    "qs": "^6.11.1",
37
    "sass": "^1.56.1",
38
    "sass": "^1.56.1",

+ 15 - 1
src/App.vue

15
    :aside-width="asideWidth"
15
    :aside-width="asideWidth"
16
    :breads="route.meta.breadcrumb"
16
    :breads="route.meta.breadcrumb"
17
    @handle-change-collapse="handleChangeCollapse"
17
    @handle-change-collapse="handleChangeCollapse"
18
  ></common-layer>
18
  >
19
    <!-- <template #breadLeft>
20
      <div>左侧说明文件</div>
21
    </template>
22
    <template #breadRight>
23
      <el-button size="small" type="primary">右侧插槽位置</el-button>
24
    </template> -->
25
  </common-layer>
19
</template>
26
</template>
20
<script setup lang="ts">
27
<script setup lang="ts">
21
import { ref } from 'vue';
28
import { ref } from 'vue';
36
    icon: 'common-jihuoshebei',
43
    icon: 'common-jihuoshebei',
37
    level: 1,
44
    level: 1,
38
    path: '/sub-flow'
45
    path: '/sub-flow'
46
  },
47
  {
48
    label: '上线管理',
49
    name: 'manager',
50
    icon: 'common-jihuoshebei',
51
    level: 1,
52
    path: '/manager'
39
  }
53
  }
40
]);
54
]);
41
55

+ 18 - 4
src/api/flow.ts

39
}
39
}
40
40
41
// 修改系统
41
// 修改系统
42
export function updateSystem(data: any) {
42
export function updateSystem(data: any, id: any) {
43
  return AIotRequest.patch({
43
  return AIotRequest.patch({
44
    url: flow.systemMgmt,
44
    url: `${flow.systemMgmt}/${id}`,
45
    data
45
    data
46
  });
46
  });
47
}
47
}
54
  });
54
  });
55
}
55
}
56
// 克隆系统
56
// 克隆系统
57
export function copySystemById(data: any) {
57
export function copySystemById(data: any, id: any) {
58
  return AIotRequest.post({
58
  return AIotRequest.post({
59
    url: flow.systemMgmt,
59
    url: `${flow.sysclone}/${id}`,
60
    data
60
    data
61
  });
61
  });
62
}
62
}
66
    url: `${flow.systemMgmt}/${id}`
66
    url: `${flow.systemMgmt}/${id}`
67
  });
67
  });
68
}
68
}
69
// 获取已上线version列表
70
export function getOnlineVersionList(data: any) {
71
  return AIotRequest.get({
72
    url: flow.stableVersion,
73
    data
74
  });
75
}
76
// 切换版本
77
export function changeVersionById(data: any, id: any) {
78
  return AIotRequest.patch({
79
    url: `${flow.systemMgmt}/${id}`,
80
    data
81
  });
82
}
69
83
70
/**
84
/**
71
 * 版本 start
85
 * 版本 start

+ 45 - 3
src/views/flow/SystemDetail.vue

38
        </div>
38
        </div>
39
      </template>
39
      </template>
40
      <template #right>
40
      <template #right>
41
        <div class="content">
41
        <div class="service-content">
42
          <api-detail-page
42
          <api-detail-page
43
            v-if="apiDetail"
43
            v-if="apiDetail"
44
            :api-detail="apiDetail"
44
            :api-detail="apiDetail"
45
            :version-state="versionState.CURRENT_STATE"
45
            @edit-logic-api="editLogicApi"
46
            @edit-logic-api="editLogicApi"
46
            @init-api-info="initApiInfo"
47
            @init-api-info="initApiInfo"
47
          ></api-detail-page>
48
          ></api-detail-page>
49
          <div v-else class="empty">
50
            <el-empty description="请创建一条逻辑"></el-empty>
51
          </div>
48
        </div>
52
        </div>
49
      </template>
53
      </template>
50
    </common-panel>
54
    </common-panel>
96
  { label: '编辑', name: 'edit', onClick: editVersion, type: 'primary' },
100
  { label: '编辑', name: 'edit', onClick: editVersion, type: 'primary' },
97
  { label: '发布', name: 'publish', onClick: publishVersion, type: 'primary' }
101
  { label: '发布', name: 'publish', onClick: publishVersion, type: 'primary' }
98
]);
102
]);
103
104
const versionState = ref({
105
  EDIT_STATE: '0', // 稳定太
106
  DEVELOPMENT_STATE: '1', // 编辑太
107
  CURRENT_STATE: '0' // 当前默认状态为稳定太
108
});
99
// 获取系统详情
109
// 获取系统详情
100
const systemId = computed(() => route.query.id);
110
const systemId = computed(() => route.query.id);
101
const curVersionId = ref('');
111
const curVersionId = ref('');
215
  api.getModuleList(params).then((res) => {
225
  api.getModuleList(params).then((res) => {
216
    if (res.resultCode === '0') {
226
    if (res.resultCode === '0') {
217
      moduleTreeData.value = res.result;
227
      moduleTreeData.value = res.result;
228
      if (!curLogic.value) {
229
        curLogic.value = moduleTreeData.value?.[0]?.logicServices?.[0].id || '';
230
      }
218
    } else {
231
    } else {
219
      proxy.$message.error('');
232
      proxy.$message.error('');
220
    }
233
    }
361
  operateType.value = 'edit';
374
  operateType.value = 'edit';
362
  if (node.level === 1) {
375
  if (node.level === 1) {
363
    drawerType.value = 'module';
376
    drawerType.value = 'module';
364
365
    moduleTitle.value = '编辑模块';
377
    moduleTitle.value = '编辑模块';
366
    curModule.value = data.id;
378
    curModule.value = data.id;
367
    moduleValues.value = {
379
    moduleValues.value = {
405
        name: 'moduleId',
417
        name: 'moduleId',
406
        type: 'select',
418
        type: 'select',
407
        label: '选择模块',
419
        label: '选择模块',
408
409
        attrs: {
420
        attrs: {
410
          col: 1,
421
          col: 1,
411
          style: {
422
          style: {
432
}
443
}
433
// 获取接口详情
444
// 获取接口详情
434
async function getApiDetail() {
445
async function getApiDetail() {
446
  if (!curLogic.value) {
447
    return;
448
  }
435
  await api.getLogicDetailById(curLogic.value).then((res) => {
449
  await api.getLogicDetailById(curLogic.value).then((res) => {
436
    if (res.resultCode === '0') {
450
    if (res.resultCode === '0') {
437
      apiDetail.value = res.result;
451
      apiDetail.value = res.result;
446
  if (isLeaf) {
460
  if (isLeaf) {
447
    curLogic.value = data.id;
461
    curLogic.value = data.id;
448
    getApiDetail();
462
    getApiDetail();
463
  } else {
464
    curLogic.value = '';
449
  }
465
  }
450
}
466
}
451
467
541
  await getSystemDetail();
557
  await getSystemDetail();
542
  await getVersionList();
558
  await getVersionList();
543
  await getModuleData();
559
  await getModuleData();
560
  await getApiDetail();
544
});
561
});
545
</script>
562
</script>
546
563
548
.system-tree {
565
.system-tree {
549
  height: 100%;
566
  height: 100%;
550
  background: #fff;
567
  background: #fff;
568
  padding: 10px;
569
  border-radius: 4px;
570
  box-sizing: border-box;
551
}
571
}
552
.system-detail-btns {
572
.system-detail-btns {
553
  display: flex;
573
  display: flex;
560
  width: calc(100% - 48px);
580
  width: calc(100% - 48px);
561
  margin-left: 24px;
581
  margin-left: 24px;
562
}
582
}
583
.service-content {
584
  width: 100%;
585
  height: 100%;
586
  .empty {
587
    width: 100%;
588
    height: 100%;
589
    display: flex;
590
    flex: 0 0 1;
591
    justify-content: center;
592
    align-items: center;
593
  }
594
  .versionInfo {
595
    .version-name {
596
      display: inline-block;
597
      text-align: end;
598
      margin-right: 10px;
599
    }
600
    .el-input {
601
      width: 200px;
602
    }
603
  }
604
}
563
</style>
605
</style>

+ 168 - 26
src/views/flow/SystemList.vue

1
<template>
1
<template>
2
  <common-card-group
3
    :card-numbers="cardNumbers"
4
    :card-infos="cardInfos"
5
    :span="8"
6
    layer="row-col"
7
    :btns="btns"
8
    :cards="cardList"
9
    @handel-click-create-card="handelClickCreateCard"
10
  ></common-card-group>
2
  <div class="system-list">
3
    <common-card-group
4
      :card-numbers="cardNumbers"
5
      :card-infos="cardInfos"
6
      :span="6"
7
      layer="row-col"
8
      :btns="btns"
9
      :cards="cardList"
10
      @handel-click-create-card="handelClickCreateCard"
11
      @handel-card-click="viewDetail"
12
    ></common-card-group>
13
  </div>
11
  <!-- 弹窗 -->
14
  <!-- 弹窗 -->
12
  <common-drawer
15
  <common-drawer
13
    v-if="showDialog"
16
    v-if="showDialog"
14
    :title="dialogTitle"
17
    :title="titleMap[drawerType]"
15
    @close-dialog="closeDialog"
18
    @close-dialog="closeDialog"
16
    @confirm-dialog="confirmDialog"
19
    @confirm-dialog="confirmDialog"
17
  >
20
  >
21
    <!-- 复制系统 -->
18
    <common-form
22
    <common-form
23
      v-if="drawerType === 'clone'"
24
      :forms="formConfig.system.copyForms"
25
      :form-values="formConfig.system.copyValues"
26
    ></common-form>
27
    <!-- 新建/编辑系统 -->
28
    <common-form
29
      v-else-if="drawerType === 'create' || drawerType === 'edit'"
19
      :forms="formConfig.system.forms"
30
      :forms="formConfig.system.forms"
20
      :form-values="formConfig.system.formValues"
31
      :form-values="formConfig.system.formValues"
21
    ></common-form>
32
    ></common-form>
33
34
    <!-- 版本切换 -->
35
    <common-form
36
      v-else
37
      :forms="formConfig.system.versionForms"
38
      :form-values="formConfig.system.versionValues"
39
    ></common-form>
22
  </common-drawer>
40
  </common-drawer>
23
</template>
41
</template>
24
42
25
<script setup>
43
<script setup>
26
import { ref, onMounted, getCurrentInstance } from 'vue';
44
import { ref, onMounted, getCurrentInstance } from 'vue';
27
import { useRouter } from 'vue-router';
45
import { useRouter } from 'vue-router';
46
import moment from 'moment';
47
28
import * as api from '../../api/flow';
48
import * as api from '../../api/flow';
29
import { formConfig } from './_config';
49
import { formConfig } from './_config';
30
50
31
const router = useRouter();
51
const router = useRouter();
32
const { proxy } = getCurrentInstance();
52
const { proxy } = getCurrentInstance();
33
const dialogTitle = ref('新增系统');
53
const drawerType = ref('create');
34
const showDialog = ref(false);
54
const showDialog = ref(false);
35
const curSystemId = ref('');
55
const curSystemId = ref('');
36
// 数据展示
56
// 数据展示
39
  { label: '模型数量', name: 'moduleNumber' },
59
  { label: '模型数量', name: 'moduleNumber' },
40
  { label: '接口数量', name: 'logicServiceNumber' }
60
  { label: '接口数量', name: 'logicServiceNumber' }
41
]);
61
]);
62
63
const titleMap = ref({
64
  edit: '编辑系统',
65
  create: '新增系统',
66
  clone: '复制系统',
67
  switch: '版本切换'
68
});
69
42
const cardInfos = ref([]);
70
const cardInfos = ref([]);
71
const versionList = ref([]);
43
72
44
// 复制系统
73
// 复制系统
45
// function copySystemById() {}
74
// function copySystemById() {}
46
// 编辑
75
// 编辑
47
function updateSystem(data) {
76
function updateSystem(data) {
77
  drawerType.value = 'edit';
48
  formConfig.value.system.formValues = {
78
  formConfig.value.system.formValues = {
49
    name: data.name,
79
    name: data.name,
50
    code: data.code,
80
    code: data.code,
51
    desc: data.desc
81
    desc: data.desc
52
  };
82
  };
53
  curSystemId.value = data.id;
83
  curSystemId.value = data.id;
54
  showDialog.value = true;
84
  // eslint-disable-next-line no-use-before-define
85
  openDialog('edit');
55
}
86
}
56
// 删除
87
// 删除
57
function deleteSystem() {
88
function deleteSystem(data) {
58
  proxy
89
  proxy
59
    .$confirm('确定删除该系统吗?', '警告', {
90
    .$confirm('确定删除该系统吗?', '警告', {
60
      confirmButtonText: '确定',
91
      confirmButtonText: '确定',
61
      cancelButtonText: '取消',
92
      cancelButtonText: '取消',
62
      type: 'warning'
93
      type: 'warning'
63
    })
94
    })
64
    .then(() => {});
95
    .then(() => {
96
      api.deleteSystemById(data.id).then((res) => {
97
        if (res.resultCode === '0') {
98
          // eslint-disable-next-line no-use-before-define
99
          getSystemList();
100
        } else {
101
          proxy.$message.error(res.resultMsg);
102
        }
103
      });
104
    });
105
}
106
// 获取已上线版本列表
107
function getOnlineVersionList(id) {
108
  const params = {
109
    systemId: id
110
  };
111
  api.getOnlineVersionList(params).then((res) => {
112
    if (res.resultCode === '0') {
113
      versionList.value = res.result || [];
114
      formConfig.value.system.versionForms[0].attrs.options = versionList.value;
115
    } else {
116
      versionList.value = [];
117
      proxy.$message.error(res.resultMsg);
118
    }
119
  });
120
}
121
function openDialog(type) {
122
  drawerType.value = type;
123
  showDialog.value = true;
65
}
124
}
66
// 版本切换
125
// 版本切换
67
function changeVersion() {}
126
async function changeVersion(data) {
127
  // drawerType.value = 'switch';
128
  formConfig.value.system.versionValues = {
129
    stateValue: data.version.id
130
  };
131
  curSystemId.value = data.id;
132
  await getOnlineVersionList(data.id);
133
  await openDialog('switch');
134
}
68
135
69
// 查看详情
136
// 查看详情
70
function viewDetail(item) {
137
function viewDetail(item) {
76
  });
143
  });
77
}
144
}
78
// 复制
145
// 复制
79
function copySystem() {}
146
function copySystem(data) {
147
  // drawerType.value = 'clone';
148
  formConfig.value.system.copyValues = {
149
    name: data.name,
150
    code: data.code
151
  };
152
  curSystemId.value = data.id;
153
  openDialog('clone');
154
}
80
const btns = ref([
155
const btns = ref([
81
  { label: '查看', name: 'view', onClick: viewDetail, icon: 'common-chakan' },
82
  { label: '编辑', name: 'edit', onClick: updateSystem, icon: 'common-bianji' },
156
  { label: '编辑', name: 'edit', onClick: updateSystem, icon: 'common-bianji' },
157
  { label: '复制', name: 'copy', onClick: copySystem, icon: 'common-fuzhi' },
83
  {
158
  {
84
    label: '删除',
159
    label: '删除',
85
    name: 'delete',
160
    name: 'delete',
91
    name: 'change',
166
    name: 'change',
92
    onClick: changeVersion,
167
    onClick: changeVersion,
93
    icon: 'common-fenxiang'
168
    icon: 'common-fenxiang'
94
  },
95
  { label: '复制', name: 'copy', onClick: copySystem, icon: 'common-fuzhi' }
169
  }
96
]);
170
]);
97
function handelClickCreateCard() {
171
function handelClickCreateCard() {
98
  showDialog.value = true;
172
  openDialog('create');
99
}
173
}
100
174
101
const cardList = ref([]);
175
const cardList = ref([]);
108
      cardList.value = res.result;
182
      cardList.value = res.result;
109
      cardList.value.map((item) => {
183
      cardList.value.map((item) => {
110
        item.title = item.name;
184
        item.title = item.name;
185
        item.subTitle = moment(item.doneDate).format('YYYY-MM-DD hh:mm:ss');
111
        item.url = '';
186
        item.url = '';
112
        item.tags = [
187
        item.tags = [
113
          { label: `v${item?.version?.version}` || 'dev', type: 'success' }
188
          { label: `v${item?.version?.version}` || 'dev', type: 'success' }
114
        ];
189
        ];
115
        item.numbers = {
116
          executeServiceUrl: item.executeServiceUrl,
117
          moduleNumber: item?.version?.moduleNumber || 0,
118
          logicServiceNumber: item?.version?.logicServiceNumber || 0
119
        };
190
        item.moduleNumber = item?.version?.moduleNumber || 0;
191
        item.logicServiceNumber = item?.version?.logicServiceNumber;
120
        return item;
192
        return item;
121
      });
193
      });
122
    } else {
194
    } else {
125
  });
197
  });
126
}
198
}
127
199
200
// 新增系统
201
function createSystem(params) {
202
  api.createSystem(params).then((res) => {
203
    if (res.resultCode === '0') {
204
      getSystemList();
205
    } else {
206
      proxy.$message.error(res.resultMsg);
207
    }
208
  });
209
}
210
211
// 修改系统
212
function updateSystemById(params) {
213
  api.updateSystem(params, curSystemId.value).then((res) => {
214
    if (res.resultCode === '0') {
215
      getSystemList();
216
    } else {
217
      proxy.$message.error(res.resultMsg);
218
    }
219
  });
220
}
221
222
// 克隆系统
223
function cloneSystemById(params) {
224
  api.copySystemById(params, curSystemId.value).then((res) => {
225
    if (res.resultCode === '0') {
226
      getSystemList();
227
    } else {
228
      proxy.$message.error(res.resultMsg);
229
    }
230
  });
231
}
232
233
// 切换版本
234
function changeVersionById() {
235
  const params = {
236
    startedVersionId: formConfig.value.system.versionValues.stateValue
237
  };
238
  api.changeVersionById(params, curSystemId.value).then((res) => {
239
    if (res.resultCode === '0') {
240
      proxy.$message.success('版本已切换!');
241
      getSystemList();
242
    } else {
243
      proxy.$message.error(res.resultMsg);
244
    }
245
  });
246
}
247
// 切换版本
128
// 弹窗
248
// 弹窗
129
// 关闭弹窗
249
// 关闭弹窗
130
function closeDialog() {
250
function closeDialog() {
133
253
134
// 弹窗确认
254
// 弹窗确认
135
function confirmDialog() {
255
function confirmDialog() {
256
  const params = { ...formConfig.value.system.formValues };
257
  const cloneParams = { ...formConfig.value.system.copyValues };
258
  switch (drawerType.value) {
259
    case 'edit':
260
      updateSystemById(params);
261
      break;
262
    case 'create':
263
      createSystem(params);
264
      break;
265
    case 'clone':
266
      cloneSystemById(cloneParams);
267
      break;
268
    case 'switch':
269
      changeVersionById();
270
      break;
271
    default:
272
      break;
273
  }
136
  closeDialog();
274
  closeDialog();
137
}
275
}
138
onMounted(() => {
276
onMounted(() => {
140
});
278
});
141
</script>
279
</script>
142
280
143
<style scoped lang="scss"></style>
281
<style scoped lang="scss">
282
.system-list {
283
  padding-bottom: 50px;
284
}
285
</style>

+ 43 - 0
src/views/flow/_config.js

40
      name: '',
40
      name: '',
41
      desc: '',
41
      desc: '',
42
      code: ''
42
      code: ''
43
    },
44
    copyForms: [
45
      {
46
        label: '名称',
47
        name: 'name',
48
        type: 'input',
49
        span: 24,
50
        attrs: { placeholder: '请输入名称', clearable: true }
51
      },
52
      {
53
        label: '根路径',
54
        name: 'code',
55
        type: 'input',
56
        span: 24,
57
        attrs: { placeholder: '请输入名称', clearable: true }
58
      }
59
    ],
60
    copyValues: {
61
      name: '',
62
      code: ''
63
    },
64
    versionForms: [
65
      {
66
        name: 'stateValue',
67
        type: 'select',
68
        label: '版本切换',
69
        span: 24,
70
        attrs: {
71
          style: {
72
            width: '276px'
73
          },
74
          options: [],
75
          propsMap: {
76
            label: 'version',
77
            value: 'id'
78
          },
79
          clearable: true,
80
          placeholder: '请选择版本!'
81
        }
82
      }
83
    ],
84
    versionValues: {
85
      stateValue: ''
43
    }
86
    }
44
  },
87
  },
45
  module: {
88
  module: {

+ 35 - 0
src/views/flow/enum.js

1
// 版本状态
2
export const VERSION_STATE = {
3
  EDITED: {
4
    value: '1',
5
    text: '未发布'
6
  },
7
  PUBLISHED: {
8
    value: '2',
9
    text: '已发布'
10
  },
11
  DELETED: {
12
    value: '3',
13
    text: '废弃'
14
  }
15
};
16
17
// 接口状态
18
export const LOGIC_STATE = {
19
  UNPUBLISHED: {
20
    value: '1',
21
    text: '未发布'
22
  },
23
  PUBLISHED: {
24
    value: '2',
25
    text: '已发布'
26
  },
27
  TESTED: {
28
    value: '3',
29
    text: '已测试'
30
  },
31
  DELETED: {
32
    value: '4',
33
    text: '废弃'
34
  }
35
};