init

2025-12-02 10:37:49 +08:00
commit 1f645dad3e
1183 changed files with 147673 additions and 0 deletions
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="top-right-btn" :style="style">
+		<el-row>
+			<!-- 搜索框控制 -->
+			<el-tooltip
+				class="item"
+				effect="dark"
+				:content="showSearch ? $t('queryTree.hideSearch') : $t('queryTree.displayTheSearch')"
+				placement="top"
+				v-if="search"
+			>
+				<el-button circle icon="Search" @click="toggleSearch()" />
+			</el-tooltip>
+
+			<!-- 导出 -->
+			<el-tooltip class="item" effect="dark" :content="$t('common.exportBtn')" placement="top" v-if="isExport()">
+				<el-button circle icon="Download" @click="handleExport()" />
+			</el-tooltip>
+
+			<!-- 刷新功能 -->
+			<el-tooltip class="item" effect="dark" :content="$t('queryTree.refresh')" placement="top">
+				<el-button circle icon="Refresh" @click="handleRefresh()" />
+			</el-tooltip>
+
+      <!-- 插槽 -->
+      <slot></slot>
+    </el-row>
+	</div>
+</template>
+
+<script setup name="right-toolbar">
+import { auth } from '/@/utils/authFunction';
+
+/**
+ * 通过 defineProps 函数定义组件 props
+ */
+const props = defineProps({
+	/**
+	 * 是否显示搜索框
+	 */
+	showSearch: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * 是否导出
+	 */
+	export: {
+		type: [String, Boolean],
+		default: null,
+	},
+	/**
+	 * 是否显示搜索框
+	 */
+	search: {
+		type: Boolean,
+		default: true,
+	},
+	/**
+	 * 列表项之间的间距
+	 */
+	gutter: {
+		type: Number,
+		default: 10,
+	},
+});
+
+const emits = defineEmits(['update:showSearch', 'queryTable', 'exportExcel']);
+
+const style = computed(() => {
+	const ret = {};
+	// 如果props中有传入gutter属性，则计算出marginRight
+	if (props.gutter) {
+		ret.marginRight = `${props.gutter / 2}px`;
+	}
+	return ret; // 返回计算后的样式对象
+});
+
+// 搜索
+const toggleSearch = () => {
+	emits('update:showSearch', !props.showSearch);
+};
+
+// 刷新
+const handleRefresh = () => {
+	emits('queryTable');
+};
+
+// 导出excel
+const handleExport = () => {
+	emits('exportExcel');
+};
+
+// 是否导出
+const isExport = () => {
+	if (props.export === true) {
+		return true;
+	}
+
+	// 字符串鉴权
+	return props.export && auth(props.export);
+};
+</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;
+}
+</style>