From 3c4fee1db116c11d4f04727cfe076d7c94daeaf2 Mon Sep 17 00:00:00 2001
From: yanzhaofeige <yanzhaofeige@qq.com>
Date: Mon, 30 Sep 2024 12:10:57 +0800
Subject: [PATCH] init
---
cpzidc-ui/src/components/RightToolbar/index.vue | 129 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 129 insertions(+), 0 deletions(-)
diff --git a/cpzidc-ui/src/components/RightToolbar/index.vue b/cpzidc-ui/src/components/RightToolbar/index.vue
new file mode 100644
index 0000000..67da293
--- /dev/null
+++ b/cpzidc-ui/src/components/RightToolbar/index.vue
@@ -0,0 +1,129 @@
+<template>
+ <div class="top-right-btn" :style="style">
+ <el-row>
+ <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
+ <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
+ </el-tooltip>
+ <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-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" />
+ <el-dropdown-menu slot="dropdown">
+ <template v-for="item in columns">
+ <el-dropdown-item :key="item.key">
+ <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+ </el-dropdown-item>
+ </template>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </el-tooltip>
+ </el-row>
+ <el-dialog :title="title" :visible.sync="open" append-to-body>
+ <el-transfer
+ :titles="['显示', '隐藏']"
+ v-model="value"
+ :data="columns"
+ @change="dataChange"
+ ></el-transfer>
+ </el-dialog>
+ </div>
+</template>
+<script>
+export default {
+ name: "RightToolbar",
+ data() {
+ return {
+ // 显隐数据
+ value: [],
+ // 弹出层标题
+ title: "显示/隐藏",
+ // 是否显示弹出层
+ open: false,
+ };
+ },
+ props: {
+ /* 是否显示检索条件 */
+ showSearch: {
+ type: Boolean,
+ default: true,
+ },
+ /* 显隐列信息 */
+ columns: {
+ type: Array,
+ },
+ /* 是否显示检索图标 */
+ search: {
+ type: Boolean,
+ default: true,
+ },
+ /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+ showColumnsType: {
+ type: String,
+ default: "checkbox",
+ },
+ /* 右外边距 */
+ gutter: {
+ type: Number,
+ default: 10,
+ },
+ },
+ computed: {
+ style() {
+ const ret = {};
+ if (this.gutter) {
+ ret.marginRight = `${this.gutter / 2}px`;
+ }
+ return ret;
+ }
+ },
+ created() {
+ if (this.showColumnsType == 'transfer') {
+ // 显隐列初始默认隐藏列
+ for (let item in this.columns) {
+ if (this.columns[item].visible === false) {
+ this.value.push(parseInt(item));
+ }
+ }
+ }
+ },
+ methods: {
+ // 搜索
+ toggleSearch() {
+ this.$emit("update:showSearch", !this.showSearch);
+ },
+ // 刷新
+ refresh() {
+ this.$emit("queryTable");
+ },
+ // 右侧列表元素变化
+ dataChange(data) {
+ for (let item in this.columns) {
+ const key = this.columns[item].key;
+ this.columns[item].visible = !data.includes(key);
+ }
+ },
+ // 打开显隐列dialog
+ showColumn() {
+ this.open = true;
+ },
+ // 勾选
+ checkboxChange(event, label) {
+ this.columns.filter(item => item.label == label)[0].visible = event;
+ }
+ },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-transfer__button {
+ border-radius: 50%;
+ padding: 12px;
+ display: block;
+ margin-left: 0px;
+}
+::v-deep .el-transfer__button:first-child {
+ margin-bottom: 10px;
+}
+</style>
--
Gitblit v1.9.3