n20-common-lib 1.1.10

package/src/components/InputNumber/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="cl-num-w">
+    <el-input
+      v-if="showStr"
+      class="cl-stc"
+      :class="{ 'cl-num--rate': type === 'rate' }"
+      :value="valueStr"
+      :placeholder="$attrs.placeholder"
+      @focus="focusFn"
+    />
+    <el-input-number
+      v-else
+      ref="input-number"
+      class="cl-num"
+      :class="{ 'cl-num--rate': type === 'rate' }"
+      :controls="false"
+      v-bind="$attrs"
+      :value="valueNum"
+      v-on="listeners"
+      @blur="blurFn"
+      @change="changeFn"
+    />
+    <span v-if="type === 'rate'" class="el-input__suffix">
+      <span class="el-input__icon" style="display: inline-block">%</span>
+    </span>
+  </div>
+</template>
+
+<script>
+import numerify from 'numerify'
+export default {
+  name: 'InputNumber',
+  props: {
+    value: {
+      type: [Number, String],
+      default: undefined
+    },
+    type: {
+      type: String,
+      default: 'money',
+      validator(v) {
+        return ['money', 'rate'].includes(v)
+      }
+    }
+  },
+  data() {
+    this.listeners = Object.assign({}, this.$listeners, { input: () => {} })
+    return {
+      valueStr: '',
+      valueNum: undefined,
+      showStr: true
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.valueStr = this.num2str(val)
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    num2str(val = '') {
+      if (val === '') {
+        return ''
+      }
+      switch (this.type) {
+        case 'rate':
+          return numerify(val, '0,0.00[00]')
+        case 'money':
+        default:
+          return numerify(val, '0,0.00')
+      }
+    },
+    focusFn() {
+      this.showStr = false
+      if (typeof this.value === 'string') {
+        this.valueNum = Number(this.value)
+      }else {
+        this.valueNum = this.value
+      }
+      this.$nextTick(() => {
+        this.$refs['input-number'].focus()
+      })
+    },
+    blurFn() {
+      this.showStr = true
+    },
+    changeFn(val) {
+      if (!val && val !== 0) {
+        return this.$emit('input', val)
+      }
+
+      switch (this.type) {
+        case 'rate':
+          {
+            let varStr = val.toString() + '.'
+            let varDLen = varStr.length - varStr.indexOf('.') - 1
+            let nVar = Number(val.toFixed(Math.min(varDLen, 4)))
+            if (this.valueNum === nVar) {
+              this.valueNum = 0
+            }
+            this.$nextTick(() => {
+              this.valueNum = nVar
+              this.$emit('input', nVar)
+            })
+          }
+          break
+        case 'money':
+        default:
+          {
+            let nVar = Number(val.toFixed(2))
+            if (this.valueNum === nVar) {
+              this.valueNum = 0
+            }
+            this.$nextTick(() => {
+              this.valueNum = nVar
+              this.$emit('input', nVar)
+            })
+          }
+          break
+      }
+    }
+  }
+}
+</script>

package/src/components/MoreTab/index.vue

@@ -0,0 +1,232 @@
+/**
+ * author: zhengwei
+ * tiem: 2021-8-31
+ */
+<template>
+  <div class="__common-layout-pageTabs">
+    <el-scrollbar>
+      <div class="__tabs">
+        <div
+          v-for="item in openedPageRouters"
+          :key="item.fullPath"
+          class="__tab-item"
+          :class="{
+            '__is-active': item.fullPath == $route.fullPath
+          }"
+          @click="onClick(item)"
+          @contextmenu.prevent="showContextMenu($event, item)"
+        >
+          {{ item.meta.title }}
+          <span
+            class="el-icon-close"
+            :style="openedPageRouters.length <= 1 ? 'width:0;' : ''"
+            @click.stop="onClose(item)"
+            @contextmenu.prevent.stop
+          ></span>
+        </div>
+      </div>
+    </el-scrollbar>
+    <div v-show="contextMenuVisible">
+      <ul
+        :style="{ left: contextMenuLeft + 'px', top: contextMenuTop + 'px' }"
+        class="__contextmenu"
+      >
+        <li>
+          <el-button type="text" size="mini" @click="reload()"
+            >重新加载</el-button
+          >
+        </li>
+        <li>
+          <el-button
+            type="text"
+            :disabled="false"
+            size="mini"
+            @click="closeOtherLeft"
+            >关闭左边</el-button
+          >
+        </li>
+        <li>
+          <el-button
+            type="text"
+            :disabled="false"
+            size="mini"
+            @click="closeOtherRight"
+            >关闭右边</el-button
+          >
+        </li>
+        <li>
+          <el-button type="text" size="mini" @click="closeOther"
+            >关闭其他</el-button
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MoreTab',
+  props: {
+    keepAliveComponentInstance: {
+      type: Object,
+      default: () => ({})
+    }, //keep-alive控件实例对象
+    blankRouteName: {
+      type: String,
+      default: 'blank'
+    } //空白路由的name值
+  },
+  data() {
+    return {
+      contextMenuVisible: false, //右键菜单是否显示
+      contextMenuLeft: 0, //右键菜单显示位置
+      contextMenuTop: 0, //右键菜单显示位置
+      contextMenuTargetPageRoute: null, //右键所指向的菜单路由
+      openedPageRouters: [] //已打开的路由页面
+    }
+  },
+  watch: {
+    //当路由变更时，执行打开页面的方法
+    $route: {
+      handler(v) {
+        this.openPage(v)
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    //添加点击关闭右键菜单
+    window.addEventListener('click', this.closeContextMenu)
+  },
+  destroyed() {
+    window.removeEventListener('click', this.closeContextMenu)
+  },
+  methods: {
+    //打开页面
+    openPage(route) {
+      if (route.name === this.blankRouteName) {
+        return
+      }
+      let isExist = this.openedPageRouters.some(
+        (item) => item.fullPath === route.fullPath
+      )
+      if (!isExist) {
+        let openedPageRoute = this.openedPageRouters.find(
+          (item) => item.path === route.path
+        ) //判断页面是否支持不同参数多开页面功能，如果不支持且已存在path值一样的页面路由，那就替换它
+        if (!route.meta.canMultipleOpen && openedPageRoute != null) {
+          this.delRouteCache(openedPageRoute.fullPath)
+          this.openedPageRouters.splice(
+            this.openedPageRouters.indexOf(openedPageRoute),
+            1,
+            route
+          )
+        } else {
+          this.openedPageRouters.push(route)
+        }
+      }
+    }, //点击页面标签卡时
+    onClick(route) {
+      if (route.fullPath !== this.$route.fullPath) {
+        this.$router.push(route.fullPath)
+      }
+    }, //关闭页面标签时
+    onClose(route) {
+      let index = this.openedPageRouters.indexOf(route)
+      this.delPageRoute(route)
+      if (route.fullPath === this.$route.fullPath) {
+        //删除页面后，跳转到上一页面
+        this.$router.replace(
+          this.openedPageRouters[index === 0 ? 0 : index - 1]
+        )
+      }
+    }, //右键显示菜单
+    showContextMenu(e, route) {
+      this.contextMenuTargetPageRoute = route
+      this.contextMenuLeft = e.layerX
+      this.contextMenuTop = e.layerY
+      this.contextMenuVisible = true
+    }, //隐藏右键菜单
+    closeContextMenu() {
+      this.contextMenuVisible = false
+      this.contextMenuTargetPageRoute = null
+    }, //重载页面
+    reload() {
+      this.delRouteCache(this.contextMenuTargetPageRoute.fullPath)
+      if (this.contextMenuTargetPageRoute.fullPath === this.$route.fullPath) {
+        this.$router.replace({ name: this.blankRouteName }).then(() => {
+          this.$router.replace(this.contextMenuTargetPageRoute)
+        })
+      }
+    }, //关闭其他页面
+    closeOther() {
+      for (let i = 0; i < this.openedPageRouters.length; i++) {
+        let r = this.openedPageRouters[i]
+        if (r !== this.contextMenuTargetPageRoute) {
+          this.delPageRoute(r)
+          i--
+        }
+      }
+      if (this.contextMenuTargetPageRoute.fullPath !== this.$route.fullPath) {
+        this.$router.replace(this.contextMenuTargetPageRoute)
+      }
+    }, //根据路径获取索引
+    getPageRouteIndex(fullPath) {
+      for (let i = 0; i < this.openedPageRouters.length; i++) {
+        if (this.openedPageRouters[i].fullPath === fullPath) {
+          return i
+        }
+      }
+    }, //关闭左边页面
+    closeOtherLeft() {
+      let index = this.openedPageRouters.indexOf(
+        this.contextMenuTargetPageRoute
+      )
+      let currentIndex = this.getPageRouteIndex(this.$route.fullPath)
+      if (index > currentIndex) {
+        this.$router.replace(this.contextMenuTargetPageRoute)
+      }
+      for (let i = 0; i < index; i++) {
+        let r = this.openedPageRouters[i]
+        this.delPageRoute(r)
+        i--
+        index--
+      }
+    }, //关闭右边页面
+    closeOtherRight() {
+      let index = this.openedPageRouters.indexOf(
+        this.contextMenuTargetPageRoute
+      )
+      let currentIndex = this.getPageRouteIndex(this.$route.fullPath)
+      for (let i = index + 1; i < this.openedPageRouters.length; i++) {
+        let r = this.openedPageRouters[i]
+        this.delPageRoute(r)
+        i--
+      }
+      if (index < currentIndex) {
+        this.$router.replace(this.contextMenuTargetPageRoute)
+      }
+    }, //删除页面
+    delPageRoute(route) {
+      let routeIndex = this.openedPageRouters.indexOf(route)
+      if (routeIndex >= 0) {
+        this.openedPageRouters.splice(routeIndex, 1)
+      }
+      this.delRouteCache(route.fullPath)
+    }, //删除页面缓存
+    delRouteCache(key) {
+      let cache = this.keepAliveComponentInstance.cache
+      let keys = this.keepAliveComponentInstance.keys
+      for (let i = 0; i < keys.length; i++) {
+        if (keys[i] === key) {
+          keys.splice(i, 1)
+          if (cache[key] != null) {
+            delete cache[key]
+          }
+          break
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/NavMenu/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-menu :router="true">
+    <template v-for="omenus in menus">
+      <template v-for="item in omenus.menu">
+        <el-submenu v-if="item.children" :key="item.title" :index="item.title">
+          <template slot="title">
+            <i
+              v-if="item.iconUrl"
+              class="el-icon- icon-url"
+              :style="{ backgroundImage: `url(${item.iconUrl})` }"
+            ></i>
+            <i v-else :class="item.iconClass"></i>
+            <span>{{ item.title }}</span>
+          </template>
+          <template v-for="itemc in item.children">
+            <el-menu-item
+              :key="itemc.title"
+              :index="itemc.title"
+              :route="omenus.base + itemc.route"
+            >
+              <i
+                v-if="item.iconUrl"
+                class="el-icon- icon-url"
+                :style="{ backgroundImage: `url(${itemc.iconUrl})` }"
+              ></i>
+              <i v-else :class="itemc.iconClass"></i>
+              <span slot="title">{{ itemc.title }}</span>
+            </el-menu-item>
+          </template>
+        </el-submenu>
+        <el-menu-item
+          v-else
+          :key="item.title"
+          :index="item.title"
+          :route="omenus.base + item.route"
+        >
+          <i
+            v-if="item.iconUrl"
+            class="el-icon- icon-url"
+            :style="{ backgroundImage: `url(${item.iconUrl})` }"
+          ></i>
+          <i v-else :class="item.iconClass"></i>
+          <span slot="title">{{ item.title }}</span>
+        </el-menu-item>
+      </template>
+    </template>
+  </el-menu>
+</template>
+
+<script>
+import getJsonc from '../../assets/getJsonc'
+export default {
+  name: 'NavMenu',
+  data() {
+    return {
+      menus: []
+    }
+  },
+  created() {
+    this.setMenu()
+  },
+  methods: {
+    async setMenu() {
+      /* 获取主(当前)应用展示菜单 */
+      const { subApps = [], _menu = [] } = await getJsonc(
+        '/server-config.jsonc'
+      )
+      this.menus.push({
+        base: '',
+        menu: _menu
+      })
+
+      /* 顺序获取子应用展示菜单 */
+      const subConfigs = subApps.map((s) => {
+        let url = s.entry.replace('/index.html', '') + '/server-config.jsonc'
+        return getJsonc(url)
+      })
+      Promise.all(subConfigs).then((posts) => {
+        this.menus.push()
+        posts.forEach(({ _menu = [] }, i) => {
+          this.menus.push({
+            base: subApps[i]['activeRule'],
+            menu: _menu
+          })
+        })
+      })
+    }
+  }
+}
+</script>

package/src/components/Pagination/index.vue

@@ -0,0 +1,126 @@
+/**
+* author: zhengwei
+* time: 2021-9-1
+*/
+<template>
+  <div class="cl-pagination">
+    <i
+      class="el-icon-arrow-left block-box"
+      :class="{ disabled: isdisabled }"
+      @click="prev"
+    ></i>
+    <i
+      class="el-icon-arrow-right block-box"
+      :class="{ disabled: disabled }"
+      @click="next"
+    ></i>
+    <span class="cl-pagination-count">{{ current }}/{{ totalPage }}</span>
+    <el-select v-model="Size" @change="pageChange">
+      <el-option
+        v-for="item in pageSize"
+        :key="item"
+        :label="`${item}条/页`"
+        :value="item"
+      />
+    </el-select>
+    <div>
+      <span class="cl-pagination-arrive">至第</span>
+      <input
+        v-model.number="current"
+        class="cl-pagination-input"
+        @change="getChangearrive"
+      />
+      页
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    pageSize: {
+      type: Array,
+      default: () => [10, 15, 20, 25]
+    },
+    total: {
+      type: Number,
+      default: null
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageSizes: {
+      type: Number,
+      default: 10
+    }
+  },
+  data() {
+    return {
+      Size: this.pageSize[0],
+      current: 1,
+      totalPage: 1,
+      disabled: false,
+      isdisabled: false
+    }
+  },
+  computed: {
+    getNext() {
+      return this.totalPage - this.current > 0
+    }
+  },
+  mounted() {
+    this.current = this.currentPage
+    if (this.current > this.total) {
+      this.current = this.total
+    }
+    this.Size = this.pageSizes
+    this.getTotalData()
+  },
+  methods: {
+    getTotalData() {
+      if (this.total) {
+        let count = parseInt(this.total / this.Size)
+        this.totalPage = this.total % this.Size === 0 ? count : count + 1
+      }
+    },
+    pageChange(val) {
+      this.value = val
+      this.getTotalData()
+      if (this.totalPage !== this.current) {
+        this.disabled = false
+      }
+      this.$emit('page-size', val)
+    },
+    next() {
+      if (this.getNext) {
+        this.current++
+        this.$emit('current-change', this.current)
+        this.disabled = false
+        console.log(this.current)
+      } else {
+        this.disabled = true
+        this.isdisabled = false
+      }
+    },
+    prev() {
+      if (this.current > 1) {
+        this.current--
+        this.$emit('current-change', this.current)
+        this.isdisabled = false
+      } else {
+        this.isdisabled = true
+        this.disabled = false
+      }
+    },
+    getChangearrive(val) {
+      if (val.target.value > this.totalPage) {
+        val.target.value = this.totalPage
+        this.current = val.target.value
+      }
+      this.$emit('current-change', this.current)
+    }
+  }
+}
+</script>

package/src/components/SecondaryTab/index.vue

@@ -0,0 +1,75 @@
+/**
+* author: zhengwei
+* time: 2021-9-1
+*/
+<template>
+  <div class="cl-secondary-tab">
+    <ul class="cl-secondary-tab-list">
+      <li
+        v-for="item in subMenuList"
+        :key="item.id"
+        class="cl-secondary-tab-item"
+        :class="{ action: current === item.name }"
+        @click="handleClick(item)"
+      >
+        {{ item.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SecondaryTab',
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    init: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      current: ''
+    }
+  },
+  computed: {
+    subMenuList() {
+      if (!this.data) {
+        return []
+      }
+      let menuList = []
+      this.data.map((item) => {
+        if (typeof item === 'string') {
+          menuList.push({ name: item })
+        } else {
+          // 按钮权限
+          //   if (isHas(item.relaNo)) menuList.push(item)
+          menuList.push(item)
+        }
+        return menuList
+      })
+      return menuList
+    }
+  },
+  watch: {
+    init() {
+      this.current = this.init
+    }
+  },
+  mounted() {
+    if (this.init) {
+      this.current = this.init
+    }
+  },
+  methods: {
+    handleClick(item) {
+      this.current = item.name
+      this.$emit('click', item)
+    }
+  }
+}
+</script>

package/src/components/Select/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="cl-muls">
+    <el-select
+      ref="el-select"
+      v-bind="$attrs"
+      :value="value"
+      v-on="listeners"
+      @change="changeFn"
+      @visible-change="visibleChangeFn"
+    >
+      <slot></slot>
+    </el-select>
+    <span class="el-input__suffix">
+      <span
+        class="is-search el-input__icon el-icon-search"
+        @click.stop="searchFn"
+      ></span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Select',
+  props: {
+    // eslint-disable-next-line vue/require-prop-types
+    value: {
+      default: undefined
+    }
+  },
+  data() {
+    this.listeners = Object.assign({}, this.$listeners, { input: () => {} })
+    return {}
+  },
+  methods: {
+    visibleChangeFn(val) {
+      if (val && !this.$refs['el-select']['multiple']) {
+        this.$refs['el-select']['selectedLabel'] =
+          this.$refs['el-select']['currentPlaceholder']
+      }
+    },
+    changeFn(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    searchFn() {
+      this.$emit('search', this.value)
+    }
+  }
+}
+</script>