@@ -190,15 +192,23 @@ import router, { resetRouter } from '@/router'
import store from '@/store'
import { mapState } from 'vuex'
import moment from 'moment'
+import draggable from 'vuedraggable'
import { getCITypeGroups } from '../../api/ciTypeGroup'
-import { getPreference, getPreference2, subscribeCIType, subscribeTreeView } from '@/modules/cmdb/api/preference'
+import {
+ getPreference,
+ getPreference2,
+ subscribeCIType,
+ subscribeTreeView,
+ preferenceCitypeOrder,
+} from '@/modules/cmdb/api/preference'
import CollapseTransition from '@/components/CollapseTransition'
import SubscribeSetting from '../../components/subscribeSetting/subscribeSetting'
import { getCIAdcStatistics } from '../../api/ci'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
export default {
name: 'Preference',
- components: { CollapseTransition, SubscribeSetting },
+ components: { CollapseTransition, SubscribeSetting, draggable, OpsMoveIcon },
data() {
return {
citypeData: [],
@@ -214,7 +224,6 @@ export default {
computed: {
...mapState({
windowHeight: (state) => state.windowHeight,
- allUsers: (state) => state.user.allUsers,
}),
},
mounted() {
@@ -277,10 +286,6 @@ export default {
}, 300)
}
},
- getNameByUid(uid) {
- const _find = this.allUsers.find((item) => item.uid === uid)
- return _find?.username[0].toUpperCase() || 'A'
- },
getsubscribedDays(item) {
const subscribedTime = this.self.type_id2subs_time[item.id]
moment.duration(moment().diff(moment(subscribedTime)))
@@ -351,6 +356,17 @@ export default {
this.expandKeys.push(group.id)
}
},
+ orderChange(e, group) {
+ preferenceCitypeOrder({ type_ids: group.ci_types.map((type) => type.id), is_tree: group.type !== 'ci' })
+ .then(() => {
+ if (group.type === 'ci') {
+ this.resetRoute()
+ }
+ })
+ .catch(() => {
+ this.getCITypes(false)
+ })
+ },
},
}
@@ -426,7 +442,7 @@ export default {
align-items: center;
height: 45px;
padding: 0 8px;
- cursor: default;
+ cursor: move;
justify-content: flex-start;
&:hover {
background: #ffffff;
@@ -437,6 +453,15 @@ export default {
white-space: nowrap;
margin-left: auto;
}
+ .cmdb-preference-move-icon {
+ visibility: visible;
+ }
+ }
+ .cmdb-preference-move-icon {
+ width: 14px;
+ height: 20px;
+ cursor: move;
+ visibility: hidden;
}
.cmdb-preference-group-content-title {
flex: 1;
diff --git a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
index 85f41c5..9be9e28 100644
--- a/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/tree_views/index.vue
@@ -32,32 +32,24 @@
>
-
-
+
@@ -407,7 +400,13 @@
/* eslint-disable no-useless-escape */
import _ from 'lodash'
import Sortable from 'sortablejs'
-import { getSubscribeTreeView, getSubscribeAttributes, subscribeTreeView } from '@/modules/cmdb/api/preference'
+import draggable from 'vuedraggable'
+import {
+ getSubscribeTreeView,
+ getSubscribeAttributes,
+ subscribeTreeView,
+ preferenceCitypeOrder,
+} from '@/modules/cmdb/api/preference'
import { searchCI, updateCI, deleteCI } from '@/modules/cmdb/api/ci'
import { getCITypes } from '@/modules/cmdb/api/CIType'
import { getCITableColumns } from '../../utils/helper'
@@ -444,6 +443,7 @@ export default {
PreferenceSearch,
MetadataDrawer,
OpsMoveIcon,
+ draggable,
},
data() {
return {
@@ -463,7 +463,6 @@ export default {
pageSize: 50,
currentPage: 1,
totalNumber: 0,
- current: '', // 当前页面的type_id
currentAttrList: [],
trigger: false,
newLoad: true,
@@ -571,7 +570,6 @@ export default {
this.subscribeTreeViewCiTypes = res
if (this.subscribeTreeViewCiTypes.length) {
this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
- this.current = `${this.typeId}`
this.selectedRowKeys = []
this.$refs.xTable.getVxetableRef().clearCheckboxRow()
this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
@@ -600,7 +598,6 @@ export default {
async loadCurrentView() {
if (this.subscribeTreeViewCiTypes.length) {
this.typeId = this.$route.params.typeId || this.subscribeTreeViewCiTypes[0].type_id
- this.current = String(this.typeId)
this.selectedRowKeys = []
this.$refs.xTable.getVxetableRef().clearCheckboxRow()
this.$refs.xTable.getVxetableRef().clearCheckboxReserve()
@@ -746,9 +743,14 @@ export default {
name: 'cmdb_tree_views_item',
params: { typeId: Number(value) },
})
+ this.typeId = Number(value)
} else {
- this.newLoad = true
- this.initPage()
+ this.typeId = null
+ this.$nextTick(() => {
+ this.typeId = Number(value)
+ this.newLoad = true
+ this.initPage()
+ })
}
this.isSetDataNodes = []
},
@@ -1209,6 +1211,13 @@ export default {
this.$message.error(this.$t('cmdb.ci.copyFailed'))
})
},
+ orderChange(e, subscribeTreeViewCiTypes) {
+ preferenceCitypeOrder({ type_ids: subscribeTreeViewCiTypes.map((type) => type.type_id), is_tree: true }).catch(
+ () => {
+ this.getTreeViews()
+ }
+ )
+ },
},
}
@@ -1230,65 +1239,68 @@ export default {
&:hover {
overflow: auto;
}
- .ant-collapse-borderless {
- background-color: #fff;
- }
- .ant-collapse-item:has(.custom-header-selected):not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header,
- .ant-collapse-item-active:not(:has(.ant-tree-treenode-selected)) > .ant-collapse-header {
- background-color: #d6e4ff;
- }
- .ant-collapse-header {
- padding: 8px 12px 4px;
+ .custom-header {
+ width: 100%;
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ padding: 8px 0 8px 12px;
+ cursor: move;
+ border-radius: 2px;
+ position: relative;
&:hover {
background-color: #f0f5ff;
+ > .actions,
+ > .move-icon {
+ display: inherit;
+ }
}
- &:hover > .custom-header > .actions {
- display: inherit;
+ .move-icon {
+ width: 14px;
+ height: 20px;
+ cursor: move;
+ position: absolute;
+ display: none;
+ left: 0;
}
- .custom-header {
- width: 100%;
+ .tree-views-left-header-icon {
display: inline-flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-start;
align-items: center;
- .tree-views-left-header-icon {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 20px;
- height: 20px;
- border-radius: 2px;
- box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
- margin-right: 6px;
- background-color: #fff;
- }
- .tree-views-left-header-name {
- flex: 1;
- font-weight: bold;
- margin-left: 5px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .actions {
- display: none;
- margin-left: auto;
- }
- .action {
- display: inline-block;
- width: 22px;
- text-align: center;
- border-radius: 5px;
- &:hover {
- background-color: #cacaca;
- }
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ border-radius: 2px;
+ box-shadow: 0px 1px 2px rgba(47, 84, 235, 0.2);
+ margin-right: 6px;
+ background-color: #fff;
+ }
+ .tree-views-left-header-name {
+ flex: 1;
+ font-weight: bold;
+ margin-left: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .actions {
+ display: none;
+ margin-left: auto;
+ cursor: pointer;
+ }
+ .action {
+ display: inline-block;
+ width: 22px;
+ text-align: center;
+ border-radius: 5px;
+ &:hover {
+ background-color: #cacaca;
}
}
}
-
- .ant-collapse > .ant-collapse-item > .ant-collapse-header {
- white-space: nowrap;
+ .custom-header-selected {
+ background-color: #d3e3fd !important;
}
.ant-tree li {
padding: 2px 0;