Skip to content

Commit ceeb191

Browse files
author
白衣
committed
Android加固下载页
1 parent 604abf4 commit ceeb191

11 files changed

Lines changed: 544 additions & 51 deletions

File tree

‎src/api/application/cd.job.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,14 @@ import request from '@/plugin/axios'
22

33
const baseUrl = '/application/cd/job'
44

5+
export function queryCdJobPage (data) {
6+
return request({
7+
url: baseUrl + '/page/query',
8+
method: 'post',
9+
data
10+
})
11+
}
12+
513
export function addCdJob (data) {
614
return request({
715
url: baseUrl + '/add',

‎src/api/build/job.build.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ export function queryCiJobBuildPage (data) {
1010
})
1111
}
1212

13+
export function queryCdJobBuildPage (data) {
14+
return request({
15+
url: baseUrl + '/cd/build/page/query',
16+
method: 'post',
17+
data
18+
})
19+
}
20+
1321
export function buildCiJob (data) {
1422
return request({
1523
url: baseUrl + '/ci/build',
@@ -33,6 +41,13 @@ export function queryCiJobBuildByBuildId (buildId) {
3341
})
3442
}
3543

44+
export function queryCdJobBuildByBuildId (buildId) {
45+
return request({
46+
url: baseUrl + '/cd/build/query?buildId=' + buildId,
47+
method: 'get'
48+
})
49+
}
50+
3651
export function queryCiJobBuildArtifact (data) {
3752
return request({
3853
url: baseUrl + '/ci/build/artifact/query',

‎src/components/opscloud/application/JobEngineDialog.vue‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,7 @@
8888
data () {
8989
return {
9090
title: '工作引擎配置详情',
91-
ciJob: '',
92-
cdJob: '',
91+
job: '',
9392
labelWidth: '150px',
9493
options: {
9594
stripe: true
@@ -113,25 +112,27 @@
113112
this.formStatus.visible = false
114113
this.$emit('closeDialog')
115114
},
116-
initData (ciJob) {
117-
this.ciJob = ciJob
115+
initData (data) {
116+
this.job = {
117+
ciJobId: data.ciJobId,
118+
cdJobId: data.cdJobId
119+
}
118120
this.fetchBuildEngineData()
119-
if (ciJob.cdJob !== null) {
120-
this.cdJob = ciJob.cdJob
121+
if (this.job.cdJobId !== null) {
121122
this.fetchDeploymentEngineData()
122123
}
123124
},
124125
handlerBuildEngineCreate () {
125126
this.creatingBuildEngine = true
126-
createCiJobEngine(this.ciJob.id)
127+
createCiJobEngine(this.job.ciJobid)
127128
.then(res => {
128129
this.creatingBuildEngine = false
129130
this.fetchBuildEngineData()
130131
})
131132
},
132133
handlerDeploymentEngineCreate () {
133134
this.creatingDeploymentEngine = true
134-
createCdJobEngine(this.cdJob.id)
135+
createCdJobEngine(this.job.cdJobId)
135136
.then(res => {
136137
this.creatingDeploymentEngine = false
137138
this.fetchDeploymentEngineData()
@@ -142,15 +143,15 @@
142143
},
143144
fetchBuildEngineData () {
144145
this.buildEngineLoading = true
145-
queryCiJobEngine(this.ciJob.id)
146+
queryCiJobEngine(this.job.ciJobId)
146147
.then(res => {
147148
this.buildEngines = res.body
148149
this.buildEngineLoading = false
149150
})
150151
},
151152
fetchDeploymentEngineData () {
152153
this.deploymentEngineLoading = true
153-
queryCdJobEngine(this.cdJob.id)
154+
queryCdJobEngine(this.job.cdJobId)
154155
.then(res => {
155156
this.deploymentEngines = res.body
156157
this.deploymentEngineLoading = false

‎src/components/opscloud/application/MyCdJobTable.vue‎

Lines changed: 290 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<template>
2+
<div>
3+
<el-row style="margin-bottom: 5px" :gutter="24">
4+
<el-input v-model.trim="application.name" disabled placeholder="应用名称" class="input"></el-input>
5+
</el-row>
6+
<el-table :data="tableData" style="width: 100%" v-loading="loading">
7+
<el-table-column type="expand">
8+
<template slot-scope="props">
9+
<el-form label-position="left" inline class="table-expand">
10+
<el-form-item label="描述">{{props.row.comment}}</el-form-item>
11+
</el-form>
12+
</template>
13+
</el-table-column>
14+
<el-table-column prop="name" label="任务名称">
15+
<template slot-scope="props">
16+
<el-tooltip class="item" effect="light" :content="props.row.jobKey" placement="top-start">
17+
<span>{{ props.row.name }}</span>
18+
</el-tooltip>
19+
<span class="tag-group">
20+
<span v-for="item in props.row.tags" :key="item.id">
21+
<el-tooltip class="item" effect="light" :content="item.comment" placement="top-start">
22+
<el-tag style="margin-left: 5px" :style="{ color: item.color }">{{ item.tagKey }}</el-tag>
23+
</el-tooltip>
24+
</span>
25+
</span>
26+
</template>
27+
</el-table-column>
28+
<el-table-column prop="env" label="环境" width="80">
29+
<template slot-scope="scope">
30+
<el-tag disable-transitions :style="{ color: scope.row.env.color }">{{scope.row.env.envName}}</el-tag>
31+
</template>
32+
</el-table-column>
33+
<el-table-column prop="name" label="最新构建" width="190">
34+
<template slot-scope="props">
35+
<el-button-group>
36+
<el-button v-for="item in props.row.buildViews" :key="item.buildNumber"
37+
:style="{ backgroundColor: item.color, color: '#FFFFFF' }">
38+
<el-popover placement="top-start" trigger="hover">
39+
<el-form>
40+
<span v-show="item.executors.length > 0">
41+
<div v-for="executor in item.executors" :key="executor.id">
42+
<el-tag type="primary">{{ executor.nodeName }}:{{ executor.privateIp}}
43+
<el-button type="text" style="margin-left: 10px; padding: 3px 0"
44+
@click="handlerOpenXTerm(executor)"><span
45+
style="color: #535353">打开终端</span></el-button>
46+
</el-tag>
47+
</div>
48+
</span>
49+
<span v-show="item.executors.length === 0">
50+
No Executors
51+
</span>
52+
</el-form>
53+
<span slot="reference"><i class="el-icon-loading" v-if="item.building"></i>{{item.buildNumber}}</span>
54+
</el-popover>
55+
</el-button>
56+
</el-button-group>
57+
</template>
58+
</el-table-column>
59+
<el-table-column fixed="right" label="操作" width="200">
60+
<template slot-scope="scope">
61+
<el-button-group style="margin-right: 5px">
62+
<el-button type="primary" icon="fa fa-cloud-upload" v-show="scope.row.deploymentJobId !== 0"
63+
@click="handlerRowRunDeployment(scope.row)"></el-button>
64+
</el-button-group>
65+
<el-dropdown split-button type="primary" @click="handlerRowDeploymentEdit(scope.row)">
66+
<i class="el-icon-edit"></i>
67+
<el-dropdown-menu slot="dropdown">
68+
<el-dropdown-item icon="fa fa-plane"><span @click="handlerRowEngineEdit(scope.row)">工作引擎</span>
69+
</el-dropdown-item>
70+
<el-dropdown-item icon="fa fa-user"><span>权限配置</span></el-dropdown-item>
71+
</el-dropdown-menu>
72+
</el-dropdown>
73+
</template>
74+
</el-table-column>
75+
</el-table>
76+
<el-pagination background @current-change="paginationCurrentChange"
77+
:page-sizes="[10, 15, 20, 25, 30]" @size-change="handleSizeChange"
78+
layout="sizes, prev, pager, next" :total="pagination.total" :current-page="pagination.currentPage"
79+
:page-size="pagination.pageSize">
80+
</el-pagination>
81+
<!-- 任务编辑对话框 -->
82+
<cdJobDialog ref="cdJobDialog" :formStatus="formCdJobStatus" @closeDialog="fetchData"></cdJobDialog>
83+
<!-- 任务引擎编辑对话框 -->
84+
<jobEngineDialog ref="jobEngineDialog" :formStatus="formEngineStatus"></jobEngineDialog>
85+
<androidReinforceJobBuildDialog ref="androidReinforceJobBuildDialog" :formStatus="formAndroidReinforceBuildStatus"></androidReinforceJobBuildDialog>
86+
<jenkinsNodeXTerm ref="xtermDialog" :formStatus="formXtermStatus" @openXTerm="handlerOpenXTerm"></jenkinsNodeXTerm>
87+
</div>
88+
</template>
89+
90+
<script>
91+
import { mapState, mapActions } from 'vuex'
92+
93+
// Component
94+
// XTerm
95+
import JenkinsNodeXTerm from '@/components/opscloud/xterm/JenkinsNodeXTerm'
96+
import CdJobDialog from '@/components/opscloud/application/CdJobDialog'
97+
import JobEngineDialog from '@/components/opscloud/application/JobEngineDialog'
98+
// Component Build
99+
import AndroidReinforceJobBuildDialog from '@/components/opscloud/build/AndroidReinforceJobBuildDialog'
100+
101+
import { queryCdJobPage } from '@api/application/cd.job.js'
102+
103+
export default {
104+
name: 'MyCdJobTable',
105+
data () {
106+
return {
107+
application: '',
108+
tableData: [],
109+
options: {
110+
stripe: true
111+
},
112+
loading: false,
113+
pagination: {
114+
currentPage: 1,
115+
pageSize: 10,
116+
total: 0
117+
},
118+
queryParam: {
119+
instanceId: '',
120+
queryName: ''
121+
},
122+
formCiJobStatus: {
123+
visible: false,
124+
operationType: true,
125+
addTitle: '新增任务配置',
126+
updateTitle: '更新任务配置'
127+
},
128+
formCdJobStatus: {
129+
visible: false,
130+
operationType: true,
131+
addTitle: '新增部署任务配置',
132+
updateTitle: '更新部署任务配置'
133+
},
134+
formEngineStatus: {
135+
visible: false
136+
},
137+
// cd Reinforce
138+
formAndroidReinforceBuildStatus: {
139+
visible: false
140+
},
141+
formXtermStatus: {
142+
visible: false
143+
},
144+
timer: null // 查询定时器
145+
}
146+
},
147+
computed: {
148+
...mapState('d2admin/user', [
149+
'info'
150+
])
151+
},
152+
mounted () {
153+
this.initPageSize()
154+
},
155+
beforeDestroy () {
156+
clearInterval(this.timer) // 销毁定时器
157+
},
158+
components: {
159+
JenkinsNodeXTerm,
160+
CdJobDialog,
161+
JobEngineDialog,
162+
AndroidReinforceJobBuildDialog
163+
},
164+
methods: {
165+
...mapActions({
166+
setPageSize: 'd2admin/user/set'
167+
}),
168+
handleSizeChange (size) {
169+
this.pagination.pageSize = size
170+
this.info.pageSize = size
171+
this.setPageSize(this.info)
172+
this.fetchData()
173+
},
174+
initPageSize () {
175+
if (typeof (this.info.pageSize) !== 'undefined') {
176+
this.pagination.pageSize = this.info.pageSize
177+
}
178+
},
179+
setTimer () {
180+
if (this.timer !== null) {
181+
return
182+
}
183+
this.timer = setInterval(() => {
184+
this.fetchData()
185+
// console.log('开始定时...每8秒执行一次')
186+
}, 8000)
187+
},
188+
initData (application) {
189+
this.application = application
190+
this.fetchData()
191+
this.setTimer()
192+
},
193+
handlerRowRunDeployment (row) {
194+
switch (row.jobType) {
195+
case 'ANDROID_REINFORCE':
196+
this.formAndroidReinforceBuildStatus.visible = true
197+
this.$refs.androidReinforceJobBuildDialog.initData(this.application, row)
198+
break
199+
case 'JAVA_DEPLOYMENT':
200+
this.formJavaBuildStatus.visible = true
201+
this.$refs.javaJobBuildDialog.initData(this.application, row)
202+
break
203+
default:
204+
this.$message.error('部署任务类型配置错误!')
205+
}
206+
},
207+
handlerRowDeploymentEdit (row) {
208+
this.formCdJobStatus.operationType = false
209+
this.$refs.cdJobDialog.initData(this.application, Object.assign({}, row))
210+
this.formCdJobStatus.visible = true
211+
},
212+
handlerRowEngineEdit (row) {
213+
let data = {
214+
ciJobId: row.ciJobId,
215+
cdJobId: row.id
216+
}
217+
this.formEngineStatus.visible = true
218+
this.$refs.jobEngineDialog.initData(data)
219+
},
220+
// handlerRowEdit (row) {
221+
// this.formCiJobStatus.operationType = false
222+
// this.formCiJobStatus.visible = true
223+
// this.$refs.ciJobDialog.initData(this.application, Object.assign({}, row))
224+
// },
225+
handlerOpenXTerm (executor) {
226+
this.formXtermStatus.visible = true
227+
this.$refs.xtermDialog.initData(executor)
228+
},
229+
paginationCurrentChange (currentPage) {
230+
this.pagination.currentPage = currentPage
231+
this.fetchData()
232+
},
233+
fetchData () {
234+
if (this.tableData.length === 0) {
235+
this.loading = true
236+
}
237+
let requestBody = {
238+
'applicationId': this.application.id,
239+
'queryName': this.queryParam.queryName,
240+
'page': this.pagination.currentPage,
241+
'length': this.pagination.pageSize
242+
}
243+
queryCdJobPage(requestBody)
244+
.then(res => {
245+
this.tableData = res.body.data
246+
this.pagination.total = res.body.totalNum
247+
this.loading = false
248+
})
249+
}
250+
}
251+
}
252+
</script>
253+
254+
<style>
255+
.table-expand {
256+
font-size: 0;
257+
}
258+
259+
.table-expand label {
260+
width: 150px;
261+
color: #99a9bf;
262+
}
263+
264+
.table-expand .el-form-item {
265+
margin-right: 0;
266+
margin-bottom: 0;
267+
width: 50%;
268+
}
269+
270+
.el-dropdown {
271+
vertical-align: top;
272+
}
273+
274+
.el-dropdown + .el-dropdown {
275+
margin-left: 15px;
276+
}
277+
278+
.el-icon-arrow-down {
279+
font-size: 12px;
280+
}
281+
282+
.input {
283+
display: inline-block;
284+
max-width: 200px;
285+
}
286+
287+
.select {
288+
margin-right: 5px;
289+
}
290+
</style>

0 commit comments

Comments
 (0)