perf: select perform

This commit is contained in:
ibuler
2024-07-02 13:48:46 +08:00
committed by 老广
parent 6a492a83bf
commit 07223c0e31
5 changed files with 56 additions and 45 deletions

View File

@@ -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)

View File

@@ -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>

View File

@@ -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;
}; }
;
} }
} }

View File

@@ -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

View File

@@ -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