From ac512943ce4bcf8bc153a66401ce9d2946e019e5 Mon Sep 17 00:00:00 2001
From: kadycui <kadycui@qq.com>
Date: Mon, 18 Sep 2023 22:38:57 +0800
Subject: [PATCH] =?UTF-8?q?ADD:=20=E5=9B=BE=E6=A0=87=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IconSelect.vue | 43 +++++++++++++++++++++++++++++++++++
 src/pages/access/list.vue     |  9 ++++----
 2 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/components/IconSelect.vue

diff --git a/src/components/IconSelect.vue b/src/components/IconSelect.vue
new file mode 100644
index 0000000..ce3077e
--- /dev/null
+++ b/src/components/IconSelect.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="flex items-center">
+        <el-icon :size="20" v-if="modelValue" class="mr-2">
+            <component :is="modelValue"/>
+        </el-icon>
+        <el-select filterable :modelValue="modelValue" class="m-2" placeholder="请选择图标" 
+        @change="handleChange">
+            <el-option v-for="item in icons" 
+            :key="item" 
+            :label="item" 
+            :value="item">
+            <div class="flex items-center justify-between">
+                <el-icon>
+                    <component :is="item"/>
+                </el-icon>
+                <span class="text-gray-500">{{ item }}</span>
+            </div>
+            </el-option>
+        </el-select>
+    </div>
+</template>
+
+
+<script setup>
+import { ref } from 'vue'
+import * as iconList from '@element-plus/icons-vue'
+
+
+defineProps({
+    modelValue:String
+})
+const icons = ref(Object.keys(iconList))
+
+
+const emit = defineEmits(["update:modelValue"])
+const handleChange=(icon)=>{
+    emit("update:modelValue", icon);
+}
+
+
+
+
+</script>
\ No newline at end of file
diff --git a/src/pages/access/list.vue b/src/pages/access/list.vue
index adcaad3..866a3a3 100644
--- a/src/pages/access/list.vue
+++ b/src/pages/access/list.vue
@@ -40,8 +40,8 @@
                 <el-form-item label="名称" prop="name">
                     <el-input v-model="form.name" style="width:30%;" placeholder="名称"></el-input>
                 </el-form-item>
-                <el-form-item label="菜单图标" prop="icon" v-if="form.menu == 1">
-                    <el-input v-model="form.icon"></el-input>
+                <el-form-item class="flex items-center" label="菜单图标" prop="icon" v-if="form.menu == 1">
+                    <IconSelect  v-model="form.icon"/>
                 </el-form-item>
                 <el-form-item label="前端路由" prop="frontpath" v-if="form.menu == 1 && form.rule_id > 0">
                     <el-input v-model="form.frontpath" placeholder="前端路由"></el-input>
@@ -49,8 +49,8 @@
                 <el-form-item label="后端规则" prop="condition" v-if="form.menu == 0">
                     <el-input v-model="form.condition" placeholder="后端规则"></el-input>
                 </el-form-item>
-                <el-form-item label="请求方式" prop="method" v-if="form.menu == 0">
-                    <el-select v-model="form.method" class="m-2" placeholder="Select">
+                <el-form-item class="flex items-center" label="请求方式" prop="method" v-if="form.menu == 0">
+                    <el-select v-model="form.method" class="m-2" placeholder="请选择请求方式">
                         <el-option
                         v-for="item in ['GET', 'POST', 'PUT', 'DDELETE']"
                         :key="item"
@@ -72,6 +72,7 @@
 import { ref } from "vue"
 import ListHeader from "@/components/ListHeader.vue"
 import FormDrawer from "@/components/FormDrawer.vue"
+import IconSelect from "@/components/IconSelect.vue"
 import {
     getRuleList,
     createRule,
-- 
GitLab