NEZ-3031 feat：批量删除样式调整
This commit is contained in:
zyh
@@ -1,4 +1,8 @@
|
|||||||
.configSync-dialog{
|
.configSync-dialog{
|
||||||
|
.el-dialog__title{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
.dialog-header {
|
.dialog-header {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@@ -69,20 +73,17 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.el-dialog__footer{
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
.sync-select-list{
|
.sync-select-list{
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
padding-bottom: 15px;
|
|
||||||
.sync-select-item{
|
.sync-select-item{
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
.el-checkbox__input.is-checked+.el-checkbox__label{
|
.el-checkbox__label{
|
||||||
color: $--checkbox-font-color !important;
|
color: $--checkbox-font-color !important;
|
||||||
|
padding-left: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-dialog__footer{
|
|
||||||
.footer__btn{
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,12 +1,9 @@
|
|||||||
.batch-delete-footer{
|
|
||||||
box-shadow: none !important;
|
|
||||||
height: auto !important;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between !important;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
.batch-delete-dialog{
|
.batch-delete-dialog{
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
.el-dialog__title{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
.dialog-header {
|
.dialog-header {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@@ -27,80 +24,97 @@
|
|||||||
.el-dialog__body {
|
.el-dialog__body {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
.tree-header{
|
.batch-delete-tree{
|
||||||
background: $--background-color-base;
|
border: 1px solid $--border-color-light;
|
||||||
padding: 7px 10px 7px 0px;
|
.tree-header{
|
||||||
font-weight: 600;
|
background: $--background-color-base;
|
||||||
.batch-delete-item-id, .batch-delete-item-name{
|
padding: 7px 10px 7px 0px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
.batch-delete-item-id, .batch-delete-item-name{
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
.tree-body{
|
||||||
.tree-body{
|
box-sizing: content-box;
|
||||||
//min-height: 160px;
|
padding-top: 10px;
|
||||||
//max-height: 220px;
|
height: 160px;
|
||||||
height: 160px;
|
overflow-y: auto;
|
||||||
overflow-y: auto;
|
}
|
||||||
}
|
.tree-body-item{
|
||||||
.tree-body-item{
|
display: flex;
|
||||||
display: flex;
|
width: 100%;
|
||||||
width: 100%;
|
font-size: 14px;
|
||||||
font-size: 14px;
|
color: $--color-text-primary;
|
||||||
color: $--color-text-primary;
|
font-weight: 400;
|
||||||
font-weight: 400;
|
margin-bottom: 10px;
|
||||||
margin-bottom: 10px;
|
padding-left: 10px;
|
||||||
padding-left: 10px;
|
box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
line-height: 22px;
|
||||||
line-height: 22px;
|
.nz-icon{
|
||||||
.nz-icon{
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.batch-delete-item-id{
|
||||||
|
margin-left: 28px;
|
||||||
|
margin-right: 28px;
|
||||||
|
width: 100px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.batch-delete-item-name{
|
||||||
|
margin-left: 14px;
|
||||||
|
flex: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: calc(100% - 190px);
|
||||||
|
.tree-body-children:nth-of-type(1){
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tree-body-children{
|
||||||
|
padding-left: 25px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.batch-delete-item-text{
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 45px);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.batch-delete-item-id{
|
.el-checkbox-group{
|
||||||
margin-left: 28px;
|
font-size: 14px;
|
||||||
margin-right: 28px;
|
.el-checkbox__label{
|
||||||
width: 100px;
|
display: none;
|
||||||
transition: all 0.3s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.batch-delete-item-name{
|
|
||||||
margin-left: 14px;
|
|
||||||
flex: 1;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: calc(100% - 190px);
|
|
||||||
.tree-body-children:nth-of-type(1){
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.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;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tree-body-children{
|
.el-dialog__footer{
|
||||||
padding-left: 25px;
|
padding-top: 20px;
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
.batch-delete-item-text{
|
.forceDelete-check{
|
||||||
display: inline-block;
|
padding-top: 10px;
|
||||||
width: calc(100% - 45px);
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.el-checkbox-group{
|
|
||||||
font-size: 14px;
|
|
||||||
.el-checkbox__label{
|
.el-checkbox__label{
|
||||||
display: none;
|
color: $--checkbox-font-color !important;
|
||||||
|
padding-left: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.nz-icon-caret-right{
|
}
|
||||||
display:inline-block;
|
.batch-delete-footer{
|
||||||
transition: all 0.3s;
|
box-shadow: none !important;
|
||||||
color: $--border-color-base-focus;
|
height: auto !important;
|
||||||
}
|
display: flex;
|
||||||
.rotate90 {
|
justify-content: space-between !important;
|
||||||
display:inline-block;
|
flex-direction: row-reverse;
|
||||||
transform: rotate(90deg);
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
.check-title{
|
|
||||||
color: $--color-text-regular;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.delete-button{
|
.delete-button{
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
|||||||
@@ -36,7 +36,6 @@
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
.nz-btn-size-normal.nz-btn-style-light {
|
.nz-btn-size-normal.nz-btn-style-light {
|
||||||
font-size: 12px;
|
|
||||||
color: #3C92F1;
|
color: #3C92F1;
|
||||||
i {
|
i {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|||||||
@@ -1277,8 +1277,9 @@ li {
|
|||||||
.import-select-list{
|
.import-select-list{
|
||||||
.import-select-item{
|
.import-select-item{
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
.el-checkbox__input.is-checked+.el-checkbox__label{
|
.el-checkbox__label{
|
||||||
color: $--checkbox-font-color !important;
|
color: $--checkbox-font-color !important;
|
||||||
|
padding-left: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,8 +43,8 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div slot="footer">
|
<div slot="footer">
|
||||||
<button @click="dialogVisible = false" class="footer__btn footer__btn--light">{{$t("overall.cancel")}}</button>
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="dialogVisible = false">{{$t("overall.cancel")}}</button>
|
||||||
<button @click="configSync" class="footer__btn" :class="{'nz-btn-disabled': prevent_opt.save||!idArr.length}" :disabled="prevent_opt.save||!idArr.length">{{$t('overall.synchronize')}}</button>
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': prevent_opt.save||!idArr.length}" :disabled="prevent_opt.save||!idArr.length" @click="configSync">{{$t('overall.synchronize')}}</button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,11 +13,11 @@
|
|||||||
ref="batchDeleteDialog"
|
ref="batchDeleteDialog"
|
||||||
id="batch-delete-dialog"
|
id="batch-delete-dialog"
|
||||||
class="batch-delete-dialog"
|
class="batch-delete-dialog"
|
||||||
:title="$t('deleteButton.confirm')"
|
:title="$t('overall.hint')"
|
||||||
v-if="dialogVisible"
|
v-if="dialogVisible"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
@close='handleClose'
|
@close='handleClose'
|
||||||
width="660px"
|
width="580px"
|
||||||
:modal-append-to-body="true"
|
:modal-append-to-body="true"
|
||||||
:append-to-body="true"
|
:append-to-body="true"
|
||||||
>
|
>
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
<i class="nz-icon nz-icon-import-success1"></i>
|
<i class="nz-icon nz-icon-import-success1"></i>
|
||||||
<span>{{$t('batch.finish', {title: $t(deleteTitle)})}}</span>
|
<span>{{$t('batch.finish', {title: $t(deleteTitle)})}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="batch-delete-tree">
|
<div class="batch-delete-tree" :style="{marginBottom:finish?'40px':0}">
|
||||||
<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>
|
||||||
@@ -71,17 +71,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="!finish&&forceDeleteShow" class="forceDelete-check">
|
||||||
|
<el-checkbox v-model="forceDelete" text-color="black" name="type" :true-label="1" :false-label="0">{{$t('batch.forceDelete')}}</el-checkbox>
|
||||||
|
</div>
|
||||||
<!-- 底部按钮 -->
|
<!-- 底部按钮 -->
|
||||||
<span slot="footer" class="dialog-footer right-box__footer batch-delete-footer" v-if="!finish">
|
<div slot="footer" class="dialog-footer" v-if="!finish">
|
||||||
<div>
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10" @click="dialogVisible = false">{{$t('tip.no')}}</button>
|
||||||
<button id="batch-delete-cancel" class="footer__btn footer__btn--light" style="margin-top: 8px;" type="button" @click="dialogVisible = false">{{$t('tip.no')}}</button>
|
<button class="nz-btn nz-btn-size-normal nz-btn-style-error" :class="{'nz-btn-disabled': prevent_opt.save||!idStr.length}" :disabled="prevent_opt.save||!idStr.length" @click="batchDeleteYes">{{$t('overall.delete')}}</button>
|
||||||
<button id="batch-delete-next" class="footer__btn" type="button" @click="batchDeleteYes">{{$t('tip.yes')}}</button>
|
</div>
|
||||||
</div>
|
|
||||||
<div v-if="forceDeleteShow">
|
|
||||||
<el-checkbox v-model="forceDelete" text-color="black" name="type" :true-label="1" :false-label="0"></el-checkbox>
|
|
||||||
<span class="check-title">{{$t('batch.forceDelete')}}</span>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -187,7 +187,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<div slot="footer">
|
<div slot="footer">
|
||||||
<button @click="snmpSetFormVisible = false" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-20">{{$t("overall.cancel")}}</button>
|
<button @click="snmpSetFormVisible = false" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-r-10">{{$t("overall.cancel")}}</button>
|
||||||
<button @click="search(true)" class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': loading}" :disabled="loading">{{$t('el.datepicker.confirm')}}</button>
|
<button @click="search(true)" class="nz-btn nz-btn-size-normal nz-btn-style-normal" :class="{'nz-btn-disabled': loading}" :disabled="loading">{{$t('el.datepicker.confirm')}}</button>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|||||||
Reference in New Issue
Block a user