first commit

src/views/admin/system/dept/index.vue

@@ -0,0 +1,130 @@
+<template>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row shadow="hover" v-show="showSearch" class="ml10">
+				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="filter">
+					<el-form-item prop="deptName" :label="$t('sysdept.name')">
+						<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"></el-input>
+					</el-form-item>
+					<el-form-item>
+						<el-button icon="search" type="primary" @click="filter">
+							{{ $t('common.queryBtn') }}
+						</el-button>
+						<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
+					</el-form-item>
+				</el-form>
+			</el-row>
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button icon="folder-add" type="primary" class="top-right-btn" v-if="!defaultTreeViewRef" v-auth="'sys_dept_add'" @click="handleAdd">
+						{{ $t('common.addBtn') }}
+					</el-button>
+					<el-button plain icon="upload-filled" type="primary" class="ml10" @click="excelUploadRef.show()">
+						{{ $t('common.importBtn') }}
+					</el-button>
+					<el-button @click="handleExpand"> {{ $t('common.expandBtn') }}</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'sys_dept_add'"
+						@exportExcel="exportExcel"
+						class="ml10"
+						style="float: right; margin-right: 20px"
+						@queryTable="getDataList"
+					>
+						<el-tooltip class="item" effect="dark" :content="$t('queryTree.view')" placement="top">
+							<el-button circle icon="Grid" @click="handleView"></el-button>
+						</el-tooltip>
+					</right-toolbar>
+				</div>
+			</el-row>
+
+			<tree-view ref="treeViewRef" v-if="defaultTreeViewRef" />
+			<table-view ref="tableViewRef" v-if="!defaultTreeViewRef" />
+
+			<upload-excel
+				ref="excelUploadRef"
+				:title="$t('sysdept.importTip')"
+				url="/admin/dept/import"
+				temp-url="/admin/sys-file/local/file/dept.xlsx"
+				@refreshDataList="getDataList"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" name="systemDept" setup>
+import { downBlobFile } from '/@/utils/other';
+import { useI18n } from 'vue-i18n';
+
+const TreeView = defineAsyncComponent(() => import('./tree-view.vue'));
+const TableView = defineAsyncComponent(() => import('./table-view.vue'));
+
+const { t } = useI18n();
+
+// 默认树视图展示
+const defaultTreeViewRef = ref(true);
+const treeViewRef = ref();
+const tableViewRef = ref();
+const excelUploadRef = ref();
+const showSearch = ref(true);
+const isExpand = ref(false);
+const queryRef = ref();
+
+const state = reactive({
+	queryForm: {
+		deptName: '',
+	},
+});
+
+/**
+ * 过滤节点
+ */
+const filter = () => {
+	if (defaultTreeViewRef.value) {
+		treeViewRef.value.filter(state.queryForm.deptName);
+	} else {
+		tableViewRef.value.state.queryForm.deptName = state.queryForm.deptName;
+		tableViewRef.value.getDataList();
+	}
+};
+
+const handleAdd = () => {
+	tableViewRef.value.handleAdd();
+};
+const handleView = () => {
+	defaultTreeViewRef.value = !defaultTreeViewRef.value;
+};
+
+/**
+ * 处理展开/折叠树
+ */
+const handleExpand = () => {
+	if (defaultTreeViewRef.value) {
+		treeViewRef.value.handleExpand();
+	} else {
+		tableViewRef.value.handleExpand();
+	}
+};
+
+/**
+ * 导出Excel
+ */
+const exportExcel = () => {
+	downBlobFile('/admin/dept/export', state.queryForm, 'dept.xlsx');
+};
+
+const getDataList = () => {
+	if (defaultTreeViewRef.value) {
+		treeViewRef.value.getOrgData();
+	} else {
+		tableViewRef.value.getDataList();
+	}
+};
+
+/**
+ * 重置查询条件
+ */
+const resetQuery = () => {
+	queryRef.value.resetFields();
+};
+</script>