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