tnbapp/src/views/devops/app/AppConfig.vue

<template>
  <el-container>
    <el-header height="220">
      <h3>应用配置列表</h3>
      <el-row style="margin-top: 10px">
        <el-select
          v-model="queryInfo.env"
          clearable
          placeholder="环境"
          style="margin-left: 5px"
          @change="onSelectChange"
        >
          <el-option
            v-for="(item, index) in envList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="queryInfo.appType"
          clearable
          placeholder="类型"
          style="margin-left: 5px"
          @change="onSelectChange"
        >
          <el-option
            v-for="(item, index) in appTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="success" icon="el-icon-plus" style="margin-left: 5px" @click="handleAdd">添加</el-button>
      </el-row>
    </el-header>
    <el-main>
      <el-table
        :data="dataList"
        border
        height="480"
        style="width: 100%"
      >
        <el-table-column
          prop="appName"
          label="应用名"
        />
        <el-table-column
          prop="appId"
          label="应用 ID"
        />
        <el-table-column
          prop="repoBranch"
          label="分支"
        />
        <el-table-column
          prop="bindPorts"
          label="监听端口"
        />
        <el-table-column
          prop="totalDeployNodes"
          label="部署配置"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-tag disable-transitions>
              <span>{{ scope.row.totalDeployNodes }}</span>
            </el-tag>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              type="success"
              @click="handleDeployConfig(scope.$index, scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalDomains"
          label="关联域名"
        >
          <template slot-scope="scope">
            <el-tag disable-transitions>
              <span>{{ scope.row.totalDomains }}</span>
            </el-tag>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              type="success"
              @click="handleBindDomain(scope.$index, scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="280"
        >
          <template slot-scope="scope">
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              @click="handleCopy(scope.$index, scope.row)"
            >拷贝</el-button>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >详情</el-button>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
            <el-button
              style="margin-top: 5px; margin-left: 5px"
              size="mini"
              @click="handleErase(scope.$index, scope.row)"
            >清空本地仓库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :small="screenWidth <= 768"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="totalSize"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      />
    </el-main>

    <el-dialog
      title="关联域名列表"
      append-to-body
      :visible.sync="showBindDomainDialog"
      center
    >
      <template>
      </template>
    </el-dialog>
    <el-dialog
      title="拷贝应用配置"
      append-to-body
      :visible.sync="showCopyDialog"
      center
    >
      <template>
        <el-form :model="copyForm" label-width="80px">
          <el-form-item label="新应用 ID">
            <el-input v-model="copyForm.newAppId" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="新应用环境">
            <el-select v-model="copyForm.newEnv" placeholder="选择环境">
              <el-option
                v-for="(item, index) in envList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="新应用分支" style="width: 70%; padding-right: 2px">
            <el-input v-model="copyForm.newRepoBranch" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onCopy">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <el-dialog
      title="编辑应用配置"
      append-to-body
      :visible.sync="showEditDialog"
      center
    >
      <template>
        <el-form :model="editForm" label-width="80px">
          <el-form-item label="应用 ID" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.appId" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="应用名" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.appName" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="应用仓库" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.appRepo" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="仓库分支" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.repoBranch" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="应用路径" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.appRootPath" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="监听端口" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.bindPorts" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="仓库认证">
            <el-select v-model="editForm.repoAuthConfig" placeholder="选择仓库认证">
              <el-option
                v-for="(item, index) in repoAuthList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="编译工具">
            <el-select v-model="editForm.compilerConfig" placeholder="选择编译工具">
              <el-option
                v-for="(item, index) in compilerList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="打包工具">
            <el-select v-model="editForm.packerConfig" placeholder="选择打包工具">
              <el-option
                v-for="(item, index) in packerList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Dockerfile" style="width: 70%; padding-right: 2px">
            <el-input v-model="editForm.dockerfile" type="textarea" :rows="10" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onEdit">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <el-dialog
      title="添加应用配置"
      append-to-body
      :visible.sync="showAddDialog"
      center
    >
      <template>
        <el-form :model="addForm" label-width="80px">
          <el-form-item label="应用类型">
            <el-select v-model="addForm.appType" placeholder="选择类型">
              <el-option
                v-for="(item, index) in appTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属环境">
            <el-select v-model="addForm.env" placeholder="选择环境">
              <el-option
                v-for="(item, index) in envList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="应用 ID" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.appId" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="应用名" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.appName" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="应用仓库" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.appRepo" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="仓库分支" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.repoBranch" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="应用路径" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.appRootPath" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="监听端口" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.bindPorts" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item label="仓库认证">
            <el-select v-model="addForm.repoAuthConfig" placeholder="选择仓库认证">
              <el-option
                v-for="(item, index) in repoAuthList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="编译工具">
            <el-select v-model="addForm.compilerConfig" placeholder="选择编译工具">
              <el-option
                v-for="(item, index) in compilerList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="打包工具">
            <el-select v-model="addForm.packerConfig" placeholder="选择打包工具">
              <el-option
                v-for="(item, index) in packerList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Dockerfile" style="width: 70%; padding-right: 2px">
            <el-input v-model="addForm.dockerfile" type="textarea" :rows="10" 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>
      </template>
    </el-dialog>
    <el-dialog
      title="部署配置列表"
      append-to-body
      :visible.sync="showDeployConfigDialog"
      width="70%"
      center
    >
      <template>
        <el-button type="success" icon="el-icon-plus" style="margin-bottom: 5px" @click="handleAddDeployConfig">添加</el-button>
        <el-table
          :data="appDeployConfigList"
          border
          height="480"
          style="width: 100%"
        >
          <el-table-column
            prop="appName"
            label="应用名"
          />
          <el-table-column
            prop="machineIpv4"
            label="机器地址"
          />
          <el-table-column
            prop="packType"
            label="打包类型"
          />
          <el-table-column
            prop="startScript"
            label="启动脚本"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="280"
          >
            <template slot-scope="scope">
              <el-button
                style="margin-top: 5px; margin-left: 5px"
                size="mini"
                @click="handleEditDeployConfig(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                style="margin-top: 5px; margin-left: 5px"
                size="mini"
                type="danger"
                @click="handleDeleteDeployConfig(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
    <el-dialog
      title="添加部署配置"
      append-to-body
      :visible.sync="showAddDeployConfigDialog"
      center
    >
      <template>
        <el-form :model="addDeployForm" label-width="80px">
          <el-form-item label="应用 ID" style="width: 70%; padding-right: 2px">
            <el-input v-model="addDeployForm.appId" style="width: 70%; padding-right: 2px" readonly />
          </el-form-item>
          <el-form-item label="打包类型" style="width: 70%; padding-right: 2px">
            <el-input v-model="addDeployForm.packType" style="width: 70%; padding-right: 2px" readonly />
          </el-form-item>
          <el-form-item label="选择机器">
            <el-select v-model="addDeployForm.machineId" placeholder="选择机器">
              <el-option
                v-for="(item, index) in machineList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="启动脚本" style="width: 70%; padding-right: 2px">
            <el-input v-model="addDeployForm.startScript" type="textarea" :rows="10" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAddDeploy">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
    <el-dialog
      title="编辑部署配置"
      append-to-body
      :visible.sync="showEditDeployConfigDialog"
      center
    >
      <template>
        <el-form :model="editDeployForm" label-width="80px">
          <el-form-item label="应用 ID" style="width: 70%; padding-right: 2px">
            <el-input v-model="editDeployForm.appId" style="width: 70%; padding-right: 2px" readonly />
          </el-form-item>
          <el-form-item label="打包类型" style="width: 70%; padding-right: 2px">
            <el-input v-model="editDeployForm.packType" style="width: 70%; padding-right: 2px" readonly />
          </el-form-item>
          <el-form-item label="选择机器">
            <el-select v-model="editDeployForm.machineId" placeholder="选择机器">
              <el-option
                v-for="(item, index) in machineList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="启动脚本" style="width: 70%; padding-right: 2px">
            <el-input v-model="editDeployForm.startScript" type="textarea" :rows="10" style="width: 70%; padding-right: 2px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onEditDeploy">确定</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  addAppConfig, addAppDeployConfig,
  copyAppConfig,
  deleteAppConfig, deleteAppDeployConfig,
  eraseAppRepo,
  getAppConfig,
  getAppConfigList,
  getAppDeployConfigList,
  getBuildConfig,
  getDeployMachineList,
  getEnvList,
  updateAppConfig, updateAppDeployConfig
} from '@/api/devops'

export default {
  name: 'AppConfig',
  data() {
    return {
      envList: [],
      appTypeList: [],
      queryInfo: {
        env: 'test',
        appType: '',
        pn: 1
      },
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      dataList: [],
      // **********************************************************************
      showBindDomainDialog: false,
      // **********************************************************************
      showAddDialog: false,
      repoAuthList: [],
      compilerList: [],
      packerList: [],
      addForm: {
        appType: null,
        env: null,
        appId: null,
        appName: null,
        appRepo: null,
        repoBranch: null,
        appRootPath: null,
        bindPorts: null,
        repoAuthConfig: null,
        compilerConfig: null,
        packerConfig: null,
        dockerfile: null
      },
      // **********************************************************************
      showCopyDialog: false,
      copyForm: {
        appId: null,
        newAppId: null,
        newEnv: null,
        newRepoBranch: null
      },
      // **********************************************************************
      showEditDialog: false,
      editForm: {
        appId: null
      },
      // **********************************************************************
      showDeployConfigDialog: false,
      appDeployConfigList: [],
      showAddDeployConfigDialog: false,
      machineList: [],
      packTypes: [],
      addDeployForm: {
        appId: null,
        packType: null,
        machineId: null,
        machineIpv4: null,
        startScript: null
      },
      showEditDeployConfigDialog: false,
      editDeployForm: {
        appId: null,
        packType: null,
        machineId: null,
        machineIpv4: null,
        startScript: null
      }
    }
  },
  created() {
    const env = this.$route.query.env
    if (env !== undefined && env !== null) {
      this.queryInfo.env = env
    }
    const appType = this.$route.query.appType
    if (appType !== undefined && appType !== null) {
      this.queryInfo.appType = appType
    }
    const pageNumber = this.$route.query.pn
    if (pageNumber !== undefined && pageNumber !== null) {
      this.currentPage = parseInt(pageNumber)
      this.queryInfo.pn = parseInt(pageNumber)
    }

    document.title = '应用配置列表'
    getEnvList().then(resp => {
      if (resp.code === 0) {
        this.queryInfo.env = resp.data.userEnv
        this.queryInfo.appType = resp.data.userAppType
        this.envList = resp.data.envList
        this.appTypeList = resp.data.appTypeList
        this.getData()
      } else {
        this.$message.error(resp.msg)
      }
    }).catch(error => {
      this.$message.error(error.message)
    })
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.queryInfo.pn = pageNumber
      this.$router.push({
        path: '/devops/app/config',
        query: this.queryInfo
      })
      this.getData()
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      this.dataList = []
      getAppConfigList(this.queryInfo).then(resp => {
        if (resp.code === 0) {
          const respData = resp.data
          this.dataList = respData.list
          this.totalSize = respData.totalSize
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleBindDomain(index, row) {
      this.showBindDomainDialog = true
    },
    handleCopy(index, row) {
      this.copyForm.appId = row.appId
      this.showCopyDialog = true
    },
    onCopy() {
      const formData = new FormData()
      formData.append('appId', this.copyForm.appId)
      formData.append('newAppId', this.copyForm.newAppId)
      formData.append('newEnv', this.copyForm.newEnv)
      formData.append('newRepoBranch', this.copyForm.newRepoBranch)
      copyAppConfig(formData).then(resp => {
        this.$message.info(resp.msg)
        this.getData()
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.showEditDialog = false
      })
    },
    handleEdit(index, row) {
      getAppConfig(row.appId).then(resp => {
        if (resp.code === 0) {
          this.editForm = resp.data
          this.showEditDialog = true
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    onEdit() {
      const formData = new FormData()
      formData.append('appId', this.editForm.appId)
      updateAppConfig(formData).then(resp => {
        if (resp.code === 0) {
          this.getData()
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.showEditDialog = false
      })
    },
    handleAdd() {
      getBuildConfig().then(resp => {
        if (resp.code === 0) {
          this.repoAuthList = resp.data.repoAuthList
          this.compilerList = resp.data.compilerList
          this.packerList = resp.data.packerList
          this.showAddDialog = true
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    onAdd() {
      const formData = new FormData()
      formData.append('appId', this.addForm.appId)
      addAppConfig(formData).then(resp => {
        if (resp.code === 0) {
          this.getData()
        } else {
          this.$message.info(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      }).finally(() => {
        this.showAddDialog = false
      })
    },
    onSelectChange() {
      this.currentPage = 1
      this.queryInfo.pn = 1
      this.$router.push({
        path: '/devops/app/config',
        query: this.queryInfo
      })
      this.getData()
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除 ' + row.appName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const formData = new FormData()
        formData.append('appId', row.appId)
        deleteAppConfig(formData).then(resp => {
          this.$message.info(resp.msg)
          this.getData()
        }).catch(error => {
          this.$message.error(error.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleErase(index, row) {
      const formData = new FormData()
      formData.append('appId', row.appId)
      eraseAppRepo(formData).then(resp => {
        this.$message.info(resp.msg)
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    // ****************************************************************************************************************
    // 应用部署配置
    // ****************************************************************************************************************
    handleDeployConfig(index, row) {
      this.addDeployForm.appId = row.appId
      this.addDeployForm.packType = row.packType
      getAppDeployConfigList(row.appId).then(resp => {
        if (resp.code === 0) {
          this.appDeployConfigList = resp.data
          this.showDeployConfigDialog = true
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleAddDeployConfig(index, row) {
      getDeployMachineList(this.queryInfo.env).then(resp => {
        if (resp.code === 0) {
          this.machineList = resp.data
          this.showAddDeployConfigDialog = true
        } else {
          this.$message.error(resp.msg)
        }
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    onAddDeploy() {
      const formData = new FormData()
      formData.append('appId', this.addDeployForm.appId)
      addAppDeployConfig(formData).then(resp => {
        this.$message.info(resp.msg)
        this.getData()
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleEditDeployConfig(index, row) {
      this.editDeployForm = row
      this.showEditDeployConfigDialog = true
    },
    onEditDeploy() {
      const formData = new FormData()
      formData.append('appId', this.editDeployForm.appId)
      updateAppDeployConfig(formData).then(resp => {
        this.$message.info(resp.msg)
        this.getData()
      }).catch(error => {
        this.$message.error(error.message)
      })
    },
    handleDeleteDeployConfig(index, row) {
      this.$confirm('确定要删除 ' + row.appName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const formData = new FormData()
        formData.append('appId', row.appId)
        deleteAppDeployConfig(formData).then(resp => {
          this.$message.info(resp.msg)
          this.getData()
        }).catch(error => {
          this.$message.error(error.message)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    }
  }
}
</script>

<style>
</style>