|
@@ -35,21 +35,21 @@
|
|
<div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
<div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
<div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
|
|
<div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
|
|
<div class="left">
|
|
<div class="left">
|
|
- <span :class="item.runState ? 'success' : 'error'" class="box"></span>
|
|
|
|
|
|
+ <span :class="item.deploystate ? 'success' : 'error'" class="box"></span>
|
|
<el-tooltip class="item" effect="dark" :content="item.deployNodeName" placement="top">
|
|
<el-tooltip class="item" effect="dark" :content="item.deployNodeName" placement="top">
|
|
<span class="txt">{{ item.deployNodeName }}</span>
|
|
<span class="txt">{{ item.deployNodeName }}</span>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<div v-show="activeIndex == index" class="right">
|
|
<div v-show="activeIndex == index" class="right">
|
|
- <!-- <template v-if="!flag && item.deployNodeID">
|
|
|
|
|
|
+ <template v-if="!flag && item.deployNodeID">
|
|
<template v-if="item.serviceType == 4">
|
|
<template v-if="item.serviceType == 4">
|
|
- <span @click.stop="handleStart" v-if="!item.runState" class="start">启用</span>
|
|
|
|
|
|
+ <span @click.stop="handleStart" v-if="!item.deploystate" class="start">启用</span>
|
|
<span @click.stop="handleStop" v-else class="stop">停用</span>
|
|
<span @click.stop="handleStop" v-else class="stop">停用</span>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
<span @click.stop="handleRest(item)" class="rest">重置</span>
|
|
<span @click.stop="handleRest(item)" class="rest">重置</span>
|
|
</template>
|
|
</template>
|
|
- </template> -->
|
|
|
|
|
|
+ </template>
|
|
<span @click.stop="handleError" class="error">删除</span>
|
|
<span @click.stop="handleError" class="error">删除</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -68,16 +68,24 @@
|
|
<el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
|
|
<el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="demo-form">
|
|
<div class="demo-form">
|
|
- <el-form :inline="true" :model="formInline" class="flex">
|
|
|
|
- <el-form-item label="机器名称">
|
|
|
|
- <el-input clearable v-model="formInline.deployNodeName" :disabled="activeIndex == null" size="small" placeholder="请输入服务名称"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="IP及端口">
|
|
|
|
- <el-input clearable v-model="formInline.serviceURL" :disabled="activeIndex == null" size="small" placeholder="请输入IP及端口"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
- <el-form-item label="部署位置">
|
|
|
|
- <el-input clearable v-model="formInline.filepath" :disabled="activeIndex == null" size="small" placeholder="请输入部署位置"></el-input>
|
|
|
|
- </el-form-item>
|
|
|
|
|
|
+ <el-form label-width="70px" :model="formInline">
|
|
|
|
+ <el-row :gutter="40">
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="机器名称">
|
|
|
|
+ <el-input clearable v-model="formInline.deployNodeName" :disabled="activeIndex == null" size="small" placeholder="请输入服务名称"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="6">
|
|
|
|
+ <el-form-item label="IP及端口">
|
|
|
|
+ <el-input clearable v-model="formInline.serviceURL" :disabled="activeIndex == null" size="small" placeholder="请输入IP及端口"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="12">
|
|
|
|
+ <el-form-item label="部署位置">
|
|
|
|
+ <el-input clearable v-model="formInline.filepath" :disabled="activeIndex == null" size="small" placeholder="请输入部署位置"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
</el-form>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -86,17 +94,31 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <Dialog :flag="rmFlag">
|
|
|
|
+ <div class="airportInfoDialog">
|
|
|
|
+ <div class="title del-title">删除</div>
|
|
|
|
+ <div class="content del-content">
|
|
|
|
+ <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ dataObj.deployNodeName }}</span>
|
|
|
|
+ ?
|
|
|
|
+ </div>
|
|
|
|
+ <div class="foot right Delfoot">
|
|
|
|
+ <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
|
|
|
|
+ <el-button size="medium" @click="rmFlag = false">取消</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </Dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import Table from './components/table.vue'
|
|
import Table from './components/table.vue'
|
|
|
|
+import Dialog from "@/layout/components/Dialog/index.vue"
|
|
import { Query, newData, modifyData, moveData, start, stop } from "@/api/webApi"
|
|
import { Query, newData, modifyData, moveData, start, stop } from "@/api/webApi"
|
|
import pf from '@/layout/mixin/publicFunc'
|
|
import pf from '@/layout/mixin/publicFunc'
|
|
import * as _ from 'lodash'
|
|
import * as _ from 'lodash'
|
|
export default {
|
|
export default {
|
|
name: 'NewService',
|
|
name: 'NewService',
|
|
- components: { Table },
|
|
|
|
|
|
+ components: { Table, Dialog },
|
|
mixins: [pf],
|
|
mixins: [pf],
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
@@ -130,7 +152,8 @@ export default {
|
|
loading: false,
|
|
loading: false,
|
|
dataId: 8,
|
|
dataId: 8,
|
|
msgContent: {},
|
|
msgContent: {},
|
|
- jqList: []
|
|
|
|
|
|
+ jqList: [],
|
|
|
|
+ rmFlag: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -214,10 +237,14 @@ export default {
|
|
},
|
|
},
|
|
//服务列表-新增
|
|
//服务列表-新增
|
|
handleAdd () {
|
|
handleAdd () {
|
|
|
|
+ const datas = this.arrs.filter(item => item.deployNodeName == '新建机器')
|
|
|
|
+ if (datas && datas.length) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
this.dataType = 'add'
|
|
this.dataType = 'add'
|
|
this.flag = false
|
|
this.flag = false
|
|
- this.dataObj.serviceName = '新建服务'
|
|
|
|
- this.arrs.push({ serviceName: '新建服务' })
|
|
|
|
|
|
+ this.dataObj.deployNodeName = '新建机器'
|
|
|
|
+ this.arrs.push({ deployNodeName: '新建机器' })
|
|
this.activeIndex = this.arrs.length - 1
|
|
this.activeIndex = this.arrs.length - 1
|
|
for (const key in this.formInline) {
|
|
for (const key in this.formInline) {
|
|
if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
@@ -300,69 +327,46 @@ export default {
|
|
this.$message.error('请先选中服务后再操作')
|
|
this.$message.error('请先选中服务后再操作')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- //服务列表-删除
|
|
|
|
- handleError () {
|
|
|
|
|
|
+ async tableRemove () {
|
|
if (this.dataObj.deployNodeID && this.dataType == 'edit') {
|
|
if (this.dataObj.deployNodeID && this.dataType == 'edit') {
|
|
- this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
|
|
|
|
- confirmButtonText: '确定',
|
|
|
|
- cancelButtonText: '取消',
|
|
|
|
- type: 'warning'
|
|
|
|
- }).then(async () => {
|
|
|
|
- const code = await this.getChangeList(this.queryId, this.dataObj, 3)
|
|
|
|
- if (code) {
|
|
|
|
- this.$message.success('操作成功')
|
|
|
|
- this.resetTable()
|
|
|
|
- this.getQuery(this.queryId)
|
|
|
|
- } else {
|
|
|
|
- this.$message.success('操作失败')
|
|
|
|
- }
|
|
|
|
- this.msgContent = {}
|
|
|
|
- this.activeIndex = null;
|
|
|
|
- this.dataObj = {};
|
|
|
|
- for (const key in this.formInline) {
|
|
|
|
- if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
|
- this.formInline[key] = null
|
|
|
|
- }
|
|
|
|
|
|
+ const code = await this.getChangeList(this.queryId, this.dataObj, 3)
|
|
|
|
+ if (code) {
|
|
|
|
+ this.$message.success('操作成功')
|
|
|
|
+ this.resetTable()
|
|
|
|
+ this.getQuery(this.queryId)
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.success('操作失败')
|
|
|
|
+ }
|
|
|
|
+ this.msgContent = {}
|
|
|
|
+ this.activeIndex = null;
|
|
|
|
+ this.dataObj = {};
|
|
|
|
+ for (const key in this.formInline) {
|
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
|
+ this.formInline[key] = null
|
|
}
|
|
}
|
|
- this.flag = true
|
|
|
|
- }).catch(() => {
|
|
|
|
- this.$message({
|
|
|
|
- type: 'info',
|
|
|
|
- message: '已取消删除'
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ }
|
|
|
|
+ this.flag = true
|
|
} else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
|
|
} else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].deployNodeID) {
|
|
- this.$confirm('此操作将删除该服务, 是否继续?', '提示', {
|
|
|
|
- confirmButtonText: '确定',
|
|
|
|
- cancelButtonText: '取消',
|
|
|
|
- type: 'warning'
|
|
|
|
- }).then(async () => {
|
|
|
|
- const code = await this.getChangeList(this.queryId, this.arrs[this.arrs.length - 1], 3)
|
|
|
|
- if (code) {
|
|
|
|
- this.$message.success('操作成功')
|
|
|
|
- this.resetTable()
|
|
|
|
- this.getQuery(this.queryId)
|
|
|
|
- } else {
|
|
|
|
- this.$message.success('操作失败')
|
|
|
|
- }
|
|
|
|
- this.msgContent = {
|
|
|
|
- service_id: ''
|
|
|
|
- }
|
|
|
|
- this.activeIndex = null;
|
|
|
|
- this.dataObj = {};
|
|
|
|
- for (const key in this.formInline) {
|
|
|
|
- if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
|
- this.formInline[key] = null
|
|
|
|
- }
|
|
|
|
|
|
+ const code = await this.getChangeList(this.queryId, this.arrs[this.arrs.length - 1], 3)
|
|
|
|
+ if (code) {
|
|
|
|
+ this.$message.success('操作成功')
|
|
|
|
+ this.resetTable()
|
|
|
|
+ this.getQuery(this.queryId)
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.success('操作失败')
|
|
|
|
+ }
|
|
|
|
+ this.msgContent = {
|
|
|
|
+ service_id: ''
|
|
|
|
+ }
|
|
|
|
+ this.activeIndex = null;
|
|
|
|
+ this.dataObj = {};
|
|
|
|
+ for (const key in this.formInline) {
|
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
|
+ this.formInline[key] = null
|
|
}
|
|
}
|
|
- this.flag = true
|
|
|
|
- this.dataType = 'edit'
|
|
|
|
- }).catch(() => {
|
|
|
|
- this.$message({
|
|
|
|
- type: 'info',
|
|
|
|
- message: '已取消删除'
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
|
|
+ }
|
|
|
|
+ this.flag = true
|
|
|
|
+ this.dataType = 'edit'
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
this.arrs.splice(this.activeIndex, 1)
|
|
this.arrs.splice(this.activeIndex, 1)
|
|
@@ -370,6 +374,11 @@ export default {
|
|
this.flag = true
|
|
this.flag = true
|
|
this.dataObj = {}
|
|
this.dataObj = {}
|
|
}
|
|
}
|
|
|
|
+ this.rmFlag = false
|
|
|
|
+ },
|
|
|
|
+ //服务列表-删除
|
|
|
|
+ handleError () {
|
|
|
|
+ this.rmFlag = true
|
|
},
|
|
},
|
|
//服务列表-增/删/改
|
|
//服务列表-增/删/改
|
|
async generalDataReception (event, data) {
|
|
async generalDataReception (event, data) {
|