swordpass-ui 1.0.0

package/src/directive/index.js

@@ -0,0 +1,42 @@
+import Vue from 'vue'
+import badge from './badge'
+import copy from './copy'
+import ellipsis from './ellipsis'
+import expandClick from './expandClick'
+import express from './express'
+import form from './form'
+import format from './format'
+import permit from './permit'
+import popconfirm from './popconfirm'
+import resize from './resize'
+import tooltip from './tooltip'
+import tableDrag from './tableDrag'
+import subSort from './subSort'
+import permissionLine from './permissionLine'
+import permissionLineLable from './permissionLineLable'
+import relatedQuery from './relatedQuery'
+import { formula, Formulas } from './formulas'
+
+const directives = {
+  badge,
+  copy,
+  ellipsis,
+  expandClick,
+  express,
+  form,
+  format,
+  permit,
+  popconfirm,
+  resize,
+  tooltip,
+  subSort,
+  permissionLine,
+  permissionLineLable,
+  formula,
+  tableDrag,
+  relatedQuery,
+}
+
+Object.keys(directives).forEach((name) => Vue.directive(name, directives[name]))
+
+Vue.use(Formulas)

package/src/directive/permissionLine.js

@@ -0,0 +1,59 @@
+import utils from '@/utils.js'
+
+export default {
+  bind(el, binding, vnode) {
+    if (binding.value) {
+      const inst = vnode.context
+      let idxObj = utils.getSubScopeElAndIndex(el)
+      let paths = binding.value.split('_')
+      let boType = paths[0]
+      let idStr = binding.value + '_' + idxObj.index
+      //孙表时，获取孙表所属子表序号
+      if (boType == 'sun' && idxObj.subScopeEl) {
+        const subIdxObj = utils.getSubScopeElAndIndex(
+          idxObj.subScopeEl.parentElement
+        )
+        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
+      }
+      if (
+        inst.permission &&
+        inst.permission['subFields'] &&
+        inst.permission['subFields'][idStr]
+      ) {
+        setTimeout(function() {
+          if (el.__vue__) {
+            el.__vue__.permission_sub = inst.permission['subFields'][idStr]
+            el.__vue__.sub_work = true
+          }
+        }, 0)
+      }
+    }
+  },
+  update(el, binding, vnode) {
+    if (binding.value) {
+      const inst = vnode.context
+      let idxObj = utils.getSubScopeElAndIndex(el)
+      let paths = binding.value.split('_')
+      let boType = paths[0]
+      let idStr = binding.value + '_' + idxObj.index
+      //孙表时，获取孙表所属子表序号
+      if (boType == 'sun' && idxObj.subScopeEl) {
+        const subIdxObj = utils.getSubScopeElAndIndex(
+          idxObj.subScopeEl.parentElement
+        )
+        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
+      }
+      if (
+        inst.permission &&
+        inst.permission['subFields'] &&
+        inst.permission['subFields'][idStr]
+      ) {
+        setTimeout(function() {
+          if (el.__vue__) {
+            el.__vue__.permission_sub = inst.permission['subFields'][idStr]
+          }
+        }, 0)
+      }
+    }
+  },
+}

package/src/directive/permissionLineLable.js

@@ -0,0 +1,56 @@
+import utils from '@/utils.js'
+
+export default {
+  bind(el, binding, vnode) {
+    if (binding.value) {
+      const inst = vnode.context
+      let idxObj = utils.getSubScopeElAndIndex(el)
+      let paths = binding.value.split('_')
+      let boType = paths[0]
+      let idStr = binding.value + '_' + idxObj.index
+      //孙表时，获取孙表所属子表序号
+      if (boType == 'sun' && idxObj.subScopeEl) {
+        const subIdxObj = utils.getSubScopeElAndIndex(
+          idxObj.subScopeEl.parentElement
+        )
+        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
+      }
+      if (
+        inst.permission &&
+        inst.permission['subFields'] &&
+        inst.permission['subFields'][idStr]
+      ) {
+        setTimeout(function() {
+          el.parentElement.hidden =
+            inst.permission['subFields'][idStr] == 'n' ? true : false
+        }, 0)
+      }
+    }
+  },
+  update(el, binding, vnode) {
+    if (binding.value) {
+      const inst = vnode.context
+      let idxObj = utils.getSubScopeElAndIndex(el)
+      let paths = binding.value.split('_')
+      let boType = paths[0]
+      let idStr = binding.value + '_' + idxObj.index
+      //孙表时，获取孙表所属子表序号
+      if (boType == 'sun' && idxObj.subScopeEl) {
+        const subIdxObj = utils.getSubScopeElAndIndex(
+          idxObj.subScopeEl.parentElement
+        )
+        idStr = binding.value + '_' + subIdxObj.index + '_' + idxObj.index
+      }
+      if (
+        inst.permission &&
+        inst.permission['subFields'] &&
+        inst.permission['subFields'][idStr]
+      ) {
+        setTimeout(function() {
+          el.parentElement.hidden =
+            inst.permission['subFields'][idStr] == 'n' ? true : false
+        }, 0)
+      }
+    }
+  },
+}

package/src/directive/permit.js

@@ -0,0 +1,23 @@
+// 表单tr中根据隐藏字段动态合并单元格的指令
+export default function(el, binding) {
+  if (el.tagName !== 'TR') {
+    throw 'v-permit指令只能用在tr元素上.'
+  }
+  if (!binding.value || binding.value.constructor !== Number) {
+    throw 'v-permit指令的值只能是大于0的数字.'
+  }
+  el.removeAttribute('hidden')
+
+  // tr中没有子元素时，删除tr自身
+  if (el.cells.length == 0) {
+    el.setAttribute('hidden', 'hidden')
+  } else if (el.cells.length < binding.value) {
+    let colspan = binding.value - el.cells.length + 1
+    // 设置colspan实现单元格合并
+    el.cells[el.cells.length - 1].setAttribute('colspan', colspan)
+  } else if (el.cells.length == binding.value) {
+    for (var i = 0, c; (c = el.cells[i++]); ) {
+      c.removeAttribute('colspan')
+    }
+  }
+}

package/src/directive/popconfirm.js

@@ -0,0 +1,86 @@
+import Vue from 'vue'
+
+const getPopconfirm = function(el, binding) {
+  const attrs = binding.value
+  const opts = {
+    content: '确定执行该操作？',
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    confirmButtonType: 'primary',
+    cancelButtonType: 'default',
+    icon: 'question',
+    iconColor: '#f90',
+    hideIcon: false,
+    before: null,
+  }
+  let args = null
+  if (typeof attrs == 'function') {
+    opts.confirm = attrs
+    args = binding.arg
+  } else if (typeof attrs == 'object') {
+    Object.assign(opts, attrs)
+    args = { ...attrs }
+  } else {
+    throw `v-popconfirm需要提供表达式或者object对象`
+  }
+  // 创建构造器
+  const popconfirm = Vue.extend({
+    data() {
+      return {
+        visible: false,
+        opts,
+        iconStyle: {
+          marginRight: '10px',
+          color: opts.iconColor,
+        },
+      }
+    },
+    methods: {
+      confirm() {
+        opts.confirm && opts.confirm.apply(null, [args])
+        popComp.doClose()
+      },
+      cancel() {
+        popComp.doClose()
+      },
+    },
+    template: `<el-popover v-bind="opts" v-model="visible" trigger="click">
+    <div class="el-popconfirm">
+      <p class="el-popconfirm__main">
+        <cl-icon v-if="!opts.hideIcon" :name="opts.icon" :style="iconStyle" />
+        ${opts.content}
+      </p>
+      <div class="el-popconfirm__action">
+        <el-button size="mini" :type="opts.confirmButtonType" @click="confirm">{{opts.confirmButtonText}}</el-button>
+        <el-button size="mini" :type="opts.cancelButtonType" @click="cancel">{{opts.cancelButtonText}}</el-button>
+      </div>
+    </div>
+  </el-popover>`,
+  })
+  // 创建一个 popconfirm 实例并返回 dom 节点
+  const component = new popconfirm().$mount()
+  const popComp = component.$children[0]
+  popComp.$refs.reference = el
+  el.addEventListener('click', () => {
+    if (opts.before) {
+      const result = opts.before.apply(null, [args])
+      if (result && result.constructor == Promise) {
+        result.then(() => popComp.doShow())
+      } else if (result && result === true) {
+        popComp.doShow()
+      }
+    } else {
+      popComp.doShow()
+    }
+  })
+  return component.$el
+}
+
+export default {
+  bind: function(el, binding) {
+    if (el.hasPopconfirm) return
+    const popconfirmEle = getPopconfirm(el, binding)
+    el.appendChild(popconfirmEle)
+    el.hasPopconfirm = true
+  },
+}

package/src/directive/relatedQuery.js

@@ -0,0 +1,61 @@
+import utils from '@/utils.js'
+import CustomQuery from '@/services/CustomQuery.js'
+export default {
+  bind: function(el, binding, vnode) {
+    const inst = vnode.context
+    let exp = null
+    if (binding.expression) {
+      exp = utils.parseToJson(binding.expression)
+    }
+    if (inst) {
+      // 上一次关联查询条件（一个组件可以绑定多个关联查询，）
+      inst.preRelatedQueryParams = {}
+      inst.$on('related-query:load', (alias, params, resultBind) => {
+        params = params || {}
+        // 是否执行查询
+        let doLoad = true
+        if (exp && exp.cache) {
+          // 相比上一次，查询参数是否有变化
+          const changed = !utils.objectEquals(
+            inst.preRelatedQueryParams[alias],
+            params
+          )
+          if (changed) {
+            doLoad = true
+            inst.preRelatedQueryParams[alias] = params
+          } else {
+            doLoad = false
+          }
+        }
+        doLoad &&
+          CustomQuery.load(alias, params).then((data) => {
+            if (
+              data &&
+              data.constructor == Array &&
+              data.length > 0 &&
+              resultBind &&
+              resultBind.constructor == Object
+            ) {
+              // 获取当前控件是否在子表某行中
+              let { index } = utils.getSubScopeElAndIndex(el)
+
+              const pInst = utils.getOnlineFormInstance(inst)
+              // 关联查询值回绑时，默认获取返回的第一条记录
+              const singleData = data[0]
+              Object.keys(resultBind).forEach((k) => {
+                const path = resultBind[k]
+                // 主表
+                if (index == null) {
+                  utils.setValueByPath(pInst, path, singleData[k])
+                }
+                // 子表
+                else {
+                  utils.setValueByPath(pInst, path, singleData[k], index)
+                }
+              })
+            }
+          })
+      })
+    }
+  },
+}

package/src/directive/resize.js

@@ -0,0 +1,18 @@
+export default {
+  bind(el, binding) {
+    let width = '',
+      height = ''
+    function isReize() {
+      const style = document.defaultView.getComputedStyle(el)
+      if (width !== style.width || height !== style.height) {
+        binding.value() // 执行传入的方法
+      }
+      width = style.width
+      height = style.height
+    }
+    el.__timer__ = setInterval(isReize, 300) // 周期性监听元素是否改变
+  },
+  unbind(el) {
+    clearInterval(el.__timer__)
+  },
+}

package/src/directive/subSort.js

@@ -0,0 +1,18 @@
+export default {
+  bind(el, binding, vnode) {
+    const onlineFormInst = vnode.context
+    const subPath = el.id.replace('xh_tablegd_', '').split('.')
+    const subArr = onlineFormInst.data[subPath[0]][subPath[1]]
+    const subName = subPath[1].replace('sub_', '')
+    const { field, direction } = binding.value
+    if (onlineFormInst.permission.table[subName].hidden || subArr.length == 0) {
+      return
+    }
+    subArr.sort((a, b) => {
+      const x = isNaN(a[field]) ? a[field] : Number(a[field])
+      const y = isNaN(b[field]) ? b[field] : Number(b[field])
+      const result = x < y ? -1 : x > y ? 1 : 0
+      return result * (direction == 'desc' ? -1 : 1)
+    })
+  },
+}

package/src/directive/tableDrag.js

@@ -0,0 +1,25 @@
+export default {
+  inserted: function(el) {
+    const currentElement =
+      el.getElementsByClassName('el-table__body-wrapper')[0] || el
+    const tagNames = ['span', 'input', 'textarea', 'aside']
+    if (currentElement) {
+      currentElement.onmousedown = function(event) {
+        const currentTagNames = event.target.tagName.toLowerCase()
+        if (tagNames.includes(currentTagNames)) return
+        currentElement.style.cursor = 'grab'
+        let gapX = event.clientX
+        let startX = el.scrollLeft
+        document.onmousemove = function(e) {
+          let x = e.clientX - gapX
+          currentElement.scrollLeft = startX - x
+          return false
+        }
+        document.onmouseup = function() {
+          document.onmousemove = null
+          document.onmouseup = null
+        }
+      }
+    }
+  },
+}

package/src/directive/tooltip.js

@@ -0,0 +1,37 @@
+import Vue from 'vue'
+
+export default function (el, binding) {
+  if (el.hasIcon) return
+  const iconElement = structureIcon(binding.value)
+  // 图标是否追加在元素后面
+  if (binding.modifiers && binding.modifiers.after) {
+    el.appendChild(iconElement)
+  } else {
+    el.insertBefore(iconElement, el.childNodes[0])
+  }
+  el.hasIcon = true
+}
+
+function structureIcon(attrs) {
+  // 拼接绑定属性
+  let attrStr = ''
+
+  if (typeof attrs == 'string') {
+    attrStr = `content=${attrs} `
+  } else if (typeof attrs == 'object') {
+    for (let key in attrs) {
+      attrStr += `${key}=${attrs[key]} `
+    }
+  } else {
+    throw `v-tooltip需要提供表达式或者object对象`
+  }
+
+  const a = `<el-tooltip ${attrStr}><cl-icon name="question" style="margin:0 8px" /></el-tooltip>`
+  // 创建构造器
+  const tooltip = Vue.extend({
+    template: a,
+  })
+  // 创建一个 tooltip 实例并返回 dom 节点
+  const component = new tooltip().$mount()
+  return component.$el
+}

package/src/filter/computerSize.js

@@ -0,0 +1,23 @@
+// 将byte单位的数值转换为合适单位的数值返回
+export default function(value) {
+  if (null == value || value == '') {
+    return '0 Bytes'
+  }
+  var unitArr = new Array(
+    'Bytes',
+    'KB',
+    'MB',
+    'GB',
+    'TB',
+    'PB',
+    'EB',
+    'ZB',
+    'YB'
+  )
+  var index = 0
+  var srcsize = parseFloat(value)
+  index = Math.floor(Math.log(srcsize) / Math.log(1024))
+  var size = srcsize / Math.pow(1024, index)
+  size = size.toFixed(2) //保留的小数位数
+  return size + unitArr[index]
+}

package/src/filter/dateFormat.js

@@ -0,0 +1,10 @@
+export default function(dataStr, pattern = 'yyyy-MM-dd hh:mm:ss') {
+  if (dataStr) {
+    if (pattern == 'yyyy-MM-dd hh:mm:ss') {
+      pattern = 'YYYY-MM-DD HH:mm:ss'
+    }
+    return new Date(dataStr).format(pattern)
+  } else {
+    return ''
+  }
+}

package/src/filter/index.js

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import computerSize from './computerSize'
+import dateFormat from './dateFormat'
+
+const filters = {
+  computerSize,
+  dateFormat,
+}
+
+Object.keys(filters).forEach((name) => Vue.filter(name, filters[name]))