shijiplus-web-plugin 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# shijiplus-web-tool
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "shijiplus-web-plugin",
+  "version": "0.1.0",
+  "files": [
+    "src"
+  ],
+  "description": "A company project",
+  "author": "jia",
+  "license": "ISC",
+  "private": false,
+  "main": "./src/main.js",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "iview": "^3.5.4"
+  },
+  "devDependencies": {
+    "vue": "^2.6.14",
+    "vue-i18n": "^7.8.0",
+    "less": "^2.7.3",
+    "less-loader": "^4.0.5",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "browser": true,
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/App.vue

@@ -0,0 +1,35 @@
+<template>
+  <div id="app">
+    <img id="img" alt="Vue logo" src="./assets/logo.png" />
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+
+export default {
+  name: 'App',
+  components: {},
+  mounted() {
+    console.log(
+      'web-tool mounted!',
+      new Date().formatDate('yyyy-MM-dd hh:mm:ss')
+    )
+  }
+}
+</script>
+
+<style lang="less">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+  #img {
+    width: 1000px;
+    height: 100px;
+  }
+}
+</style>

package/src/directive/directives.js

@@ -0,0 +1,17 @@
+import draggable from './module/draggable'
+import clipboard from './module/clipboard'
+import authAccess from './module/authAccess'
+import loading from './module/loading'
+import loadingText from './module/loading-text'
+import loadingIcon from './module/loading-icon'
+
+const directives = {
+  draggable,
+  clipboard,
+  authAccess,
+  loading,
+  loadingText,
+  loadingIcon
+}
+
+export default directives

package/src/directive/index.js

@@ -0,0 +1,26 @@
+import directive from './directives'
+
+const importDirective = Vue => {
+  /**
+   * 拖拽指令 v-draggable="options"
+   * options = {
+   *  trigger: /这里传入作为拖拽触发器的CSS选择器/,
+   *  body:    /这里传入需要移动容器的CSS选择器/,
+   *  recover: /拖动结束之后是否恢复到原来的位置/
+   * }
+   */
+  Vue.directive('draggable', directive.draggable)
+  /**
+   * clipboard指令 v-draggable="options"
+   * options = {
+   *  value:    /在输入框中使用v-model绑定的值/,
+   *  success:  /复制成功后的回调/,
+   *  error:    /复制失败后的回调/
+   * }
+   */
+  Vue.directive('clipboard', directive.clipboard)
+  Vue.directive('access', directive.authAccess)
+  Vue.directive('loading', directive.loading)
+}
+
+export default importDirective

package/src/directive/module/authAccess.js

@@ -0,0 +1,17 @@
+import store from '@/store'
+export default {
+  inserted(el, binding, vnode, oldVnode) {
+    if (document.location.hostname == 'localhost') {
+      return
+    }
+    if (store.state.user.access === undefined || store.state.user.access.length === 0) {
+      return
+    }
+    if (binding.value === undefined) {
+      throw new Error('v-access必须有值')
+    }
+    if (store.state.user.access.indexOf(binding.value) === -1) {
+      el.parentNode.removeChild(el)
+    }
+  }
+}

package/src/directive/module/clipboard.js

@@ -0,0 +1,30 @@
+import Clipboard from 'clipboard'
+export default {
+  bind: (el, binding) => {
+    const clipboard = new Clipboard(el, {
+      text: () => binding.value.value
+    })
+    el.__success_callback__ = binding.value.success
+    el.__error_callback__ = binding.value.error
+    clipboard.on('success', e => {
+      const callback = el.__success_callback__
+      callback && callback(e)
+    })
+    clipboard.on('error', e => {
+      const callback = el.__error_callback__
+      callback && callback(e)
+    })
+    el.__clipboard__ = clipboard
+  },
+  update: (el, binding) => {
+    el.__clipboard__.text = () => binding.value.value
+    el.__success_callback__ = binding.value.success
+    el.__error_callback__ = binding.value.error
+  },
+  unbind: (el, binding) => {
+    delete el.__success_callback__
+    delete el.__error_callback__
+    el.__clipboard__.destroy()
+    delete el.__clipboard__
+  }
+}

package/src/directive/module/draggable.js

@@ -0,0 +1,41 @@
+import { on } from '@/libs/tools'
+export default {
+  inserted: (el, binding, vnode) => {
+    let triggerDom = document.querySelector(binding.value.trigger)
+    triggerDom.style.cursor = 'move'
+    let bodyDom = document.querySelector(binding.value.body)
+    let pageX = 0
+    let pageY = 0
+    let transformX = 0
+    let transformY = 0
+    let canMove = false
+    const handleMousedown = e => {
+      let transform = /\(.*\)/.exec(bodyDom.style.transform)
+      if (transform) {
+        transform = transform[0].slice(1, transform[0].length - 1)
+        let splitxy = transform.split('px, ')
+        transformX = parseFloat(splitxy[0])
+        transformY = parseFloat(splitxy[1].split('px')[0])
+      }
+      pageX = e.pageX
+      pageY = e.pageY
+      canMove = true
+    }
+    const handleMousemove = e => {
+      let xOffset = e.pageX - pageX + transformX
+      let yOffset = e.pageY - pageY + transformY
+      if (canMove) bodyDom.style.transform = `translate(${xOffset}px, ${yOffset}px)`
+    }
+    const handleMouseup = e => {
+      canMove = false
+    }
+    on(triggerDom, 'mousedown', handleMousedown)
+    on(document, 'mousemove', handleMousemove)
+    on(document, 'mouseup', handleMouseup)
+  },
+  update: (el, binding, vnode) => {
+    if (!binding.value.recover) return
+    let bodyDom = document.querySelector(binding.value.body)
+    bodyDom.style.transform = ''
+  }
+}

package/src/directive/module/loading-icon.js

@@ -0,0 +1,38 @@
+import Icon from 'iview/src/components/icon'
+import Vue from 'vue'
+export default {
+  bind: (el, binding, vnode, oldVnode) => {
+    let nodeClassName = vnode.elm.className
+    let selector = nodeClassName && nodeClassName.length ? nodeClassName.replaceAll(' ', '.') : ''
+    if (selector) {
+      selector = '.' + selector + '>'
+    }
+    let loddingNode = vnode.elm.querySelectorAll(selector + 'div.ivu-spin')
+    if (loddingNode[0]) {
+      const textWrapEle = loddingNode[0].querySelector('.ivu-spin-text')
+      const defaulIcon = loddingNode[0].querySelector('.ivu-spin-dot')
+      defaulIcon.style.display = 'none'
+      if (textWrapEle) {
+        let propsData = { type: '', size: 18 }
+        if (typeof binding.value == 'object') {
+          propsData = { ...binding.value }
+        } else {
+          propsData.type = binding.value
+        }
+
+        let iconInstance = new (Vue.extend(Icon))({ propsData }).$mount()
+        console.log('---loading-icon------bind------', iconInstance)
+        iconInstance.$el.classList.add('spin-icon-loading')
+        const textEle = textWrapEle.querySelector('.loading-text')
+        if (textEle) {
+          textWrapEle.insertBefore(iconInstance.$el, textEle)
+        } else {
+          textWrapEle.appendChild(iconInstance.$el)
+        }
+        textWrapEle.style.display = 'block'
+      }
+    }
+  },
+  update: function (el, binding, vnode, oldVnode) {
+  }
+}

package/src/directive/module/loading-text.js

@@ -0,0 +1,24 @@
+import Spin from 'iview/src/components/spin'
+import Vue from 'vue'
+export default {
+  bind: (el, binding, vnode, oldVnode) => {
+    let nodeClassName = vnode.elm.className
+    let selector = nodeClassName && nodeClassName.length ? nodeClassName.replaceAll(' ', '.') : ''
+    if (selector) {
+      selector = '.' + selector + '>'
+    }
+    let loddingNode = vnode.elm.querySelectorAll(selector + 'div.ivu-spin')
+    if (loddingNode[0]) {
+      const textEle = loddingNode[0].querySelector('.ivu-spin-text')
+      if (textEle) {
+        textEle.style.display = 'block'
+        const div = document.createElement('div')
+        div.classList.add('loading-text')
+        div.innerText = binding.value
+        textEle.appendChild(div)
+      }
+    }
+  },
+  update: function (el, binding, vnode, oldVnode) {
+  }
+}

package/src/directive/module/loading.js

@@ -0,0 +1,48 @@
+import Spin from 'iview/src/components/spin'
+import Vue from 'vue'
+export default {
+  inserted: (el, binding, vnode, oldVnode) => {
+    var style = window.getComputedStyle(el, null) // 获取计算后的样式对象
+    var value = style.getPropertyValue('position')
+    if (value && (value != 'absolute' || value != 'relative')) {
+      el.style.position = 'relative'
+    }
+  },
+  bind: (el, binding, vnode, oldVnode) => {
+    let spinInstance = new (Vue.extend(Spin))({ propsData: { fix: true, show: false } }).$mount()
+    el.appendChild(spinInstance.$el)
+    spinInstance.$el.hidden = !binding.value
+    spinInstance.$el.style.zIndex = '1'
+    // vnode.elm.style = vnode.elm.style || '' + 'position: relative;'
+    // console.log('----------loading-------bind-----------')
+  },
+  update: function (el, binding, vnode, oldVnode) {
+    let nodeClassName = vnode.elm.className
+    let selector = nodeClassName && nodeClassName.length ? nodeClassName.replaceAll(' ', '.') : ''
+    if (selector) {
+      selector = '.' + selector + '>'
+    }
+    let loddingNode = vnode.elm.querySelectorAll(selector + 'div.ivu-spin')
+    // console.log('----------loading-------update-----------', binding)
+    // console.log('----------loading-------update-----loddingNode------', vnode)
+    // console.log('----------loading-------update-----loddingNode------', loddingNode)
+    if (loddingNode[0]) {
+      if (binding.value) {
+        loddingNode[0].hidden = false
+      } else {
+        loddingNode[0].hidden = true
+      }
+      if (el.scrollHeight > loddingNode[0].clientHeight) {
+        loddingNode[0].style.height = el.scrollHeight + 'px'
+      } else {
+        loddingNode[0].style.height = '100%'
+      }
+
+      if (el.scrollWidth > loddingNode[0].clientWidth) {
+        loddingNode[0].style.width = el.scrollHeight + 'px'
+      } else {
+        loddingNode[0].style.width = '100%'
+      }
+    }
+  }
+}

package/src/extentionPlugin/array.js

@@ -0,0 +1,81 @@
+/* eslint-disable no-extend-native */
+/* eslint-disable no-unused-vars */
+import Vue from 'vue'
+const install = (vue, opts = {}) => {
+  vue.prototype.$groupBy = groupBy
+  vue.prototype.$findItem = findItem
+  vue.prototype.$findItemIndex = findItemIndex
+  vue.prototype.$getValueByKey = getValueByKey
+  vue.prototype.$groupToDic = groupToDic
+  vue.prototype.$toDictionary = toDictionary
+  Array.prototype.findItemIndex = function (fn) {
+    return findItemIndex(this, fn)
+  }
+}
+
+export default {
+  install
+}
+
+function findItem(array, fn) {
+  for (const index in array) {
+    if (fn(array[index])) {
+      return array[index]
+    }
+  }
+  return null
+}
+
+function findItemIndex(array, fn) {
+  for (const index in array) {
+    if (fn(array[index])) {
+      return index
+    }
+  }
+  return -1
+}
+
+function getValueByKey(array, key) {
+  const result = []
+  for (const index in array) {
+    if (array[index][key]) {
+      result.push(array[index][key])
+    }
+  }
+  return result
+}
+
+function toDictionary(array, mainKey) {
+  const groups = {}
+  array.forEach(function (o) {
+    const allKeys = Object.keys(o)
+    const dicItem = {}
+    allKeys.forEach(key => {
+      dicItem[key] = o[key]
+    })
+    groups[o[mainKey]] = dicItem
+  })
+  return groups
+}
+
+function groupToDic(array, callback) {
+  const groups = {}
+  array.forEach(function (o) {
+    const group = callback(o)
+    groups[group] = groups[group] || []
+    groups[group].push(o)
+  })
+  return groups
+}
+
+function groupBy(array, callback) {
+  const groups = {}
+  array.forEach(function (o) {
+    const group = JSON.stringify(callback(o))
+    groups[group] = groups[group] || []
+    groups[group].push(o)
+  })
+  return Object.keys(groups).map(function (group) {
+    return groups[group]
+  })
+}