353 lines
11 KiB
Vue
353 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<el-card class="wrapper">
|
|
<el-tabs v-model="searchData.type" @tab-click="modifyConfigs">
|
|
<el-tab-pane label="公共镜像" name="PUBLIC"></el-tab-pane>
|
|
<el-tab-pane label="私有镜像" name="PRIVATE"></el-tab-pane>
|
|
</el-tabs>
|
|
<cb-advance-table :title="imageTypeData[searchData.type] + '镜像列表'" :search-configs="searchConfigs" :data="imageData" :params="params" :columns="columns" :get-list="getData" :total="total" :loading="loading" @selection-change="selectionChange">
|
|
<template v-slot:action>
|
|
<el-button type="primary" @click="handleCreate" v-if="searchData.type == 'PRIVATE'">
|
|
新增
|
|
</el-button>
|
|
<el-button type="ghost" @click="handleDelete" :disabled="selectList.length == 0" v-if="searchData.type == 'PRIVATE'" icon="el-icon-delete"> 删除 </el-button>
|
|
</template>
|
|
<template #name="val, record">
|
|
<span class="detail-href" @click="getDetail(record.id)">{{ val }}</span>
|
|
</template>
|
|
<template #status="status">
|
|
<cb-status-icon :type="status | imageColor">{{ status | image }}</cb-status-icon>
|
|
</template>
|
|
</cb-advance-table>
|
|
</el-card>
|
|
<cb-detail-right :title="detail.name" v-if="detailFlag" :data="detail" @goBack="goBack">
|
|
<template v-slot:item_container>
|
|
<cb-detail-item label="镜像名称">{{ detail.name }}</cb-detail-item>
|
|
<cb-detail-item label="镜像状态">{{ detail.status | image }}</cb-detail-item>
|
|
<cb-detail-item label="云平台">{{ detail.vendorName }}</cb-detail-item>
|
|
<cb-detail-item label="系统类别">{{ detail.osCategory }}</cb-detail-item>
|
|
<cb-detail-item label="系统版本">{{ detail.osVersion }}</cb-detail-item>
|
|
<cb-detail-item label="最小磁盘">{{ detail.minDisk + 'GB' }}</cb-detail-item>
|
|
<cb-detail-item label="所属租户">{{ detail.tenantName }}</cb-detail-item>
|
|
</template>
|
|
</cb-detail-right>
|
|
<el-dialog title="新增镜像" :visible.sync="addDialogVisible" width="35%" v-if="addDialogVisible">
|
|
<el-row>
|
|
<cb-form ref="addData" :model="addData">
|
|
<el-col :span="24">
|
|
<cb-form-item label="镜像名称" prop="name" :rules="[required,noChinese]" required-message="请输入名称">
|
|
<el-input v-model="addData.name"></el-input>
|
|
</cb-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<cb-form-item label="云主机列表" prop="id" :rules="[required]" required-message="请选择云主机">
|
|
<el-select v-model="addData.id">
|
|
<el-option :label="item.name" :value="item.id" v-for="item in vmList" :key="item.id"></el-option>
|
|
</el-select>
|
|
</cb-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<cb-form-item label="镜像描述" prop="remark">
|
|
<el-input type="textarea" v-model="addData.remark"></el-input>
|
|
</cb-form-item>
|
|
</el-col>
|
|
</cb-form>
|
|
</el-row>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="ghost" @click="addDialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="addOk()" :loading="loading">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import validate from '@/validate'
|
|
import { image, imageColor } from 'filters'
|
|
import { getRegion, getImage, detailImage, createImage, removeImages, getVm } from 'services/platform/index'
|
|
const detailSetting = {
|
|
type: 'image',
|
|
columns: [
|
|
[
|
|
{ name: '镜像名称', value: 'name' },
|
|
{ name: '镜像状态', value: 'status', filter: image, icon: imageColor },
|
|
{ name: '云平台', value: 'vendorName' }
|
|
],
|
|
[
|
|
{ name: '系统类别', value: 'osCategory' },
|
|
{ name: '系统版本', value: 'osVersion' },
|
|
{ name: '最小磁盘', value: 'minDisk', unit: 'GB' }
|
|
],
|
|
[{ name: '所属租户', value: 'tenantName' }]
|
|
]
|
|
}
|
|
export default {
|
|
props: {
|
|
platformObject: {
|
|
type: Object,
|
|
default: function() {
|
|
return {
|
|
vendorId: -1,
|
|
operate: -1
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
required: validate.required,
|
|
noChinese: validate.noChinese,
|
|
detailFlag: false,
|
|
detailSetting,
|
|
detail: {},
|
|
addDialogVisible: false,
|
|
params: {
|
|
page: 1,
|
|
rows: 10
|
|
},
|
|
searchData: {
|
|
name: '',
|
|
regionId: '',
|
|
type: 'PUBLIC'
|
|
},
|
|
imageTypeData: {
|
|
PUBLIC: '公有',
|
|
PRIVATE: '私有'
|
|
},
|
|
regionList: [],
|
|
vmList: [],
|
|
imageData: [],
|
|
total: 0,
|
|
addData: {},
|
|
idList: [],
|
|
selectList: [],
|
|
loading: false,
|
|
searchConfigs: [
|
|
{ type: 'Input', value: 'name', label: '名称' },
|
|
{ type: 'Select', data: [], value: 'regionId', label: '所属地域', props: { value: 'regionId' } },
|
|
{ type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId },
|
|
{ type: 'Const', value: 'imageType', initValue: 'PUBLIC' }
|
|
],
|
|
columns: [
|
|
{
|
|
type: 'selection'
|
|
},
|
|
{
|
|
label: '镜像名称',
|
|
prop: 'name',
|
|
scopedSlots: { customRender: 'name' }
|
|
},
|
|
{
|
|
label: '状态',
|
|
prop: 'status',
|
|
scopedSlots: { customRender: 'status' }
|
|
},
|
|
{
|
|
label: '操作系统',
|
|
prop: 'osCategory'
|
|
},
|
|
{
|
|
label: '系统版本',
|
|
prop: 'osVersion'
|
|
},
|
|
{
|
|
label: '最小磁盘(GB)',
|
|
prop: 'minDisk'
|
|
},
|
|
{
|
|
label: '所属云平台',
|
|
prop: 'vendorName'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
selectionChange(val) {
|
|
this.selectList = val
|
|
},
|
|
handleDelete() {
|
|
this.refreshId()
|
|
const list = this.idList
|
|
if (list.length == 0) return this.$message.error('请选择镜像')
|
|
this.$confirm('此操作将删除所选镜像, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
removeImages(list).then(data => {
|
|
if (data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: data.message
|
|
})
|
|
this.getData()
|
|
this.selectList = []
|
|
}
|
|
})
|
|
})
|
|
},
|
|
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.imageData.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
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
getDetail(id) {
|
|
detailImage(id).then(data => {
|
|
if (data.success) {
|
|
this.detail = data.data
|
|
this.detailFlag = true
|
|
}
|
|
})
|
|
},
|
|
goBack() {
|
|
this.detailFlag = false
|
|
},
|
|
getVmList() {
|
|
getVm({
|
|
simple: true,
|
|
params: JSON.stringify([{ param: { vendorId: this.platformObject.vendorId }, sign: 'EQ' }])
|
|
}).then(data => {
|
|
if (data.success) {
|
|
this.vmList = data.data.rows
|
|
}
|
|
})
|
|
},
|
|
handleCreate() {
|
|
this.addDialogVisible = true
|
|
this.addData = {}
|
|
this.getVmList()
|
|
},
|
|
addOk() {
|
|
this.$refs.addData.validate(valid => {
|
|
if (valid) {
|
|
this.addData.vendorId = this.platformObject.vendorId
|
|
this.loading = true
|
|
createImage(this.addData).then(data => {
|
|
if (data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: data.message
|
|
})
|
|
this.getData()
|
|
this.addDialogVisible = false
|
|
}
|
|
this.loading = false
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
getData() {
|
|
this.loading = true
|
|
getImage(this.params).then(data => {
|
|
if (data.success) {
|
|
this.imageData = data.data.rows
|
|
this.selectList = []
|
|
this.loading = false
|
|
this.imageData.forEach(data => {
|
|
if ((data.projectVisibility && data.projectVisibility != 'GLOBAL_PROJECT') || data.tenantId || data.tenantIds || data.tenantName) {
|
|
data.disabled = true
|
|
}
|
|
})
|
|
this.total = data.data.total
|
|
}
|
|
})
|
|
},
|
|
handleModify(id) {
|
|
detailImage(id).then(data => {
|
|
if (data.success) {
|
|
this.addDialogVisible = true
|
|
this.addData = data.data
|
|
}
|
|
})
|
|
},
|
|
// 获取域
|
|
getRegion() {
|
|
getRegion({ vendorId: this.platformObject.vendorId }).then(data => {
|
|
if (data.success) {
|
|
this.regionList = data.data
|
|
console.log(this)
|
|
this.searchConfigs[1].data = data.data
|
|
}
|
|
})
|
|
},
|
|
modifyConfigs () {
|
|
this.searchConfigs = [
|
|
{ type: 'Input', value: 'name', label: '名称' },
|
|
{ type: 'Select', data: this.regionList, value: 'regionId', label: '所属地域', props: { value: 'regionId' } },
|
|
{ type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId },
|
|
{ type: 'Const', value: 'imageType', initValue: this.searchData.type }
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.getRegion()
|
|
},
|
|
watch: {
|
|
platformObject: {
|
|
handler(newVal, oldVal) {
|
|
this.searchConfigs = [
|
|
{ type: 'Input', value: 'name', label: '名称' },
|
|
{ type: 'Select', data: [], value: 'regionId', label: '所属地域', props: { value: 'regionId' } },
|
|
{ type: 'Const', value: 'vendorId', initValue: newVal.vendorId },
|
|
{ type: 'Const', value: 'imageType', initValue: this.searchData.type }
|
|
]
|
|
this.getRegion()
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.no-searchBox {
|
|
padding: 10px;
|
|
}
|
|
.table-container {
|
|
border: none !important;
|
|
}
|
|
</style>
|