From 87e3d52c62233ad44bd7bac3f43e5348a2de4e94 Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期一, 25 十一月 2024 10:36:16 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/VisibilityToolbar/index.vue | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 173 insertions(+), 0 deletions(-)
diff --git a/src/components/VisibilityToolbar/index.vue b/src/components/VisibilityToolbar/index.vue
new file mode 100644
index 0000000..2773bb6
--- /dev/null
+++ b/src/components/VisibilityToolbar/index.vue
@@ -0,0 +1,173 @@
+<template>
+ <div class="top-right-btn">
+ <el-row>
+ <el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '闅愯棌鎼滅储' : '鏄剧ず鎼滅储'" placement="top">
+ <el-button size="small" circle icon="el-icon-search" @click="toggleSearch"></el-button>
+ </el-tooltip>
+ <el-tooltip class="item" effect="dark" content="鍒锋柊" placement="top">
+ <el-button size="small" circle icon="el-icon-refresh" @click="refresh"></el-button>
+ </el-tooltip>
+ <el-tooltip v-if="columns" class="item" effect="dark" content="鏄剧ず/闅愯棌鍒�" placement="top">
+ <el-button size="small" circle icon="el-icon-menu" @click="openDrawer"></el-button>
+ </el-tooltip>
+ </el-row>
+
+ <el-drawer
+ :visible.sync="table"
+ title="淇℃伅鏄鹃殣绛涢��"
+ size="30%"
+ append-to-body
+ :wrapperCLosable="false"
+ :with-header="true">
+ <div slot="header">
+ <span>淇℃伅鏄鹃殣绛涢��</span>
+ </div>
+ <div slot="default" style="margin-left: 20px;margin-top: 20px">
+ <el-table :data="pagedColumns" style="width: 95%; height: 80%;;margin-bottom: 40px;">
+ <el-table-column prop="index" label="搴忓彿" width="80"></el-table-column>
+ <el-table-column prop="label" label="鏁版嵁鍚嶇О"></el-table-column>
+ <el-table-column prop="visible" label="鏄惁鏄剧ず">
+ <template slot-scope="scope">
+ <el-switch
+ v-model="scope.row.visible"
+ class="ml-2"
+ active-color="#13ce66"
+ inactive-color="#ff4949"
+ @change="switchChange(scope.row)"
+ ></el-switch>
+ </template>
+ </el-table-column>
+ <el-table-column prop="date" label="鎺掑簭">
+ <template slot-scope="scope">
+ <el-input-number v-model="scope.row.serialNumber" :min="0" style="width: 120px" @change="sortChange(scope.row, $event)"></el-input-number>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-pagination
+ v-if="total > pageSize"
+ :page-size="pageSize"
+ :current-page="currentPage"
+ :total="total"
+ layout="total, prev, pager, next"
+ @current-change="handlePageChange"
+ ></el-pagination>
+ </div>
+ <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; text-align: right;">
+ <el-button @click="table = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="resetSort">閲� 缃�</el-button>
+ </div>
+ </el-drawer>
+ </div>
+</template>
+
+<script>
+
+export default {
+ data() {
+ return {
+ table: false,
+ currentPage: 1,
+ columnRef: null,
+ };
+ },
+ props: {
+ showSearch: {
+ type: Boolean,
+ default: true,
+ },
+ columns: {
+ type: Array,
+ default: () => [],
+ },
+ search: {
+ type: Boolean,
+ default: false,
+ },
+ gutter: {
+ type: Number,
+ default: 10,
+ },
+ },
+ computed: {
+ style() {
+ return {
+ marginRight: this.gutter ? `${this.gutter / 2}px` : '',
+ };
+ },
+ pageSize() {
+ return 10;
+ },
+ total() {
+ return this.columns.length;
+ },
+ pagedColumns() {
+ const start = (this.currentPage - 1) * this.pageSize;
+ const end = start + this.pageSize;
+ return this.columns.slice(start, end);
+ },
+ },
+ methods: {
+ toggleSearch() {
+ this.$emit('update:showSearch', !this.showSearch);
+ },
+ refresh() {
+ this.$emit('queryTable');
+ },
+ openDrawer() {
+ this.table = true;
+ },
+ switchChange(row) {
+ this.$emit('update:columns', row);
+ },
+ handlePageChange(page) {
+ this.currentPage = page;
+ },
+ sortChange(row, val) {
+ this.$emit('update:sort', { key: row.key, serialNumber: val });
+ },
+ resetSort() {
+ this.$emit('update:resetSort');
+ },
+ },
+ mounted() {
+ this.columns.forEach((item, index) => {
+ if (item.visible) {
+
+ }
+ });
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-transfer__button) {
+ border-radius: 50%;
+ display: block;
+ margin-left: 0px;
+}
+:deep(.el-transfer__button:first-child) {
+ margin-bottom: 10px;
+}
+
+.my-el-transfer {
+ text-align: center;
+}
+.tree-header {
+ width: 100%;
+ line-height: 24px;
+ text-align: center;
+}
+.show-btn {
+ margin-left: 12px;
+}
+.drawer-footer {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px;
+ background: #fff;
+ border-top: 1px solid #e8e8e8;
+ text-align: right;
+}
+</style>
--
Gitblit v1.8.0