290 lines
7.9 KiB
Vue
290 lines
7.9 KiB
Vue
<template>
|
|
<div>
|
|
<cb-detail-right v-if="detailFlag" :title="detail.name" @goBack="goBack">
|
|
<template v-slot:item_container>
|
|
<cb-detail-item label="快照名称">{{ detail.name }}</cb-detail-item>
|
|
<cb-detail-item label="快照UUID">{{ detail.snapshotUuid }}</cb-detail-item>
|
|
<cb-detail-item label="快照状态">
|
|
<cb-status-icon :type="detail.status | snapshotColor">{{ snapshotFilter(detail.status) }}</cb-status-icon>
|
|
</cb-detail-item>
|
|
<cb-detail-item label="云硬盘">{{ detail.volumeName }}</cb-detail-item>
|
|
<cb-detail-item label="容量(GB)">{{ detail.size }}</cb-detail-item>
|
|
<cb-detail-item label="创建时间">{{ detail.createTime }}</cb-detail-item>
|
|
<!-- <cb-detail-item label="所属租户">{{ detail.tenantName }}</cb-detail-item> -->
|
|
<cb-detail-item label="描述">{{ detail.remark }}</cb-detail-item>
|
|
</template>
|
|
</cb-detail-right>
|
|
<div>
|
|
<cb-advance-table title="" :search-configs="searchConfigs" :data="snapshotList" :params="params" :columns="columns" :get-list="getData" :total="total" :loading="loading" ref="multipleTable" @select="handleSelectItem" @select-all="handleSelectAll">
|
|
<template v-slot:action>
|
|
<el-button type="primary" @click="add"> 新增 </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 | snapshotColor">{{ snapshotFilter(status) }}</cb-status-icon>
|
|
</template>
|
|
<template #operate="val, record">
|
|
<el-button icon="el-icon-delete" :disabled="record.disabled" type="text" @click="dropdownClick({ id: record.id })" class="m-l-sm"> 删除 </el-button>
|
|
</template>
|
|
</cb-advance-table>
|
|
</div>
|
|
<add :add-data="addData" :get-data="get" v-if="addData.dialog" :vendor-id="platformObject.vendorId"></add>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import add from './add.vue'
|
|
import { getSnapshot, removeSnapshot, removeSnapshots, detailSnapshot, createSnapshot } from 'views/resource/ctstack/services/snapshot'
|
|
|
|
const columns = [
|
|
{
|
|
label: '快照名称',
|
|
prop: 'name',
|
|
scopedSlots: { customRender: 'name' }
|
|
},
|
|
{
|
|
label: '状态',
|
|
prop: 'status',
|
|
scopedSlots: { customRender: 'status' }
|
|
},
|
|
{
|
|
label: '云硬盘',
|
|
prop: 'volumeName'
|
|
},
|
|
{
|
|
label: '容量(GB)',
|
|
prop: 'size'
|
|
},
|
|
// {
|
|
// label: '所属租户',
|
|
// prop: 'tenantName'
|
|
// },
|
|
{
|
|
label: '创建时间',
|
|
prop: 'createTime'
|
|
},
|
|
{
|
|
label: '操作',
|
|
width: '220px',
|
|
showOverflowTooltip: false,
|
|
scopedSlots: { customRender: 'operate' },
|
|
disabled: true
|
|
}
|
|
]
|
|
export default {
|
|
components: {
|
|
add
|
|
},
|
|
props: {
|
|
platformObject: {
|
|
type: Object,
|
|
default: function () {
|
|
return {
|
|
vendorId: -1,
|
|
operate: -1
|
|
}
|
|
}
|
|
},
|
|
tenantList: {
|
|
type: Array
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
columns,
|
|
loading: false,
|
|
detailFlag: false,
|
|
detail: {},
|
|
snapshotFlag: false,
|
|
params: {
|
|
page: 1,
|
|
rows: 10
|
|
},
|
|
searchData: {
|
|
name: ''
|
|
},
|
|
snapshotList: [],
|
|
// addData: {
|
|
// name: '',
|
|
// remark: '',
|
|
// volumeId: '',
|
|
// id: this.platformObject.vendorId
|
|
// },
|
|
addData: {
|
|
dialog: false,
|
|
data: {}
|
|
},
|
|
total: 0,
|
|
volumeData: [],
|
|
idList: [],
|
|
selectList: [],
|
|
searchConfigs: [
|
|
{ label: '名称', value: 'name', type: 'Input' },
|
|
{ type: 'Const', value: 'vendorId', initValue: this.platformObject.vendorId }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
snapshotFilter(value) {
|
|
const obj = {
|
|
accomplished: '正常',
|
|
failed: '创建失败',
|
|
progressing: '创建中',
|
|
deleting: '删除中',
|
|
restoring: '重置中',
|
|
available: '可用'
|
|
}
|
|
return obj[value] || '未知'
|
|
},
|
|
selectable(row, index) {
|
|
if (row.projectVisibility && row.projectVisibility != 'GLOBAL_PROJECT') {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
},
|
|
getDetail(id) {
|
|
detailSnapshot(id).then(data => {
|
|
if (data.success) {
|
|
this.detail = data.data
|
|
this.detailFlag = true
|
|
}
|
|
})
|
|
},
|
|
goBack() {
|
|
this.detailFlag = false
|
|
},
|
|
add() {
|
|
// this.snapshotFlag = true
|
|
this.addData = {
|
|
dialog: true,
|
|
data: {
|
|
vendorId: this.platformObject.vendorId
|
|
}
|
|
}
|
|
},
|
|
handleDelete() {
|
|
this.refreshId()
|
|
this.$confirm('此操作将删除所选快照, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
removeSnapshots(this.idList).then(data => {
|
|
if (data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: data.message
|
|
})
|
|
this.getData()
|
|
this.selectList = []
|
|
}
|
|
})
|
|
})
|
|
},
|
|
dropdownClick(command) {
|
|
this.$confirm('此操作将永久删除该快照, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
removeSnapshot(command.id).then(data => {
|
|
if (data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: data.message
|
|
})
|
|
this.getData()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
getData() {
|
|
this.loading = true
|
|
getSnapshot(this.params).then(data => {
|
|
this.loading = false
|
|
if (data.success) {
|
|
this.snapshotList = data.data.rows
|
|
this.snapshotList.forEach(data => {
|
|
if ((data.projectVisibility && data.projectVisibility != 'GLOBAL_PROJECT') || data.tenantId || data.tenantIds || data.tenantName) {
|
|
data.disabled = true
|
|
}
|
|
const self = this
|
|
setTimeout(function () {
|
|
if (self.idList.indexOf(data.id) > -1) self.$refs.multipleTable.$refs.basicTable.toggleRowSelection(data, true)
|
|
})
|
|
if (data.status == 'AVAILABLE') {
|
|
data.status1 = '可用'
|
|
data.statusColor = 'normal'
|
|
} else if (data.status == 'BUILDING') {
|
|
data.status1 = '创建中'
|
|
data.statusColor = 'warning'
|
|
data.isException = true
|
|
} else if (data.status == 'DELETING') {
|
|
data.status1 = '删除中'
|
|
data.statusColor = 'warning'
|
|
} else {
|
|
data.status1 = '错误'
|
|
data.statusColor = 'danger'
|
|
}
|
|
})
|
|
this.total = data.data.total
|
|
}
|
|
})
|
|
},
|
|
handleClose(done) {
|
|
done()
|
|
},
|
|
handleSizeChange(val) {
|
|
this.params.rows = val
|
|
this.getData()
|
|
},
|
|
addOk(formName) {
|
|
const data = this.$refs.snapshotItem.getPostData()
|
|
if (!data) return
|
|
data.vendorId = this.platformObject.vendorId
|
|
createSnapshot(data).then(data => {
|
|
if (data.success) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: data.message
|
|
})
|
|
this.snapshotFlag = false
|
|
this.addData = {}
|
|
this.getData()
|
|
}
|
|
})
|
|
},
|
|
cancel(formName) {
|
|
this.snapshotFlag = false
|
|
this.$refs[[formName]].resetFields()
|
|
}
|
|
},
|
|
watch: {
|
|
platformObject: {
|
|
handler(newVal, oldVal) {
|
|
this.searchConfigs = [
|
|
{ type: 'Input', label: '名称', value: 'name' },
|
|
{ type: 'Const', value: 'vendorId', initValue: newVal.vendorId }
|
|
]
|
|
},
|
|
deep: true
|
|
},
|
|
tenantList: {
|
|
handler(newVal, oldVal) {
|
|
this.searchConfigs[1].data = newVal
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.no-searchBox {
|
|
padding: 10px;
|
|
}
|
|
</style>
|