diff --git a/nezha-fronted/src/assets/css/components/common/deleteButton.scss b/nezha-fronted/src/assets/css/components/common/deleteButton.scss new file mode 100644 index 000000000..7d8d59e9d --- /dev/null +++ b/nezha-fronted/src/assets/css/components/common/deleteButton.scss @@ -0,0 +1,93 @@ +.batch-delete-footer{ + box-shadow: none !important; + height: auto !important; + display: flex; + justify-content: space-between !important; +} +.batch-delete-dialog{ + transition: all 0.3s; + .dialog-header { + margin-bottom: 10px; + word-wrap: break-word; + span{ + word-break: break-word; + } + } + .nz-icon-jinggao{ + color: $--color-danger; + } + .nz-icon-import-failed1{ + color: $--color-danger; + } + .nz-icon-import-success1{ + color: $--color-success; + } + .el-dialog__body { + padding: 0 20px; + } + .tree-header{ + background: #F6F6F6; + padding: 7px 10px 7px 0px; + font-weight: 600; + .batch-delete-item-id, .batch-delete-item-name{ + font-weight: 600; + } + } + .tree-body{ + //min-height: 160px; + //max-height: 220px; + height: 160px; + overflow-y: auto; + } + .tree-body-item{ + display: flex; + width: 100%; + font-size: 14px; + color: $--color-text-primary; + font-weight: 400; + margin-bottom: 10px; + padding-left: 10px; + box-sizing: border-box; + .nz-icon{ + vertical-align: middle; + } + .batch-delete-item-id{ + margin-left: 28px; + margin-right: 28px; + width: 100px; + transition: all 0.3s; + } + .batch-delete-item-name{ + margin-left: 14px; + flex: 1; + .tree-body-children:nth-of-type(1){ + margin-top: 10px; + } + transition: all 0.3s; + } + } + .tree-body-children{ + padding-left: 25px; + } + .batch-delete-item-text{ + display: inline-block; + width: calc(100% - 40px); + vertical-align: middle; + } + .el-checkbox-group{ + font-size: 14px; + .el-checkbox__label{ + display: none; + } + } + .nz-icon-caret-right{ + display:inline-block; + transition: all 0.3s; + color: $--border-color-base-focus; + } + .rotate90 { + display:inline-block; + transform: rotate(90deg); + transition: all 0.3s; + } +} diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss index 009fc11f5..1a5a41667 100644 --- a/nezha-fronted/src/assets/css/components/index.scss +++ b/nezha-fronted/src/assets/css/components/index.scss @@ -77,6 +77,7 @@ @import './common/pagination.scss'; @import './common/searchInput.scss'; @import './common/timePicker.scss'; +@import './common/deleteButton.scss'; @import './common/filterSearch/filterSearch.scss'; @import './common/panel/panelVariables.scss'; diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue b/nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue index 79b3806b7..e1e1f0354 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/IpDetails.vue @@ -37,7 +37,17 @@ diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue index 7111fdffc..1caa8a11b 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue @@ -26,7 +26,16 @@ class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="alert-list-export"> - +
- +
@@ -206,6 +218,9 @@ export default { this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) self.getTableData() bus.$emit('cabinet-tab') + } else if (response.data && response.data.list && response.code !== 200) { + this.delFlag = true + this.$refs.deleteButton && this.$refs.deleteButton.showProcess(response.data.list) } else { this.$message.error(response.msg) } diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue index 5d306905f..e78e72252 100644 --- a/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue +++ b/nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue @@ -32,7 +32,15 @@ - + diff --git a/nezha-fronted/src/components/common/deleteButton.vue b/nezha-fronted/src/components/common/deleteButton.vue index 1609c274b..7aadb542b 100644 --- a/nezha-fronted/src/components/common/deleteButton.vue +++ b/nezha-fronted/src/components/common/deleteButton.vue @@ -6,6 +6,78 @@
{{title}}
+ + +
+ + Are you sure to delete these {{ this.deleteObjs.length }} Pleaces data? +
+ +
+ + These Assets cannot be deleted.If you want to continue to delete,please check the "Force delete" action. +
+ +
+ + These Assets delete complete. +
+
+
+ +
Id
+
{{$t('overall.name')}}
+
+ +
+
+ +
{{item.id}}
+
+ + + {{item.name}} + +
+
+ + + {{relate.name}} +
+ + {{cildren.name}} +
+
+
+ +
+
+
+ +
+ + +
+ + Force delete +
+
+ + +
+ + @@ -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' } } } diff --git a/nezha-fronted/src/components/common/mixin/dataList.js b/nezha-fronted/src/components/common/mixin/dataList.js index 79a2844c2..0e29e5500 100644 --- a/nezha-fronted/src/components/common/mixin/dataList.js +++ b/nezha-fronted/src/components/common/mixin/dataList.js @@ -14,14 +14,6 @@ export default { }, data () { return { - dialogFooterShow: true, - idShow: true, - showOne: true, - showTwo: false, - showThree: false, - isDisabled: true, - ForceDeleteShow: false, - dialogVisible: false, fromRoute: fromRoute, // 侧滑 rightBox: { @@ -50,10 +42,7 @@ export default { delFlag: false, fromBottom: false, operationWidth: '165', // 操作列宽 - searchCheckBox: {}, - dialogData: [], - multipleSelection: [], - idStr: [] + searchCheckBox: {} } }, methods: { @@ -83,30 +72,8 @@ 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) { @@ -182,94 +149,34 @@ 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 (row) { - // 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() - bus.$emit('delTableRow', [row.id]) - } else { - this.$message.error(response.msg) - } - }) - } - }, del (row) { const self = this this.$confirm(this.$t('tip.confirmDelete'), { confirmButtonText: this.$t('tip.yes'), cancelButtonText: this.$t('tip.no'), - type: 'warning' - }).then(() => { - this.$delete(this.url + '?ids=' + row.id).then(response => { - if (response.code === 200) { - self.delFlag = true - this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) - self.getTableData() - bus.$emit('delTableRow', [row.id]) + type: 'warning', + beforeClose: (action, instance, done) => { + if (action === 'confirm') { + this.$delete(this.url + '?ids=' + row.id).then(response => { + if (response.code === 200) { + self.delFlag = true + this.$message({ duration: 2000, type: 'success', message: this.$t('tip.deleteSuccess') }) + self.getTableData() + bus.$emit('delTableRow', [row.id]) + } else if (response.data && response.data.list && response.code !== 200) { + self.delFlag = true + this.$refs.deleteButton && this.$refs.deleteButton.showProcess(response.data.list) + } else { + this.$message.error(response.msg) + } + done() + }) } else { - this.$message.error(response.msg) + done() } - }) + } + }).then(() => { + }) }, newObject () { @@ -430,20 +337,6 @@ 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) { @@ -1016,6 +909,21 @@ 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, @@ -1214,13 +1122,189 @@ export default { 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 diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue index 2984b84d6..fbf8fdf3b 100644 --- a/nezha-fronted/src/components/page/alert/alertMessage.vue +++ b/nezha-fronted/src/components/page/alert/alertMessage.vue @@ -36,7 +36,20 @@ @@ -180,82 +187,6 @@ - - @@ -1029,42 +960,4 @@ 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; -} -.theme-light .el-table{ - width: 100% !important; -} -.theme-light .el-table thead .el-table__row{ - width: 100% !important; -} diff --git a/nezha-fronted/src/components/page/config/agent.vue b/nezha-fronted/src/components/page/config/agent.vue index 12841a75b..7fc302f11 100644 --- a/nezha-fronted/src/components/page/config/agent.vue +++ b/nezha-fronted/src/components/page/config/agent.vue @@ -17,7 +17,17 @@ - + diff --git a/nezha-fronted/src/components/page/config/ipam.vue b/nezha-fronted/src/components/page/config/ipam.vue index 187653dcc..7cdcd5b09 100644 --- a/nezha-fronted/src/components/page/config/ipam.vue +++ b/nezha-fronted/src/components/page/config/ipam.vue @@ -32,7 +32,18 @@ diff --git a/nezha-fronted/src/components/page/config/menus.vue b/nezha-fronted/src/components/page/config/menus.vue index 1e1fd11ff..5426b34b0 100644 --- a/nezha-fronted/src/components/page/config/menus.vue +++ b/nezha-fronted/src/components/page/config/menus.vue @@ -12,7 +12,15 @@ type="button" @click="add"> - + diff --git a/nezha-fronted/src/components/page/config/roles.vue b/nezha-fronted/src/components/page/config/roles.vue index 62424f917..22a5c5bbd 100644 --- a/nezha-fronted/src/components/page/config/roles.vue +++ b/nezha-fronted/src/components/page/config/roles.vue @@ -14,7 +14,17 @@ type="button" @click="add"> - + diff --git a/nezha-fronted/src/components/page/config/template/exprTemp.vue b/nezha-fronted/src/components/page/config/template/exprTemp.vue index 4d3425940..59e12caf1 100644 --- a/nezha-fronted/src/components/page/config/template/exprTemp.vue +++ b/nezha-fronted/src/components/page/config/template/exprTemp.vue @@ -29,7 +29,18 @@ diff --git a/nezha-fronted/src/components/page/config/user.vue b/nezha-fronted/src/components/page/config/user.vue index 0fc83dfd0..0af760758 100644 --- a/nezha-fronted/src/components/page/config/user.vue +++ b/nezha-fronted/src/components/page/config/user.vue @@ -68,7 +68,16 @@ type="button" @click="add"> - + diff --git a/nezha-fronted/src/components/page/monitor/module/moduleList.vue b/nezha-fronted/src/components/page/monitor/module/moduleList.vue index 60570add1..e2472353e 100644 --- a/nezha-fronted/src/components/page/monitor/module/moduleList.vue +++ b/nezha-fronted/src/components/page/monitor/module/moduleList.vue @@ -102,7 +102,19 @@ diff --git a/nezha-fronted/src/components/page/monitor/project/projectList.vue b/nezha-fronted/src/components/page/monitor/project/projectList.vue index 6cdeb608e..cbf23f41d 100644 --- a/nezha-fronted/src/components/page/monitor/project/projectList.vue +++ b/nezha-fronted/src/components/page/monitor/project/projectList.vue @@ -15,7 +15,17 @@ type="button" @click="add"> - +