From 64d172717748c383a5c88348037354bffd60f966 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 27 五月 2025 17:52:03 +0800
Subject: [PATCH] 页面样式修改
---
src/components/RightToolbar/index.vue | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 157 insertions(+), 0 deletions(-)
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
new file mode 100644
index 0000000..349363c
--- /dev/null
+++ b/src/components/RightToolbar/index.vue
@@ -0,0 +1,157 @@
+<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 circle icon="Search" @click="toggleSearch()" />
+ </el-tooltip>
+ <el-tooltip class="item" effect="dark" content="鍒锋柊" placement="top">
+ <el-button circle icon="Refresh" @click="refresh()" />
+ </el-tooltip>
+ <el-tooltip class="item" effect="dark" content="鏄鹃殣鍒�" placement="top" v-if="columns">
+ <el-button circle 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 circle icon="Menu" />
+ <template #dropdown>
+ <el-dropdown-menu>
+ <!-- 鍏ㄩ��/鍙嶉�� 鎸夐挳 -->
+ <el-dropdown-item>
+ <el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll"> 鍒楀睍绀� </el-checkbox>
+ </el-dropdown-item>
+ <div class="check-line"></div>
+ <template v-for="item in columns" :key="item.key">
+ <el-dropdown-item>
+ <el-checkbox v-model="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+ </el-dropdown-item>
+ </template>
+ </el-dropdown-menu>
+ </template>
+ </el-dropdown>
+ </el-tooltip>
+ </el-row>
+ <el-dialog :title="title" v-model="open" append-to-body>
+ <el-transfer
+ :titles="['鏄剧ず', '闅愯棌']"
+ v-model="value"
+ :data="columns"
+ @change="dataChange"
+ ></el-transfer>
+ </el-dialog>
+ </div>
+</template>
+
+<script setup>
+const props = defineProps({
+ /* 鏄惁鏄剧ず妫�绱㈡潯浠� */
+ showSearch: {
+ type: Boolean,
+ default: true
+ },
+ /* 鏄鹃殣鍒椾俊鎭� */
+ columns: {
+ type: Array
+ },
+ /* 鏄惁鏄剧ず妫�绱㈠浘鏍� */
+ search: {
+ type: Boolean,
+ default: true
+ },
+ /* 鏄鹃殣鍒楃被鍨嬶紙transfer绌挎妗嗐�乧heckbox澶嶉�夋锛� */
+ showColumnsType: {
+ type: String,
+ default: "checkbox"
+ },
+ /* 鍙冲杈硅窛 */
+ gutter: {
+ type: Number,
+ default: 10
+ },
+})
+
+const emits = defineEmits(['update:showSearch', 'queryTable'])
+
+// 鏄鹃殣鏁版嵁
+const value = ref([])
+// 寮瑰嚭灞傛爣棰�
+const title = ref("鏄剧ず/闅愯棌")
+// 鏄惁鏄剧ず寮瑰嚭灞�
+const open = ref(false)
+
+const style = computed(() => {
+ const ret = {}
+ if (props.gutter) {
+ ret.marginRight = `${props.gutter / 2}px`
+ }
+ return ret
+})
+
+// 鏄惁鍏ㄩ��/鍗婇�� 鐘舵��
+const isChecked = computed({
+ get: () => props.columns.every(col => col.visible),
+ set: () => {}
+})
+const isIndeterminate = computed(() => props.columns.some((col) => col.visible) && !isChecked.value)
+
+// 鎼滅储
+function toggleSearch() {
+ emits("update:showSearch", !props.showSearch)
+}
+
+// 鍒锋柊
+function refresh() {
+ emits("queryTable")
+}
+
+// 鍙充晶鍒楄〃鍏冪礌鍙樺寲
+function dataChange(data) {
+ for (let item in props.columns) {
+ const key = props.columns[item].key
+ props.columns[item].visible = !data.includes(key)
+ }
+}
+
+// 鎵撳紑鏄鹃殣鍒梔ialog
+function showColumn() {
+ open.value = true
+}
+
+if (props.showColumnsType == 'transfer') {
+ // 鏄鹃殣鍒楀垵濮嬮粯璁ら殣钘忓垪
+ for (let item in props.columns) {
+ if (props.columns[item].visible === false) {
+ value.value.push(parseInt(item))
+ }
+ }
+}
+
+// 鍗曞嬀閫�
+function checkboxChange(event, label) {
+ props.columns.filter(item => item.label == label)[0].visible = event
+}
+
+// 鍒囨崲鍏ㄩ��/鍙嶉��
+function toggleCheckAll() {
+ const newValue = !isChecked.value
+ props.columns.forEach((col) => (col.visible = newValue))
+}
+</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;
+}
+:deep(.el-dropdown-menu__item) {
+ line-height: 30px;
+ padding: 0 17px;
+}
+.check-line {
+ width: 90%;
+ height: 1px;
+ background-color: #ccc;
+ margin: 3px auto;
+}
+</style>
--
Gitblit v1.9.3