parent
6013a316aa
commit
a8c31579be
11 changed files with 299 additions and 7 deletions
@ -0,0 +1,240 @@ |
|||||||
|
<script setup> |
||||||
|
import {computed, ref, watch} from "vue"; |
||||||
|
import {onBeforeMount, onUnmounted} from "vue"; |
||||||
|
import {useStore} from "vuex"; |
||||||
|
import {get_git_ver, get_update_option} from "@/apis/update.js" |
||||||
|
|
||||||
|
|
||||||
|
const store = useStore() |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
ip: { |
||||||
|
type: String, |
||||||
|
default: '' |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
onUnmounted( |
||||||
|
() => { |
||||||
|
// store.state.update_dialog_show = false |
||||||
|
store.getters.dialog_change |
||||||
|
console.log(store.state.update_dialog_show) |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 获取git版本 |
||||||
|
const git_ver = ref([]) |
||||||
|
const selectedVersion = ref('') |
||||||
|
|
||||||
|
onBeforeMount(() => { |
||||||
|
get_git_ver().then(res => { |
||||||
|
if (Array.isArray(res)) { |
||||||
|
git_ver.value = [...res] |
||||||
|
} |
||||||
|
console.log(git_ver.value) |
||||||
|
}).catch() |
||||||
|
}) |
||||||
|
|
||||||
|
// 获取升级命令的功能 |
||||||
|
const updateCmd = ref({setup: [], teardown: [], sql: [], client: []}) |
||||||
|
|
||||||
|
onBeforeMount( |
||||||
|
() => { |
||||||
|
get_update_option().then(res => { |
||||||
|
console.log("get_update_option") |
||||||
|
if (Array.isArray(res)) { |
||||||
|
res.forEach( |
||||||
|
(value, index) => { |
||||||
|
if (value.process === "setup") { |
||||||
|
updateCmd.value.setup.push(value) |
||||||
|
} |
||||||
|
if (value.process === "teardown") { |
||||||
|
updateCmd.value.teardown.push(value) |
||||||
|
} |
||||||
|
if (value.process === "sql") { |
||||||
|
updateCmd.value.sql.push(value) |
||||||
|
} |
||||||
|
if (value.process === "client") { |
||||||
|
updateCmd.value.client.push(value) |
||||||
|
} |
||||||
|
} |
||||||
|
) |
||||||
|
console.log(updateCmd.value) |
||||||
|
} |
||||||
|
|
||||||
|
}).catch() |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
// 提交升级相关逻辑 |
||||||
|
const updateForm = ref() |
||||||
|
|
||||||
|
// 操作进度相关 |
||||||
|
const progress = [ |
||||||
|
{ |
||||||
|
content: '执行脚本', |
||||||
|
checked: true, |
||||||
|
done: true, |
||||||
|
time: '2018-04-12 20:46', |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: '对比数据库', |
||||||
|
checked: true, |
||||||
|
done: false, |
||||||
|
time: '2018-04-03 20:46', |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: '执行升级', |
||||||
|
checked: true, |
||||||
|
done: false, |
||||||
|
time: '2018-04-03 20:46', |
||||||
|
}, |
||||||
|
{ |
||||||
|
content: '上传客户端', |
||||||
|
checked: true, |
||||||
|
done: false, |
||||||
|
time: '', |
||||||
|
}, |
||||||
|
] |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<el-dialog v-model="store.state.update_dialog_show" title="更新影院" :modal="true" width="720px"> |
||||||
|
<div><span class="update">更新单机：</span><span class="ip">{{ ip }}</span><span>目标版本：</span> |
||||||
|
|
||||||
|
<el-select v-model="selectedVersion"> |
||||||
|
<el-option v-for="ver in git_ver" :label="ver.short_release" :value="ver.short_release" :key="ver.id"></el-option> |
||||||
|
</el-select> |
||||||
|
</div> |
||||||
|
<el-form :model="updateForm"> |
||||||
|
<el-form-item> |
||||||
|
<el-checkbox-group v-model="updateForm"> |
||||||
|
<el-divider content-position="left"> |
||||||
|
<span class="cmd_label">执行脚本</span> |
||||||
|
</el-divider> |
||||||
|
<el-checkbox v-for="cmd in updateCmd.setup" :label="cmd.desc" :name="cmd.id.toString()" |
||||||
|
:checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox> |
||||||
|
<el-divider content-position="left"> |
||||||
|
<span class="cmd_label">数据库</span> |
||||||
|
</el-divider> |
||||||
|
<el-checkbox v-for="cmd in updateCmd.sql" :label="cmd.desc" :name="cmd.id.toString()" |
||||||
|
:checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox> |
||||||
|
<el-divider content-position="left"> |
||||||
|
<span class="cmd_label">执行升级</span> |
||||||
|
</el-divider> |
||||||
|
<el-checkbox v-for="cmd in updateCmd.teardown" :label="cmd.desc" :name="cmd.id.toString()" |
||||||
|
:checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox> |
||||||
|
<el-divider content-position="left"> |
||||||
|
<span class="cmd_label">客户端</span> |
||||||
|
</el-divider> |
||||||
|
<el-checkbox v-for="cmd in updateCmd.client" :label="cmd.desc" :name="cmd.id.toString()" |
||||||
|
:checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox> |
||||||
|
</el-checkbox-group> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-button type="primary">更新</el-button> |
||||||
|
<div class="processBox"> |
||||||
|
<!-- <el-divider />--> |
||||||
|
<div class="timelineProcessBox"> |
||||||
|
<el-timeline class="timeline"> |
||||||
|
<el-timeline-item |
||||||
|
class="lineitem" |
||||||
|
:class="progress.done ? 'active' : 'inactive'" |
||||||
|
v-for="(p, index) in progress" |
||||||
|
:key="index" |
||||||
|
:timestamp="p.time" |
||||||
|
> |
||||||
|
<span style="display: flex; flex-direction: column"> |
||||||
|
<span style="margin: 10px 0; font-size: 16px"> |
||||||
|
{{ p.content }} |
||||||
|
</span> |
||||||
|
<span style="color: #8c8c8c; font-size: 14px"> |
||||||
|
{{ p.checked }} |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</el-timeline-item> |
||||||
|
</el-timeline> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.el-checkbox-group { |
||||||
|
text-align: left; |
||||||
|
width: 640px; |
||||||
|
padding-left: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-checkbox { |
||||||
|
margin-left: 0; |
||||||
|
margin-right: 25px; |
||||||
|
width: 180px; |
||||||
|
padding-left: 0; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.el-divider--horizontal { |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
.update { |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
.ip { |
||||||
|
margin-right: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.processBox { |
||||||
|
background-color: #fff; |
||||||
|
height: 210px; |
||||||
|
|
||||||
|
.title { |
||||||
|
font-size: 16px; |
||||||
|
font-weight: 600; |
||||||
|
padding-left: 32px; |
||||||
|
padding-top: 16px; |
||||||
|
} |
||||||
|
.timelineProcessBox { |
||||||
|
.timeline { |
||||||
|
display: flex; |
||||||
|
width: 95%; |
||||||
|
margin: 40px auto; |
||||||
|
.lineitem { |
||||||
|
transform: translateX(50%); |
||||||
|
width: 25%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-timeline-item__tail) { |
||||||
|
border-left: none; |
||||||
|
border-top: 2px solid #e4e7ed; |
||||||
|
width: 100%; |
||||||
|
position: absolute; |
||||||
|
top: 6px; |
||||||
|
} |
||||||
|
:deep(.el-timeline-item__wrapper) { |
||||||
|
padding-left: 0; |
||||||
|
position: absolute; |
||||||
|
top: 20px; |
||||||
|
transform: translateX(-50%); |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
:deep(.el-timeline-item__timestamp) { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.active { |
||||||
|
:deep(.el-timeline-item__node) { |
||||||
|
background-color: $login_word; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.el-timeline-item__tail) { |
||||||
|
border-color: $login_word; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
Loading…
Reference in new issue