NEZ-2134 feat: Task asset批量删除 页面开发
This commit is contained in:
wenzhijie
@@ -14,6 +14,14 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogFooterShow: true,
|
||||
idShow: true,
|
||||
showOne: true,
|
||||
showTwo: false,
|
||||
showThree: false,
|
||||
isDisabled: true,
|
||||
ForceDeleteShow: false,
|
||||
dialogVisible: false,
|
||||
fromRoute: fromRoute,
|
||||
// 侧滑
|
||||
rightBox: {
|
||||
@@ -42,7 +50,10 @@ export default {
|
||||
delFlag: false,
|
||||
fromBottom: false,
|
||||
operationWidth: '165', // 操作列宽
|
||||
searchCheckBox: {}
|
||||
searchCheckBox: {},
|
||||
dialogData: [],
|
||||
multipleSelection: [],
|
||||
idStr: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -72,8 +83,30 @@ export default {
|
||||
isBuildIn (row) {
|
||||
return (row.buildIn && row.buildIn == 1) || (row.builtIn && row.builtIn == 1)
|
||||
},
|
||||
batchDeleteselectionChange (obj) {
|
||||
this.batchDeleteObjs = obj
|
||||
const ids = []
|
||||
this.batchDeleteObjs.forEach(function (value, index, obj) {
|
||||
ids.push(obj[index].id)
|
||||
})
|
||||
this.idStr = ids.toString()
|
||||
console.log(this.idStr, 1)
|
||||
},
|
||||
selectionChange (objs) {
|
||||
this.batchDeleteObjs = objs
|
||||
if (this.batchDeleteObjs.length > 0) {
|
||||
this.isDisabled = false
|
||||
console.log('批量删除按钮可用')
|
||||
} else {
|
||||
this.isDisabled = true
|
||||
console.log('批量删除按钮不可用')
|
||||
}
|
||||
// const ids = []
|
||||
// this.batchDeleteObjs.forEach(function (value, index, obj) {
|
||||
// ids.push(obj[index].id)
|
||||
// })
|
||||
// this.idStr = ids.toString()
|
||||
// console.log(this.idStr, 1)
|
||||
},
|
||||
getTableData (params) {
|
||||
if (params && Object.keys(params).length > 0) {
|
||||
@@ -149,6 +182,76 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
// 批量删除
|
||||
BatchDelete () {
|
||||
this.dialogVisible = true
|
||||
this.$nextTick(() => {
|
||||
// console.log(this.$refs.batchDeleteData, 2)
|
||||
console.log(this.batchDeleteObjs, 3)
|
||||
this.batchDeleteObjs.forEach((row) => {
|
||||
this.$refs.batchDeleteData.toggleRowSelection(row, true)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 批量删除-确定按钮
|
||||
BatchDeleteYes (obj) {
|
||||
if (this.ForceDeleteShow) {
|
||||
this.showThree = true
|
||||
this.showOne = false
|
||||
this.showTwo = false
|
||||
this.dialogFooterShow = false
|
||||
// this.$delete(this.url + '?ids=' + this.idStr).then(response => {
|
||||
// if (response.code === 200) {
|
||||
// this.showThree = true
|
||||
// this.showOne = false
|
||||
// this.showTwo = false
|
||||
// this.dialogFooterShow = false
|
||||
// this.batchDeleteObjs = []
|
||||
// this.idStr = []
|
||||
// this.getTableData()
|
||||
// } else {
|
||||
// this.$message.error(response.msg)
|
||||
// }
|
||||
// })
|
||||
} else {
|
||||
this.showThree = false
|
||||
this.showOne = false
|
||||
this.showTwo = true
|
||||
this.dialogFooterShow = true
|
||||
}
|
||||
},
|
||||
BatchDeleteToggleSelection (val) {
|
||||
this.multipleSelection = val
|
||||
},
|
||||
// 强制删除按钮
|
||||
ForceDeleteFun () {
|
||||
this.ForceDeleteShow = true
|
||||
},
|
||||
// Dialog 关闭的回调
|
||||
handleClose () {
|
||||
// this.dialogVisible = false
|
||||
// this.showOne = true
|
||||
// this.showTwo = false
|
||||
// this.showThree = false
|
||||
// this.dialogFooterShow = true
|
||||
// this.ForceDeleteShow = false
|
||||
if (this.showThree) {
|
||||
this.$delete(this.url + '?ids=' + this.idStr).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.showThree = false
|
||||
this.showOne = true
|
||||
this.showTwo = false
|
||||
this.dialogFooterShow = true
|
||||
this.ForceDeleteShow = false
|
||||
this.batchDeleteObjs = []
|
||||
this.idStr = []
|
||||
this.getTableData()
|
||||
} else {
|
||||
this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
del (row) {
|
||||
const self = this
|
||||
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||
@@ -326,6 +429,20 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
batchDeleteObjs: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
if (n.length === 0 && this.pageObj.pageNo > 1) {
|
||||
this.pageNo(this.pageObj.pageNo - 1)
|
||||
}
|
||||
|
||||
/* if (!this.delFlag) { // 不是删除时回到顶部
|
||||
this.$refs.dataTable.bodyWrapper.scrollTop = 0
|
||||
} else {
|
||||
this.delFlag = false
|
||||
} */
|
||||
}
|
||||
},
|
||||
tableData: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
@@ -898,21 +1015,6 @@ export default {
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
state: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'state',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'ipamState',
|
||||
name: 'State',
|
||||
readonly: true,
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
name: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
@@ -1002,298 +1104,12 @@ export default {
|
||||
jsonKey: 'valnum'
|
||||
}
|
||||
}
|
||||
} else if (path === 'recordRule') {
|
||||
searchKeys = {
|
||||
// key: path 键
|
||||
// value: vue set 参数
|
||||
pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
|
||||
pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
|
||||
orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
|
||||
ids: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'ids',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'ids',
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
state: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'state',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'recordState',
|
||||
name: 'State',
|
||||
readonly: true,
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
name: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'name',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
id: 'name',
|
||||
label: 'name',
|
||||
name: 'Name',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
type: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'type',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'recordType',
|
||||
name: 'Type',
|
||||
readonly: true,
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
expr: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'expr',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'expr',
|
||||
name: 'Expression',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
starrd: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'starrd',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'starrd',
|
||||
name: 'Starrd',
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
buildIn: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'buildIn',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'buildIn',
|
||||
name: 'buildIn',
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
}
|
||||
}
|
||||
} else if (path === 'issue') {
|
||||
searchKeys = {
|
||||
// key: path 键
|
||||
// value: vue set 参数
|
||||
pageNo: { target: this.pageObj, propertyName: 'pageNo', type: 'number' },
|
||||
pageSize: { target: this.pageObj, propertyName: 'pageSize', type: 'number' },
|
||||
orderBy: { target: this.$data, propertyName: 'orderBy', type: 'string' },
|
||||
ids: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'ids',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'ids',
|
||||
name: 'ID',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
name: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'name',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
id: 'name',
|
||||
label: 'name',
|
||||
name: 'Name',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
type: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'type',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'issueType',
|
||||
name: 'Type',
|
||||
readonly: true,
|
||||
type: 'issueType',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
state: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'state',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'issueState',
|
||||
name: 'State',
|
||||
readonly: true,
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
priority: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'priority',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'priority',
|
||||
name: 'Priority',
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
assetsId: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'assetsId',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'assetsId',
|
||||
name: 'Assets id',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
assetName: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'assetName',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'assetName',
|
||||
name: 'Assets name',
|
||||
type: 'input',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
cid: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'cid',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'cid',
|
||||
name: 'Create user',
|
||||
type: 'issue',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
uid: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'uid',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'uid',
|
||||
name: 'Update user',
|
||||
type: 'issue',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
rid: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'rid',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'rid',
|
||||
name: 'Reporter',
|
||||
type: 'issue',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
aid: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'aid',
|
||||
type: 'string',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'aid',
|
||||
name: 'Assignee',
|
||||
type: 'issue',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
},
|
||||
starrd: {
|
||||
target: this.searchLabel,
|
||||
isSearchInput: true,
|
||||
propertyName: 'starrd',
|
||||
type: 'Number',
|
||||
defaultJson: {
|
||||
disabled: false,
|
||||
label: 'starrd',
|
||||
name: 'Starrd',
|
||||
type: 'select',
|
||||
val: ''
|
||||
},
|
||||
jsonKey: 'val'
|
||||
}
|
||||
}
|
||||
}
|
||||
this.initQueryFromPath(searchKeys)
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick((row) => {
|
||||
})
|
||||
const pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId)
|
||||
if (pageSize && pageSize !== 'undefined') {
|
||||
this.pageObj.pageSize = pageSize
|
||||
|
||||
@@ -114,8 +114,12 @@
|
||||
<el-dropdown-item>
|
||||
<div id="asset-batch-asset" v-has="'asset_edit'" @click="batchEdit"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchEdit')}}</div>
|
||||
</el-dropdown-item>
|
||||
<!-- 批量删除 -->
|
||||
<el-dropdown-item>
|
||||
<delete-button :type="'link'" :title="$t('overall.batchDel')" id="asset-list-batch-delete" v-has="'asset_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
|
||||
<div id="asset-list-batch-delete" v-has="'asset_delete'" >
|
||||
<el-button type="text" :disabled="isDisabled" @click="BatchDelete"><i class="nz-icon nz-icon-batch-edit"></i>{{$t('overall.batchDel')}}</el-button>
|
||||
</div>
|
||||
<!-- <delete-button :type="'link'" :title="$t('overall.batchDel')" id="asset-list-batch-delete" v-has="'asset_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" @click="deletesBtn"></delete-button> -->
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</template>
|
||||
@@ -176,6 +180,81 @@
|
||||
</transition>
|
||||
<transition name="right-box"><alert-silence-box v-if='silenceBoxShow' :alert-silence="objectSilence" @close="closeSilenceBox"></alert-silence-box>
|
||||
</transition>
|
||||
|
||||
<template>
|
||||
<!-- 批量删除 -->
|
||||
<el-dialog
|
||||
ref="dialogData"
|
||||
id="dialogID"
|
||||
title="Hint"
|
||||
v-if="dialogVisible"
|
||||
:visible.sync="dialogVisible"
|
||||
@close='handleClose'
|
||||
width="20%"
|
||||
:modal-append-to-body="true"
|
||||
:append-to-body="true"
|
||||
>
|
||||
<!-- -->
|
||||
<div class="dialog-header1" style="vertical-align:top;" v-if="showOne">
|
||||
<i class="nz-icon nz-icon-jinggao" style="color:#ff000078;"></i>
|
||||
<span>Are you sure to delete these {{ this.batchDeleteObjs.length }} Pleaces data?</span>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="dialog-header2" style="vertical-align:top;" v-if="showTwo">
|
||||
<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-header3" style="vertical-align:top;" v-if="showThree">
|
||||
<i class="nz-icon nz-icon-import-success1" style="color:rgb(20 191 25 / 97%);"></i>
|
||||
<span>These Assets delete complete.</span>
|
||||
</div>
|
||||
<el-table
|
||||
class="branchTable"
|
||||
ref="batchDeleteData"
|
||||
:data="batchDeleteObjs"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
:row-key="(row) => {return row.id}"
|
||||
@selection-change="batchDeleteselectionChange"
|
||||
@showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"
|
||||
@topology="topology"
|
||||
@row-dblclick="(row)=>{$emit('showBottomBox', 'panelTab', row)}"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
type="selection"
|
||||
:reserve-selection="true"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="idShow"
|
||||
label="ID"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="name"
|
||||
width="120">
|
||||
<template slot-scope="scope"
|
||||
>
|
||||
<i class="nz-icon nz-icon-overview-project monitorColor"></i>
|
||||
<!-- <i class="nz-icon nz-icon-overview-endpoint monitorColor"></i> -->
|
||||
{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 底部按钮 -->
|
||||
<span slot="footer" class="dialog-footer" v-if="dialogFooterShow">
|
||||
<div class="footerBox1">
|
||||
<el-checkbox v-model="ForceDeleteShow" text-color="black" @change="this.ForceDeleteShow=!this.ForceDeleteShow" name="type"></el-checkbox>
|
||||
<span class="checkTitle">Force delete</span>
|
||||
</div>
|
||||
<el-button @click="dialogVisible = false">No</el-button>
|
||||
<el-button type="primary" @click="BatchDeleteYes">Yes</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -949,4 +1028,37 @@ export default {
|
||||
/deep/ .nz-table-list{
|
||||
flex: 1;
|
||||
}
|
||||
/* del 样式 */
|
||||
/* .theme-light #dialogID .el-dialog .el-dialog__title {
|
||||
font-size: 12px;
|
||||
} */
|
||||
.el-dialog__footer {
|
||||
position: relative;
|
||||
}
|
||||
.el-dialog__footer .dialog-footer .el-checkbox{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
|
||||
}
|
||||
.checkTitle{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 40px;
|
||||
color: #878181;
|
||||
}
|
||||
.footerBox1{
|
||||
line-height: initial;
|
||||
}
|
||||
.theme-light .el-button.is-disabled, .theme-light .el-button.is-disabled:hover, .theme-light .el-button.is-disabled:focus{
|
||||
color: #C0C4CC !important;
|
||||
|
||||
}
|
||||
.theme-light .el-button--text, #asset-list-batch-delete, .theme-light .el-button--text:focus, .theme-light .el-button--text:hover, .theme-light .el-cascader-node.in-active-path, .theme-light .el-cascader-node.is-active, .theme-light .el-cascader-node.is-selectable.in-checked-path, .theme-light .el-select-dropdown.is-multiple .el-select-dropdown__item.selected, .theme-light .el-select-dropdown__item.selected{
|
||||
color: #666 !important;
|
||||
}
|
||||
.theme-light .el-button--text:hover{
|
||||
color: #FA901C !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"baseUrl":"/", "version": "22.05"}
|
||||
{"baseUrl":"http://192.168.40.42:8080/", "version": "22.05"}
|
||||
|
||||
Reference in New Issue
Block a user