mirror of
https://github.com/jumpserver/lina.git
synced 2025-09-23 12:07:38 +00:00
perf: select perform
This commit is contained in:
@@ -159,7 +159,6 @@ export default {
|
|||||||
},
|
},
|
||||||
getAssetsUrl(treeNode) {
|
getAssetsUrl(treeNode) {
|
||||||
let url = this.treeSetting?.url || this.url
|
let url = this.treeSetting?.url || this.url
|
||||||
console.log(treeNode, url)
|
|
||||||
if (treeNode.meta.type === 'node') {
|
if (treeNode.meta.type === 'node') {
|
||||||
const nodeId = treeNode.meta.data.id
|
const nodeId = treeNode.meta.data.id
|
||||||
url = setUrlParam(url, 'node_id', nodeId)
|
url = setUrlParam(url, 'node_id', nodeId)
|
||||||
|
@@ -17,7 +17,13 @@
|
|||||||
<template v-if="showHasObjects">
|
<template v-if="showHasObjects">
|
||||||
<tr v-for="obj of iHasObjects" :key="obj.value" class="item">
|
<tr v-for="obj of iHasObjects" :key="obj.value" class="item">
|
||||||
<td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
|
<td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
|
||||||
<el-tooltip :content="obj.label" :open-delay="500" effect="dark" placement="left" style="margin: 4px;">
|
<el-tooltip
|
||||||
|
:content="obj.label.toString()"
|
||||||
|
:open-delay="500"
|
||||||
|
effect="dark"
|
||||||
|
placement="left"
|
||||||
|
style="margin: 4px;"
|
||||||
|
>
|
||||||
<b>{{ obj.label }}</b>
|
<b>{{ obj.label }}</b>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</td>
|
</td>
|
||||||
@@ -101,7 +107,8 @@ export default {
|
|||||||
},
|
},
|
||||||
performDelete: {
|
performDelete: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: (obj, that) => {}
|
default: (obj, that) => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
allowCreate: {
|
allowCreate: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -109,7 +116,8 @@ export default {
|
|||||||
},
|
},
|
||||||
select2Config: {
|
select2Config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {}
|
default: () => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onDeleteSuccess: {
|
onDeleteSuccess: {
|
||||||
type: Function,
|
type: Function,
|
||||||
@@ -146,7 +154,8 @@ export default {
|
|||||||
},
|
},
|
||||||
performAdd: {
|
performAdd: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default: (objects, that) => {}
|
default: (objects, that) => {
|
||||||
|
}
|
||||||
},
|
},
|
||||||
showAddAll: {
|
showAddAll: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
@@ -156,7 +165,8 @@ export default {
|
|||||||
type: Function,
|
type: Function,
|
||||||
default(objects, that) {
|
default(objects, that) {
|
||||||
that.$log.debug('Select value', that.select2.value)
|
that.$log.debug('Select value', that.select2.value)
|
||||||
that.iHasObjects = [...that.iHasObjects, ...objects]
|
const oldValues = that.iHasObjects.map(item => item.value)
|
||||||
|
that.iHasObjects = [...that.iHasObjects, ...objects.filter(item => !oldValues.includes(item.value))]
|
||||||
that.$refs.select2.clearSelected()
|
that.$refs.select2.clearSelected()
|
||||||
that.$message.success(that.$t('AddSuccessMsg'))
|
that.$message.success(that.$t('AddSuccessMsg'))
|
||||||
this.$refs.select2.refresh()
|
this.$refs.select2.refresh()
|
||||||
@@ -324,25 +334,26 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
b, strong {
|
b, strong {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr td {
|
tr td {
|
||||||
line-height: 1.42857;
|
line-height: 1.42857;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.item td {
|
tr.item td {
|
||||||
border-top: 1px solid #e7eaec;
|
border-top: 1px solid #e7eaec;
|
||||||
}
|
}
|
||||||
.box-margin {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.the-box ::v-deep .el-card__body {
|
.box-margin {
|
||||||
padding: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.the-box ::v-deep .el-card__body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="code-editor" style="font-size: 12px">
|
<div class="code-editor" style="font-size: 12px">
|
||||||
<el-form ref="form" label-position="top" label-width="80px" :rules="rules" :model="formModel">
|
<el-form ref="form" :model="formModel" :rules="rules" label-position="top" label-width="80px">
|
||||||
<div class="form-content">
|
<div class="form-content">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
v-for="(item, index) in iActions"
|
v-for="(item, index) in iActions"
|
||||||
@@ -11,8 +11,8 @@
|
|||||||
<template v-if="item.type === 'button' && !item.isVisible">
|
<template v-if="item.type === 'button' && !item.isVisible">
|
||||||
<el-button
|
<el-button
|
||||||
:type="item.el && item.el.type"
|
:type="item.el && item.el.type"
|
||||||
size="mini"
|
|
||||||
class="start-stop-btn"
|
class="start-stop-btn"
|
||||||
|
size="mini"
|
||||||
@click="item.callback()"
|
@click="item.callback()"
|
||||||
>
|
>
|
||||||
<i :class="item.icon" />{{ item.name }}
|
<i :class="item.icon" />{{ item.name }}
|
||||||
@@ -32,9 +32,9 @@
|
|||||||
<template v-else-if="item.type === 'input'">
|
<template v-else-if="item.type === 'input'">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="formModel[item.name]"
|
v-model="formModel[item.name]"
|
||||||
|
:class="!isFold ? 'special-style' : ''"
|
||||||
:placeholder="item.placeholder"
|
:placeholder="item.placeholder"
|
||||||
class="inline-input"
|
class="inline-input"
|
||||||
:class="!isFold ? 'special-style' : ''"
|
|
||||||
size="mini"
|
size="mini"
|
||||||
@change="item.callback(item.value)"
|
@change="item.callback(item.value)"
|
||||||
/>
|
/>
|
||||||
@@ -68,8 +68,8 @@
|
|||||||
|
|
||||||
<template v-if="item.type === 'select' && (!item.el || !item.el.create)">
|
<template v-if="item.type === 'select' && (!item.el || !item.el.create)">
|
||||||
<el-dropdown
|
<el-dropdown
|
||||||
trigger="click"
|
|
||||||
class="select-dropdown"
|
class="select-dropdown"
|
||||||
|
trigger="click"
|
||||||
@command="(command) => {
|
@command="(command) => {
|
||||||
item.value = command
|
item.value = command
|
||||||
item.callback(command)
|
item.callback(command)
|
||||||
@@ -105,8 +105,8 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div
|
<div
|
||||||
v-if="toolbar.hasOwnProperty('fold')"
|
v-if="toolbar.hasOwnProperty('fold')"
|
||||||
class="fold"
|
|
||||||
:class="!isFold ? 'sepcial-icon' : ''"
|
:class="!isFold ? 'sepcial-icon' : ''"
|
||||||
|
class="fold"
|
||||||
>
|
>
|
||||||
<el-tooltip :content="$tc('MoreActions')" :open-delay="500" placement="top">
|
<el-tooltip :content="$tc('MoreActions')" :open-delay="500" placement="top">
|
||||||
<i
|
<i
|
||||||
@@ -237,7 +237,6 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onChangeFold() {
|
onChangeFold() {
|
||||||
console.log(1)
|
|
||||||
this.isFold = !this.isFold
|
this.isFold = !this.isFold
|
||||||
},
|
},
|
||||||
getLabel(value, items) {
|
getLabel(value, items) {
|
||||||
@@ -323,7 +322,8 @@ $input-border-color: #C0C4CC;
|
|||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
};
|
}
|
||||||
|
;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -22,7 +22,9 @@
|
|||||||
@visible-change="onVisibleChange"
|
@visible-change="onVisibleChange"
|
||||||
>
|
>
|
||||||
<div v-if="showSelectAll" class="el-select-dropdown__header">
|
<div v-if="showSelectAll" class="el-select-dropdown__header">
|
||||||
<el-checkbox v-model="allSelected" @change="handleSelectAllChange">{{ $t('SelectAll') }}</el-checkbox>
|
<el-checkbox v-model="allSelected" :disabled="selectAllDisabled" @change="handleSelectAllChange">
|
||||||
|
{{ $t('SelectAll') }}
|
||||||
|
</el-checkbox>
|
||||||
<div v-if="quickAddCallback" style="float: right">
|
<div v-if="quickAddCallback" style="float: right">
|
||||||
<el-link :underline="false" @click="quickAddCallback">{{ $t('QuickAdd') }}</el-link>
|
<el-link :underline="false" @click="quickAddCallback">{{ $t('QuickAdd') }}</el-link>
|
||||||
<el-link :underline="false" icon="el-icon-refresh" style="margin-left: 5px;" @click="refresh" />
|
<el-link :underline="false" icon="el-icon-refresh" style="margin-left: 5px;" @click="refresh" />
|
||||||
@@ -156,7 +158,7 @@ export default {
|
|||||||
initialOptions: [],
|
initialOptions: [],
|
||||||
remote: true,
|
remote: true,
|
||||||
allSelected: false,
|
allSelected: false,
|
||||||
transformed: true
|
transformed: false // 这里改回来是因为,acl 中资产选择,category 选择后,再编辑,就看不到了
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -169,6 +171,10 @@ export default {
|
|||||||
optionsValues() {
|
optionsValues() {
|
||||||
return this.iOptions.map((v) => v.value)
|
return this.iOptions.map((v) => v.value)
|
||||||
},
|
},
|
||||||
|
selectAllDisabled() {
|
||||||
|
const validOptions = this.iOptions.filter(item => this.disabledValues.indexOf(item.value) === -1)
|
||||||
|
return validOptions.length === 0
|
||||||
|
},
|
||||||
iValue: {
|
iValue: {
|
||||||
set(val) {
|
set(val) {
|
||||||
const noValue = !this.value || this.value.length === 0
|
const noValue = !this.value || this.value.length === 0
|
||||||
|
@@ -17,7 +17,7 @@
|
|||||||
/>
|
/>
|
||||||
<RelationCard
|
<RelationCard
|
||||||
ref="LabelRelation"
|
ref="LabelRelation"
|
||||||
v-perms="'assets.view_label'"
|
v-perms="'assets.change_asset'"
|
||||||
style="margin-top: 15px"
|
style="margin-top: 15px"
|
||||||
type="warning"
|
type="warning"
|
||||||
v-bind="labelConfig"
|
v-bind="labelConfig"
|
||||||
@@ -98,9 +98,9 @@ export default {
|
|||||||
type: 'primary',
|
type: 'primary',
|
||||||
label: this.$t('Test'),
|
label: this.$t('Test'),
|
||||||
disabled: !vm.$hasPerm('assets.test_assetconnectivity') ||
|
disabled: !vm.$hasPerm('assets.test_assetconnectivity') ||
|
||||||
!this.object['auto_config'].ansible_enabled ||
|
!this.object['auto_config'].ansible_enabled ||
|
||||||
!this.object['auto_config']['ping_enabled'] ||
|
!this.object['auto_config']['ping_enabled'] ||
|
||||||
this.$store.getters.currentOrgIsRoot
|
this.$store.getters.currentOrgIsRoot
|
||||||
},
|
},
|
||||||
callbacks: {
|
callbacks: {
|
||||||
click: function() {
|
click: function() {
|
||||||
@@ -157,11 +157,11 @@ export default {
|
|||||||
objectsAjax: {
|
objectsAjax: {
|
||||||
url: '/api/v1/labels/labels/',
|
url: '/api/v1/labels/labels/',
|
||||||
transformOption: (item) => {
|
transformOption: (item) => {
|
||||||
const label = String(item.name) + ':' + String(item.value)
|
const label = `${item.name}: ${item.value}`
|
||||||
return { label: label, value: label }
|
return { label: label, value: item.id }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hasObjectsId: this.object.labels,
|
hasObjectsId: this.object.labels.map(item => item.id),
|
||||||
performAdd: (items) => {
|
performAdd: (items) => {
|
||||||
const newData = []
|
const newData = []
|
||||||
const value = this.$refs.LabelRelation.iHasObjects
|
const value = this.$refs.LabelRelation.iHasObjects
|
||||||
@@ -170,11 +170,6 @@ export default {
|
|||||||
items.map(v => newData.push(v.label))
|
items.map(v => newData.push(v.label))
|
||||||
return this.$axios.patch(relationUrl, { labels: newData })
|
return this.$axios.patch(relationUrl, { labels: newData })
|
||||||
},
|
},
|
||||||
getHasObjects: (ids) => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
return resolve(ids.map(id => ({ value: id, label: id })))
|
|
||||||
})
|
|
||||||
},
|
|
||||||
performDelete: (item) => {
|
performDelete: (item) => {
|
||||||
const itemId = item.value
|
const itemId = item.value
|
||||||
const value = this.$refs.LabelRelation.iHasObjects
|
const value = this.$refs.LabelRelation.iHasObjects
|
||||||
|
Reference in New Issue
Block a user