ap-dev 1.1.14 → 1.1.18

package/dev/ApiPanel/index.vue

@@ -10,7 +10,7 @@
           :props="defaultProps"
           default-expand-all
           :filter-node-method="filterNode"
-          @node-click="handleNodeClick"
+          @node-click="handleNodeClick"
         />
       </div>
     </ap-aside>
@@ -23,6 +23,7 @@
 
 <script>
 import menus from './menus'
+import ApiIconList from './modules/ApiIconList'
 
 // 批量导入modules下的组件
 const allComponents = require.context('./modules', false, /\.vue$/)
@@ -32,6 +33,8 @@ allComponents.keys().forEach(fileName => {
   apiComponents[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
 })
 
+apiComponents.ApiIconList = ApiIconList
+
 export default {
   name: 'ApiPanel',
   components: apiComponents,
@@ -65,4 +68,4 @@ export default {
 
 <style scoped>
 
-</style>
+</style>

package/dev/ApiPanel/menus.js

@@ -66,9 +66,12 @@ const menus = [
             }, {
                 id: 'ApiIconList',
                 label: '4.3 Icon 图标'
+            }, {
+                id: 'ApiVueUtils',
+                label: '4.4 常用工具类'
             }, {
                 id: 'ApiOtherVue',
-                label: '4.4 其他'
+                label: '4.5 其他'
             }]
     }, {
         id: 'ApiDefault',

package/dev/ApiPanel/modules/ApiIconList/iconGroup.js

@@ -0,0 +1,433 @@
+const iconGroup = [
+    {
+        name: "报表类",
+        icons: [
+            'search',
+            'fenlei',
+            'fenlei2',
+            'bottom-left',
+
+            's-marketing',
+            's-data',
+            'pie-chart',
+            'chart-radar',
+            'chart-gauge',
+            'chart-pie',
+            'chart-line',
+            'dashboard',
+            'chart-bar',
+
+            'monitor',
+            'data-line',
+            'data-analysis',
+            'data-board',
+            'pc',
+        ]
+    }, {
+        name: "模块类",
+        icons: [
+            's-grid',
+            'menu',
+            'mokuai2',
+            'mokuai1',
+            'fenlei3',
+            'mokuai5',
+            'mokuai4',
+            'mokuai3',
+            'mokuai',
+            'component',
+            'group2',
+            'example',
+            'yingyongmokuai',
+            'group',
+            'zhongxin1',
+
+            'coin',
+            'pic-part',
+            'part',
+            'share',
+            'list',
+        ]
+    }, {
+        name: "配置类",
+        icons: [
+            's-tools',
+            'setting',
+            'canshupeizhi',
+            'peizhi2',
+            'peizhi3',
+            'kaifapeizhi',
+
+
+            'set-up',
+            'key',
+            'key',
+            'auth',
+
+            's-operation',
+            'peizhi4',
+            'peizhi1',
+            'close-notification',
+        ]
+    }, {
+        name: "人员类",
+        icons: [
+            'bumenguanli',
+            'org',
+            'tree',
+            'tree-table',
+
+            'delete-location',
+            'users',
+            'users2',
+            'peoples',
+            'users3',
+
+            'user-solid',
+            'user',
+            's-custom',
+            'wode',
+            'user-setting',
+            'user2',
+            'role',
+            'user-auth',
+            'user-key',
+            'my',
+            'service',
+            'idcard',
+        ]
+    }, {
+        name: "信息类",
+        icons: [
+            's-promotion',
+            'guide',
+            'position',
+            's-flag',
+            'collection-tag',
+            'price-tag',
+            'discount',
+
+            'warning',
+            'warning-outline',
+            'question',
+            'info',
+
+
+            's-help',
+            'help',
+            'bangzhu',
+            'loading',
+            'time',
+            'workTime',
+
+            'news',
+            'youjian',
+            'email',
+            's-comment',
+            'chat-round',
+            'chat-line-round',
+            'chat-square',
+            'chat-dot-square',
+            'chat-line-square',
+            'message',
+            'duanxin',
+            'xiaoxi',
+            'xiaoxi1',
+            'message',
+            'tooltip',
+            'chat-dot-round',
+        ]
+    }, {
+        name: "操作类",
+        icons: [
+            'refresh',
+            'refresh-right',
+            'refresh-left',
+            'transfer',
+            'exchange',
+            'mail-forward',
+            'mail-reply',
+            'history',
+            'switch-button',
+            'close2',
+            'out',
+            'upload2',
+            'download',
+            'upload',
+            'copy-document',
+            'copy',
+            'copy2',
+            'edit',
+            'edit-outline',
+            'floppy-o',
+            'delete-solid',
+            'delete',
+            'trash-o',
+
+            // 增删改查
+            'remove',
+            'circle-plus',
+            'success',
+            'error',
+            'zoom-in',
+            'zoom-out',
+            'remove-outline',
+            'circle-plus-outline',
+            'circle-check',
+            'circle-close',
+            'finished',
+            'minus',
+            'plus',
+            'check',
+            'close',
+
+            // 方向
+            'd-caret',
+            'caret-left',
+            'caret-right',
+            'ap-caret-right',
+            'ap-caret-left',
+            'caret-bottom',
+            'caret-top',
+            'title-flag',
+            'arrow-down',
+            'arrow-up',
+            'd-arrow-left',
+            'd-arrow-right',
+            'sort',
+            'sort-up',
+            'sort-down',
+            'bottom-right',
+            'back',
+            'right',
+            'bottom',
+            'top',
+            'top-left',
+            'top-right',
+            'arrow-left',
+            'arrow-right',
+
+            'video-pause',
+            'video-play',
+            'star-on',
+            'star-off',
+            'more-outline',
+            'more',
+
+            's-fold',
+            's-unfold',
+            'aim',
+            'lock',
+            'unlock',
+            'password',
+            'rank',
+            'full-screen',
+            'drag',
+            'crop',
+
+            'eye-slash',
+            'eye',
+            'view',
+            'eye-open',
+            'exit-fullscreen',
+            'fullscreen',
+
+
+            'female',
+            'male',
+            'link',
+            'connection',
+
+            'model',
+            'place',
+            'location',
+            'location-information',
+            'location-outline',
+            'add-location',
+            'map-location',
+
+
+
+            // 富文本
+            'button',
+            'check-square-o',
+            'open',
+            'turn-off',
+            'input-number',
+            'nested',
+            'textarea',
+            'select',
+            'switch',
+            'fixed-left',
+            'fixed-right',
+            'layout-sx',
+            'icon',
+            'input',
+            'tab',
+            'container-row',
+            'date',
+            'language',
+            'size',
+            'radio',
+            'date-time',
+            'table',
+            'code',
+            'c-scale-to-original',
+            
+            'thumb',
+            'zhipai',
+            '404',
+        ]
+    }, {
+        name: "文档类",
+        icons: [
+            'folder',
+            'folder-opened',
+            'files',
+            'receiving',
+            'folder-add',
+            'folder-remove',
+            'folder-delete',
+            'folder-checked',
+            
+            
+            'skill',
+            'wendangpeizhi',
+            'form',
+
+            's-order',
+            's-release',
+            's-claim',
+            'tickets',
+            'document-add',
+            'document-remove',
+            'document-delete',
+            'document-checked',
+            'document',
+            'postcard',
+            'file-o',
+            'documentation',
+            'file-text-o',
+
+            'message-box',
+            'document-copy',
+            'clipboard',
+
+            'dictionary',
+            's-management',
+            'notebook-2',
+            'notebook-1',
+            'collection',
+            
+            'reading',
+            'education',
+            
+            'excel',
+            'pdf',
+            'zip',
+            'printer',
+        ]
+    }, {
+        name: "财务类",
+        icons: [
+            'wallet',
+            'money',
+            'bank-card',
+
+        ]
+    }, {
+        name: "物品类",
+        icons: [
+            's-goods',
+            'goods',
+            'picture',
+            'picture-outline',
+            'picture-outline-round',
+            'camera-solid',
+            'camera',
+            'video-camera-solid',
+            'video-camera',
+            'message-solid',
+            'bell',
+            's-cooperation',
+            's-platform',
+            's-open',
+            's-finance',
+            'brush',
+            'scissors',
+            'umbrella',
+            'headset',
+            'mouse',
+            'coordinate',
+            'suitcase',
+            'suitcase-1',
+            'toilet-paper',
+            'table-lamp',
+            'phone',
+            'phone-outline',
+            's-check',
+            's-ticket',
+            's-opportunity',
+            'paperclip',
+            'takeaway-box',
+            'attract',
+            'mobile',
+            'magic-stick',
+            'film',
+            'no-smoking',
+            'shopping',
+            'shopping-cart-full',
+            'shopping-cart-1',
+            'shopping-cart-2',
+            'shopping-bag-1',
+            'shopping-bag-2',
+            'sold-out',
+            'sell',
+            'present',
+            'box',
+            'cpu',
+            'odometer',
+            'microphone',
+            'turn-off-microphone',
+            'first-aid-kit',
+            'stopwatch',
+            'discover',
+            'medal-1',
+            'medal',
+            'trophy',
+            'trophy-1',
+            'alarm-clock',
+            'timer',
+            'watch-1',
+            'watch',
+            'bug',
+            'international',
+
+            'smoking',
+            'mic',
+            'theme',
+            'xin',
+            'star',
+
+            'home',
+            's-shop',
+            'office-building',
+            'school',
+            'house',
+            's-home',
+
+            'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round',
+
+            'vue',
+            'java',
+            'qq',
+            'wechat',
+            'dingding',
+            'qiyeweixin',
+            'sems',
+
+        ]
+    }
+]
+
+export default iconGroup

package/dev/ApiPanel/modules/{ApiIconList.vue → ApiIconList/index.vue}

@@ -1,21 +1,40 @@
 <template>
     <ap-container>
         <ap-header margin="1101">
+            <el-radio v-model="showType" :label="0">分类显示</el-radio>
             <el-radio v-model="showType" :label="1">自定义</el-radio>
             <el-radio v-model="showType" :label="2">Element默认</el-radio>
             <el-radio v-model="showType" :label="3">图片</el-radio>
             <div class="ap-split-line"/>
         </ap-header>
         <ap-main margin="0111" class="icons-container">
+            <template v-if="showType == 0">
+                <template v-for="group of iconGroup">
+                    <el-collapse v-model="activeNames">
+                        <el-collapse-item :title="group.name" :name="group.name">
+                            <div v-for="item of group.icons" class="icon-ctn">
+                                <div class="icon-item-ctn">
+                            <span class="icon-item">
+                              <i :class="getIconClass(item) " @click="copyIconCode(item,$event)"/>
+                            </span>
+                                </div>
+                                <div class="icon-text-ctn">
+                                    <span class="icon-text" @click="copyIconClass(item,$event)">{{ getIconClass(item) }}</span>
+                                </div>
+                            </div>
+                        </el-collapse-item>
+                    </el-collapse>
+
+                </template>
+
+            </template>
+
             <template v-if="showType == 1">
                 <div v-for="item of myIcons" :key="item.icon_id" class="icon-ctn">
                     <div class="icon-item-ctn">
-            <span class="icon-item">
-              <i
-                  :class="getIconClass(item.font_class) "
-                  @click="copyIconCode(item.font_class,$event)"
-              />
-            </span>
+                        <span class="icon-item">
+                          <i :class="getIconClass(item.font_class) " @click="copyIconCode(item.font_class,$event)"/>
+                        </span>
                     </div>
                     <div class="icon-text-ctn">
                         <span class="icon-text"
@@ -56,6 +75,7 @@
 import clipboard from 'ap-util/util/ClipboardUtil'
 import icons from 'ap-frame/frame/assets/icon/iconfont.json'
 import elementIcons from './element-icons'
+import iconGroup from './iconGroup'
 
 // 批量导入modules下的组件
 const allImg = require.context('ap-frame/frame/assets/images/icon', false)
@@ -67,14 +87,24 @@ allImg.keys().forEach(fileName => {
 export default {
     name: 'Icons',
     data() {
-        const myIcons = icons.glyphs
+        const myIcons = icons.glyphs;
+        let activeNames = ["未分组"];
+        for (let i = 0; i < iconGroup.length; i++) {
+            activeNames.push(iconGroup[i].name)
+        }
         return {
             myIcons,
             elementIcons,
-            showType: 1,
-            iconImgs: iconImgs
+            showType: 0,
+            iconImgs: iconImgs,
+            iconGroup,
+            activeNames: activeNames
         }
     },
+    mounted() {
+        // 未分组处理
+        this.initUnGroup();
+    },
     methods: {
         getIconCode(value) {
             return `<i class="el-icon-${value}" />`
@@ -97,6 +127,40 @@ export default {
         copyIconImgName(value, event) {
             clipboard(value, event)
         },
+        initUnGroup(){
+            // 已分组
+            let addedArr = [];
+            for (let i = 0; i < this.iconGroup.length; i++) {
+                let icons = this.iconGroup[i].icons;
+                for (let j = 0; j < icons.length; j++) {
+                    addedArr.push(icons[j]);
+                }
+            }
+
+            let unAddedArr = [];
+            // element自带
+            for (let i = 0; i < this.elementIcons.length; i++) {
+                let item = this.elementIcons[i];
+                if (addedArr.indexOf(item) < 0){
+                    unAddedArr.push(item);
+                }
+            }
+
+            // 自定义
+            for (let i = 0; i < this.myIcons.length; i++) {
+                let name = this.myIcons[i].font_class;
+                if (addedArr.indexOf(name) < 0){
+                    unAddedArr.push(name);
+                }
+            }
+            if (unAddedArr.length > 0) {
+                let unGroup = {
+                    name: "未分组",
+                    icons: unAddedArr
+                };
+                iconGroup.unshift(unGroup);
+            }
+        }
     }
 }
 </script>
@@ -154,5 +218,7 @@ export default {
     color: #1890FF;
 }
 
-
+.icons-container .el-divider--horizontal {
+    float: left;
+}
 </style>

package/dev/ApiPanel/modules/ApiJavaUtils.vue

@@ -10,7 +10,8 @@
 
 <script>
 import ApiArrayUtil from './../tabs/ApiArrayUtil'
-import ApiCacheUtil from './../tabs/ApiCacheUtil'
+import ApiDictionaryUtil from './../tabs/ApiDictionaryUtil'
+import ApiOrgUtil from './../tabs/ApiOrgUtil'
 import ApiDateUtil from './../tabs/ApiDateUtil'
 import ApiEMailUtil from './../tabs/ApiEMailUtil'
 import ApiExcelUtil from './../tabs/ApiExcelUtil'
@@ -21,12 +22,14 @@ import ApiListUtil from './../tabs/ApiListUtil'
 import ApiStringUtil from './../tabs/ApiStringUtil'
 import ApiQyWxUtil from './../tabs/ApiQyWxUtil'
 import ApiJavaCommonUtil from './../tabs/ApiJavaCommonUtil'
+import ApiWebSocketUtil from './../tabs/ApiWebSocketUtil'
 
 export default {
     name: "ApiJavaUtils",
     components: {
         ApiArrayUtil,
-        ApiCacheUtil,
+        ApiDictionaryUtil,
+        ApiOrgUtil,
         ApiDateUtil,
         ApiEMailUtil,
         ApiExcelUtil,
@@ -37,6 +40,7 @@ export default {
         ApiStringUtil,
         ApiQyWxUtil,
         ApiJavaCommonUtil,
+        ApiWebSocketUtil
     },
     data() {
         let opts = [
@@ -74,8 +78,14 @@ export default {
                 label: 'QyWxUtil',
                 component: 'ApiQyWxUtil',
             }, {
-                label: 'CacheUtil',
-                component: 'ApiCacheUtil',
+                label: 'DictionaryUtil',
+                component: 'ApiDictionaryUtil',
+            }, {
+                label: 'OrgUtil',
+                component: 'ApiOrgUtil',
+            },{
+                label: 'WebSocketUtil',
+                component: 'ApiWebSocketUtil',
             },
         ];
         return {

package/dev/ApiPanel/modules/ApiVueUtils.vue

@@ -0,0 +1,48 @@
+<template>
+    <el-tabs v-model="activeName" tabPosition="left" class="api-tabs">
+        <template v-for="(item,index) in opts">
+            <el-tab-pane :label="item.label" :name="'tab' + index" class="api-tab">
+                <component :is="item.component"></component>
+            </el-tab-pane>
+        </template>
+    </el-tabs>
+</template>
+
+<script>
+import ApiVueDateUtil from './../tabs/ApiVueDateUtil'
+import ApiVueWebSocketUtil from './../tabs/ApiVueWebSocketUtil'
+
+export default {
+    name: "ApiJavaUtils",
+    components: {
+        ApiVueDateUtil,
+        ApiVueWebSocketUtil,
+    },
+    data() {
+        let opts = [
+            {
+                label: "DateUtil",
+                component: "ApiVueDateUtil"
+            }, {
+                label: "WebSocketUtil",
+                component: "ApiVueWebSocketUtil"
+            }
+        ];
+        return {
+            activeName: 'tab0',
+            opts: opts
+        }
+    }
+}
+</script>
+
+<style scoped>
+.api-tabs {
+    display: flex;
+    height: 100%;
+}
+.api-tabs /deep/ .el-tabs__content {
+    flex: 1;
+    overflow: scroll;
+}
+</style>

package/dev/ApiPanel/tabs/ApiDictionaryUtil.vue

@@ -0,0 +1,55 @@
+<template>
+    <div style="height: 100%">
+        <api-tittle-2>数据字典工具类(缓存) - DictionaryUtil</api-tittle-2>
+        <api-table :data="methodData" :columns="methodCols"/>
+    </div>
+</template>
+
+<script>
+import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
+
+export default {
+    name: 'ApiDictionaryUtil',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    },
+    data() {
+        const methodCols = [
+            {label: '方法名', prop: 'name', width: '220px'},
+            {label: '说明', prop: 'memo', width: '400px'},
+            {label: '示例代码', prop: 'code', minWidth: '100px'}]
+        const methodData = [
+            {
+                name: 'getOne',
+                memo: `获取数据字典：单项 (String)`,
+                code: `<span class="api-code">// 获取编码为"xxx"的字符串
+String str = DictionaryUtil.getOne("xxx");</span>`
+            }, {
+                name: 'getOneForInteger',
+                memo: `获取数据字典：单项 (Integer)`,
+                code: `<span class="api-code">// 获取编码为"xxx"的数字
+Integer str = DictionaryUtil.getOneForInteger("xxx");</span>`
+            }, {
+                name: 'getList',
+                memo: `获取数据字典：List (String)`,
+                code: `<span class="api-code">// 获取编码为"xxx"的list (String)
+List&lt;String> a = DictionaryUtil.getList("xxx")</span>`
+            }, {
+                name: 'getListForInteger',
+                memo: `获取数据字典：List (Integer)`,
+                code: `<span class="api-code">// 获取编码为"xxx"的list (Integer)
+ List&lt;Integer> a = DictionaryUtil.getListForInteger("xxx")</span>`,
+            }
+        ]
+
+        return {
+            methodData,
+            methodCols
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+</style>

package/dev/ApiPanel/tabs/ApiOrgUtil.vue

@@ -0,0 +1,60 @@
+<template>
+    <div style="height: 100%">
+        <api-tittle-2>组织部门/人员工具类(缓存) - OrgUtil</api-tittle-2>
+        <api-table :data="methodData" :columns="methodCols"/>
+    </div>
+</template>
+
+<script>
+import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
+
+export default {
+    name: 'ApiOrgUtil',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    },
+    data() {
+        const methodCols = [
+            {label: '方法名', prop: 'name', width: '220px'},
+            {label: '说明', prop: 'memo', width: '400px'},
+            {label: '示例代码', prop: 'code', minWidth: '100px'}]
+        const methodData = [
+            {
+                name: 'getOrgGroup',
+                memo: `获取组织分组：公司别和用户权限过滤`,
+                code: `<span class="api-code">// 获取编码为"xxx"的组织分组：根据登录用户的权限和公司别，自动过滤数据
+List&lt;OrgGroup> a = OrgUtil.getOrgGroup("xxx")</span>`
+            }, {
+                name: 'getOrgGroupByAll',
+                memo: `获取组织分组：不过滤`,
+                code: `<span class="api-code">// 不进行任何过滤
+List&lt;OrgGroup> a = OrgUtil.getOrgGroupByAll("xxx")
+</span>`
+            }, {
+                name: 'getOrgGroupByCompany',
+                memo: `获取组织分组：公司别过滤`,
+                code: `<span class="api-code">// 根据登录用户的公司别，自动过滤数据
+List&lt;OrgGroup> a = OrgUtil.getOrgGroupByCompany("xxx")</span>`
+            }, {
+                name: 'getOrgGroupByCompany',
+                memo: `获取组织分组：公司别过滤<br>
+getOrgGroupByCompany(code, companyId)<br>
+参数:<br>
+【String】code - 分组编码<br>
+【String】companyId - 公司别`,
+                code: `<span class="api-code">// 根据指定公司别，自动过滤数据
+List&lt;OrgGroup> a = OrgUtil.getOrgGroupByCompany("xxx", "Xx")</span>`
+            }
+        ]
+
+        return {
+            methodData,
+            methodCols
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+</style>

package/dev/ApiPanel/tabs/ApiVueDateUtil.vue

@@ -0,0 +1,44 @@
+<template>
+    <div style="height: 100%">
+        <h3>日期工具类 - DateUtil</h3>
+        <api-table :data="methodData" :columns="methodCols"/>
+    </div>
+</template>
+
+<script>
+import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
+
+export default {
+    name: 'ApiStringUtil',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    },
+    data() {
+        const methodCols = [
+            {label: '方法名', prop: 'name', width: '220px'},
+            {label: '说明', prop: 'memo', width: '300px'},
+            {label: '示例代码', prop: 'code', minWidth: '100px'}]
+        const methodData = [
+            {
+                name: 'formatDate',
+                memo: `格式化日期<br><span class="api-memo">格式：yyyy-MM-dd hh:mm:ss。</span>`,
+                code: `<span class="api-code">// 1、导入方法
+import {formatDate} from 'ap-util/util/DateUtil';
+
+// 2、调用
+let str = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
+</span>`
+            }
+        ]
+
+        return {
+            methodData,
+            methodCols
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+</style>

package/dev/ApiPanel/tabs/ApiVueWebSocketUtil.vue

@@ -0,0 +1,128 @@
+<template>
+    <div style="height: 100%">
+        <h3>WebSocket工具类 - WebSocketUtil</h3>
+        <api-tittle-2>1、导入方法:</api-tittle-2>
+        <api-content>
+            <api-code>import {initWebSocket, sendMessage, sendMessageByPrefix,closeWebSocket} from "ap-util/util/WebSocketUtil";</api-code>
+        </api-content>
+
+        <api-tittle-2>2、初始化WebSocket:</api-tittle-2>
+        <api-content>
+            <b>初始化：</b><span class="api-code">initWebSocket(options)</span><br>
+            【参数】id - [必填][唯一] 连接id<br>
+            【参数】onmessage - 接收后端消息回调函数<br>
+            【参数】onopen - 连接成功回调函数<br>
+            【参数】onclose - 连接关闭回调函数<br>
+            【参数】onerror - 连接错误回调函数<br>
+            【参数】reconnect - 断开自动重连，默认true<br>
+
+            <api-code>{{js1}}</api-code>
+        </api-content>
+
+        <api-tittle-2>3、发送消息：两种方式，根据具体需求选择</api-tittle-2>
+        <api-tittle-2>3.1 前端方式发送消息:</api-tittle-2>
+        <api-content>
+            <b>单消息发送：</b><span class="api-code">sendMessage(id, message)</span><br>
+            【参数】id - 连接id，同初始化时的id<br>
+            【参数】message - 消息内容<br>
+            <api-code>// 例：给id为"demo123"的连接发消息<br>
+                sendMessage("demo123", "这是推给你的消息");</api-code><br>
+
+            <b>群发消息：</b><span class="api-code">sendMessageByPrefix(prefix, message)</span><br>
+            【参数】prefix - 连接id的前缀<br>
+            【参数】message - 消息内容<br>
+            <api-code>// 例：给以"demo"为开头的连接，群发消息<br>
+                sendMessageByPrefix("demo", "这是群发的消息");</api-code>
+        </api-content>
+        <api-tittle-2>3.2 后端方式发送消息:</api-tittle-2>
+        <api-content>
+            参考后端工具类【WebSocketUtil】
+        </api-content>
+
+        <api-tittle-2>4、关闭WebSocket:</api-tittle-2>
+        <api-content>
+            在页面Destroy前关闭连接，如下
+            <api-code>{{js2}}</api-code>
+        </api-content>
+
+        <api-tittle-2>5、完整示例:</api-tittle-2>
+        <api-content>
+            <api-code>{{js3}}</api-code>
+        </api-content>
+
+    </div>
+</template>
+
+<script>
+import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
+
+export default {
+    name: 'ApiVueWebSocketUtil',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    },
+    data() {
+        const js1 = `// 初始化：通常只需要配置id和onmessage即可
+initWebSocket({
+    id: this.id,
+    onmessage: (event) => {
+        console.log("前端接收到消息啦！" + event.data);
+    }
+})`
+        const js2 = `beforeDestroy() {
+    closeWebSocket(this.id);
+},`
+        const js3 = `<template>
+    <ap-container>
+        <ap-main margin="1111">
+            <div>
+                <el-button type="primary" @click="sendMsg">单个发消息</el-button>
+                <el-button type="primary" @click="sendMessageByPrefix">群发消息</el-button>
+            </div>
+        </ap-main>
+    </ap-container>
+</template>
+
+<script>
+
+import {closeWebSocket, initWebSocket, sendMessage, sendMessageByPrefix} from "ap-util/util/WebSocketUtil";
+
+export default {
+    name: "DemoSocket",
+    mounted() {
+        initWebSocket({
+            id: this.id,
+            onmessage: (event) => {
+                console.log("前端接收到消息：" + event.data);
+            },
+        })
+    },
+    beforeDestroy() {
+        closeWebSocket(this.id);
+    },
+    data() {
+        return {
+            id: "demo" + new Date().getTime()
+        }
+    },
+    methods: {
+        sendMsg() {
+            sendMessage(this.id, "这是单一消息");
+        },
+        sendMessageByPrefix() {
+            sendMessageByPrefix("demo", "这是群发消息");
+        }
+    }
+}
+< /script>`
+
+        return {
+            js1,js2,js3
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+</style>

package/dev/ApiPanel/tabs/ApiWebSocketUtil.vue

@@ -0,0 +1,47 @@
+<template>
+    <div style="height: 100%">
+        <h3>WebSocket工具类 - WebSocketUtil</h3>
+        <api-table :data="methodData" :columns="methodCols"/>
+    </div>
+</template>
+
+<script>
+import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
+
+export default {
+    name: 'ApiWebSocketUtil',
+    components: {
+        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
+    },
+    data() {
+        const methodCols = [
+            {label: '方法名', prop: 'name', width: '220px'},
+            {label: '说明', prop: 'memo', width: '300px'},
+            {label: '示例代码', prop: 'code', minWidth: '100px'}]
+        const methodData = [
+            {
+                name: 'sendMessage',
+                memo: `单点消息：推送给指定的连接<br>`,
+                code: `<span class="api-code">// 给id为"demo123"的连接发消息
+WebSocketUtil.sendMessage("demo123", "消息内容");
+</span>`
+            },{
+                name: 'sendMessageByPrefix',
+                memo: `广播消息：推送给指定前缀的连接<br>`,
+                code: `<span class="api-code">// 给以"demo"为开头的连接，群发消息
+WebSocketUtil.sendMessageByPrefix("demo", "消息内容");
+</span>`
+            }
+        ]
+
+        return {
+            methodData,
+            methodCols
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ap-dev",
-  "version": "1.1.14",
+  "version": "1.1.18",
   "description": "===== ap-dev =====",
   "author": "xiexinbin",
   "email": "876818817@qq.com",

package/dev/ApiPanel/tabs/ApiCacheUtil.vue

@@ -1,121 +0,0 @@
-<template>
-    <div style="height: 100%">
-        <api-tittle-2>Redis缓存工具类 - CacheUtil</api-tittle-2>
-        <api-table :data="methodData" :columns="methodCols"/>
-    </div>
-</template>
-
-<script>
-import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
-
-export default {
-    name: 'ApiCacheUtil',
-    components: {
-        ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
-    },
-    data() {
-        const methodCols = [
-            {label: '方法名', prop: 'name', width: '220px'},
-            {label: '说明', prop: 'memo', width: '400px'},
-            {label: '示例代码', prop: 'code', minWidth: '100px'}]
-        const methodData = [
-            {
-                name: 'getDictionary',
-                memo: `获取数据字典：单项 Value默认String<br>
-getDictionary(key)<br>
-参数:<br>
-【String】key - 字典编码`,
-                code: `<span class="api-code">// 1、controller或service中注入CacheUtil
- @Resource
- private CacheUtil cacheUtil;
- // 2、调用方法
- String str = cacheUtil.getDictionary("xxx");</span>`
-            }, {
-                name: 'getDictionary',
-                memo: `获取数据字典：单项 Value<br>
-getDictionary(key, isInteger)<br>
-参数:<br>
-【String】key - 字典编码<br>
-【boolean】isInteger -  value类型：true->Integer; false->String
-`,
-                code: `<span class="api-code">// 1、value为Integer <br>Integer a = cacheUtil.getDictionary("xxx", true);</span>`
-            }, {
-                name: 'getDictionaryList',
-                memo: `获取数据字典：List  Value默认String<br>
-getDictionaryList(key)<br>
-参数:<br>
-【String】key - 字典编码`,
-                code: `<span class="api-code">List&lt;String> a = cacheUtil.getDictionaryList("xxx")</span>`
-            }, {
-                name: 'getDictionaryList',
-                memo: `获取数据字典：List<br>
-getDictionaryList(key, isInteger)<br>
-参数:<br>
-【String】key - 字典编码<br>
-【boolean】isInteger -  value类型：true->Integer; false->String`,
-                code: `<span class="api-code">List&lt;Integer> a = cacheUtil.getDictionaryList("xxx", true)</span>`,
-            }, {
-                name: 'getAuthOrgGroup',
-                memo: `获取组织分组：公司别和用户权限过滤
-getAuthOrgGroup(code)<br>
-参数:<br>
-【String】code - 分组编码`,
-                code: `<span class="api-code">// 根据登录用户的权限和公司别，自动过滤数据
-// 1、controller或service中注入CacheUtil
-@Resource
-private CacheUtil cacheUtil;
-// 2、调用方法
-List&lt;OrgGroup> a = cacheUtil.getAuthOrgGroup("xxx")</span>`
-            }, {
-                name: 'getCompanyOrgGroup',
-                memo: `获取组织分组：公司别过滤
-getCompanyOrgGroup(code)<br>
-参数:<br>
-【String】code - 分组编码`,
-                code: `<span class="api-code">// 根据登录用户的公司别，自动过滤数据
-...
-List&lt;OrgGroup> a = cacheUtil.getCompanyOrgGroup("xxx")</span>`
-            }, {
-                name: 'getCompanyOrgGroup',
-                memo: `获取组织分组：公司别过滤
-getCompanyOrgGroup(code, companyId)<br>
-参数:<br>
-【String】code - 分组编码<br>
-【String】companyId - 公司别`,
-                code: `<span class="api-code">// 根据公司别，自动过滤数据
-...
-List&lt;OrgGroup> a = cacheUtil.getCompanyOrgGroup("xxx", "Xx")</span>`
-            }, {
-                name: 'getOrgGroup',
-                memo: `获取组织分组
-getOrgGroup(code, user, companyId)<br>
-参数:<br>
-【String】code - 分组编码<br>
-【LoginUser】user - 登录用户<br>
-【String】companyId - 公司别`,
-                code: `<span class="api-code">// 登录用户：不为空过滤权限；公司别：不为空过滤公司别
-...
-List&lt;OrgGroup> a = cacheUtil.getOrgGroup("xxx", user, "Xx")</span>`
-            }, {
-                name: 'getAllOrgGroup',
-                memo: `获取组织分组
-getAllOrgGroup(code)<br>
-参数:<br>
-【String】code - 分组编码`,
-                code:`<span class="api-code">// 不进行任何过滤
-List&lt;OrgGroup> a = cacheUtil.getAllOrgGroup("xxx")
-</span>`
-            }
-        ]
-
-        return {
-            methodData,
-            methodCols
-        }
-    },
-    methods: {}
-}
-</script>
-
-<style scoped>
-</style>