cmc-web/webs/cmp-web/src/views/resource/ctstack/page/snapshot/index.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>