hotline-web/src/views/home/component/Entrance.vue

<template>
	<div class="home-entrance-container">
		<el-card shadow="never" class="right-entrance w100" v-loading="state.entranceLoading">
			<p class="right-entrance-title">
				常用入口
				<el-button @click="openDialog" link><SvgIcon name="ele-Setting" class="mr1" />自定义 </el-button>
			</p>
			<template v-if="state.entranceArray.length">
				<el-scrollbar class="h100">
          <ul class="right-entrance-list">
            <li
                class="right-entrance-list-item"
                v-for="item in state.entranceArray"
                :title="item.pageName"
                :key="item.id"
                :data-id="item.id"
                @click="goLink(item)"
            >
              <SvgIcon :name="item.icon" size="28px" class="my-handle" />
              <p class="text-no-wrap">{{ item.pageName }}</p>
            </li>
          </ul>
        </el-scrollbar>
			</template>
      <el-empty :image-size="100" v-else/>
		</el-card>
		<el-dialog v-model="state.dialogVisible" draggable title="常用入口设置">
			<div class="entrance-list">
				<p class="entrance-list-title">
					首页入口 <span v-if="state.entranceList.length">({{ state.entranceList.length }})</span>
					<el-button link type="primary" class="ml10" @click="clearEntrance" title="清空首页入口" v-if="state.entranceList.length">
						<SvgIcon name="ele-Delete" class="mr3"></SvgIcon>清空</el-button
					>
				</p>
				<div class="mb20" v-loading="state.loading">
					<div>
						<draggable
							:list="state.entranceList"
							:force-fallback="true"
							animation="300"
							@end="onEnd"
							itemKey="id"
							class="entrance-list-box"
							v-show="state.entranceList.length"
						>
							<template #item="item">
								<div class="entrance-list-box-item" :title="item.element.pageName">
									<SvgIcon :name="item.element.icon" class="my-handle" size="28px" />
									<p class="entrance-list-box-item-name text-no-wrap">{{ item.element.pageName }}</p>
									<SvgIcon name="ele-RemoveFilled" class="plus-icon location" color="#ccc" size="20px" @click="removeOne(item.element)" />
								</div>
							</template>
						</draggable>
					</div>
          <el-empty v-show="!state.entranceList.length" :image-size="120"/>
				</div>
			</div>
			<div class="entrance-select">
				<p class="entrance-select-title">
					<span class="entrance-select-title-name"
						>系统功能 <span v-if="state.entranceSelect.length">({{ state.entranceSelect.length }})</span>
						<el-button link type="primary" @click="selectAll" class="ml10" v-if="state.entranceSelect.length" title="全选到首页入口">
							<SvgIcon name="ele-CircleCheck" class="mr3"></SvgIcon>全选</el-button
						></span
					>
					<el-input v-model="state.searchKey" placeholder="请填写关键字" class="input" @keyup.enter="getEntranceSelect">
						<template #prefix>
							<SvgIcon name="ele-Search" />
						</template>
						<template #suffix>
							<el-button type="primary" size="small" round @click="getEntranceSelect">搜索</el-button>
						</template>
					</el-input>
				</p>
				<div class="mb20" v-loading="state.selectLoading">
					<template v-if="state.entranceSelect.length">
						<ul class="entrance-list-box">
							<li class="entrance-list-box-item" v-for="item in state.entranceSelect" :key="item.id" :title="item.pageName">
								<!--								<img v-lazy="getImageUrl(item.fastIcon)" alt="" class="mb10"  src=""/>-->
								<SvgIcon :name="item.icon" size="28px" class="entrance-list-box-item-icon" />
								<p class="entrance-list-box-item-name text-no-wrap">{{ item.pageName }}</p>
								<SvgIcon
									name="ele-CirclePlusFilled"
									class="remove-icon location"
									color="var(--el-color-primary)"
									size="20px"
									@click="plusOne(item)"
								/>
							</li>
						</ul>
					</template>
          <el-empty v-else :image-size="100"/>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="homeEntrance">
import { onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { geFastMenu, fastMenu, setFastMenu } from '@/api/home';
import Draggable from 'vuedraggable';

const state = reactive<any>({
	dialogVisible: false,
	searchKey: '',
	entranceList: [],
	sortEntranceList: [],
	entranceSelect: [],
	loading: false,
	selectLoading: false,

	entranceArray: <EmptyArrayType>[], // 常用入口
	entranceLoading: false, //入口
});

// 跳转到
const router = useRouter();
const goLink = (item: any) => {
	router.push({
		path: item.path,
	});
};
//获取入口设置
const getMyEntrance = () => {
	state.entranceLoading = true;
	geFastMenu()
		.then((res: any) => {
			state.entranceArray = res?.result ?? [];
			state.entranceLoading = false;
		})
		.catch(() => {
			state.entranceLoading = false;
		});
};
// 打开弹窗
const openDialog = () => {
	state.dialogVisible = true;
	getEntrance();
	getEntranceSelect();
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 获取我的入口
const getEntrance = () => {
	state.loading = true;
	geFastMenu()
		.then((res: any) => {
			state.entranceList = res?.result ?? [];
			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
		});
};
// 获取可选入口
const getEntranceSelect = () => {
	state.selectLoading = true;
	fastMenu({})
		.then((res: any) => {
			state.entranceSelect = res?.result ?? [];
			if (state.searchKey) {
				state.entranceSelect = state.entranceSelect.filter((i: any) => i.pageName.includes(state.searchKey));
				if (state.entranceList.length) {
					state.entranceSelect = state.entranceSelect.filter((i: any) => !state.entranceList.some((j: any) => j.id === i.id));
				}
			} else {
				if (state.entranceList.length) {
					state.entranceSelect = state.entranceSelect.filter((i: any) => !state.entranceList.some((j: any) => j.id === i.id));
				}
			}
			setTimeout(() => {
				state.selectLoading = false;
			}, 300);
		})
		.catch(() => {
			state.selectLoading = false;
		});
};
// 移除
const removeOne = (val: any) => {
	state.entranceList = state.entranceList.filter((i: any) => i.id !== val.id);
	state.entranceSelect.unshift(val);
};
// 新增
const plusOne = (val: any) => {
	state.entranceList.push(val);
	state.entranceSelect = state.entranceSelect.filter((i: any) => i.id !== val.id);
};
// 清空
const clearEntrance = () => {
	state.entranceSelect = [...state.entranceList, ...state.entranceSelect];
	state.entranceList = [];
};
// 全选
const selectAll = () => {
	state.entranceList = [...state.entranceList, ...state.entranceSelect];
	state.entranceSelect = [];
};
//结束拖拽事件
const onEnd = () => {
	console.log(state.entranceList);
};
// 保存
const onSubmit = async () => {
	try {
		let req = state.sortEntranceList.length
			? state.sortEntranceList.map((item: any) => item.permissionCode)
			: state.entranceList.map((item: any) => item.permissionCode);
		await setFastMenu({ fastMenuArr: req });
		ElMessage.success('操作成功');
		getMyEntrance();
	} catch {
		// 处理错误
		state.dialogVisible = false;
	} finally {
		state.dialogVisible = false;
	}
};
onMounted(() => {
	getMyEntrance();
});
</script>
<style lang="scss" scoped>
.home-entrance-container {
	.right-entrance {
		&-title {
			font-size: var(--el-font-size-medium);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20px;
			font-weight: 600;
			span {
				font-size: 14px;
				display: flex;
				align-items: center;
				color: var(--el-text-color-regular);
				cursor: pointer;
				font-weight: normal;
			}
		}
		&-list {
			display: grid;
			grid-template-columns: repeat(auto-fill, 90px);
			justify-content: space-between;
			grid-gap: 8px;
			max-height: 250px;
			overflow: auto;
			&-item {
				background: var(--hotline-bg-main-color);
				border-radius: 8px;
				text-align: center;
				width: 90px;
				height: 90px;
				cursor: pointer;
				color: var(--el-text-color-regular);
				user-select: none;
				padding: 10px 5px;
				.my-handle {
					display: inline-block;
					width: 30px;
					height: 30px;
					margin-top: 10px;
					margin-bottom: 5px;
				}
				&:hover {
					color: var(--el-color-primary);
					background-color: var(--el-color-primary-light-8);
				}
			}
		}
	}
	.entrance-list {
		color: var(--hotline-color-text-main);

		&-title {
			padding-bottom: 20px;
			font-size: var(--el-font-size-medium);
		}

		&-box {
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat(auto-fill, 100px);
			grid-gap: 10px;
			margin-bottom: 20px;

			&-item {
				background: #f0f4ff;
				border-radius: 8px;
				text-align: center;
				padding: 10px 5px;
        width: 100px;
        height: 100px;
				color: var(--el-text-color-regular);
				position: relative;
				user-select: none;
				&-icon {
					display: inline-block;
					width: 30px;
					height: 30px;
					margin-bottom: 15px;
					margin-top: 5px;
				}
				.my-handle {
					display: inline-block;
          width: 30px;
          height: 30px;
					margin-bottom: 15px;
					cursor: grab;
					margin-top: 5px;
				}

				.location {
					position: absolute;
					top: -5px;
					right: -5px;
					cursor: pointer;
				}
			}
		}
	}

	.entrance-select {
		color: var(--hotline-color-text-main);

		&-title {
			padding-bottom: 20px;
			font-size: var(--el-font-size-medium);

			&-name {
				display: inline-block;
				min-width: 80px;
				margin-right: 40px;
			}

			.input {
				max-width: 350px;

				:deep(.el-input__wrapper) {
					border-radius: 40px;
				}
			}
		}
	}
}
</style>