From 824efa6b51ed4f1b856e291c587ddf1f2d0f8cf7 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Sat, 5 Oct 2024 21:10:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 eslint.config.js                              |   1 +
 src/api/v1/menuIcon.ts                        |   8 ++
 src/assets/svg/loading.svg                    |  12 ++
 src/views/system/adminUser/utils/hooks.tsx    |   4 +-
 src/views/system/menuIcon/index.vue           |   6 +-
 .../system/menuIcon/menu-icon-dialog.vue      |   3 +-
 .../menuIcon/menu-icon-select-icon-name.vue   | 135 ++++++++++++++++++
 src/views/system/menuIcon/utils/types.ts      |   2 +
 8 files changed, 165 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/svg/loading.svg
 create mode 100644 src/views/system/menuIcon/menu-icon-select-icon-name.vue

diff --git a/eslint.config.js b/eslint.config.js
index faab037..1296cbf 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -153,6 +153,7 @@ export default defineFlatConfig([
 			'no-undef': 'off',
 			'no-unused-vars': 'off',
 			'vue/no-v-html': 'off',
+			'vue/no-mutating-props': 'off',
 			'vue/require-default-prop': 'off',
 			'vue/require-explicit-emits': 'off',
 			'vue/multi-word-component-names': 'off',
diff --git a/src/api/v1/menuIcon.ts b/src/api/v1/menuIcon.ts
index cccb078..b408df2 100644
--- a/src/api/v1/menuIcon.ts
+++ b/src/api/v1/menuIcon.ts
@@ -28,3 +28,11 @@ export const fetchUpdateMenuIcon = (data: any) => {
 export const fetchDeleteMenuIcon = (data: any) => {
 	return http.request<BaseResult<object>>('delete', 'menuIcon/deleteMenuIcon', { data });
 };
+
+/**
+ * 系统菜单图标---根据iconName搜索menuIc
+ * @param data
+ */
+export const fetchGetIconNameList = (data: any) => {
+	return http.request<BaseResult<object>>('get', 'menuIcon/getIconNameList', { params: data });
+};
diff --git a/src/assets/svg/loading.svg b/src/assets/svg/loading.svg
new file mode 100644
index 0000000..8400a07
--- /dev/null
+++ b/src/assets/svg/loading.svg
@@ -0,0 +1,12 @@
+<svg class="circular" viewBox="0 0 20 20">
+  <g
+    class="path2 loading-path"
+    stroke-width="0"
+    style="animation: none; stroke: none"
+  >
+    <circle r="3.375" class="dot1" rx="0" ry="0"/>
+    <circle r="3.375" class="dot2" rx="0" ry="0"/>
+    <circle r="3.375" class="dot4" rx="0" ry="0"/>
+    <circle r="3.375" class="dot3" rx="0" ry="0"/>
+  </g>
+</svg>
diff --git a/src/views/system/adminUser/utils/hooks.tsx b/src/views/system/adminUser/utils/hooks.tsx
index 8c16efa..5629359 100644
--- a/src/views/system/adminUser/utils/hooks.tsx
+++ b/src/views/system/adminUser/utils/hooks.tsx
@@ -14,13 +14,13 @@ import userAvatar from '@/assets/user.jpg';
 import { fetchForcedOffline, fetchUploadAvatarByAdmin } from '@/api/v1/user';
 import { useUserStore } from '@/store/system/user';
 
+const adminUserStore = useAdminUserStore();
+const userStore = useUserStore();
 export const formRef = ref();
 const cropRef = ref();
 const assignRolesRef = ref();
-const userStore = useUserStore();
 // 上传头像信息
 const avatarInfo = ref();
-const adminUserStore = useAdminUserStore();
 // 重置密码表单校验Ref
 const ruleFormByRestPasswordRef = ref();
 // 重置密码表单
diff --git a/src/views/system/menuIcon/index.vue b/src/views/system/menuIcon/index.vue
index 6653435..64a4cad 100644
--- a/src/views/system/menuIcon/index.vue
+++ b/src/views/system/menuIcon/index.vue
@@ -105,9 +105,9 @@ onMounted(() => {
 					@page-current-change="onCurrentPageChange"
 					@selection-change="onSelectionChange"
 				>
-					<template #iconName="{ row }">
-						<div class="flex justify-center">
-							<component :is="useRenderIcon(row.iconName)" class="flex justify-center" style="font-size: 30px" />
+					<template #iconCode="{ row }">
+						<div v-tippy="{ content: row.iconCode }" class="flex justify-center">
+							<component :is="useRenderIcon(row.iconCode)" class="flex justify-center" style="font-size: 30px" />
 						</div>
 					</template>
 
diff --git a/src/views/system/menuIcon/menu-icon-dialog.vue b/src/views/system/menuIcon/menu-icon-dialog.vue
index ac976b8..2bad767 100644
--- a/src/views/system/menuIcon/menu-icon-dialog.vue
+++ b/src/views/system/menuIcon/menu-icon-dialog.vue
@@ -5,6 +5,7 @@ import { rules } from '@/views/system/menuIcon/utils/columns';
 import { FormProps } from '@/views/system/menuIcon/utils/types';
 import { $t } from '@/plugins/i18n';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import MenuIconSelectIconName from '@/views/system/menuIcon/menu-icon-select-icon-name.vue';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -25,7 +26,7 @@ defineExpose({ formRef });
 			<el-input v-model="form.iconCode" autocomplete="off" type="text" />
 		</el-form-item>
 		<el-form-item :label="$t('menuIcon_iconName')" prop="iconName">
-			<el-input v-model="form.iconName" autocomplete="off" type="text" />
+			<MenuIconSelectIconName :form="form" />
 		</el-form-item>
 
 		<el-form-item v-show="form.iconCode" :label="$t('menuIcon_preview')">
diff --git a/src/views/system/menuIcon/menu-icon-select-icon-name.vue b/src/views/system/menuIcon/menu-icon-select-icon-name.vue
new file mode 100644
index 0000000..2f18d0a
--- /dev/null
+++ b/src/views/system/menuIcon/menu-icon-select-icon-name.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { $t } from '@/plugins/i18n';
+import { ref } from 'vue';
+import { fetchGetIconNameList } from '@/api/v1/menuIcon';
+import LoadingSvg from '@/assets/svg/loading.svg';
+
+defineProps({
+	form: { type: Object as PropType<any> },
+});
+
+const loading = ref(false);
+const iconNameList = ref([]);
+
+/**
+ * * 搜索
+ */
+const onRequestIconName = async (iconName: string) => {
+	const data = { currentPage: 1, pageSize: 20, iconName };
+	loading.value = true;
+
+	if (iconName) {
+		const result = await fetchGetIconNameList(data);
+		if (result.code === 200) iconNameList.value = result.data;
+	} else iconNameList.value = [];
+
+	loading.value = false;
+};
+</script>
+
+<template>
+	<el-select
+		v-model="form.iconName"
+		:loading="loading"
+		:placeholder="$t('input') + $t('menuIcon_iconName')"
+		:remote-method="onRequestIconName"
+		allow-create
+		clearable
+		filterable
+		remote
+		remote-show-suffix
+	>
+		<el-option v-for="menuIcon in iconNameList" :key="menuIcon.id" :label="menuIcon.iconName" :value="menuIcon.iconName" />
+		<template #loading>
+			<el-icon class="is-loading">
+				<LoadingSvg />
+			</el-icon>
+		</template>
+	</el-select>
+</template>
+
+<style>
+.el-select-dropdown__loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100px;
+	font-size: 20px;
+}
+
+.circular {
+	display: inline;
+	width: 30px;
+	height: 30px;
+	animation: loading-rotate 2s linear infinite;
+}
+
+.path {
+	stroke: var(--el-color-primary);
+	stroke-dasharray: 90, 150;
+	stroke-dashoffset: 0;
+	stroke-linecap: round;
+	stroke-width: 2;
+	animation: loading-dash 1.5s ease-in-out infinite;
+}
+
+.loading-path .dot1 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(3.75px, 3.75px);
+	animation: custom-spin-move 1s infinite linear alternate;
+}
+
+.loading-path .dot2 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(calc(100% - 3.75px), 3.75px);
+	animation: custom-spin-move 1s infinite linear alternate;
+	animation-delay: 0.4s;
+}
+
+.loading-path .dot3 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(3.75px, calc(100% - 3.75px));
+	animation: custom-spin-move 1s infinite linear alternate;
+	animation-delay: 1.2s;
+}
+
+.loading-path .dot4 {
+	opacity: 0.3;
+	fill: var(--el-color-primary);
+	transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
+	animation: custom-spin-move 1s infinite linear alternate;
+	animation-delay: 0.8s;
+}
+
+@keyframes loading-rotate {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loading-dash {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -40px;
+	}
+
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -120px;
+	}
+}
+
+@keyframes custom-spin-move {
+	to {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/src/views/system/menuIcon/utils/types.ts b/src/views/system/menuIcon/utils/types.ts
index 2d84009..3708360 100644
--- a/src/views/system/menuIcon/utils/types.ts
+++ b/src/views/system/menuIcon/utils/types.ts
@@ -1,5 +1,7 @@
 // 添加或者修改表单元素
 export interface FormItemProps {
+	// icon类名
+	iconCode: string;
 	// icon 名称
 	iconName: string;
 }