| | |
| | | <el-tooltip class="item" effect="dark" content="刷新" placement="top"> |
| | | <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" /> |
| | | </el-tooltip> |
| | | <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns"> |
| | | <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="Object.keys(columns).length > 0"> |
| | | <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/> |
| | | <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'"> |
| | | <el-button size="mini" circle icon="el-icon-menu" /> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import cache from '@/plugins/cache' |
| | | |
| | | export default { |
| | | name: "RightToolbar", |
| | | data() { |
| | |
| | | }, |
| | | /* 显隐列信息(数组格式、对象格式) */ |
| | | columns: { |
| | | type: [Array, Object] |
| | | type: [Array, Object], |
| | | default: () => ({}) |
| | | }, |
| | | /* 是否显示检索图标 */ |
| | | search: { |
| | |
| | | type: Number, |
| | | default: 10 |
| | | }, |
| | | /* 列显隐状态记忆的 localStorage key(传入则启用记忆,不传则不记忆) */ |
| | | storageKey: { |
| | | type: String, |
| | | default: "" |
| | | } |
| | | }, |
| | | computed: { |
| | | style() { |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | // 如果传入了 storageKey,从 localStorage 恢复列显隐状态 |
| | | if (this.storageKey) { |
| | | try { |
| | | const saved = cache.local.getJSON(this.storageKey) |
| | | if (saved && typeof saved === 'object') { |
| | | if (Array.isArray(this.columns)) { |
| | | this.columns.forEach((col, index) => { |
| | | if (saved[index] !== undefined) col.visible = saved[index] |
| | | }) |
| | | } else { |
| | | Object.keys(this.columns).forEach(key => { |
| | | if (saved[key] !== undefined) this.columns[key].visible = saved[key] |
| | | }) |
| | | } |
| | | } |
| | | } catch (e) {} |
| | | } |
| | | if (this.showColumnsType == 'transfer') { |
| | | // transfer穿梭显隐列初始默认隐藏列 |
| | | if (Array.isArray(this.columns)) { |
| | |
| | | methods: { |
| | | // 搜索 |
| | | toggleSearch() { |
| | | this.$emit("update:showSearch", !this.showSearch) |
| | | let el = this.$el |
| | | let formEl = null |
| | | while ((el = el.parentElement) && el !== document.body) { |
| | | if ((formEl = el.querySelector('.el-form'))) break |
| | | } |
| | | if (!formEl) return this.$emit('update:showSearch', !this.showSearch) |
| | | this._animateSearch(formEl, this.showSearch) |
| | | }, |
| | | // 搜索栏动画 |
| | | _animateSearch(el, isHide) { |
| | | const DURATION = 260 |
| | | const TRANSITION = 'max-height 0.25s ease, opacity 0.2s ease' |
| | | const clear = () => Object.assign(el.style, { transition: '', maxHeight: '', opacity: '', overflow: '' }) |
| | | Object.assign(el.style, { overflow: 'hidden', transition: '' }) |
| | | if (isHide) { |
| | | Object.assign(el.style, { maxHeight: el.scrollHeight + 'px', opacity: '1', transition: TRANSITION }) |
| | | requestAnimationFrame(() => Object.assign(el.style, { maxHeight: '0', opacity: '0' })) |
| | | setTimeout(() => { this.$emit('update:showSearch', false); clear() }, DURATION) |
| | | } else { |
| | | this.$emit('update:showSearch', true) |
| | | this.$nextTick(() => { |
| | | Object.assign(el.style, { maxHeight: '0', opacity: '0' }) |
| | | requestAnimationFrame(() => requestAnimationFrame(() => { |
| | | Object.assign(el.style, { transition: TRANSITION, maxHeight: el.scrollHeight + 'px', opacity: '1' }) |
| | | })) |
| | | setTimeout(clear, DURATION) |
| | | }) |
| | | } |
| | | }, |
| | | // 刷新 |
| | | refresh() { |
| | |
| | | this.columns[key].visible = !data.includes(index) |
| | | }) |
| | | } |
| | | this.saveStorage() |
| | | }, |
| | | // 打开显隐列dialog |
| | | showColumn() { |
| | |
| | | } else { |
| | | this.columns[key].visible = event |
| | | } |
| | | this.saveStorage() |
| | | }, |
| | | // 切换全选/反选 |
| | | toggleCheckAll() { |
| | |
| | | } else { |
| | | Object.values(this.columns).forEach((col) => (col.visible = newValue)) |
| | | } |
| | | this.saveStorage() |
| | | }, |
| | | // 将当前列显隐状态持久化到 localStorage |
| | | saveStorage() { |
| | | if (!this.storageKey) return |
| | | try { |
| | | let state = {} |
| | | if (Array.isArray(this.columns)) { |
| | | this.columns.forEach((col, index) => { state[index] = col.visible }) |
| | | } else { |
| | | Object.keys(this.columns).forEach(key => { state[key] = this.columns[key].visible }) |
| | | } |
| | | cache.local.setJSON(this.storageKey, state) |
| | | } catch (e) {} |
| | | } |
| | | }, |
| | | } |