update 重做菜单

Web/src/pages/system/app/form.vue

@@ -7,6 +7,15 @@
       <a-form-model-item label="唯一编码" prop="code">
         <a-input placeholder="请输入唯一编码" v-model="form.code" />
       </a-form-model-item>
+      <a-form-model-item label="图标" prop="icon">
+        <a-input :disabled="true" placeholder="请选择图标" v-model="form.icon">
+          <a-icon :type="form.icon" slot="addonBefore" v-if="form.icon" />
+          <a-icon @click="onOpenSelectIcon" slot="addonAfter" type="setting" />
+        </a-input>
+      </a-form-model-item>
+      <a-form-model-item prop="color">
+        <chrome-picker v-model="form.color" />
+      </a-form-model-item>
       <a-form-model-item label="排序" prop="sort">
         <a-input-number
           :max="1000"
@@ -17,13 +26,23 @@
         />
       </a-form-model-item>
     </div>
+
+    <yo-icon-selector ref="icon-selector" v-model="form.icon" />
   </a-form-model>
 </template>
 <script>
+import YoIconSelector from '@/components/yoIconSelector';
+import { Chrome } from 'vue-color';
+
 export default {
+  components: {
+    YoIconSelector,
+    ChromePicker: Chrome,
+  },
   data() {
     return {
       form: {
+        color: '#fff',
         active: false,
       },
       rules: {
@@ -58,6 +77,10 @@ export default {
         this.$refs.form.resetFields();
       }, 300);
     },
+
+    onOpenSelectIcon() {
+      this.$refs['icon-selector'].onOpen(this.form.icon);
+    },
   },
 };
 </script>