tnbapp/src/views/devops/sys/SysUpdate.vue

<template>
  <el-container>
    <el-header height="220">
      <h3>系统更新</h3>
      <el-row style="margin-top: 10px">
        <el-select
          v-model="queryInfo.nodeType"
          size="mini"
          placeholder="节点类型"
          style="margin-left: 5px"
          @change="onSelectChange"
        >
          <el-option label="mgr" value="mgr" />
          <el-option label="agent" value="agent" />
        </el-select>
        <el-button size="mini" type="warning" icon="el-icon-plus" style="margin-left: 5px" @click="handleAdd">添加</el-button>
        <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="handleUpdate">更新</el-button>
      </el-row>
    </el-header>
    <el-main>
      <el-row>
        <el-col :md="16" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-table
            :data="dataList"
            border
            height="480"
            style="width: 100%"
          >
            <el-table-column
              prop="nodeType"
              label="节点类型"
            />
            <el-table-column
              prop="host"
              label="机器地址"
            />
            <el-table-column
              prop="appDir"
              label="应用目录"
            />
            <el-table-column
              prop="appVersion"
              label="应用版本"
            />
          </el-table>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog
      append-to-body
      :visible.sync="showAddDialog"
      width="50%"
      center
    >
      <div>
        <el-form :model="addForm" label-width="80px">
          <el-form-item label="节点类型" style="width: 70%; padding-right: 2px">
            <el-input v-model="queryInfo.nodeType" style="width: 70%; padding-right: 2px" readonly />
          </el-form-item>
          <el-form-item label="主机地址">
            <el-input v-model="addForm.host" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="SSH 端口">
            <el-input v-model="addForm.port" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="认证方式" style="width: 70%; padding-right: 2px">
            <el-select v-model="addForm.authType" placeholder="选择认证方式">
              <el-option label="密码认证" value="password" />
              <el-option label="私钥认证" value="privateKey" />
            </el-select>
          </el-form-item>
          <div v-if="addForm.authType === 'password'">
            <el-form-item label="用户名" style="width: 70%; padding-right: 2px">
              <el-input v-model="addForm.username" style="width: 70%; padding-right: 2px" />
            </el-form-item>
            <el-form-item label="密码" style="width: 70%; padding-right: 2px">
              <el-input v-model="addForm.password" style="width: 70%; padding-right: 2px" />
            </el-form-item>
          </div>
          <div v-else>
            <el-form-item label="私钥" style="width: 70%; padding-right: 2px">
              <el-input
                v-model="addForm.rsaPrikey"
                type="textarea"
                maxlength="10000"
                :rows="10"
                style="padding: 5px"
              />
            </el-form-item>
          </div>
          <el-form-item label="应用目录">
            <el-input v-model="addForm.appDir" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAdd">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 视频预览对话框 -->
    <el-dialog
      title="预览视频"
      append-to-body
      :visible.sync="showPreviewDialog"
      width="70%"
      center
    >
      <template />
    </el-dialog>
  </el-container>
</template>

<script>
import { addRemoteHost, deleteRemoteHost, getRemoteHostList, updateRemoteApp } from '@/api/devops'

export default {
  name: 'SysUpdate',
  data() {
    return {
      queryInfo: {
        nodeType: 'agent'
      },
      dataList: [],
      // **********************************************************************
      showAddDialog: false,
      addForm: {
        nodeType: 'agent',
        host: '',
        port: 22,
        authType: 'password',
        username: '',
        password: '',
        rsaPrikey: '',
        appDir: ''
      },
      // **********************************************************************
      showPreviewDialog: false
    }
  },
  created() {
    document.title = '系统更新'
    this.getData()
  },
  methods: {
    getData() {
      this.dataList = []
      getRemoteHostList(this.queryInfo).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data
        } else {
          this.$message.warning(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    onSelectChange() {
      this.getData()
    },
    handleAdd() {
      this.showAddDialog = true
    },
    onAdd() {
      addRemoteHost(this.addForm).then(resp => {
        if (resp.code === 0) {
          this.getData()
        } else {
          this.$message.warning(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.showAddDialog = false
      })
    },
    handleDelete(index, row) {
      deleteRemoteHost(row.host).then(resp => {
        if (resp.code === 0) {
          this.getData()
        } else {
          this.$message.warning(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleUpdate() {
      const hostList = []
      for (const item of this.dataList) {
        hostList.push(item.host)
      }
      console.log(hostList)
      this.$confirm('确定要更新所有机器上的 ' + this.queryInfo.nodeType + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const form = {}
        form.hostList = hostList
        updateRemoteApp(form).then(resp => {
          this.$message.warning(resp.msg)
        }).catch(error => {
          this.$message.error(error.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style>
</style>