RogerWorkPC
/
dingxin_toolbox_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成升级弹窗的逻辑

Browse Source
main
RogerWork 10 months ago
parent a8c31579be
commit b08ad2f7dc
4 changed files with 192 additions and 174 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/apis/update.js
  2. 293
      src/components/update/CinemaUpdate.vue
  3. 23
      src/store/index.js
  4. 38
      src/views/update/index.vue

12
src/apis/update.js
Unescape View File

@ -55,8 +55,18 @@ export const get_update_option = () => {
}
export const get_git_ver = () => {
return request( {
return request({
url: `/update/get_git_version/`,
method: 'get',
})
}
export const handle_update = (params) => {
return request({
url: '/update/update_cine/',
method: 'get',
params: params,
timeout: 3*60*1000,
})
}

293
src/components/update/CinemaUpdate.vue
Unescape View File

@ -1,12 +1,13 @@
<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"
import {onBeforeMount, onUnmounted, onMounted, onBeforeUnmount} from "vue";
import {mapState, useStore} from "vuex";
import {get_git_ver, get_update_option, handle_update} from "@/apis/update.js"
// 注册store
const store = useStore()
// 注册props
const props = defineProps({
ip: {
type: String,
@ -14,35 +15,27 @@ const props = defineProps({
},
})
onUnmounted(
() => {
// store.state.update_dialog_show = false
store.getters.dialog_change
console.log(store.state.update_dialog_show)
}
)
// 获取git版本
// region 获取git版本
const git_ver = ref([])
const selectedVersion = ref('')
onBeforeMount(() => {
get_git_ver().then(res => {
onBeforeMount(async () => {
await get_git_ver().then(res => {
if (Array.isArray(res)) {
git_ver.value = [...res]
}
console.log(git_ver.value)
}).catch()
})
// endregion
// 获取升级命令的功能
// region 获取升级命令的功能
const updateCmd = ref({setup: [], teardown: [], sql: [], client: []})
onBeforeMount(
() => {
get_update_option().then(res => {
console.log("get_update_option")
async () => {
await get_update_option().then(res => {
// 返回值处理逻辑
if (Array.isArray(res)) {
res.forEach(
(value, index) => {
@ -60,104 +53,175 @@ onBeforeMount(
}
}
)
console.log(updateCmd.value)
}
}).catch()
}
)
//endregion
// region opened事件对应的功能
// 定义方法用于在加载过程中将ip对应的状态存入全局store中
const addUpdateStatus = () => {
if (!store.state.update_status.hasOwnProperty(props.ip)) {
let data = {
"ip": props.ip,
"status": false // 更新中是true 更新是false
}
store.commit("add_update_status", data)
}
}
const getCurrentConfig = () => {
if (store.state.update_config.hasOwnProperty(props.ip)) {
selectedVersion.value = store.state.update_config[props.ip].version
checkedCmd.value = store.state.update_config[props.ip].selected
} else {
selectedVersion.value = ''
}
}
const handleOpened = () => {
getCurrentConfig()
addUpdateStatus()
handleBtnName(props.ip)
handleDisable(props.ip)
}
// endregion
// 提交升级相关逻辑
// region 提交升级相关逻辑
const updateForm = ref()
const checkedCmd = ref([])
// 处理点击事件
const handleRep = (ip) => {
changUpdateStatus(ip) // 更新状态
handleBtnName(props.ip) // 变更按键文案
handleDisable(props.ip) // 启用全部状态
store.commit("clear_update_status", props.ip) // 清除临时状态
}
const handleUpdate = async () => {
if (props.ip === "" || selectedVersion.value === "") {
alert("请先选择影院和目标版本！")
return
}
// 更新状态
changUpdateStatus(props.ip)
// 处理按键显示的文案
handleBtnName(props.ip)
// 禁用全部选项
handleDisable(props.ip)
// 添加store全局数据
let data = {}
data = {
"ip": props.ip,
"config": {'version': selectedVersion.value, 'selected': checkedCmd.value}
}
store.commit("add_update_cine", data)
// 处理提交数据的结构
let cmd_array = []
checkedCmd.value.forEach((value, index) => {
cmd_array.push(value)
})
let params = {
ip: props.ip,
version: selectedVersion.value,
cmd: JSON.stringify(cmd_array)
}
await handle_update(params).then(res => {
// 处理成功逻辑
const ip = JSON.parse(JSON.stringify(res))["ip"]
handleRep(ip)
}).catch(err => {
const ip = JSON.parse(JSON.stringify(err))["ip"]
handleRep(ip)
alert("升级失败，请重试！")
})
}
// endregion
// region 更新状态
const changUpdateStatus = (ip) => {
store.commit("change_update_status", ip)
}
// endregion
// region 处理按键文案
let updateBtn = ref("更新")
const handleBtnName = (ip) => {
if (store.state.update_status[ip] === false) {
updateBtn.value = "更新"
}
if (store.state.update_status[ip] === true) {
updateBtn.value = "更新中"
}
}
// endregion
// region 更新时禁用全部选项
const disableAll = ref(false)
const handleDisable = (ip) => {
disableAll.value = store.state.update_status[ip] === true;
}
// endregion
// region 独立的生命周期
const handleClose = () => {
store.state.update_dialog_show = false
}
// endregion
// 操作进度相关
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">
<el-dialog v-model="store.state.update_dialog_show" title="更新影院" :modal="true" width="720px"
:close-on-click-modal="false" @opened="handleOpened" @close="handleClose">
<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 v-model="selectedVersion" :disabled="disableAll">
<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 ref="updateForm">
<el-form-item>
<el-checkbox-group v-model="updateForm">
<el-checkbox-group v-model="checkedCmd" :disabled="disableAll">
<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-checkbox v-for="cmd in updateCmd.setup" :label="cmd.id" :key="cmd.id"
:checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
</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-checkbox v-for="cmd in updateCmd.sql" :label="cmd.id" :key="cmd.id"
:checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
</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-checkbox v-for="cmd in updateCmd.teardown" :label="cmd.id" :key="cmd.id"
:checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
</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 v-for="cmd in updateCmd.client" :label="cmd.id" :key="cmd.id"
:checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
</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-button type="primary" @click="handleUpdate" :disabled="disableAll">{{ updateBtn }}</el-button>
</el-dialog>
</template>
@ -179,62 +243,13 @@ const progress = [
.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>

23
src/store/index.js
Unescape View File

@ -4,13 +4,32 @@ export default createStore({
modules: {},
state: {
update_dialog_show: false,
update_config: {},
update_status: {},
},
getters: {
dialog_change: (state) => {
dialog_change: state => {
state.update_dialog_show = !state.update_dialog_show
return state.update_dialog_show
}
},
mutations: {},
mutations: {
add_update_cine: (state, payload) => {
state.update_config[payload.ip] = payload.config
},
add_update_status: (state, payload) => {
state.update_status[payload.ip] = payload.status
},
change_update_status: (state, ip) => {
if (state.update_status[ip] !== undefined) {
state.update_status[ip] = !state.update_status[ip]
}
},
clear_update_status: (state, ip) => {
if (state.update_status[ip]) {
delete state.update_status[ip]
}
}
},
actions: {},
})

38
src/views/update/index.vue
Unescape View File

@ -1,6 +1,6 @@
<script setup>
import {onBeforeMount, onMounted, reactive, ref, unref} from 'vue';
import {useStore} from "vuex";
import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue';
import {useStore, mapGetters, mapState} from "vuex";
import {cinema_list, cinema_search, cinema_user, change_cinema_user} from "@/apis/update.js";
import CinemaUpdate from "@/components/update/CinemaUpdate.vue";
@ -38,27 +38,21 @@ const ipRule = reactive({
// 数据提交 点击搜索按键提交数据
const submitSearch = async (formEl) => {
console.log('至少执行了')
console.log(cinemaSearch.ip)
const {ip, version} = unref(cinemaSearch)
tableData.value = []
await cinema_search({ip, version}).then(
res => {
if (Array.isArray(res)) {
tableData.value = [...res]
console.log(tableData)
} else {
console.log('else')
}
}
).catch(
err => {
console.log('err')
console.log(err)
}
)
// console.log(formEl)
console.log(ip, version)
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
@ -72,9 +66,7 @@ const submitSearch = async (formEl) => {
// 重置搜索数据的逻辑
const resetSearch = (formEl) => {
console.log(formEl)
if (!formEl) return
console.log("resetSearch")
formEl.resetFields()
}
@ -104,15 +96,11 @@ let refresh_loading = ref(false)
async function get_table_data() {
tableData.value = []
await cinema_list().then(res => {
console.log(res)
if (Array.isArray(res)) {
tableData.value = [...res]
console.log(tableData)
} else {
console.log('else')
}
}).catch(err => {
console.log('err')
console.log(err)
}
)
@ -122,7 +110,6 @@ async function get_table_data() {
onMounted(
async () => {
await get_table_data();
console.log(tableData)
}
)
@ -136,16 +123,11 @@ let userData = ref([])
// 定义用于展示的数据变量
onMounted(async () => {
await cinema_user().then((res) => {
console.log('cinema_user')
const user_list = res.map((item, index) => {
return {key: item.id, label: item.username, value: item.username}
})
user_list.unshift({key: 0, label: '暂无', value: '暂无'})
console.log(user_list)
userData.value = [...user_list]
console.log(res)
console.log(userData.value)
}).catch((err) => {
})
})
@ -161,17 +143,11 @@ const cinemaUserChange = (user, id) => {
// region 升级相关代码
const update_ip = ref('')
// const showDialog = ref(false)
const changeDialogStatus = (val) => {
console.log(val)
console.log('dialogTableVisible')
console.log(store.state.update_dialog_show)
// showDialog.value = true
// store.state.update_dialog_show = true
store.getters.dialog_change
store.state.update_dialog_show = true
update_ip.value = val
}
// endregion
</script>
@ -237,8 +213,6 @@ const changeDialogStatus = (val) => {
<el-table-column prop="db_user" label="数据库账号" min-width="90"></el-table-column>
<el-table-column prop="db_pwd" label="数据库密码" min-width="120"></el-table-column>
</el-table>
<!-- <CinemaUpdate :visible="showDialog" :ip="update_ip"></CinemaUpdate>-->
<!-- <CinemaUpdate :visible="store.state.update_dialog_show" :ip="update_ip"></CinemaUpdate>-->
<CinemaUpdate :ip="update_ip"></CinemaUpdate>
</template>

Write Preview
Loading…
Cancel
Save