船期维护
parent
458d85d8ed
commit
b35d85d615
@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<a-popover v-model="visible" placement="bottom" trigger="click">
|
||||
<template slot="content">
|
||||
<div class="box">
|
||||
<div class="s-tool-column-header s-tool-column-item fiex-top" style="height: 30px;">
|
||||
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 列展示
|
||||
</a-checkbox>
|
||||
<a-input
|
||||
@change="handleSearch"
|
||||
size="small"
|
||||
allowClear
|
||||
v-model="search"
|
||||
style="width: 100px;margin-right: 10px;" />
|
||||
<a @click="reset">重置</a>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="ant-checkbox-group">
|
||||
<div>
|
||||
<draggable v-model="columnsSetting" animation="300">
|
||||
<div
|
||||
class="s-tool-column-item"
|
||||
v-for="item in columnsSetting"
|
||||
:key="`${item.title}tableColumnSetting`"
|
||||
v-show="item.show">
|
||||
<div class="s-tool-column-handle">
|
||||
<a-icon type="more" />
|
||||
<a-icon type="more" />
|
||||
<!-- <a-icon type="fullscreen" /> -->
|
||||
</div>
|
||||
<a-checkbox v-model="item.checked" @change="onChange">{{ item.title }}</a-checkbox>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fiex-down">
|
||||
<a-button type="primary" size="small" style="margin-right: 15px;" @click="handleSure">确定</a-button>
|
||||
<a-button type="danger" size="small" @click="visible = false">关闭</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<span class="tab-btn">
|
||||
<a-icon type="setting" :style="{ fontSize: '14px' }" />
|
||||
</span>
|
||||
</a-popover>
|
||||
</template>
|
||||
<script>
|
||||
import draggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
columnsAll: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
draggable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indeterminate: false,
|
||||
checkAll: true,
|
||||
visible: false,
|
||||
search: '',
|
||||
columnsSetting: [],
|
||||
originColumns: [],
|
||||
oldColumnsAll: [],
|
||||
columnsAllSearch: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
columns: {
|
||||
deep: true,
|
||||
handler(nD, oD) {
|
||||
this.columnsAll.forEach(item => {
|
||||
item.checked = false
|
||||
item.sortIndex = 999
|
||||
item.show = true
|
||||
nD.forEach((ite, index) => {
|
||||
if (item.field) {
|
||||
if (item.field === ite.field) {
|
||||
item.checked = true
|
||||
item.sortIndex = index
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
this.oldColumnsAll = JSON.parse(JSON.stringify(this.columnsAll))
|
||||
this.columnsAll = this.columnsAll.sort(this.topSort)
|
||||
this.columnsSetting = this.columnsAll.map(value => ({
|
||||
...value,
|
||||
checked: value.checked === undefined || value.checked
|
||||
}))
|
||||
this.columnsAllSearch = JSON.parse(JSON.stringify(this.columnsSetting))
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
reset() {
|
||||
this.columnsSetting = this.columnsAllSearch.map(value => ({
|
||||
...value,
|
||||
checked: value.checked
|
||||
}))
|
||||
},
|
||||
topSort(a, b) {
|
||||
return Number(a.sortIndex) - Number(b.sortIndex);
|
||||
},
|
||||
onChange() {
|
||||
const checkedList = this.columnsSetting.filter(value => value.checked)
|
||||
this.indeterminate = !!checkedList.length && checkedList.length < this.columnsSetting.length
|
||||
this.checkAll = checkedList.length === this.columnsSetting.length
|
||||
},
|
||||
handleSure() {
|
||||
const arr = []
|
||||
this.columnsSetting.forEach(item => {
|
||||
if (item.checked) {
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
this.$emit('columnChange', arr)
|
||||
this.visible = false
|
||||
},
|
||||
handleSearch(val) {
|
||||
if (this.search) {
|
||||
this.columnsSetting.forEach(item => {
|
||||
item.show = false
|
||||
if (item.title.includes(this.search)) {
|
||||
item.show = true
|
||||
}
|
||||
})
|
||||
this.$forceUpdate()
|
||||
} else {
|
||||
this.columnsSetting.forEach(item => {
|
||||
item.show = true
|
||||
})
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
onCheckAllChange(e) {
|
||||
const val = e.target.checked
|
||||
Object.assign(this, {
|
||||
indeterminate: false,
|
||||
checkAll: val,
|
||||
columnsSetting: this.columnsAll.map(value => ({ ...value, checked: val }))
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fiex-top {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: white;
|
||||
z-index: 99;
|
||||
}
|
||||
.tab-btn {
|
||||
padding: 6px 9px;
|
||||
border: 1px solid #c7c7c9;
|
||||
background: #f9fafe;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
cursor: pointer;
|
||||
-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
|
||||
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
|
||||
-webkit-user-select: 0 2px 0 rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
|
||||
.fiex-down {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: white;
|
||||
z-index: 99;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
|
||||
.box {
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 10px 0;
|
||||
height: 1px;
|
||||
background: #eee;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
|
||||
.s-tool-column-item {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.s-tool-column {
|
||||
min-width: 140px;
|
||||
|
||||
a {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.s-tool-column-handle {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
text-align: left;
|
||||
margin-left: -5px;
|
||||
margin-right: 5px;
|
||||
|
||||
.anticon-more {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.anticon-fullscreen {
|
||||
transform: rotate(45deg) scale(0.7);
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue