374 lines
10 KiB
Vue
374 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<cb-detail-right v-if="detailFlag" :data="detail" @goBack="goBack" :title="detail.name">
|
||
|
|
<template v-slot:item_container>
|
||
|
|
<cb-detail-item label="规格名称">{{ detail.name }}</cb-detail-item>
|
||
|
|
<cb-detail-item label="规格UUID">{{ detail.flavorUuid }}</cb-detail-item>
|
||
|
|
<cb-detail-item label="所属平台">{{ detail.vendorName }}</cb-detail-item>
|
||
|
|
<cb-detail-item label="VCPU数量">{{ detail.cpu + 'C' }}</cb-detail-item>
|
||
|
|
<cb-detail-item label="内存大小">{{ detail.memory + 'GB' }}</cb-detail-item>
|
||
|
|
</template>
|
||
|
|
</cb-detail-right>
|
||
|
|
|
||
|
|
<el-dialog :title="modifyName" :visible.sync="sizeFlag" width="40%" :before-close="handleClose">
|
||
|
|
<div>
|
||
|
|
<cb-form ref="sizeData" :model="sizeData" :status-icon="true" label-width="90px">
|
||
|
|
<cb-form-item label="规格名称" prop="name" :rules="[required]" required-message="请输入名称">
|
||
|
|
<el-input v-model="sizeData.name"></el-input>
|
||
|
|
</cb-form-item>
|
||
|
|
<cb-form-item label="虚拟内核" prop="cpu" :rules="[required]">
|
||
|
|
<el-input type="number" v-model.number="sizeData.cpu"></el-input>
|
||
|
|
</cb-form-item>
|
||
|
|
<cb-form-item label="内存(GB)" prop="memory" :rules="[required]">
|
||
|
|
<el-input type="number" v-model.number="sizeData.memory"></el-input>
|
||
|
|
</cb-form-item>
|
||
|
|
<cb-form-item label="磁盘(GB)" prop="disk" :rules="[required]">
|
||
|
|
<el-input type="number" v-model.number="sizeData.disk"></el-input>
|
||
|
|
</cb-form-item>
|
||
|
|
</cb-form>
|
||
|
|
</div>
|
||
|
|
<div slot="footer" class="dialog-footer">
|
||
|
|
<el-button type="ghost" @click="editCancel()">取 消</el-button>
|
||
|
|
<el-button type="primary" @click="editOk('sizeData')">确 定</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
<el-card class="wrapper" v-if="!detailFlag">
|
||
|
|
<cb-advance-table :card-border="false" title="规格列表" :search-configs="searchConfigs" :data="specificationData" :params="params" :columns="columns" :get-list="getData" :total="total" :loading="loading">
|
||
|
|
<template #name="val, record">
|
||
|
|
<span class="detail-href" @click="getDetail(record.id)">{{ val }}</span>
|
||
|
|
</template>
|
||
|
|
</cb-advance-table>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import validate from '@/validate'
|
||
|
|
import { getRegion } from 'services/platform/index'
|
||
|
|
import { getFlavor, removeFlavor, removeFlavors, detailFlavor, createFlavor, modifyFlavor } from 'views/resource/ctstack/services/flavors'
|
||
|
|
const detailSetting = {
|
||
|
|
type: 'spec',
|
||
|
|
columns: [
|
||
|
|
[
|
||
|
|
{ name: '规格名称', value: 'name' },
|
||
|
|
{ name: '规格UUID', value: 'flavorUuid' },
|
||
|
|
{ name: '所属平台', value: 'vendorName' }
|
||
|
|
],
|
||
|
|
[
|
||
|
|
{ name: 'VCPU数量', value: 'cpu', unit: 'C' },
|
||
|
|
{ name: '内存大小', value: 'memory', unit: 'GB' }
|
||
|
|
]
|
||
|
|
]
|
||
|
|
}
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
platformObject: {
|
||
|
|
type: Object,
|
||
|
|
default: function() {
|
||
|
|
return {
|
||
|
|
vendorId: -1,
|
||
|
|
operate: -1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
required: validate.required,
|
||
|
|
detailFlag: false,
|
||
|
|
detailSetting,
|
||
|
|
detail: {},
|
||
|
|
sizeFlag: false,
|
||
|
|
params: {
|
||
|
|
page: 1,
|
||
|
|
rows: 10
|
||
|
|
},
|
||
|
|
searchData: {
|
||
|
|
name: '',
|
||
|
|
regionId: ''
|
||
|
|
},
|
||
|
|
regionList: [],
|
||
|
|
specificationData: [],
|
||
|
|
total: 0,
|
||
|
|
modifyName: '新增规格',
|
||
|
|
sizeData: {
|
||
|
|
name: '',
|
||
|
|
cpu: '',
|
||
|
|
memory: '',
|
||
|
|
disk: ''
|
||
|
|
},
|
||
|
|
idList: [],
|
||
|
|
selectList: [],
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
label: '规格名称',
|
||
|
|
prop: 'name',
|
||
|
|
scopedSlots: { customRender: 'name' }
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'CPU(核)',
|
||
|
|
prop: 'cpu'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '内存(GB)',
|
||
|
|
prop: 'memory'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '所属平台',
|
||
|
|
prop: 'vendorName'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '所属域',
|
||
|
|
prop: 'regionName'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
searchConfigs: [
|
||
|
|
{ label: '名称', value: 'name', type: 'Input' },
|
||
|
|
{
|
||
|
|
value: 'regionId',
|
||
|
|
type: 'Select',
|
||
|
|
data: [],
|
||
|
|
label: '所属地域',
|
||
|
|
props: { value: 'regionId' }
|
||
|
|
},
|
||
|
|
{ type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId }
|
||
|
|
],
|
||
|
|
loading: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
refreshId() {
|
||
|
|
this.idList = []
|
||
|
|
this.selectList.forEach(item => {
|
||
|
|
this.idList.push(item.id)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 单选
|
||
|
|
handleSelectItem(selection, row) {
|
||
|
|
this.refreshId()
|
||
|
|
if (this.idList.indexOf(row.id) > -1) {
|
||
|
|
for (let j = 0; j < this.selectList.length; j++) {
|
||
|
|
const item = this.selectList[j]
|
||
|
|
if (item.id == row.id) {
|
||
|
|
this.selectList.splice(j, 1)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.selectList.push(row)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 全选
|
||
|
|
handleSelectAll(selection) {
|
||
|
|
this.refreshId()
|
||
|
|
if (selection.length) {
|
||
|
|
// 全选情况下
|
||
|
|
selection.forEach(item => {
|
||
|
|
if (this.idList.indexOf(item.id) == -1) {
|
||
|
|
this.selectList.push(item)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
// 全不选情况下
|
||
|
|
this.specificationData.forEach(item => {
|
||
|
|
if (this.idList.indexOf(item.id) > -1) {
|
||
|
|
for (let j = 0; j < this.selectList.length; j++) {
|
||
|
|
const row = this.selectList[j]
|
||
|
|
if (item.id == row.id) {
|
||
|
|
this.selectList.splice(j, 1)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
goBack() {
|
||
|
|
this.detailFlag = false
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
getDetail(id) {
|
||
|
|
detailFlavor(id).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.detail = data.data
|
||
|
|
this.detailFlag = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
getData() {
|
||
|
|
this.refreshId()
|
||
|
|
this.loading = true
|
||
|
|
getFlavor(this.params).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.specificationData = data.data.rows
|
||
|
|
this.total = data.data.total
|
||
|
|
this.selectList = []
|
||
|
|
this.loading = false
|
||
|
|
this.refreshId()
|
||
|
|
this.specificationData.forEach(item => {
|
||
|
|
const self = this
|
||
|
|
setTimeout(function() {
|
||
|
|
if (self.idList.indexOf(item.id) > -1) self.$refs.multipleTable.$refs.basicTable.toggleRowSelection(item, true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleSizeChange(val) {
|
||
|
|
this.params.rows = val
|
||
|
|
this.getData()
|
||
|
|
},
|
||
|
|
editSize(id) {
|
||
|
|
this.sizeFlag = true
|
||
|
|
this.modifyName = '新增规格'
|
||
|
|
if (id) {
|
||
|
|
detailFlavor(id).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.sizeData = {
|
||
|
|
name: data.data.name,
|
||
|
|
cpu: data.data.cpu,
|
||
|
|
memory: data.data.memory,
|
||
|
|
disk: data.data.disk,
|
||
|
|
id: id
|
||
|
|
}
|
||
|
|
this.modifyName = '编辑规格'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
editOk(formName) {
|
||
|
|
this.$refs[formName].validate(valid => {
|
||
|
|
if (valid) {
|
||
|
|
this.sizeData.vendorId = this.platformObject.vendorId
|
||
|
|
if (this.modifyName == '新增规格') {
|
||
|
|
createFlavor(this.sizeData).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: data.message
|
||
|
|
})
|
||
|
|
this.editCancel()
|
||
|
|
this.getData()
|
||
|
|
this.$emit('goBack')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
modifyFlavor(this.sizeData).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: data.message
|
||
|
|
})
|
||
|
|
this.editCancel()
|
||
|
|
this.getData()
|
||
|
|
this.$emit('goBack')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleClose(done) {
|
||
|
|
this.editCancel()
|
||
|
|
},
|
||
|
|
editCancel() {
|
||
|
|
this.$refs.sizeData.resetFields()
|
||
|
|
this.sizeFlag = false
|
||
|
|
},
|
||
|
|
dropdownClick(command) {
|
||
|
|
switch (command.index) {
|
||
|
|
case 1:
|
||
|
|
this.editSize(command.id)
|
||
|
|
break
|
||
|
|
case 2:
|
||
|
|
this.remove(command.id)
|
||
|
|
break
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleDelete() {
|
||
|
|
this.refreshId()
|
||
|
|
const list = this.idList
|
||
|
|
this.$confirm('此操作将删除所选规格, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
removeFlavors(list).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: data.message
|
||
|
|
})
|
||
|
|
this.getData()
|
||
|
|
this.selectList = []
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
remove(id) {
|
||
|
|
this.$confirm('此操作将永久删除该规格, 是否继续?', '提示', {
|
||
|
|
confirmButtonText: '确定',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning'
|
||
|
|
}).then(() => {
|
||
|
|
removeFlavor(id)
|
||
|
|
.catch(() => {
|
||
|
|
this.$message({
|
||
|
|
type: 'info',
|
||
|
|
message: '已取消删除'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.$message({
|
||
|
|
type: 'success',
|
||
|
|
message: data.message
|
||
|
|
})
|
||
|
|
this.getData()
|
||
|
|
this.$emit('goBack')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取域
|
||
|
|
getRegion() {
|
||
|
|
getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
|
||
|
|
if (data.success) {
|
||
|
|
this.regionList = data.data
|
||
|
|
this.searchConfigs[1].data = data.data
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getRegion()
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
platformObject: {
|
||
|
|
handler(newVal, oldVal) {
|
||
|
|
this.searchConfigs = [
|
||
|
|
{ label: '名称', value: 'name', type: 'Input' },
|
||
|
|
{
|
||
|
|
value: 'regionId',
|
||
|
|
type: 'Select',
|
||
|
|
data: [],
|
||
|
|
label: '所属地域'
|
||
|
|
},
|
||
|
|
{ type: 'Const', value: 'vendorId', initValue: newVal.vendorId }
|
||
|
|
]
|
||
|
|
this.getRegion()
|
||
|
|
},
|
||
|
|
deep: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.no-searchBox {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
</style>
|