完成升级弹窗的逻辑

src/apis/update.js

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

src/components/update/CinemaUpdate.vue

@@ -1,12 +1,13 @@
 <script setup>
 import {computed, ref, watch} from "vue";
-import {onBeforeMount, onUnmounted} from "vue";
+import {onBeforeMount, onUnmounted, onMounted, onBeforeUnmount} from "vue";
-import {useStore} from "vuex";
+import {mapState, useStore} from "vuex";
-import {get_git_ver, get_update_option} from "@/apis/update.js"
+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({
   },
 })
 
-
+// region 获取git版本
-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(() => {
+onBeforeMount(async () => {
-  get_git_ver().then(res => {
+  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(
-    () => {
+    async () => {
-      get_update_option().then(res => {
+      await get_update_option().then(res => {
-        console.log("get_update_option")
+
+        // 返回值处理逻辑
         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-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-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()"
+          <el-checkbox v-for="cmd in updateCmd.setup" :label="cmd.id" :key="cmd.id"
-                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+                       :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()"
+          <el-checkbox v-for="cmd in updateCmd.sql" :label="cmd.id" :key="cmd.id"
-                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+                       :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()"
+          <el-checkbox v-for="cmd in updateCmd.teardown" :label="cmd.id" :key="cmd.id"
-                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+                       :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()"
+          <el-checkbox v-for="cmd in updateCmd.client" :label="cmd.id" :key="cmd.id"
-                       :checked="cmd.is_checked" :disabled="cmd.is_force"></el-checkbox>
+                       :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>
+    <el-button type="primary" @click="handleUpdate" :disabled="disableAll">{{ updateBtn }}</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>
 
@@ -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>

src/store/index.js

@@ -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: {},
 })

src/views/update/index.vue

@@ -1,6 +1,6 @@
 <script setup>
-import {onBeforeMount, onMounted, reactive, ref, unref} from 'vue';
+import {onBeforeMount, onMounted, reactive, ref, unref, computed} from 'vue';
-import {useStore} from "vuex";
+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)
+  store.state.update_dialog_show = true
-  console.log('dialogTableVisible')
-  console.log(store.state.update_dialog_show)
-  // showDialog.value = true
-  // store.state.update_dialog_show = true
-  store.getters.dialog_change
   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>