图标选取功能

@@ -9,6 +9,16 @@
               <el-input v-model="form.name" placeholder="请输入菜单名称" />
             </el-form-item>
           </el-col>
+          <el-col :span="12">
+            <el-form-item label="图标:" label-width="54px">
+              <el-input
+                v-model="form.icon"
+                placeholder="请选择图标"
+                :prefix-icon="form.icon"
+                clearable
+                @focus="getIconList" />
+            </el-form-item>
+          </el-col>
         </el-row>
         <el-row :gutter="24">
           <el-col :span="12">
@@ -51,12 +61,15 @@
           </el-col>
         </el-row>
       </el-form>
+      <!-- 图标列表 -->
+      <IconList ref="iconList" @iconName="getIconName" />
     </div>
   </dialogBox>
 </template>
 
 <script>
   import { getParentMenuListAction } from '@/api/authorityManage'
+  import IconList from '../../../components/IconList'
   import JsonEditor from '@/components/JsonEditors'
   import { validateCode } from '@/utils/validate';
   import { api, httpAction } from '@/api/manageApi'
@@ -64,6 +77,7 @@
     name: 'MenuModal',
     components: {
       JsonEditor,
+      IconList,
     },
     props: {
       value: { type: Boolean, default: false },
@@ -142,6 +156,10 @@
           }
         })
       },
+      // 选择图标
+      getIconName (data) {
+        this.form.icon = data;
+      },
       getIconList () {
         this.$refs.iconList.show(true)
       },
@@ -244,9 +262,12 @@
         white-space: nowrap;
         b {
           font-size: 16px;
-          font-weight: 600;
         }
       }
+      .el-dialog__headerbtn {
+        right: 20px !important;
+        top: 23px !important;
+      }
     }
   }
 </style>