dingxin_toolbox_vue/src/components/update/CinemaUpdate.vue

<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>