style:批量删除 样式修改

This commit is contained in:
zhangyu
2022-09-26 16:22:34 +08:00
parent 3b65c2ee57
commit ef91543ed4
4 changed files with 24 additions and 12 deletions

View File

@@ -57,10 +57,13 @@
margin-right: 28px; margin-right: 28px;
width: 100px; width: 100px;
transition: all 0.3s; transition: all 0.3s;
flex-shrink: 0;
} }
.batch-delete-item-name{ .batch-delete-item-name{
margin-left: 14px; margin-left: 14px;
flex: 1; flex: 1;
flex-shrink: 0;
width: calc(100% - 190px);
.tree-body-children:nth-of-type(1){ .tree-body-children:nth-of-type(1){
margin-top: 10px; margin-top: 10px;
} }
@@ -73,7 +76,7 @@
} }
.batch-delete-item-text{ .batch-delete-item-text{
display: inline-block; display: inline-block;
width: calc(100% - 40px); width: calc(100% - 75px);
vertical-align: middle; vertical-align: middle;
} }
.el-checkbox-group{ .el-checkbox-group{

View File

@@ -17,7 +17,7 @@
v-if="dialogVisible" v-if="dialogVisible"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
@close='handleClose' @close='handleClose'
width="460px" width="660px"
:modal-append-to-body="true" :modal-append-to-body="true"
:append-to-body="true" :append-to-body="true"
> >
@@ -39,7 +39,7 @@
<div class="batch-delete-tree"> <div class="batch-delete-tree">
<div class="tree-header tree-body-item"> <div class="tree-header tree-body-item">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange" v-if="!finish"></el-checkbox> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange" v-if="!finish"></el-checkbox>
<div class="batch-delete-item-id" v-if="idShow">Id</div> <div class="batch-delete-item-id" v-if="idShow">ID</div>
<div class="batch-delete-item-name">{{$t('overall.name')}}</div> <div class="batch-delete-item-name">{{$t('overall.name')}}</div>
</div> </div>
<el-checkbox-group v-model="idStr" @change="checkedChange"> <el-checkbox-group v-model="idStr" @change="checkedChange">
@@ -48,17 +48,17 @@
<el-checkbox :key="item.id" :label="item.id" v-if="!finish"></el-checkbox> <el-checkbox :key="item.id" :label="item.id" v-if="!finish"></el-checkbox>
<div class="batch-delete-item-id" v-if="idShow">{{item.id}}</div> <div class="batch-delete-item-id" v-if="idShow">{{item.id}}</div>
<div class="batch-delete-item-name" @click="showChild(item)"> <div class="batch-delete-item-name" @click="showChild(item)">
<i class="nz-icon nz-icon-caret-right" :class="item.showChildren ? 'rotate90': '' " v-if="item.relates" /> <i class="nz-icon nz-icon-caret-right" :class="item.showChildren ? 'rotate90': '' " :style="item.relates && item.relates.length ? '': 'opacity: 0'"/>
<i :class="selectIcon(item.type)"/> <i :class="selectIcon(item.type)"/>
<span class="text-ellipsis batch-delete-item-text" :title="item.name">{{item.name}}</span> <span class="text-ellipsis batch-delete-item-text" :title="item.name">{{item.name}}</span>
<el-collapse-transition> <el-collapse-transition>
<div v-show="item.showChildren"> <div v-show="item.showChildren && item.relates.length">
<div v-for="(relate,i) in item.relates" :key = 'i' class="tree-body-item tree-body-children" @click="showChild(relate)"> <div v-for="(relate,i) in item.relates" :key = 'i' class="tree-body-item tree-body-children" @click="showChild(relate)">
<i class="nz-icon nz-icon-caret-right" :class="relate.showChildren ? 'rotate90': '' " v-if="relate.relates" /> <i class="nz-icon nz-icon-caret-right" :class="relate.showChildren ? 'rotate90': '' " :style="relate.relates && relate.relates.length ? '' : 'opacity: 0'"/>
<i :class="selectIcon(relate.type)"/> <i :class="selectIcon(relate.type)"/>
<span class="text-ellipsis batch-delete-item-text" :title="relate.name"> {{relate.name}}</span> <span class="text-ellipsis batch-delete-item-text" :title="relate.name"> {{relate.name}}</span>
<div class="text-ellipsis batch-delete-item-text" :title="relate.name"> <div class="text-ellipsis batch-delete-item-text" :title="relate.name" v-if="relate.showChildren && relate.relates.length">
<div v-for="(cildren,j) in relate.relates" :key = 'j' class="tree-body-item tree-body-children" v-if="relate.showChildren"> <div v-for="(cildren,j) in relate.relates" :key = 'j' class="tree-body-item tree-body-children" :style="j === relate.relates.length-1?'margin-bottom: 0':''">
<i :class="selectIcon(cildren.type)"/> <i :class="selectIcon(cildren.type)"/>
<span class="text-ellipsis batch-delete-item-text" :title="cildren.name">{{cildren.name}}</span> <span class="text-ellipsis batch-delete-item-text" :title="cildren.name">{{cildren.name}}</span>
</div> </div>
@@ -214,6 +214,9 @@ export default {
}, },
showChild (item, e) { showChild (item, e) {
e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble = true
if (item.relates && !item.relates.length) {
return
}
item.showChildren = !item.showChildren item.showChildren = !item.showChildren
}, },
selectIcon (type) { selectIcon (type) {

View File

@@ -475,15 +475,21 @@ export default {
this.editTagObj.value = this.editDialogObj.value this.editTagObj.value = this.editDialogObj.value
const findItem = this.selectArr.find(item => item.key === this.editTagObj.key) const findItem = this.selectArr.find(item => item.key === this.editTagObj.key)
if (findItem) { if (findItem) {
this.selectArr.splice(this.editTagIndex, 1)
console.log(findItem, this.editDialogObj.value)
findItem.value = findItem.value.concat(this.editDialogObj.value)
findItem.value = findItem.value.filter(function (item, index) {
return findItem.value.indexOf(item) === index // 因为indexOf 只能查找到第一个
})
console.log(findItem.value)
} else { } else {
this.selectArr[this.editTagIndex] = this.$loadsh.cloneDeep(this.editTagObj) this.selectArr[this.editTagIndex] = this.$loadsh.cloneDeep(this.editTagObj)
} }
}, },
querySearch (queryString, cb) { querySearch (queryString, cb) {
const restaurants = this.oldSearchList.map(item => item.name) const restaurants = this.oldSearchList.map(item => { return { value: item.name } })
console.log(restaurants) console.log(restaurants)
const results = queryString ? restaurants.filter(name => name.indexOf(queryString) !== -1) : restaurants const results = queryString ? restaurants.filter(name => name.value.indexOf(queryString) !== -1) : restaurants
console.log(results) console.log(results)
cb(results) cb(results)
}, },

View File

@@ -12,7 +12,7 @@
<div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right"> <div :class="{'top-tool-main-right-to-left': bottomBox.showSubList}" class="top-tool-right">
<div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20" :class="{'project-search alert-table asset-table endpoint-table': searchRight}"> <div v-if="showLayout.indexOf('searchInput') > -1" class="top-tool-search margin-r-20" :class="{'project-search alert-table asset-table endpoint-table': searchRight}">
<search-input ref="searchInput" :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input> <search-input ref="searchInput" :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-input>
<search-box :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-box> <!-- <search-box :from="from" :position='from' :inTransform="bottomBox.inTransform" :searchMsg="searchMsg" @search="search"></search-box>-->
</div> </div>
<slot name="top-tool-right"></slot> <slot name="top-tool-right"></slot>
<button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn table-column-setting" <button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn table-column-setting"