feat: asset相关先提交一部分，公共样式
This commit is contained in:
chenjinsong
318
nezha-fronted/src/components/common/nzTransfer.vue
Normal file
318
nezha-fronted/src/components/common/nzTransfer.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="nz-transfer">
|
||||
<div :style="calcStyle" class="nz-transfer__box nz-transfer__box--left">
|
||||
<div class="box__header">
|
||||
<search-input
|
||||
ref="searchInput"
|
||||
:placeholder="$t('overall.placeHolder')"
|
||||
:search-msg="searchMsg"
|
||||
:show-history="false"
|
||||
:show-search="false"
|
||||
style="width:100%"
|
||||
@search="search"
|
||||
></search-input>
|
||||
</div>
|
||||
<div class="box__table">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="selectableData"
|
||||
:row-class-name="setRowShow"
|
||||
height="100%"
|
||||
size="small"
|
||||
@selection-change="selectableSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="36">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('overall.name')"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.name}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('asset.host')"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.manageIp}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="box__footer">
|
||||
<el-pagination
|
||||
:current-page.sync="selectablePage.pageNo"
|
||||
:page-size="selectablePage.pageSize"
|
||||
:total="selectablePage.total"
|
||||
layout="prev, slot, next"
|
||||
small
|
||||
>
|
||||
<template>
|
||||
<el-input ref="jumpInput" v-model="selectablePage.pageNo" class="jump-input" @change="selectableChange" @keyup.enter.native="selectableChange"/>
|
||||
<span class="jump-pages">/ {{selectablePage.pages}}</span>
|
||||
</template>
|
||||
</el-pagination>
|
||||
<button :class="{'top-tool-btn--disabled': selectableSelection.length === 0}"
|
||||
class="top-tool-btn"
|
||||
type="button"
|
||||
@click="leftToRight">
|
||||
<i class="nz-icon nz-icon-arrow-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div :style="calcStyle" class="nz-transfer__box nz-transfer__box--right">
|
||||
<div class="box__header">
|
||||
<slot name="title"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="box__table">
|
||||
<el-table
|
||||
:data="selectedData"
|
||||
height="100%"
|
||||
size="small"
|
||||
@selection-change="selectedSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:resizable="false"
|
||||
align="center"
|
||||
type="selection"
|
||||
width="36">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('overall.name')"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.name}}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
:label="$t('asset.host')"
|
||||
>
|
||||
<template slot-scope="scope">{{scope.row.host}}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="box__footer">
|
||||
<button :class="{'top-tool-btn--disabled': selectedSelection.length === 0}"
|
||||
:disabled="selectedSelection.length === 0"
|
||||
class="top-tool-btn"
|
||||
type="button"
|
||||
@click="rightToLeft">
|
||||
<i class="nz-icon nz-icon-arrow-left"></i>
|
||||
</button>
|
||||
<!-- <el-pagination
|
||||
:current-page.sync="selectedPage.pageNo"
|
||||
:page-size="selectedPage.pageSize"
|
||||
:total="selectedPage.total"
|
||||
layout="prev, slot, next"
|
||||
small
|
||||
>
|
||||
<template>
|
||||
<el-input ref="jumpInput" class="jump-input" v-model="selectedPage.pageNo" @change="selectedChange" @keyup.enter.native="selectedChange"/>
|
||||
<span class="jump-pages">/ {{selectedPage.pages}}</span>
|
||||
</template>
|
||||
</el-pagination>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'nzTransfer',
|
||||
props: {
|
||||
height: {
|
||||
type: String,
|
||||
default: '430'
|
||||
},
|
||||
tableData: { // 左侧待选
|
||||
type: Array
|
||||
},
|
||||
searchMsg: {
|
||||
type: Object
|
||||
},
|
||||
pageObj: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedData: [], // 右侧已选
|
||||
searchLabel: {},
|
||||
loading: false,
|
||||
selectablePage: {},
|
||||
selectedPage: {
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
total: 0,
|
||||
pages: 0
|
||||
},
|
||||
selectableSelection: [],
|
||||
selectedSelection: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectableData () {
|
||||
return this.tableData.filter(d => {
|
||||
return !this.selectedData.find(s => d.id === s.id)
|
||||
})
|
||||
},
|
||||
calcStyle () {
|
||||
const style = {}
|
||||
let height
|
||||
if (parseInt(this.height)) {
|
||||
height = `${this.height}px`
|
||||
} else {
|
||||
height = this.height
|
||||
}
|
||||
style.height = height
|
||||
return style
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search (searchLabel) {
|
||||
this.searchLabel = { ...searchLabel }
|
||||
this.$emit('search', this.searchLabel, this.selectablePage)
|
||||
},
|
||||
selectableChange (current) { // 左侧table翻页
|
||||
this.selectablePage.pageNo = current
|
||||
this.$emit('search', this.searchLabel, this.selectablePage)
|
||||
},
|
||||
selectedChange (current) { // 右侧table翻页
|
||||
|
||||
},
|
||||
selectableSelectionChange (val) { // 左侧选项变化
|
||||
this.selectableSelection = val
|
||||
},
|
||||
selectedSelectionChange (val) { // 右侧选项变化
|
||||
this.selectedSelection = val
|
||||
},
|
||||
leftToRight () {
|
||||
this.$emit('leftToRight', this.selectableSelection)
|
||||
this.selectedData.splice(0, 0, ...this.selectableSelection)
|
||||
},
|
||||
rightToLeft () {
|
||||
this.$emit('rightToLeft', this.selectedSelection)
|
||||
this.selectedData = this.selectedData.filter(d => !this.selectedSelection.find(s => d.id === s.id))
|
||||
console.info(this.selectableSelection)
|
||||
console.info(this.selectedData)
|
||||
},
|
||||
startLoading () {
|
||||
this.loading = true
|
||||
},
|
||||
endLoading () {
|
||||
this.loading = false
|
||||
},
|
||||
setRowShow ({ row }) {
|
||||
if (this.tableData.some(d => d.hide && row.id === d.id)) {
|
||||
return 'hide-row'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
pageObj: {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.selectablePage = { ...n }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/assets/css/common/tableCommon.scss';
|
||||
.nz-transfer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.nz-transfer__box {
|
||||
width: calc(50% - 7.5px);
|
||||
border: 1px solid $--right-box-border-color;
|
||||
border-radius: $--primary-border-radius;
|
||||
|
||||
.box__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
height: 52px;
|
||||
color: #666;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
input {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.box__table {
|
||||
height: calc(100% - 94px);
|
||||
border-bottom: 1px solid $--right-box-border-color;
|
||||
|
||||
.el-table--border::after, .el-table--group::after, .el-table::before {
|
||||
height: 0;
|
||||
}
|
||||
.el-table__row {
|
||||
td {
|
||||
border-color: $--right-box-border-color;
|
||||
|
||||
&:first-of-type .cell {
|
||||
text-overflow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px 1px;
|
||||
height: 42px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.jump-input {
|
||||
width: 40px;
|
||||
|
||||
.el-input__inner {
|
||||
padding: 0 5px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.jump-pages {
|
||||
padding-left: 9px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.top-tool-btn {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.el-pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
.btn-prev, .btn-next {
|
||||
border: none;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.btn-prev {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.btn-next {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hide-row {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user