mooho-base-admin-plus 0.1.0

package/src/layouts/basic-layout/menu-side/menu-item.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <MenuItem v-bind="$attrs" :to="menu.path" :replace="menu.replace" :target="menu.target" :name="menu.path" @click="handleClick(menu.path)">
+      <i-menu-side-title :menu="menu" :hide-title="hideTitle" />
+      <Badge class="i-layout-menu-side-badge" v-if="badgeData" v-bind="badgeData" />
+    </MenuItem>
+  </div>
+</template>
+<script>
+  import iMenuSideTitle from './menu-title';
+  import clickItem from '../mixins/click-item';
+  import siderMenuBadge from '../mixins/sider-menu-badge';
+
+  export default {
+    name: 'iMenuSideItem',
+    components: { iMenuSideTitle },
+    mixins: [clickItem, siderMenuBadge],
+    props: {
+      menu: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      hideTitle: {
+        type: Boolean,
+        default: false
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/menu-side/menu-title.vue

@@ -0,0 +1,56 @@
+<template>
+  <span class="i-layout-menu-side-title" :class="{ 'i-layout-menu-side-title-with-collapse': collapse }">
+    <span class="i-layout-menu-side-title-icon" :class="{ 'i-layout-menu-side-title-icon-single': hideTitle }" v-if="withIcon">
+      <Icon :type="menu.icon" v-if="menu.icon" />
+      <Icon :custom="menu.custom" v-else-if="menu.custom" />
+      <img :src="menu.img" v-else-if="menu.img" />
+    </span>
+    <span
+      class="i-layout-menu-side-title-text"
+      :class="{
+        'i-layout-menu-side-title-text-selected': selected,
+        'i-layout-menu-side-title-text-with-subtitle': menu.subtitle,
+        'i-layout-menu-side-title-text-with-icon': withIcon
+      }"
+      v-if="!hideTitle"
+    >
+      {{ tTitle(menu.title) }}
+      <em v-if="menu.subtitle">{{ tTitle(menu.subtitle) }}</em>
+    </span>
+  </span>
+</template>
+<script>
+  import tTitle from '../mixins/translate-title';
+
+  export default {
+    name: 'iMenuSideTitle',
+    mixins: [tTitle],
+    props: {
+      menu: {
+        type: Object,
+        default() {
+          return {};
+        }
+      },
+      hideTitle: {
+        type: Boolean,
+        default: false
+      },
+      // 用于侧边栏收起 Dropdown 当前高亮
+      selected: {
+        type: Boolean,
+        default: false
+      },
+      // 侧边栏折叠状态
+      collapse: {
+        type: Boolean,
+        default: false
+      }
+    },
+    computed: {
+      withIcon() {
+        return this.menu.icon || this.menu.custom || this.menu.img;
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/menu-side/submenu.vue

@@ -0,0 +1,31 @@
+<template>
+  <Submenu :name="menu.path">
+    <template #title>
+      <i-menu-side-title :menu="menu" />
+      <Badge class="i-layout-menu-side-badge" v-if="badgeData" v-bind="badgeData" />
+    </template>
+    <template v-for="(item, index) in menu.children" :key="index">
+      <i-menu-side-item v-if="item.children === undefined || !item.children.length" :menu="item" />
+      <i-menu-side-submenu v-else :menu="item" />
+    </template>
+  </Submenu>
+</template>
+<script>
+  import iMenuSideItem from './menu-item';
+  import iMenuSideTitle from './menu-title';
+  import siderMenuBadge from '../mixins/sider-menu-badge';
+
+  export default {
+    name: 'iMenuSideSubmenu',
+    components: { iMenuSideItem, iMenuSideTitle },
+    mixins: [siderMenuBadge],
+    props: {
+      menu: {
+        type: Object,
+        default() {
+          return {};
+        }
+      }
+    }
+  };
+</script>

package/src/layouts/basic-layout/mixins/click-item.js

@@ -0,0 +1,21 @@
+import { findComponentUpward } from 'view-ui-plus/src/utils/assist';
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState('admin/layout', ['menuSiderReload', 'menuHeaderReload'])
+  },
+  methods: {
+    handleClick(path, type = 'sider') {
+      const current = this.$route.path;
+      if (current === path) {
+        if (type === 'sider' && this.menuSiderReload) this.handleReload();
+        else if (type === 'header' && this.menuHeaderReload) this.handleReload();
+      }
+    },
+    handleReload() {
+      const $layout = findComponentUpward(this, 'BasicLayout');
+      if ($layout) $layout.handleReload();
+    }
+  }
+};

package/src/layouts/basic-layout/mixins/sider-menu-badge.js

@@ -0,0 +1,13 @@
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState('admin/menu', ['siderMenuBadge']),
+    badgeData() {
+      let data = null;
+      const siderMenuBadge = this.siderMenuBadge.find(item => item.path === this.menu.path);
+      if (siderMenuBadge) data = siderMenuBadge;
+      return data;
+    }
+  }
+};

package/src/layouts/basic-layout/mixins/translate-title.js

@@ -0,0 +1,11 @@
+export default {
+  methods: {
+    tTitle(title) {
+      if (title && title.indexOf('$t:') === 0) {
+        return this.$t(title.split('$t:')[1]);
+      } else {
+        return title;
+      }
+    }
+  }
+};

package/src/layouts/basic-layout/tabs/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="i-layout-tabs" :class="classes" :style="styles">
+    <div class="i-layout-tabs-main">
+      <Tabs
+        type="card"
+        :model-value="current"
+        :animated="false"
+        closable
+        :draggable="tabsOrder"
+        @on-click="handleClickTab"
+        @on-tab-remove="handleClickClose"
+        @on-drag-drop="handleDragDrop"
+      >
+        <TabPane v-for="(page, index) in opened" :key="index" :label="h => tabLabel(h, page)" :name="page.fullPath" :closable="page.meta && page.meta.closable" />
+      </Tabs>
+      <Dropdown class="i-layout-tabs-close" @on-click="handleClose">
+        <div class="i-layout-tabs-close-main">
+          <Icon type="ios-arrow-down" />
+        </div>
+        <template #list>
+          <DropdownMenu>
+            <DropdownItem name="left">
+              <Icon type="md-arrow-back" />
+              {{ $t('basicLayout.tabs.left') }}
+            </DropdownItem>
+            <DropdownItem name="right">
+              <Icon type="md-arrow-forward" />
+              {{ $t('basicLayout.tabs.right') }}
+            </DropdownItem>
+            <DropdownItem name="other">
+              <Icon type="md-close" />
+              {{ $t('basicLayout.tabs.other') }}
+            </DropdownItem>
+            <DropdownItem name="all">
+              <Icon type="md-close-circle" />
+              {{ $t('basicLayout.tabs.all') }}
+            </DropdownItem>
+          </DropdownMenu>
+        </template>
+      </Dropdown>
+    </div>
+  </div>
+</template>
+<script>
+  import { mapState, mapGetters, mapActions } from 'vuex';
+  import menuSider from '../../../menu/sider';
+  import tTitle from '../mixins/translate-title';
+
+  import Setting from '../../../setting';
+
+  import { getAllSiderMenu } from '../../../libs/system';
+
+  import { cloneDeep } from 'lodash';
+  import random from '../../../libs/random_str';
+
+  export default {
+    name: 'iTabs',
+    mixins: [tTitle],
+    emits: ['on-reload'],
+    computed: {
+      ...mapState('admin/page', ['opened', 'current']),
+      ...mapState('admin/layout', ['showTabsIcon', 'tabsFix', 'tabsReload', 'tabsOrder', 'headerFix', 'headerStick', 'isMobile', 'menuCollapse']),
+      ...mapGetters('admin/menu', ['hideSider']),
+      classes() {
+        return {
+          'i-layout-tabs-fix': this.tabsFix
+        };
+      },
+      isHeaderStick() {
+        return this.hideSider;
+      },
+      styles() {
+        let style = {};
+        if (this.tabsFix && !this.headerFix) {
+          style.top = `${Setting.headerHeight - this.scrollTop}px`;
+        }
+
+        const menuWidth = this.isHeaderStick ? 0 : this.menuCollapse ? Setting.menuSideCollapseWidth : Setting.menuSideWidth;
+        if (!this.isMobile && this.tabsFix) {
+          style.width = `calc(100% - ${menuWidth}px)`;
+          style.left = `${menuWidth}px`;
+        }
+
+        return style;
+      }
+    },
+    data() {
+      return {
+        // 得到所有侧边菜单，并转为平级，查询图标用
+        allSiderMenu: getAllSiderMenu(menuSider),
+        scrollTop: 0
+      };
+    },
+    methods: {
+      ...mapActions('admin/page', ['close', 'closeLeft', 'closeRight', 'closeOther', 'closeAll', 'updateOpened']),
+      tabLabel(h, page) {
+        const title = h('span', this.tTitle(page.meta ? page.meta.title : '未命名') || '未命名');
+        let slot = [];
+
+        if (this.showTabsIcon) {
+          const fullPathWithoutQuery = page.fullPath.indexOf('?') >= 0 ? page.fullPath.split('?')[0] : page.fullPath;
+          const currentMenu = this.allSiderMenu.find(menu => menu.path === fullPathWithoutQuery) || {};
+
+          let icon;
+          if (currentMenu.icon) {
+            icon = h('Icon', {
+              type: currentMenu.icon
+            });
+          } else if (currentMenu.custom) {
+            icon = h('Icon', {
+              custom: currentMenu.custom
+            });
+          } else if (currentMenu.img) {
+            icon = h('img', {
+              src: currentMenu.img
+            });
+          }
+
+          if (icon) slot.push(icon);
+          slot.push(title);
+        } else {
+          slot.push(title);
+        }
+
+        return h(
+          'div',
+          {
+            class: 'i-layout-tabs-title'
+          },
+          slot
+        );
+      },
+      handleClickTab(tabName) {
+        if (tabName === this.current) {
+          if (this.tabsReload) {
+            this.$emit('on-reload');
+          }
+        } else {
+          const page = this.opened.find(page => page.fullPath === tabName);
+          const { name, params, query } = page;
+
+          if (page) this.$router.push({ name, params, query }, () => {});
+        }
+      },
+      handleClickClose(tagName) {
+        this.close({
+          tagName
+        });
+      },
+      handleScroll() {
+        if (this.tabsFix && !this.headerFix) {
+          const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
+          this.scrollTop = scrollTop > Setting.headerHeight ? Setting.headerHeight : scrollTop;
+        }
+      },
+      handleClose(name) {
+        const params = {
+          pageSelect: this.current
+        };
+        switch (name) {
+          case 'left':
+            this.closeLeft(params);
+            break;
+          case 'right':
+            this.closeRight(params);
+            break;
+          case 'other':
+            this.closeOther(params);
+            break;
+          case 'all':
+            this.closeAll();
+            break;
+        }
+      },
+      handleDragDrop(name, newName, a, b) {
+        let opened = cloneDeep(this.opened);
+        opened.splice(b, 1, ...opened.splice(a, 1, opened[b]));
+        this.updateOpened({ opened });
+      },
+      random() {
+        return random(6);
+      }
+    },
+    mounted() {
+      document.addEventListener('scroll', this.handleScroll, { passive: true });
+      this.handleScroll();
+    },
+    beforeUnmount() {
+      document.removeEventListener('scroll', this.handleScroll);
+    }
+  };
+</script>

package/src/layouts/basic-layout/water-mark/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div :style="styles" v-if="waterMark.show"></div>
+</template>
+<script>
+  import { mapState } from 'vuex';
+  import getWaterMarkCanvas from '../../../libs/water-mark';
+
+  export default {
+    name: 'i-water-mark',
+    computed: {
+      ...mapState('admin/layout', ['waterMark']),
+      styles() {
+        const url = getWaterMarkCanvas(this.waterMark.text, this.waterMark.options);
+        return {
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          'z-index': '2000',
+          'background-size': '320px',
+          'background-repeat': 'repeat',
+          'background-image': `url(${url})`,
+          'pointer-events': 'none'
+        };
+      }
+    }
+  };
+</script>

package/src/libs/lodop/index.js

@@ -0,0 +1,145 @@
+/* eslint-disable no-empty */
+/* eslint-disable no-undef */
+var CreatedOKLodop7766 = null;
+
+//= ===判断是否需要安装CLodop云打印服务器:====
+const needCLodop = () => {
+  try {
+    var ua = navigator.userAgent;
+    if (ua.match(/Windows\sPhone/i) != null) return true;
+    if (ua.match(/iPhone|iPod/i) != null) return true;
+    if (ua.match(/Android/i) != null) return true;
+    if (ua.match(/Edge\D?\d+/i) != null) return true;
+    if (ua.match(/QQBrowser/i) != null) return false;
+    var verTrident = ua.match(/Trident\D?\d+/i);
+    var verIE = ua.match(/MSIE\D?\d+/i);
+    var verOPR = ua.match(/OPR\D?\d+/i);
+    var verFF = ua.match(/Firefox\D?\d+/i);
+    var x64 = ua.match(/x64/i);
+    if (verTrident == null && verIE == null && x64 !== null) {
+      return true;
+    } else if (verFF !== null) {
+      verFF = verFF[0].match(/\d+/);
+      if (verFF[0] >= 42) return true;
+    } else if (verOPR !== null) {
+      verOPR = verOPR[0].match(/\d+/);
+      if (verOPR[0] >= 32) return true;
+    } else if (verTrident == null && verIE == null) {
+      var verChrome = ua.match(/Chrome\D?\d+/i);
+      if (verChrome !== null) {
+        verChrome = verChrome[0].match(/\d+/);
+        if (verChrome[0] >= 42) return true;
+      }
+    }
+    return false;
+  } catch (err) {
+    return true;
+  }
+};
+
+//= ===获取LODOP对象的主过程：====
+const getLodop = (oOBJECT, oEMBED) => {
+  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+  var strHtm64Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
+  var strHtm64Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
+  var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
+  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
+  var strCLodopInstall =
+    "<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行安装</a>,安装后请刷新页面。</font>";
+  var strCLodopUpdate = "<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
+  var LODOP;
+  try {
+    var isIE = navigator.userAgent.indexOf('MSIE') >= 0 || navigator.userAgent.indexOf('Trident') >= 0;
+    if (needCLodop()) {
+      try {
+        LODOP = getCLodop();
+      } catch (err) {}
+      if (!LODOP && document.readyState !== 'complete') {
+        alert('C-Lodop没准备好，请稍后再试！');
+        return;
+      }
+      if (!LODOP) {
+        if (isIE) document.write(strCLodopInstall);
+        else {
+          document.documentElement.innerHTML = strCLodopInstall + document.documentElement.innerHTML;
+        }
+        return;
+      } else {
+        if (CLODOP.CVERSION < '2.0.6.8') {
+          if (isIE) document.write(strCLodopUpdate);
+          else {
+            document.documentElement.innerHTML = strCLodopUpdate + document.documentElement.innerHTML;
+          }
+        }
+        if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
+        if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
+      }
+    } else {
+      var is64IE = isIE && navigator.userAgent.indexOf('x64') >= 0;
+      //= ====如果页面有Lodop就直接使用，没有则新建:==========
+      if (oOBJECT !== undefined || oEMBED !== undefined) {
+        if (isIE) LODOP = oOBJECT;
+        else LODOP = oEMBED;
+      } else if (CreatedOKLodop7766 == null) {
+        LODOP = document.createElement('object');
+        LODOP.setAttribute('width', 0);
+        LODOP.setAttribute('height', 0);
+        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;');
+        if (isIE) LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA');
+        else LODOP.setAttribute('type', 'application/x-print-lodop');
+        document.documentElement.appendChild(LODOP);
+        CreatedOKLodop7766 = LODOP;
+      } else LODOP = CreatedOKLodop7766;
+      //= ====Lodop插件未安装时提示下载地址:==========
+      if (LODOP == null || typeof LODOP.VERSION === 'undefined') {
+        if (navigator.userAgent.indexOf('Chrome') >= 0) {
+          document.documentElement.innerHTML = strHtmChrome + document.documentElement.innerHTML;
+        }
+        if (navigator.userAgent.indexOf('Firefox') >= 0) {
+          document.documentElement.innerHTML = strHtmFireFox + document.documentElement.innerHTML;
+        }
+        if (is64IE) document.write(strHtm64Install);
+        else if (isIE) document.write(strHtmInstall);
+        else {
+          document.documentElement.innerHTML = strHtmInstall + document.documentElement.innerHTML;
+        }
+        return LODOP;
+      }
+    }
+    if (LODOP.VERSION < '6.2.0.8') {
+      if (needCLodop()) {
+        document.documentElement.innerHTML = strCLodopUpdate + document.documentElement.innerHTML;
+      } else if (is64IE) document.write(strHtm64Update);
+      else if (isIE) document.write(strHtmUpdate);
+      else {
+        document.documentElement.innerHTML = strHtmUpdate + document.documentElement.innerHTML;
+      }
+      return LODOP;
+    }
+    //= ==如下空白位置适合调用统一功能(如注册语句、语言选择等):===
+    LODOP.SET_LICENSES('上海汽车信息产业投资有限公司', '1A1683BD13ED8A56138F8BF8328862FF', '', '');
+
+    //= ==========================================================
+    return LODOP;
+  } catch (err) {
+    alert('getLodop出错:' + err);
+  }
+};
+
+//= ===页面引用CLodop云打印必须的JS文件：====
+if (needCLodop()) {
+  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
+  var oscript = document.createElement('script');
+  oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=1';
+  head.insertBefore(oscript, head.firstChild);
+
+  // oscript = document.createElement("script");
+  // oscript.src = "http://192.168.7.153:8000/CLodopfuncs.js?priority=2";
+  // head.insertBefore( oscript,head.firstChild );
+}
+
+export default {
+  needCLodop,
+  getLodop
+};

package/src/libs/random_str.js

@@ -0,0 +1,10 @@
+// 生成随机字符串
+export default function (len = 32) {
+  const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+  const maxPos = $chars.length;
+  let str = '';
+  for (let i = 0; i < len; i++) {
+    str += $chars.charAt(Math.floor(Math.random() * maxPos));
+  }
+  return str;
+}