iconmenu

src/router/index.js

@@ -136,6 +136,15 @@ export const asyncRouterMap = [
               title: 'calendar',
               icon: 'table'
             }
+          },
+          {
+            path: 'iconMenu',
+            component: _import('haomo/components/iconMenu/index'),
+            name: 'haomo-iconMenu',
+            meta: {
+              title: '图标菜单',
+              icon: 'table'
+            }
           }
         ]
       },

src/views/haomo/components/forms/HmComplexForm.vue

 <template>
-  <el-row type="flex" class="hm-form" style="margin-top: 50px">
-    <el-col :span="6">
-      <div></div>
-    </el-col>
-    <el-col :span="12">
-      <div>
-        <!--表单部分-->
-        <el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
-                 style="width:80%;margin:0 auto">
-          <el-form-item v-for="column in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
-            <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
-                      v-model="formModel[column.codeCamel]"></el-input>-->
+  <div class="app-container documentation-container">
+    <el-row type="flex" class="hm-form" style="margin-top: 50px">
+      <el-col :span="6">
+        <div></div>
+      </el-col>
+      <el-col :span="12">
+        <div>
+          <!--表单部分-->
+          <el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
+                   style="width:80%;margin:0 auto">
+            <el-form-item v-for="column in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
+              <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
+                        v-model="formModel[column.codeCamel]"></el-input>-->
 
-            <!-- 1 普通input -->
-            <el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
-            <!-- 2 日期选择 -->
-            <el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
+              <!-- 1 普通input -->
+              <el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
+              <!-- 2 日期选择 -->
+              <el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
+                              v-model="formModel[column.codeCamel]"
+                              type="datetime"
+                              align="right"
+                              @change="logTimeChange"
+                              value-format="yyyy-MM-dd HH:mm:ss"
+                              :picker-options="pickerOptions">
+              </el-date-picker>
+              <!-- 3 下拉框 -->
+              <el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
+                <el-option v-for="(item,key) in column.options"
+                           :key="key"
+                           :label="item"
+                           :value="key">
+                </el-option>
+              </el-select>
+              <!-- 4 文本域 -->
+              <el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]"
+                        type="textarea"
+                        :autosize="{ minRows: 2, maxRows: 5}"
+                        :rows="2">
+              </el-input>
+              <!-- 5 复选框 -->
+              <el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
+              <el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]">
+                <el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox>
+              </el-checkbox-group>
+              <!-- 6 富文本 -->
+              <quill-editor v-else-if="column.widgetType === 5"
+                            ref="textEditor"
                             v-model="formModel[column.codeCamel]"
-                            type="datetime"
-                            align="right"
-                            @change="logTimeChange"
-                            value-format="yyyy-MM-dd HH:mm:ss"
-                            :picker-options="pickerOptions">
-            </el-date-picker>
-            <!-- 3 下拉框 -->
-            <el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
-              <el-option v-for="(item,key) in column.options"
-                        :key="key"
-                        :label="item"
-                        :value="key">
-              </el-option>
-            </el-select>
-            <!-- 4 文本域 -->
-            <el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]"
-                      type="textarea"
-                      :autosize="{ minRows: 2, maxRows: 5}"
-                      :rows="2">
-            </el-input>
-            <!-- 5 复选框 -->
-            <el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
-            <el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]">
-              <el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox>
-            </el-checkbox-group>
-            <!-- 6 富文本 -->
-            <quill-editor v-else-if="column.widgetType === 5"
-                          ref="textEditor"
-                          v-model="formModel[column.codeCamel]"
-                          :options="editorOption"
-                          @blur="onEditorBlur($event)"
-                          @focus="onEditorFocus($event)"
-                          @ready="onEditorReady($event)">
-            </quill-editor>
-            <!-- 7 单选框 -->
-            <el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]">
-              <el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
-            </el-radio-group>
-          </el-form-item>
-          <el-form-item v-if="buttons && buttons.length > 0">
-            <el-col :span="12" v-for="(btn,key) in buttons" :key="key">
-              <el-button v-if="btn === '确定' || btn === '提交' || btn === '保存'" type="primary" @click="onSubmit()">{{btn}}</el-button>
-              <el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
-              <el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
-            </el-col>
-          </el-form-item>
-        </el-form>
-      </div>
-    </el-col>
-    <el-col :span="6">
-      <div></div>
-    </el-col>
-  </el-row>
+                            :options="editorOption"
+                            @blur="onEditorBlur($event)"
+                            @focus="onEditorFocus($event)"
+                            @ready="onEditorReady($event)">
+              </quill-editor>
+              <!-- 7 单选框 -->
+              <el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]">
+                <el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="buttons && buttons.length > 0">
+              <el-col :span="12" v-for="(btn,key) in buttons" :key="key">
+                <el-button v-if="btn === '确定' || btn === '提交' || btn === '保存' || btn === '发布'" type="primary" @click="onSubmit()">{{btn}}</el-button>
+                <el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
+                <el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
+              </el-col>
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <div></div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>

src/views/haomo/components/iconMenu/HmIconMenu.vue

+<template>
+  <div class="app-container documentation-container">
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse-item title="" name="1">
+        <el-row :gutter="20">
+          <el-col :span="4" v-for="item in icons" style="margin-bottom: 20px;">
+            <i :class="item.className" style="margin-left: 5px;"></i>
+            <p>
+              <i class="hm-icon-menu_i" :style="{backgroundColor: item.color}"></i>
+              <span>{{item.text}}</span>
+            </p>
+          </el-col>
+        </el-row>
+
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+  import _ from 'lodash'
+  import request from '@/utils/request'
+
+  /**
+   * 毫末科技的组件.
+   *
+   *   demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/forms
+   * @author 王康
+   */
+  export default {
+    name: 'HmIconMenu',
+    // 集成其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+    },
+    // 混入公共对象
+    mixins: [],
+    props: {
+      /**
+       * 必传，组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
+       * 对于所有毫末科技的组件，必传schema，以完成数据的交互
+       */
+      schema: {
+        type: Object,
+        required: false
+      },
+      /**
+       * 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），对于复选框，如果只有一个备选项则不必传options
+       * 示例：[
+       *        { name: 'username', widgetType: 1 },
+       *        { name: 'securityLevel', widgetType: 5 },
+       *        { name: 'type', widgetType: 2, options: ['企业', '代理商'] },
+       *        { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 },
+       *        { name: 'createTime', widgetType: 6 }
+       *      ]
+       */
+      columns: {
+        type: Array,
+        required: false,
+        validator: function(value) {
+          if (typeof value !== 'object') {
+            console.warn(`传入的columns不符合要求，必须是数组`)
+            return false
+          }
+
+          return true
+        }
+      }
+    },
+    data() {
+      return {
+        activeNames: '1',
+        icons: [
+          { className: 'icon-公文审批', text: '公文审批', color: '#f7b55d' },
+          { className: 'icon-微平台', text: '微平台', color: '#4ea8ec' },
+          { className: 'icon-综合OA', text: '综合OA', color: '#f7b55d' },
+          { className: 'icon-议题征集', text: '议题征集', color: '#00bf8b' },
+          { className: 'icon-通讯录导出', text: '通讯录导出', color: '#f7b55d' },
+          { className: 'icon-检察课堂', text: '检察课堂', color: '#4ea8ec' },
+          { className: 'icon-检察官网', text: '检察官网', color: '#4ea8ec' },
+          { className: 'icon-总值电话', text: '总值电话', color: '#00bf8b' },
+          { className: 'icon-数据统计', text: '数据统计', color: '#f7b55d' },
+          { className: 'icon-内部公告', text: '内部公告', color: '#00bf8b' },
+          { className: 'icon-应用下载', text: '应用下载', color: '#4ea8ec' }
+        ]
+      }
+    },
+    created() {
+      // this.init()
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val)
+      },
+      init() {
+        const self = this
+        // 如果没有传columns，则全部显示
+        // if (!self.columns || !self.columns.length) {
+        //   _.each(self.schema['columns'], function(column) {
+        //     const tmp = JSON.parse(JSON.stringify(column))
+        //     self.$set(tmp, 'code', tmp.code.toLowerCase())
+        //     self.showUserColumns.push(tmp)
+        //   })
+        // } else
+        if (self.columns && self.columns.length) {
+          self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
+          // console.log(self.showUserColumns)
+          // 将字符串对象进行替换处理
+          _.each(self.showUserColumns, function(column, index) {
+            if (typeof column === 'object') {
+              // 生成一个新对象
+              const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.name]
+              // console.log(tmp)
+              self.$set(tmp, 'code', tmp.code.toLowerCase())
+              self.$set(tmp, 'widgetType', column.widgetType || 1)
+              column.options && self.$set(tmp, 'options', column.options)
+              self.$set(self.showUserColumns, index, tmp) // 顺序
+              // console.log(self.showUserColumns)
+            }
+          })
+          console.log(self.showUserColumns)
+          // 提取v-model绑定的变量
+          _.each(self.showUserColumns, function(item) {
+            if (item.widgetType === 3 && item.options && item.options.length > 0) {
+              self.$set(self.formModel, item.codeCamel, [])
+            } else {
+              self.$set(self.formModel, item.codeCamel, '')
+            }
+          })
+
+          if (!request.defaults.baseURL) {
+            request.defaults.baseURL = '/org/api'
+          }
+        } else {
+          console.log('columns为必传字段!!')
+        }
+      }
+    }
+
+  }
+</script>
+<style scoped>
+  @import './iconfont.css';
+
+  .hm-icon-menu_i{
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-right: 5px;
+  }
+</style>

src/views/haomo/components/iconMenu/fonts/icomoon.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="公文审批" horiz-adv-x="1129" d="M0 729.6v-574.676c0-120.427 95.262-218.924 211.692-218.924h705.641c116.431 0 211.692 98.498 211.692 218.924v574.676h-1129.026zM1129.026 806.4c-42.307 89.818-144.241 153.6-262.657 153.6h-141.837c-118.416 0-220.35-63.782-262.657-153.6h667.152z" />
+<glyph unicode="&#xe901;" glyph-name="检察官网" horiz-adv-x="999" d="M958.228-64h-917.739c-22.363 0-40.488 20.374-40.488 45.511s18.125 45.511 40.488 45.511h917.739c22.363 0 40.488-20.374 40.488-45.511s-18.125-45.511-40.488-45.511zM907.924 391.111v411.954c0 86.314-70.861 156.935-157.468 156.935h-524.893c-86.607 0-157.468-70.621-157.468-156.935v-411.954h839.829zM68.094 300.089c24.173-66.537 82.358-113.778 149.977-113.778h539.875c67.619 0 125.818 47.241 149.977 113.778h-839.829z" />
+<glyph unicode="&#xe902;" glyph-name="检察课堂" horiz-adv-x="932" d="M141.943 830.765c-2.298 14.629 7.237 28.428 21.305 30.818 14.052 2.406 27.323-7.509 29.636-22.138 0.453-2.877 0.453-5.803 0-8.68v-545.369c-2.313-14.612-15.584-24.543-29.636-22.138-10.942 1.853-19.507 10.776-21.305 22.138v545.369zM905.961 857.064c-14.208-0.098-25.713-12.044-25.791-26.819v-819.736c0-11.703-9.128-21.195-20.383-21.195l-736.007 5.835c-39.155-0.016-71.292 32.215-72.668 72.915v7.412c1.985 40.521 34.153 72.346 73.183 72.379h678.095c11.27 0 20.383 9.492 20.383 21.195v769.755c0 11.703-9.113 21.195-20.383 21.195h-678.095c-68.65 0-124.296-57.848-124.296-129.235v-758.995c0.234-68.299 51.269-124.782 116.825-129.219h4.064l790.684-6.55c11.254 0 20.383 9.492 20.383 21.195v873.57c-0.203 14.726-11.817 26.51-25.978 26.299h-0.016zM131.252 92.786c-11.254 0-20.367-9.492-20.367-21.195v-10.061c0-11.703 9.113-21.179 20.367-21.179l670.983-2.649c11.239 0.195 20.226 9.817 20.039 21.52 0 0.114 0 0.244-0.016 0.374v12.711c0 11.703-9.113 21.195-20.367 21.195l-670.639-0.715z" />
+<glyph unicode="&#xe903;" glyph-name="内部公告" horiz-adv-x="1182" d="M1066.508 763.946c-13.619 14.988-37.18 16.429-52.637 3.237-1.186-1.004-2.306-2.088-3.342-3.237-15.992-15.879-15.992-41.242 0-57.121 55.979-57.153 91.922-138.714 91.922-232.594 0-93.831-35.943-171.346-91.922-232.545-15.992-15.879-15.992-41.226 0-57.121 13.619-14.988 37.18-16.429 52.654-3.237 1.17 1.004 2.289 2.088 3.325 3.237 72.004 73.388 115.968 175.457 115.968 289.617 0 114.257-43.964 216.246-115.968 289.714v0.049zM0 621.458v-344.907c0-73.299 54.074-129.406 124.839-129.406h124.7v603.685h-124.7c-70.765 0-124.839-56.090-124.839-129.304v-0.068zM640.711 944.897l-307.837-194.067v-603.685l307.837-194.033c58.246-38.796 108.147-8.638 108.147 60.367v866.757c0 73.282-49.901 99.163-108.147 64.66zM923.615 630.148c-14.17 15.823-38.703 17.345-54.786 3.404-1.234-1.043-2.382-2.207-3.46-3.404-16.657-16.815-16.657-43.586 0-60.384 29.106-30.158 49.97-73.299 49.97-120.768 0-47.418-16.692-90.542-49.97-120.699-16.657-16.798-16.657-43.586 0-60.384 14.153-15.823 38.686-17.363 54.769-3.404 1.234 1.061 2.382 2.207 3.477 3.404 45.78 47.418 74.921 112.078 74.921 181.083s-29.141 138.011-74.921 181.152z" />
+<glyph unicode="&#xe904;" glyph-name="数据统计" horiz-adv-x="905" d="M122.356 57.905c-53.84 0-97.884 43.72-97.884 97.136v415.252c0 53.416 44.044 97.136 97.884 97.136s97.884-43.72 97.884-97.136v-415.252c0-53.416-44.044-97.136-97.884-97.136zM440.48 106.667c-53.84 0-97.884 44.392-97.884 98.63v534.156c0 54.25 44.044 98.643 97.884 98.643s97.884-44.392 97.884-98.643v-534.156c0-54.237-44.044-98.63-97.884-98.63zM819.777 204.19c-47.107 0-85.643 42.595-85.643 94.65v566.51c0 52.054 38.536 94.65 85.643 94.65s85.655-42.595 85.655-94.65v-566.51c0-52.054-38.547-94.65-85.655-94.65zM868.725-64h-832.018c-20.274 0-36.707 21.829-36.707 48.762s16.432 48.762 36.707 48.762h832.018c20.274 0 36.707-21.829 36.707-48.762s-16.432-48.762-36.707-48.762z" />
+<glyph unicode="&#xe905;" glyph-name="通讯录导出" horiz-adv-x="1257" d="M936.356 163.13l-225.615 88.076c0 0-43.008 16.718-59.726 33.176-10.729 10.58-9.967 35.542-0.457 67.42s125.152 161.435 125.152 279.099c0 181.756-119.254 329.099-266.368 329.099s-266.368-147.344-266.368-329.099c0-112.718 103.039-247.084 115.78-271.511 12.726-24.412 9.617-61.634-0.427-72.901-15.073-16.947-70.211-33.939-70.211-33.939l-203.38-90.794c-47.519-17.099-84.735-61.985-84.735-112.641v-24.015c0-55.267 44.806-89.099 99.884-89.099h821.323c55.078 0 99.884 33.832 99.884 89.099v24.015c0 50.656-37.216 96.916-84.735 114.015zM925.117 618.667c-19.283 0-34.936 16.871-34.936 52.534 0 35.62 15.652 52.491 34.936 52.491h245.45c19.271 0 33.796-16.871 33.796-52.491 0-35.663-16.767-52.534-36.037-52.534h-243.209zM984.521 408.615c-23.169 0-41.975 16.871-41.975 52.513s18.806 52.513 41.975 52.513h232.925c23.169 0 39.282-16.871 39.282-52.513s-17.452-52.513-40.621-52.513h-231.586zM1062.524 146.051c-22.87 0-41.434 16.871-41.434 52.534 0 35.641 18.563 52.491 41.434 52.491h154.136c22.87 0 40.067-16.871 40.067-52.491 0-35.663-18.534-52.534-41.389-52.534h-152.814z" />
+<glyph unicode="&#xe906;" glyph-name="微平台" horiz-adv-x="1084" d="M529.232 960c31.992 0 53.909-12.308 75.942-24.631 22.033-12.308 402.352-224.329 416.92-232.826 14.568-8.376 32.934-17.114 36.485-46.671 2.609-22.281-10.785-41.006-22.28-48.147-14.090-8.617-462.987-279.496-477.091-287.375-9.712-5.408-17.656-9.717-29.861-9.717-10.77 0-20.961 4.414-27.484 8.361-8.175 5.047-462.059 278.396-474.25 285.537-12.205 7.141-27.73 21.181-27.614 49.006 0 22.657 14.336 36.818 32.354 46.912 13.495 7.517 404.715 226.423 425.081 237.27 20.265 10.952 39.457 22.281 71.796 22.281zM70.294 504.864c-11.134 6.11-13.972 8.65-33.258 0-8.398-3.683-37.037-14.873-37.037-52.126 0-27.107 23.427-38.523 32.070-43.49 8.644-4.84 429.917-242.765 450.043-254.068 20.227-11.416 30.999-19.374 45.318-19.374s35.849 11.303 48.156 18.217c12.191 6.914 429.7 242.427 446.495 252.107 16.81 9.694 35.154 18.584 36.689 46.27 1.535 27.672-9.947 37.705-28.291 48.076-18.33 10.386-28.871 7.959-49.821-1.609-42.119-19.261-291.703-178.179-337.499-201.011-91.824-45.804-100.338-45.804-113.238-45.804-11.366 0-27.929 2.427-107.215 43.024-45.087 22.944-342.596 204.369-352.412 209.788zM48.651 309.717c-11.364-2.777-21.885-9.38-29.387-14.254-12.829-8.091-18.866-24.315-19.236-38.328-0.843-25.236 18.023-38.328 30.601-45.271s447.481-248.19 464.661-257.684c17.18-9.493 28.662-18.179 45.842-18.179 17.165 0 30.837 8.913 47.395 18.179 16.573 9.267 438.055 242.849 456.315 253.277s38.695 24.201 38.695 48.516c0 24.329-7.251 44.591-38.695 50.967-6.644 1.374-19.473-3.712-28.899-8.7-15.123-7.864-401.773-213.305-416.644-220.943-18.748-9.749-52.737-29.203-57.443-29.203-4.602 0-38.709 19.242-50.68 26.185-16.203 9.38-395.839 225.704-403.090 229.77-7.265 4.052-27.7 8.558-39.434 5.668z" />
+<glyph unicode="&#xe907;" glyph-name="议题征集" horiz-adv-x="885" d="M711.797 503.409c0 60.426-20.146 116.294-54.532 161.274-29.879 39.351-70.863 70.271-118.119 88.189l0.353 1.4-20.146 5.986c-15.639 4.558-31.956 7.716-48.301 9.474l-2.43 0.343c-7.982 0.714-16.318 1.414-25.345 1.414h-1.398c-8.688 0-17.024-0.7-25.359-1.414l-2.43-0.343c-16.331-1.757-32.662-4.915-48.288-9.474l-19.454-5.643 0.339-1.4c-47.595-18.261-88.579-49.181-118.798-88.532-34.047-44.98-54.546-100.848-54.546-161.274 0-43.566 7.643-79.058 19.454-108.578 17.716-44.266 44.473-74.129 66.356-96.962 10.765-11.245 20.485-21.076 26.743-29.163 6.598-8.43 9.734-14.76 10.765-19.689 4.874-24.934 5.213-56.197 5.213-63.941v-2.458c0-35.836 29.187-64.655 65.311-64.655h50.718v252.978l-72.954 73.443c-9.028 8.774-9.028 23.547 0 32.321 9.041 8.787 23.282 8.787 31.97 0l63.573-63.941 63.573 63.941c9.028 8.787 23.268 8.787 31.956 0 9.028-8.774 9.028-23.547 0-32.321l-72.954-73.443v-252.607h54.885c36.138 0 65.311 29.149 65.311 64.642v2.101c0 7.744 0.353 39.351 5.213 63.941 0.692 3.529 2.091 7.387 5.213 12.316 5.213 8.43 14.933 18.975 27.096 31.264 18.069 18.975 40.984 42.866 59.406 76.587 18.408 33.392 31.603 77.301 31.603 134.226zM855.276 547.085h-104.91c1.738-14.639 2.783-29.278 2.783-44.284 0-6.014 0-12.013-0.353-18.027h102.48c16.331 0 29.54 13.891 29.54 31.156-0.353 17.279-13.209 31.156-29.54 31.156zM517.615 71.125h-150.076c-15.639 0-28.142-13.143-28.142-30.026 0-16.517 12.503-29.645 28.142-29.645h150.076c15.625 0 28.128 13.495 28.128 29.645 0 16.883-12.842 30.026-28.128 30.026zM696.172 291.092c-12.164-18.761-24.666-34.529-36.816-49.183l53.84-57.045c11.458-12.013 30.219-12.013 41.69 0 11.458 12.395 11.458 31.918 0 44.284l-58.713 61.945zM680.886 724.264l74.339 78.828c11.471 12.013 11.471 31.904 0 44.299-11.458 12.38-30.219 12.38-41.69 0l-73.293-77.713c14.594-13.876 28.142-28.897 40.645-45.413zM442.571 824.479h0.706c9.72 0 19.101-0.733 28.481-1.496v105.862c0 17.25-13.195 31.156-29.54 31.156-16.318 0-29.513-13.906-29.513-31.156v-105.862c9.381 1.129 19.101 1.496 28.481 1.496h1.385zM517.615-4.329h-150.076c-15.639 0-28.142-13.51-28.142-29.645 0-16.517 12.503-30.026 28.142-30.026h150.076c15.625 0 28.128 13.51 28.128 30.026s-12.842 29.645-28.128 29.645zM204.269 724.264c12.15 16.517 25.698 31.537 40.645 45.413l-73.307 77.713c-11.458 12.38-30.219 12.38-41.69 0-11.458-12.028-11.458-31.918 0-44.299l74.352-78.828zM129.577 228.781c-11.471-12.38-11.471-31.904 0-44.299 11.458-11.999 30.219-11.999 41.676 0l53.853 57.060c-12.164 14.639-25.006 30.789-36.83 49.183l-58.7-61.945zM131.654 502.801c0 15.006 1.045 30.026 2.783 44.284h-104.91c-16.331 0-29.526-13.876-29.526-31.156 0-17.265 13.195-31.156 29.526-31.156h102.48c-0.353 6.014-0.353 12.013-0.353 18.027z" />
+<glyph unicode="&#xe908;" glyph-name="应用下载" horiz-adv-x="1501" d="M934.449 278.916l-142.090-144.703c-11.463-11.674-26.622-17.714-41.799-17.714s-30.335 5.847-41.818 17.714l-142.071 144.703c-23.135 23.542-23.135 61.787 0 85.155 23.116 23.368 60.671 23.561 83.617 0l41.060-41.835v336.876c0 33.363 26.47 60.282 59.212 60.282s59.193-26.918 59.193-60.282v-336.876l41.079 41.835c23.116 23.561 60.69 23.561 83.617 0 22.946-23.561 23.135-61.613 0-85.155zM1173.835 602.574c-7.75 0-15.158-1.659-22.737-2.238-48.487 206.104-229.42 359.665-446.789 359.665-202.211 0-372.23-133.589-434.018-318.216-1.118-1.891-2.406-3.589-3.505-5.654-155.031-37.859-266.785-178.414-266.785-344.401 0-196.148 156.698-355.728 349.284-355.728h824.552c180.762 0 327.096 149.238 327.096 333.113 0.189 184.261-146.334 333.46-327.096 333.46z" />
+<glyph unicode="&#xe909;" glyph-name="综合OA" horiz-adv-x="1117" d="M554.24 960h-23.552l-431.413-81.36c-49.004-14.38-99.274-57.267-99.274-121.725v-610.010c0-51.213 44.825-106.083 99.781-121.725l431.413-89.181h23.046c60.527 0 105.859 45.158 105.859 105.453v812.464c-7.851 60.925-53.183 106.083-105.859 106.083zM202.348 285.785c-34.695-1.261-67.745 14.884-87.878 43.14-19.88 28.003-30.010 61.682-28.744 95.866-1.266 34.31 8.737 67.989 28.744 95.992 20.26 28.003 53.183 44.023 87.878 42.635 34.569 1.261 67.618-14.758 87.878-42.635v0.126c19.88-28.003 30.010-61.682 28.744-95.992 1.266-34.31-8.737-67.989-28.744-95.992-20.133-28.255-53.183-44.401-87.878-43.14zM526.383 288.938l-30.39 74.675h-117.002l-30.39-74.675h-42.42l111.684 272.209h37.734l53.309-128.284 59.894-143.925h-42.42zM368.088 391.803h86.813l-43.855 106.813-42.958-106.813zM251.165 481.372c-11.348 19.063-31.938 30.43-53.931 29.601-21.994 0.829-42.583-10.538-53.931-29.601-11.465-19.418-17.197-41.678-16.261-64.293-0.819-22.615 5.030-44.875 16.729-64.175 10.88-19.418 31.353-31.14 53.346-30.43v-0.474c21.877-0.71 42.35 10.893 53.346 30.075 11.582 19.655 17.314 42.152 16.378 65.004 1.17 22.615-4.329 44.875-15.676 64.293zM960.391 857.6h-289.291v-175.469h280.7c20.261 0 32.443-12.459 32.443-32.835 0-20.506-12.31-32.835-32.443-32.835h-280.7v-135.235h280.7c20.261 0 32.443-12.459 32.443-32.835 0-20.506-12.31-32.835-32.443-32.835h-280.7v-135.235h280.7c20.261 0 32.443-12.459 32.443-32.835s-12.31-32.835-32.443-32.835h-280.7v-176.247h297.755c81.556 0 148.236 66.969 148.236 150.031v518.489c-7.181 73.198-64.885 150.68-156.699 150.68z" />
+<glyph unicode="&#xe90a;" glyph-name="总值电话" horiz-adv-x="1223" d="M397.442 433.347c0 108.612 96.15 196.632 214.761 196.632 118.629 0 214.779-88.021 214.779-196.632 0-108.547-96.15-196.584-214.779-196.584-118.611 0-214.761 88.037-214.761 196.584zM577.268 959.636l34.463 0.364 34.76-0.364c11.036-0.219 22.74-0.637 34.63-1.165 59.581-2.549 133.839-7.211 205.496-18.445 70.858-11.089 139.784-28.66 190.187-56.956 45.257-25.382 83.343-59.487 109.185-100.71 23.725-37.873 37.491-82.284 37.491-132.247 0-27.695-4.18-54.57-11.742-79.716h-0.056c-7.97-26.275-19.805-50.947-34.649-73.234v-0.055c-6.688-10.015-15.569-17.753-25.694-22.542-10.125-4.807-21.848-6.883-34.036-5.808l-0.056 0.091c-12.373 1.056-23.483 5.153-32.475 11.544-9.029 6.519-16.405 15.623-21.179 26.748-40.036 92.881-96.199 174.345-170.141 230.445-66.121 50.128-146.305 80.135-241.668 80.135h-80.091c-95.363 0-175.529-30.007-241.668-80.135-73.942-56.1-130.105-137.564-170.141-230.445-4.775-11.125-12.15-20.284-21.179-26.748-8.992-6.391-20.139-10.524-32.456-11.544l-0.056-0.091c-12.187-1.056-23.948 1.056-34.054 5.808-10.107 4.789-19.006 12.527-25.694 22.542v0.055c-14.844 22.287-26.679 46.941-34.63 73.234h-0.056c-7.58 25.146-11.76 52.021-11.76 79.716 0 49.964 13.767 94.374 37.491 132.247 25.861 41.224 63.873 75.273 109.185 100.71 50.459 28.296 119.329 45.867 190.187 56.956 71.675 11.235 145.896 15.896 205.514 18.445l34.89 1.165zM615.035 722.432h-39.071c-103.27 0-186.306-38.803-251.139-100.965-77.090-73.937-129.159-181.233-159.31-296.46-24.838-94.86-42.243-194.573-17.804-268.979 23.315-71.032 87.496-120.028 225.884-120.028h482.916c138.406 0 202.55 48.995 225.866 120.028 24.439 74.406 7.035 174.119-17.786 268.979-30.169 115.227-82.22 222.523-159.328 296.46-64.834 62.162-147.87 100.965-251.139 100.965h-39.089z" />
+</font></defs></svg>
\ No newline at end of file

src/views/haomo/components/iconMenu/iconfont.css

+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?ftr1fl');
+  src:  url('fonts/icomoon.eot?ftr1fl#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?ftr1fl') format('truetype'),
+    url('fonts/icomoon.woff?ftr1fl') format('woff'),
+    url('fonts/icomoon.svg?ftr1fl#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.icon-公文审批:before {
+  content: "\e900";
+  color: #f7b55d;
+}
+.icon-检察官网:before {
+  content: "\e901";
+  color: #4ea8ec;
+}
+.icon-检察课堂:before {
+  content: "\e902";
+  color: #4ea8ec;
+}
+.icon-内部公告:before {
+  content: "\e903";
+  color: #00bf8b;
+}
+.icon-数据统计:before {
+  content: "\e904";
+  color: #f7b55d;
+}
+.icon-通讯录导出:before {
+  content: "\e905";
+  color: #f7b55d;
+}
+.icon-微平台:before {
+  content: "\e906";
+  color: #4ea8ec;
+}
+.icon-议题征集:before {
+  content: "\e907";
+  color: #00bf8b;
+}
+.icon-应用下载:before {
+  content: "\e908";
+  color: #4ea8ec;
+}
+.icon-综合OA:before {
+  content: "\e909";
+  color: #f7b55d;
+}
+.icon-总值电话:before {
+  content: "\e90a";
+  color: #00bf8b;
+}

src/views/haomo/components/iconMenu/index.vue

+<template>
+  <div class="app-container calendar-list-container">
+    <hm-icon-menu>
+    </hm-icon-menu>
+  </div>
+</template>
+
+<script>
+  import HmIconMenu from './HmIconMenu.vue'
+  import schema from '../../schemas/hm_org_schema'
+
+  export default {
+    name: 'HmComplexFormIndex',
+    // 继承其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+      'hm-icon-menu': HmIconMenu
+    },
+    data() {
+      return {
+        // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
+        showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
+        // 要显示按钮 暂只支持确定、保存、取消、提交、重置
+        showUserButtons: ['确定', '取消']
+        // showUserButtons: []
+      }
+    },
+    computed: {
+    },
+    filters: {
+    },
+    created() {
+      this.schema = schema
+      // console.log(this.schema)
+      this.tableId = '0e26566e953449a7a7500c34be39fd26'
+    },
+    methods: {
+      confirm() {
+        console.log('确定')
+      },
+      cancel() {
+        console.log('取消')
+      }
+    }
+  }
+</script>
+<style scoped>
+</style>