feat：NEZ-2154 删除 cofirm 页面重构
This commit is contained in:
zhangyu
@@ -6,6 +6,78 @@
|
||||
<div v-if="this.type === 'link'" :id="id" :class="{'nz-btn-disabled' : deleteObjs.length<1}" @click="batchDelete" :title="$t('overall.delete')">
|
||||
<span><i class="nz-icon nz-icon-delete" ></i>{{title}}</span>
|
||||
</div>
|
||||
<el-dialog
|
||||
ref="batchDeleteDialog"
|
||||
id="batch-delete-dialog"
|
||||
class="batch-delete-dialog"
|
||||
title="Hint"
|
||||
v-if="dialogVisible"
|
||||
:visible.sync="dialogVisible"
|
||||
@close='handleClose'
|
||||
width="460px"
|
||||
:modal-append-to-body="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<!-- -->
|
||||
<div class="dialog-header" style="vertical-align:top;" v-if="prepare">
|
||||
<i class="nz-icon nz-icon-jinggao" style="color:#ff0000;"></i>
|
||||
<span>Are you sure to delete these {{ this.deleteObjs.length }} Pleaces data?</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="dialog-header" style="vertical-align:top;" v-if="process">
|
||||
<i class="nz-icon nz-icon-import-failed1" style="color:#ff000078;"></i>
|
||||
<span>These Assets cannot be deleted.If you want to continue to delete,please check the "Force delete" action.</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="dialog-header" style="vertical-align:top;" v-if="finish">
|
||||
<i class="nz-icon nz-icon-import-success1"></i>
|
||||
<span>These Assets delete complete.</span>
|
||||
</div>
|
||||
<div class="batch-delete-tree">
|
||||
<div class="tree-header tree-body-item">
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange" v-if="!finish"></el-checkbox>
|
||||
<div class="batch-delete-item-id" v-if="idShow">Id</div>
|
||||
<div class="batch-delete-item-name">{{$t('overall.name')}}</div>
|
||||
</div>
|
||||
<el-checkbox-group v-model="idStr" @change="checkedChange">
|
||||
<div class="tree-body">
|
||||
<div v-for="(item,index) in deleteData" :key = 'index' class="tree-body-item">
|
||||
<el-checkbox :key="item.id" :label="item.id" v-if="!finish"></el-checkbox>
|
||||
<div class="batch-delete-item-id" v-if="idShow">{{item.id}}</div>
|
||||
<div class="batch-delete-item-name" @click="showChild(item)">
|
||||
<i class="nz-icon nz-icon-caret-right" :class="item.showChildren ? 'rotate90': '' " v-if="item.relates" />
|
||||
<i :class="selectIcon(item.type)"/>
|
||||
<span class="text-ellipsis batch-delete-item-text" :title="item.name">{{item.name}}</span>
|
||||
<el-collapse-transition>
|
||||
<div v-show="item.showChildren">
|
||||
<div v-for="(relate,i) in item.relates" :key = 'i' class="tree-body-item tree-body-children" @click="showChild(relate)">
|
||||
<i class="nz-icon nz-icon-caret-right" :class="relate.showChildren ? 'rotate90': '' " v-if="relate.relates" />
|
||||
<i :class="selectIcon(relate.type)"/>
|
||||
<span class="text-ellipsis batch-delete-item-text" :title="relate.name">{{relate.name}}</span>
|
||||
<div v-for="(cildren,j) in relate.relates" :key = 'j' class="tree-body-item tree-body-children" v-if="relate.showChildren">
|
||||
<i :class="selectIcon(cildren.type)"/>
|
||||
<span class="text-ellipsis batch-delete-item-text" :title="cildren.name">{{cildren.name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<!-- 底部按钮 -->
|
||||
<span slot="footer" class="dialog-footer right-box__footer batch-delete-footer" v-if="!finish">
|
||||
<div v-if="forceDeleteShow">
|
||||
<el-checkbox v-model="forceDelete" text-color="black" name="type" :true-label="1" :false-label="0"></el-checkbox>
|
||||
<span class="checkTitle">Force delete</span>
|
||||
</div>
|
||||
<div>
|
||||
<button id="batch-delete-cancel" class="footer__btn footer__btn--light" style="margin-top: 8px;" type="button" @click="dialogVisible = false">{{$t('tip.no')}}</button>
|
||||
<button id="batch-delete-next" class="footer__btn" type="button" @click="batchDeleteYes">{{$t('tip.yes')}}</button>
|
||||
</div>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -13,10 +85,30 @@
|
||||
import bus from '@/libs/bus'
|
||||
export default {
|
||||
name: 'deleteButton',
|
||||
data () {
|
||||
return {
|
||||
prepare: true,
|
||||
process: false,
|
||||
finish: false,
|
||||
dialogVisible: false,
|
||||
idShow: true,
|
||||
idStr: [],
|
||||
deleteData: [],
|
||||
forceDelete: 0,
|
||||
batchDeleteObjs: [],
|
||||
checkAll: false,
|
||||
isIndeterminate: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
forceDeleteShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
filterFunction: Function,
|
||||
deleteObjs: Array,
|
||||
api: String,
|
||||
from: String,
|
||||
clickFunction: Function,
|
||||
id: String,
|
||||
type: {
|
||||
@@ -29,36 +121,102 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
batchDelete: function () {
|
||||
this.$emit('before')
|
||||
if (this.deleteObjs.length < 1) return
|
||||
if (this.clickFunction) {
|
||||
this.clickFunction()
|
||||
return
|
||||
}
|
||||
this.$confirm(this.$t('tip.confirmBatchDelete', [this.deleteObjs.length]), {
|
||||
confirmButtonText: this.$t('tip.yes'),
|
||||
cancelButtonText: this.$t('tip.no'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$emit('before')
|
||||
const params = this.filterParam()
|
||||
this.$delete(this.api + params).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||||
this.$emit('after')
|
||||
bus.$emit('delTableRow', this.deleteObjs.map(item => item.id))
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
this.idShow = true
|
||||
this.prepare = true
|
||||
this.process = false
|
||||
this.finish = false
|
||||
this.forceDelete = 0
|
||||
this.deleteData = this.$loadsh.cloneDeep(this.deleteObjs).map(item => {
|
||||
item.type = this.from
|
||||
return item
|
||||
})
|
||||
this.checkAll = true
|
||||
this.idStr = this.deleteData.map(item => item.id)
|
||||
this.dialogVisible = true
|
||||
},
|
||||
handleClose () {
|
||||
this.dialogVisible = false
|
||||
if (this.finish) {
|
||||
this.$emit('after')
|
||||
}
|
||||
},
|
||||
batchDeleteYes () {
|
||||
if (!this.forceDeleteShow) {
|
||||
this.forceDelete = 1
|
||||
}
|
||||
this.$delete(this.api + `?ids=${this.idStr.join(',')}&force=${this.forceDelete}`).then(res => {
|
||||
this.idShow = false
|
||||
this.prepare = false
|
||||
this.process = true
|
||||
this.finish = false
|
||||
if (res.data && res.data.list && res.code !== 200) {
|
||||
this.deleteData = res.data.list.map(item => {
|
||||
item.showChildren = true
|
||||
item.relates && item.relates.forEach(relate => {
|
||||
relate.showChildren = true
|
||||
})
|
||||
return item
|
||||
})
|
||||
} else if (res.code === 200) {
|
||||
this.idShow = false
|
||||
this.prepare = false
|
||||
this.process = false
|
||||
this.finish = true
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') })
|
||||
// this.$emit('after')
|
||||
} else {
|
||||
this.$message.error(res.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
filterParam: function () {
|
||||
let filterFunction = this.filterFunction
|
||||
if (!filterFunction) {
|
||||
filterFunction = (arr) => { return '?ids=' + arr.map(t => t.id).join(',') }
|
||||
showProcess (arr) {
|
||||
this.idShow = false
|
||||
this.prepare = false
|
||||
this.process = true
|
||||
this.finish = false
|
||||
this.deleteData = arr.map(item => {
|
||||
item.showChildren = true
|
||||
item.relates && item.relates.forEach(relate => {
|
||||
relate.showChildren = true
|
||||
})
|
||||
return item
|
||||
})
|
||||
this.idStr = this.deleteData.map(item => item.id)
|
||||
this.checkAll = true
|
||||
this.dialogVisible = true
|
||||
},
|
||||
checkAllChange (value) {
|
||||
const allId = this.deleteData.map(item => {
|
||||
return item.id
|
||||
})
|
||||
this.idStr = value ? allId : []
|
||||
this.isIndeterminate = false
|
||||
},
|
||||
checkedChange (value) {
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount > 0
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.deleteData.length
|
||||
},
|
||||
showChild (item, e) {
|
||||
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true
|
||||
item.showChildren = !item.showChildren
|
||||
},
|
||||
selectIcon (type) {
|
||||
switch (type) {
|
||||
case 'asset' : return 'nz-icon monitorColor nz-icon-overview-project'
|
||||
case 'datacenter' : return 'nz-icon monitorColor nz-icon-Datacenter2'
|
||||
case 'project' : return 'nz-icon monitorColor nz-icon-project'
|
||||
case 'module' : return 'nz-icon monitorColor nz-icon-overview-module'
|
||||
case 'endpoint' : return 'nz-icon monitorColor nz-icon-overview-endpoint'
|
||||
case 'alertrule' : return 'nz-icon monitorColor nz-icon-Alertrule'
|
||||
}
|
||||
|
||||
return filterFunction(this.deleteObjs)
|
||||
return 'nz-icon monitorColor nz-icon-module5'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user