优化快捷菜单组件---fix4

src/app-register.ts

@@ -45,6 +45,7 @@ import AppFormGroup2 from './components/app-form-group2/app-form-group2.vue'
 import AppFormItem2 from './components/app-form-item2/app-form-item2.vue'
 import CodeList from './components/codelist/codelist.vue'
 import AppQuickMenus from './components/app-quick-menus/app-quick-menus.vue'
+import AppIconMenus from './components/app-icon-menus/app-icon-menus.vue'
 import AppCheckbox from './components/app-checkbox/app-checkbox.vue'
 import AppColumnRender from './components/app-column-render/app-column-render.vue'
 import AppPickerSelectView from './components/app-picker-select-view/app-picker-select-view.vue'
@@ -171,6 +172,7 @@ export const AppComponents = {
         v.component('app-form-item2', AppFormItem2);
         v.component('codelist', CodeList);
         v.component('app-quick-menus', AppQuickMenus);
+        v.component('app-icon-menus', AppIconMenus);
         v.component('app-checkbox',AppCheckbox);
         v.component('app-column-render',AppColumnRender);
         v.component('app-picker-select-view',AppPickerSelectView);

src/components/app-icon-menus/app-quick-menus.less

+.app-quick-menus{
+  display: flex;
+  .el-card{
+    margin-left: 16px;
+    .el-card__body{
+      padding: 0;
+      width: 200px;
+      height: 122px;
+      border: 1px rgb(210,238,255) solid;
+      border-radius: 3px;
+      margin: 0;
+      background-color: rgb(240,249,255);
+      &:hover{
+        border-color: rgb(53,152,220) !important;
+      }
+      .menuIcon{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        span{
+          font-size: 40px;
+        }
+        img{
+          width: 46px;
+          height: 46px;
+          // margin-top: 12px;
+        }
+        h4{
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+      
+    }
+  }
+    
+  
+}

src/components/app-icon-menus/app-quick-menus.vue

+<template>
+  <div class="app-quick-menus">
+    <template v-for="(item,index) in menus">
+      <div :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index">
+        <p @click="$emit('menuClick',item.name, [item.name])">
+          <span>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</span>
+          <span class="line"></span>
+        </p>
+        <p style=" display: 'flex' ">
+          <app-quick-menus :menus="item.items" :ctrlName = "ctrlName" @menuClick="menuClick"></app-quick-menus>
+        </p>
+      </div>
+      <el-card
+        :key="index"
+        shadow="never"
+        
+        v-else
+      >
+        <div @click="menuClick(item.name,[item.name])" class="menuIcon">
+          <span>
+            <img :src="item.icon" v-if="!Object.is(item.icon, '')" />
+            <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
+            <i class="fa fa-cogs" v-else></i>
+          </span>
+          <h4>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</h4>
+        </div>
+      </el-card>
+    </template>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
+
+@Component({})
+export default class AppQuickMenus extends Vue {
+
+  public menuClick(index: any,indexs: any[]) {
+    this.$emit("menuClick",index,indexs);
+  }
+
+  /**
+   * 菜单数据
+   *
+   * @type {*}
+   * @memberof AppQuickMenus
+   */
+  @Prop({ default: [] }) public menus!: any;
+
+  /**
+   *  部件名称
+   * 
+   * @type {String}
+   * @memberof AppQuickMenus
+   */
+  @Prop() public ctrlName!:String;
+}
+</script>
+
+<style lang='less'>
+@import "./app-quick-menus.less";
+</style>
\ No newline at end of file

src/components/app-quick-menus/app-quick-menus.less

-.app-quick-menus{
-  display: flex;
-  .el-card{
-    margin-left: 16px;
-    .el-card__body{
-      padding: 0;
-      width: 200px;
-      height: 122px;
-      border: 1px rgb(210,238,255) solid;
-      border-radius: 3px;
-      margin: 0;
-      background-color: rgb(240,249,255);
-      &:hover{
-        border-color: rgb(53,152,220) !important;
-      }
-      .menuIcon{
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        align-items: center;
-        span{
-          font-size: 40px;
-        }
-        img{
-          width: 46px;
-          height: 46px;
-          // margin-top: 12px;
-        }
-        h4{
-          font-weight: 500;
-          font-size: 16px;
-        }
-      }
-      
-    }
-  }
-    
-  
-}

src/components/app-quick-menus/app-quick-menus.vue

-<template>
-  <div class="app-quick-menus">
+ <template>
+  <div class="app-menus">
     <template v-for="(item,index) in menus">
-      <div :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index">
-        <p @click="$emit('menuClick',item.name, [item.name])">
-          <span>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</span>
+      <card :bordered="false" dis-hover v-if="item.items && Array.isArray(item.items)" :key="index">
+        <p slot="title" @click="$emit('menuClick',item.name, [item.name])">
+          <span style="margin-right:12px">
+            <img :src="item.icon" v-if="!Object.is(item.icon, '')" />
+            <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
+            <i class="fa fa-cogs" v-else></i>
+          </span>
+          <span>{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
           <span class="line"></span>
         </p>
         <p style=" display: 'flex' ">
-          <app-quick-menus :menus="item.items" :ctrlName = "ctrlName" @menuClick="menuClick"></app-quick-menus>
-        </p>
-      </div>
-      <el-card
+      <card
         :key="index"
-        shadow="never"
-        
+        :style=" {
+            width:'24%',
+            height: '50px',
+            wordBreak: 'break-all',
+            cursor: 'pointer',
+            margin: '6px',
+            border:'0',
+            padding:'8px',
+            display: 'flex',
+            alignItems: 'center'
+        }"
+        :padding="0"
         v-else
       >
-        <div @click="menuClick(item.name,[item.name])" class="menuIcon">
-          <span>
+        <div @click="$emit('menuClick',item.name, [item.name])">
+          <span style="margin-right:12px">
             <img :src="item.icon" v-if="!Object.is(item.icon, '')" />
             <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
             <i class="fa fa-cogs" v-else></i>
           </span>
-          <h4>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</h4>
+          <h4>{{$t(`app.menus.${ctrlName}.${item.name}`)}}</h4>
         </div>
-      </el-card>
+      </card>
     </template>
-  </div>
 </template>
-
 <script lang='ts'>
 import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
 
 @Component({})
 export default class AppQuickMenus extends Vue {
 
-  public menuClick(index: any,indexs: any[]) {
-    this.$emit("menuClick",index,indexs);
-  }
-
   /**
    * 菜单数据
    *