dingxin_toolbox_vue/src/components/update/CinemaUpdate.vue

<script setup>
import {computed, ref, watch} from "vue";
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"
import Tips from "@/components/update/Tips.vue"

// 注册store
const store = useStore()

// 注册props
const props = defineProps({
  ip: {
    type: String,
    default: ''
  },
})

// region 获取git版本
const git_ver = ref([])
const selectedVersion = ref('')

onBeforeMount(async () => {
  await get_git_ver().then(res => {
    if (Array.isArray(res)) {
      git_ver.value = [...res]
    }
  }).catch()
})
// endregion

// region 获取升级命令的功能
const updateCmd = ref({setup: [], teardown: [], sql: [], config: [], client: []})

onBeforeMount(
    async () => {
      await get_update_option().then(res => {

        // 返回值处理逻辑
        if (Array.isArray(res)) {
          console.log(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 === "config") {
                  updateCmd.value.config.push(value)
                }
                if (value.process === "client") {
                  updateCmd.value.client.push(value)
                }
              }
          )
        }
      }).catch()
    }
)
//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 changUpdateStatus = (ip) => {
  store.commit("change_update_status", ip)
}
// 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 close时间对应功能
const handleClose = () => {
  store.state.update_dialog_show = false
}
// endregion

// region 提交升级相关逻辑
const updateForm = ref()
const checkedCmd = ref([])

// 处理点击事件
const handleRep = (ip) => {
  console.log(store.state.update_status[ip])
  changUpdateStatus(ip)  // 更新状态
  handleBtnName(props.ip)  // 变更按键文案
  handleDisable(props.ip)  // 启用全部状态
  console.log(store.state.update_status[ip])
}

const handleUpdate = async () => {
  if (props.ip === "" || selectedVersion.value === "") {
    alert("请先选择影院和目标版本！")
    return
  }
  handleRep(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 res_data = JSON.parse(JSON.stringify(res))
    const res_ip = res_data["ip"]
    // 处理成功逻辑
    if (res_data["result"] === "success") {
      handleRep(res_ip)
      store.commit("clear_update_status", res_ip)  // 清除临时状态
    }
    if (res_data["result"] === "fail") {
      alert(res_ip + ' 升级失败：' + res_data["msg"])
      handleRep(res_ip)
      store.commit("clear_update_status", res_ip)  // 清除临时状态
    }
  }).catch(err => {
    const ip = err.config.params.ip
    handleRep(ip)
    store.commit("clear_update_status", ip)  // 清除临时状态
    alert(ip + " 升级失败，请重试！")

  })
}
// endregion
</script>


<template>
  <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" :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 ref="updateForm">
      <el-form-item>
        <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.id" :key="cmd.id"
                       :checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
            <tips v-if="cmd.comment !==''" title="设置说明" :width="400" :content="cmd.comment"></tips>
          </el-checkbox>

          <el-divider content-position="left">
            <span class="cmd_label">数据库</span>
          </el-divider>
          <el-checkbox v-for="cmd in updateCmd.sql" :label="cmd.id" :key="cmd.id"
                       :checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
            <tips v-if="cmd.comment !==''" title="设置说明" :width="400" :content="cmd.comment"></tips>
          </el-checkbox>
          <el-divider content-position="left">
            <span class="cmd_label">执行升级</span>
          </el-divider>
          <el-checkbox v-for="cmd in updateCmd.teardown" :label="cmd.id" :key="cmd.id"
                       :checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
            <tips v-if="cmd.comment !==''" title="设置说明" :width="400" :content="cmd.comment"></tips>
          </el-checkbox>
          <el-divider content-position="left">
            <span class="cmd_label">修改设置</span>
          </el-divider>
          <el-checkbox v-for="cmd in updateCmd.config" :label="cmd.id" :key="cmd.id"
                       :checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
            <tips v-if="cmd.comment !==''" title="设置说明" :width="400" :content="cmd.comment"></tips>
          </el-checkbox>
          <el-divider content-position="left">
            <span class="cmd_label">客户端</span>
          </el-divider>
          <el-checkbox v-for="cmd in updateCmd.client" :label="cmd.id" :key="cmd.id"
                       :checked="cmd.is_checked" :disabled="cmd.is_force">{{ cmd.desc }}
            <tips v-if="cmd.comment !==''" title="设置说明" :width="400" :content="cmd.comment"></tips>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleUpdate" :disabled="disableAll">{{ updateBtn }}</el-button>
  </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;
}

</style>