pj_admin_cloud/src/views/admin/dict/index.vue

<template>
	<div class="layout-padding">
		<splitpanes>
			<pane class="ml10">
				<splitpanes>
					<pane size="30">
						<div class="layout-padding-auto layout-padding-view">
							<el-row>
								<div class="mb8" style="width: 100%">
									<el-button @click="dicDialogRef.openDialog()" class="ml10" icon="folder-add"
										type="primary">
										{{ $t("common.addBtn") }}
									</el-button>
									<el-button plain @click="handleRefreshCache()" class="ml10" icon="refresh-left"
										type="primary">
										{{ $t("common.refreshCacheBtn") }}
									</el-button>
								</div>
							</el-row>
							<el-scrollbar>
								<query-tree ref="dictTreeRef" :query="state.queryList" @node-click="handleNodeClick"
									placeholder="请输入字典项或名称">
									<template #default="{ data }">
										<span class="custom-tree-node">
											<span class="label">{{ data.description }}</span>
											<span class="code">{{ data.dictType }}</span>
											<span class="do">
												<el-button-group>
													<el-button icon="el-icon-edit" size="small"
														@click.stop="dicDialogRef.openDialog(data.id)"></el-button>
													<el-tooltip :content="$t('sysdict.deleteDisabledTip')"
														:disabled="data.systemFlag === '0'" placement="top">
														<span style="margin-left: 12px">
															<el-button :disabled="data.systemFlag !== '0'"
																icon="el-icon-delete" size="small"
																@click.stop="handleDelete([data.id])"></el-button>
														</span>
													</el-tooltip>
												</el-button-group>
											</span>
										</span>
									</template>
								</query-tree>
							</el-scrollbar>
							<el-footer style="height: 40px; line-height: 40px">
								<el-button type="primary" size="small" icon="Download" style="width: 100%"
									@click="exportExcel">{{
										$t("common.exportBtn")
									}}</el-button>
							</el-footer>
						</div>
					</pane>
					<pane class="ml8">
						<DicDialog @refresh="handleRefreshTree" ref="dicDialogRef" />
						<dict-item-dialog ref="dictItemDialogRef"></dict-item-dialog>
					</pane>
				</splitpanes>
			</pane>
		</splitpanes>
	</div>
</template>

<script lang="ts" name="systemDic" setup>
import { delObj, fetchList, refreshCache } from "/@/api/admin/dict"
import { useMessage, useMessageBox } from "/@/hooks/message"
import { useI18n } from "vue-i18n"
import { downBlobFile } from "/@/utils/other"

// 引入组件
const DicDialog = defineAsyncComponent(() => import("./form.vue"))
const DictItemDialog = defineAsyncComponent(() => import("./dictItem/index.vue"))
const QueryTree = defineAsyncComponent(() => import("/@/components/QueryTree/index.vue"))

const { t } = useI18n()
// 定义变量内容
const dicDialogRef = ref()
const dictTreeRef = ref()
const dictItemDialogRef = ref()
const state = reactive({
	queryForm: {},
	queryList: (name?: string) => {
		return fetchList({
			name: name,
		})
	},
})

// 导出EXCEL
const exportExcel = () => {
	downBlobFile("/admin/dict/export", state.queryForm, "字典管理.xlsx")
}

//刷新缓存
const handleRefreshCache = () => {
	refreshCache().then(() => {
		useMessage().success("同步成功")
	})
}

// 点击树
const handleNodeClick = (data: any) => {
	dictItemDialogRef.value.open(data)
}

// 刷新树
const handleRefreshTree = async (data: any) => {
	await dictTreeRef.value.getdeptTree()
	// 选择当前编辑、新增的节点
	handleNodeClick(data)
}

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm(t("common.delConfirmText"))
	} catch {
		return
	}

	try {
		await delObj(ids)
		useMessage().success(t("common.delSuccessText"))
		dictTreeRef.value.getdeptTree()
	} catch (err: any) {
		useMessage().error(err.msg)
	}
}
</script>

<style scoped>
.menu:deep(.el-tree-node__label) {
	display: flex;
	flex: 1;
	height: 100%;
}

.custom-tree-node {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 24px;
	height: 100%;
}

.custom-tree-node .code {
	font-size: 12px;
	color: #999;
}

.custom-tree-node .do {
	display: none;
}

.custom-tree-node:hover .code {
	display: none;
}

.custom-tree-node:hover .do {
	display: inline-block;
}
</style>