@zengqiao@菜单图标

dmp-edge-ai/src/plugins/element.js

@@ -7,6 +7,7 @@ import {
  Row,
  Col,
  Button,
  ButtonGroup,
  Input,
  InputNumber,
  Select,
@@ -40,6 +41,7 @@ Vue.use(Main)
Vue.use(Row)
Vue.use(Col)
Vue.use(Button)
Vue.use(ButtonGroup)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Select)

dmp-edge-ai/src/utils/bus.js

@@ -0,0 +1,12 @@
/**
 * @file 本文件为事件总线实现
 * @author PRD UX R&D Dept.
 */
import Vue from 'vue'
export default new Vue({
  data: {
    SET_ICON: 'setIcon' // 选择菜单icon时触发
  }
})

dmp-edge-ai/src/utils/menu-icon.config.js

@@ -0,0 +1,287 @@
/**
 * 菜单图标
 * @type {string[]}
 */
const data = [
  'el-icon-platform-eleme',
  'el-icon-eleme',
  'el-icon-delete-solid',
  'el-icon-delete ',
  'el-icon-s-tools',
  'el-icon-setting',
  'el-icon-user-solid',
  'el-icon-user',
  'el-icon-phone',
  'el-icon-phone-outline',
  'el-icon-more',
  'el-icon-more-outline',
  'el-icon-star-on',
  'el-icon-star-off',
  'el-icon-s-goods',
  'el-icon-goods',
  'el-icon-warning',
  'el-icon-warning-outline',
  'el-icon-question',
  'el-icon-info',
  'el-icon-remove',
  'el-icon-circle-plus',
  'el-icon-success',
  'el-icon-error',
  'el-icon-zoom-in',
  'el-icon-zoom-out',
  'el-icon-remove-outline',
  'el-icon-circle-plus-outline',
  'el-icon-circle-check',
  'el-icon-circle-close',
  'el-icon-s-help',
  'el-icon-help',
  'el-icon-minus',
  'el-icon-plus',
  'el-icon-check',
  'el-icon-close',
  'el-icon-picture',
  'el-icon-picture-outline',
  'el-icon-picture-outline-round',
  'el-icon-upload',
  'el-icon-upload2',
  'el-icon-download',
  'el-icon-camera-solid',
  'el-icon-camera',
  'el-icon-video-camera-solid',
  'el-icon-video-camera',
  'el-icon-message-solid',
  'el-icon-bell',
  'el-icon-s-cooperation',
  'el-icon-s-order',
  'el-icon-s-platform',
  'el-icon-s-fold',
  'el-icon-s-unfold',
  'el-icon-s-operation',
  'el-icon-s-promotion',
  'el-icon-s-home',
  'el-icon-s-release',
  'el-icon-s-ticket',
  'el-icon-s-management',
  'el-icon-s-open',
  'el-icon-s-shop',
  'el-icon-s-marketing',
  'el-icon-s-flag',
  'el-icon-s-comment',
  'el-icon-s-finance',
  'el-icon-s-claim',
  'el-icon-s-custom',
  'el-icon-s-opportunity',
  'el-icon-s-data',
  'el-icon-s-check',
  'el-icon-s-grid',
  'el-icon-menu',
  'el-icon-share',
  'el-icon-d-caret',
  'el-icon-caret-left',
  'el-icon-caret-right',
  'el-icon-caret-bottom',
  'el-icon-caret-top',
  'el-icon-bottom-left',
  'el-icon-bottom-right',
  'el-icon-back',
  'el-icon-right',
  'el-icon-bottom',
  'el-icon-top',
  'el-icon-top-left',
  'el-icon-top-right',
  'el-icon-arrow-left',
  'el-icon-arrow-right',
  'el-icon-arrow-down',
  'el-icon-arrow-up',
  'el-icon-d-arrow-left',
  'el-icon-d-arrow-right',
  'el-icon-video-pause',
  'el-icon-video-play',
  'el-icon-refresh',
  'el-icon-refresh-right',
  'el-icon-refresh-left',
  'el-icon-finished',
  'el-icon-sort',
  'el-icon-sort-up',
  'el-icon-sort-down',
  'el-icon-rank',
  'el-icon-loading',
  'el-icon-view',
  'el-icon-c-scale-to-original',
  'el-icon-date',
  'el-icon-edit',
  'el-icon-edit-outline',
  'el-icon-folder',
  'el-icon-folder-opened',
  'el-icon-folder-add',
  'el-icon-folder-remove',
  'el-icon-folder-delete',
  'el-icon-folder-checked',
  'el-icon-tickets',
  'el-icon-document-remove',
  'el-icon-document-delete',
  'el-icon-document-copy',
  'el-icon-document-checked',
  'el-icon-document',
  'el-icon-document-add',
  'el-icon-printer',
  'el-icon-paperclip',
  'el-icon-takeaway-box',
  'el-icon-search',
  'el-icon-monitor',
  'el-icon-attract',
  'el-icon-mobile',
  'el-icon-scissors',
  'el-icon-umbrella',
  'el-icon-headset',
  'el-icon-brush',
  'el-icon-mouse',
  'el-icon-coordinate',
  'el-icon-magic-stick',
  'el-icon-reading',
  'el-icon-data-line',
  'el-icon-data-board',
  'el-icon-pie-chart',
  'el-icon-data-analysis',
  'el-icon-collection-tag',
  'el-icon-film',
  'el-icon-suitcase',
  'el-icon-suitcase-1',
  'el-icon-receiving',
  'el-icon-collection',
  'el-icon-files',
  'el-icon-notebook-1',
  'el-icon-notebook-2',
  'el-icon-toilet-paper',
  'el-icon-office-building',
  'el-icon-school',
  'el-icon-table-lamp',
  'el-icon-house',
  'el-icon-no-smoking',
  'el-icon-smoking',
  'el-icon-shopping-cart-full',
  'el-icon-shopping-cart-1',
  'el-icon-shopping-cart-2',
  'el-icon-shopping-bag-1',
  'el-icon-shopping-bag-2',
  'el-icon-sold-out',
  'el-icon-sell',
  'el-icon-present',
  'el-icon-box',
  'el-icon-bank-card',
  'el-icon-money',
  'el-icon-coin',
  'el-icon-wallet',
  'el-icon-discount',
  'el-icon-price-tag',
  'el-icon-news',
  'el-icon-guide',
  'el-icon-male',
  'el-icon-female',
  'el-icon-thumb',
  'el-icon-cpu',
  'el-icon-link',
  'el-icon-connection',
  'el-icon-open',
  'el-icon-turn-off',
  'el-icon-set-up',
  'el-icon-chat-round',
  'el-icon-chat-line-round',
  'el-icon-chat-square',
  'el-icon-chat-dot-round',
  'el-icon-chat-dot-square',
  'el-icon-chat-line-square',
  'el-icon-message',
  'el-icon-postcard',
  'el-icon-position',
  'el-icon-turn-off-microphone',
  'el-icon-microphone',
  'el-icon-close-notification',
  'el-icon-bangzhu',
  'el-icon-time',
  'el-icon-odometer',
  'el-icon-crop',
  'el-icon-aim',
  'el-icon-switch-button',
  'el-icon-full-screen',
  'el-icon-copy-document',
  'el-icon-mic',
  'el-icon-stopwatch',
  'el-icon-medal-1',
  'el-icon-medal',
  'el-icon-trophy',
  'el-icon-trophy-1',
  'el-icon-first-aid-kit',
  'el-icon-discover',
  'el-icon-place',
  'el-icon-location',
  'el-icon-location-outline',
  'el-icon-location-information',
  'el-icon-add-location',
  'el-icon-delete-location',
  'el-icon-map-location',
  'el-icon-alarm-clock',
  'el-icon-timer',
  'el-icon-watch-1',
  'el-icon-watch',
  'el-icon-lock',
  'el-icon-unlock',
  'el-icon-key',
  'el-icon-service',
  'el-icon-mobile-phone',
  'el-icon-bicycle',
  'el-icon-truck',
  'el-icon-ship',
  'el-icon-basketball',
  'el-icon-football',
  'el-icon-soccer',
  'el-icon-baseball',
  'el-icon-wind-power',
  'el-icon-light-rain',
  'el-icon-lightning',
  'el-icon-heavy-rain',
  'el-icon-sunrise',
  'el-icon-sunrise-1',
  'el-icon-sunset',
  'el-icon-sunny',
  'el-icon-cloudy',
  'el-icon-partly-cloudy',
  'el-icon-cloudy-and-sunny',
  'el-icon-moon',
  'el-icon-moon-night',
  'el-icon-dish',
  'el-icon-dish-1',
  'el-icon-food',
  'el-icon-chicken',
  'el-icon-fork-spoon',
  'el-icon-knife-fork',
  'el-icon-burger',
  'el-icon-tableware',
  'el-icon-sugar',
  'el-icon-dessert',
  'el-icon-ice-cream',
  'el-icon-hot-water',
  'el-icon-water-cup',
  'el-icon-coffee-cup',
  'el-icon-cold-drink',
  'el-icon-goblet',
  'el-icon-goblet-full',
  'el-icon-goblet-square',
  'el-icon-goblet-square-full',
  'el-icon-refrigerator',
  'el-icon-grape',
  'el-icon-watermelon',
  'el-icon-cherry',
  'el-icon-apple',
  'el-icon-pear',
  'el-icon-orange',
  'el-icon-coffee',
  'el-icon-ice-tea',
  'el-icon-ice-drink',
  'el-icon-milk-tea',
  'el-icon-potato-strips',
  'el-icon-lollipop',
  'el-icon-ice-cream-square',
  'el-icon-ice-cream-round'
]
export default data

dmp-edge-ai/src/views/system/menu/components/BaseDialog.vue

@@ -47,7 +47,7 @@
              </el-form-item>
              <el-form-item label="图标" prop="menuIcon" v-if="form.menuType === MenuType.CONTENT">
                <el-input v-model.trim="form.menuIcon" placeholder="请选择或输入图标">
                  <el-button slot="append" icon="el-icon-setting"></el-button>
                  <el-button slot="append" icon="el-icon-setting" @click="menuIconSelect"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="是否可见" prop="hiddenFlag">
@@ -73,6 +73,7 @@
<script>
import * as MenuService from '@/service/MenuService'
import { ModalType, VisibleStatus, MenuType, IframeFlag } from '@/utils/constant'
import bus from '@/utils/bus'
export default {
  name: 'BaseDialog',
  props: {
@@ -135,11 +136,21 @@ export default {
    title() {
      return this.modalType === ModalType.ADD ? '新增菜单' : '编辑菜单'
    },
    // 获取所有目录
    content() {
      return this.menuList.filter((item) => item.menuType === MenuType.CONTENT)
    }
  },
  created() {
    bus.$on(bus.SET_ICON, this.setIcon)
  },
  beforeDestroy() {
    bus.$off(bus.SET_ICON, this.setIcon)
  },
  methods: {
    setIcon(icon) {
      this.form.menuIcon = icon
    },
    /**
     * 初始化模态框
     */
@@ -168,6 +179,11 @@ export default {
        this.modalType = ModalType.ADD
      }
    },
    // 菜单Icon选择
    menuIconSelect() {
      this.$emit('call')
    },
    // 提交
    submit(type) {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) {

dmp-edge-ai/src/views/system/menu/components/MenuIconDialog.vue

@@ -0,0 +1,80 @@
<template>
  <el-dialog
    title="选择图标"
    class="common-modal menu-icon-modal"
    :visible.sync="dialogVisible"
    width="50%"
    @open="initData"
    @closed="menuIconList = []"
  >
    <!-- 数据太多，需要结束后销毁然后再初始化-->
    <el-button-group>
      <el-button v-for="(item, index) in menuIconList" :icon="item" :key="index" @click="select(item)"></el-button>
    </el-button-group>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import menuIconList from '@/utils/menu-icon.config'
import bus from '@/utils/bus'
export default {
  name: 'MenuIconDialog',
  props: {
    show: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      menuIconList: [],
      icon: ''
    }
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit('update:show', val)
      },
      get() {
        return this.show
      }
    }
  },
  methods: {
    initData() {
      this.menuIconList = menuIconList
      this.icon = ''
    },
    submit() {
      this.dialogVisible = false
      bus.$emit(bus.SET_ICON, this.icon)
    },
    select(item) {
      this.icon = item
    }
  }
}
</script>
<style lang="scss">
.menu-icon-modal .el-dialog {
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 70vh;
  .el-dialog__header,
  .el-dialog__footer {
    flex: none;
  }
  .el-dialog__body {
    flex: auto;
    overflow: auto;
  }
}
</style>

dmp-edge-ai/src/views/system/menu/index.vue

@@ -58,7 +58,15 @@
      </el-table>
    </div>
    <!--新建/编辑菜单模态框-->
    <base-dialog :show.sync="baseVisible" :menuId="menuId" :menuList="tableData" @refresh="search"> </base-dialog>
    <base-dialog
      :show.sync="baseVisible"
      :menuId="menuId"
      :menuList="tableData"
      @refresh="search"
      @call="iconVisible = true"
    >
    </base-dialog>
    <menu-icon-dialog :show.sync="iconVisible"> </menu-icon-dialog>
  </div>
</template>
@@ -70,7 +78,8 @@ export default {
  name: 'Menu',
  components: {
    PageHeader,
    BaseDialog: () => import('./components/BaseDialog')
    BaseDialog: () => import('./components/BaseDialog'),
    MenuIconDialog: () => import('./components/MenuIconDialog')
  },
  data() {
    this.VisibleStatus = VisibleStatus
@@ -89,7 +98,8 @@ export default {
      },
      tableData: [],
      menuId: '',
      baseVisible: false
      baseVisible: false,
      iconVisible: false
    }
  },
  methods: {