n20-common-lib 1.2.45 → 1.3.1

package/src/directives/VNstcNumber/temp.js

@@ -0,0 +1,446 @@
+
+// import Vue from 'vue'
+const NULL_ARR = ['', null, undefined, NaN]
+
+
+
+/**
+ * 金额格式化
+ * @param num 金额
+ * @param len 保留小数位数
+ * @param magnitude 数量级 （ 5 代表万 ）
+ * @returns {*}
+ */
+function amountFormat(num, len = 2, magnitude) {
+  /**
+   * input框的输入初始状态
+   */
+  if(num === '-') {
+    return '-'
+  }
+
+  // 已经格式化的数据
+  if (String(num).includes(',')) {
+    num = num.replace(/,/g, '')
+  }
+
+  // let symbol = String(num).includes('-') ? '-' : ''
+
+  // 非空校验
+  if (isNaN(Number(num)) || [null, '', undefined].includes(num)) {
+    return ''
+  }
+
+  const magnitudeObj = {
+    5: { label: '万元', value: 1E4 },
+    6: { label: '十万元', value: 1E5 },
+    7: { label: '百万元', value: 1E6 },
+    8: { label: '千万元', value: 1E7 },
+    9: { label: '亿元', value: 1E8 }
+  }
+  let temp = +num
+
+  if (magnitude) {
+    const t = magnitudeObj[magnitude]
+
+    temp = (temp / (t.value))
+  }
+
+  temp = temp.toFixed(len)
+
+  // 三点一逗
+  function get_thousand_num(num) {
+    return num.toString().replace(/\d+/, function(n) { // 先提取整数部分
+      return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) { // 对整数部分添加分隔符
+        return $1 + ','
+      })
+    })
+  }
+
+  temp = get_thousand_num(temp)
+  return temp
+}
+
+/** *
+ * uuid
+ */
+function generateUUID() {
+    var d = new Date().getTime()
+    if (window.performance && typeof window.performance.now === 'function') {
+        d += performance.now() // use high-precision timer if available
+    }
+    let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = (d + Math.random() * 16) % 16 | 0
+        d = Math.floor(d / 16)
+        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
+    })
+    return uuid
+}
+
+let currentFocusUUID = ''
+
+/**
+ * updateInput
+ * el, binding, vnode, oldVnode
+ */
+function updateInput(el, binding) {
+    // 判断 input 是否是激活状态
+    const inputEl = el.querySelectorAll('input')[0]
+    if (!inputEl) {
+        return
+    }
+    // const activeFlag = document.activeElement.tagName
+    const currentUUID = inputEl.getAttribute('money-id')
+    const disabledFlag = inputEl.getAttribute('disabled') === 'disabled'
+    const screenEl = el.children[el.children.length - 1]
+
+    // 延迟后的
+    setTimeout(() => {
+        // 只有金额才存在更新遮挡板 (activeFlag !== 'INPUT')
+        // console.log('当前激活的元素', document.activeElement)
+        if (binding.value[`isMoney`] && currentFocusUUID !== currentUUID) {
+            const curValue = inputEl.value
+
+            // 如果input框是disabled 状态， 遮挡层也因该是disabled状态
+            if (!disabledFlag) {
+                // el.classList.remove('nstc-amount-input-disabled')
+                el.classList.add('nstc-amount-num')
+            } else {
+                // el.classList.add('nstc-amount-input-disabled')
+                el.classList.add('nstc-amount-num')
+            }
+
+            // 当input值更新时， 遮挡层也要更新
+            screenEl.innerText = amountFormat(curValue || '')
+            if (binding.value.precision) {
+                let word_ = Number(inputEl.value).toFixed(binding.value.precision)
+                let after_ = word_.slice(-Number(binding.value.precision))
+                if (amountFormat(inputEl.value || '', binding.value.precision).indexOf('.') !== -1) {
+                    let index = amountFormat(inputEl.value || '', binding.value.precision).indexOf('.')
+                    let before_ = amountFormat(inputEl.value || '', binding.value.precision).slice(0, index)
+                    el.children[el.children.length - 1].innerText = `${before_}.${after_}`
+                }
+                inputEl.value = Number(word_)
+            }
+
+            if (NULL_ARR.includes(curValue)) {
+                el.classList.remove('nstc-amount-num-temp')
+                inputEl.value = ''
+            } else {
+                // 当前的激活元素，进行输入时，不显示遮罩层
+                currentFocusUUID !== currentUUID && el.classList.add('nstc-amount-num-temp')
+            }
+            //
+        } else {
+            // 保证遮罩层的text的内容，和 input 的内容一致
+            // 金额模式下
+            binding.value[`isMoney`] && (screenEl.innerText = amountFormat(inputEl.value || ''))
+
+        }
+        //处理刷新页面赋值带有小数点后几位问题
+        // if (binding.value.precision) {
+        //   let word_ =   Number(inputEl.value).toFixed(binding.value.precision)
+        //   el.children[el.children.length - 1].innerText = word_
+        //   inputEl.value = Number(inputEl.value)
+        // }
+    }, 30)
+}
+
+export default {
+    bind: function (el, binding) {
+        // 绑定uuid
+        const inputEl = el.querySelectorAll('input')[0]
+        // 将input的type 类型设置为 Number
+        // inputEl && (inputEl.setAttribute('type', 'number'))
+        inputEl && inputEl.setAttribute('money-id', generateUUID())
+
+        if (binding.value[`isMoney`]) {
+            inputEl && inputEl.setAttribute('style', 'text-align:right;')
+        } else {
+            inputEl && inputEl.setAttribute('style', 'text-align:left;')
+        }
+
+        inputEl && inputEl.addEventListener('input', function () {
+            const curValue = el.querySelectorAll('input')[0].value
+            const screenEl = el.children[el.children.length - 1]
+            if (binding.value[`isMoney`]) {
+
+                screenEl.innerText = amountFormat(curValue || '')
+            }
+
+        })
+    },
+    unbind: function (el) {
+        el.removeEventListener('input', el.handler)
+    },
+
+    inserted(el, vDir) {
+
+        // 禁止input滚动事件
+        const ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
+        // el.type = 'number'
+        ele && ele.addEventListener('mousewheel', () => {
+            ele.blur()
+        })
+
+        // 当为金额时，浮框显示三点一逗
+        if (vDir.value[`isMoney`]) {
+
+            el.querySelector('input').parentElement.style.userSelect = 'none';
+            const elDiv = document.createElement('div')
+            elDiv.className = 'input-after-amount-num'
+
+            // 添加金额class
+            el.classList.add('nstc-amount-num')
+
+            elDiv.innerText = ''
+            el.append(elDiv)
+
+            // 监听input聚焦事件
+            el.addEventListener('click', () => {
+                const inputEl = el.querySelectorAll('input')[0]
+                const disabledFlag = inputEl.getAttribute('disabled') === 'disabled'
+
+                if (!disabledFlag) {
+                    el.classList.remove('nstc-amount-num-temp')
+                    el.children[0].focus()
+
+                    currentFocusUUID = el.querySelectorAll('input')[0].getAttribute('money-id')
+                    //
+                }
+                //
+                // eslint-disable-next-line no-debugger
+            })
+        } else {
+            let inputEl = el.querySelectorAll('input')[0]
+            let curValue = inputEl.value
+            inputEl.value = curValue ? parseFloat(curValue).toFixed(vDir.value.precision || 0) : ""
+        }
+
+        // vDir.value 有指令的参数
+        if (JSON.stringify(vDir.value) === '{}') {
+            return null
+        }
+
+        let content
+        // 按键按下=>只允许输入 数字/小数点
+        el.addEventListener('keypress', event => {
+            let e = event || window.event
+            if (!Number(e.target.value) && e.target.value != 0) {
+                e.target.value = ''
+                return ''
+            }
+            if (!e.target.value) {
+                return null
+            }
+            let inputKey = String.fromCharCode(e.keyCode || e.charCode)
+            let re = /\d|\./
+            let reP = /\d|\.|-/
+            content = e.target.value
+
+            // 定义方法,阻止输入
+            function preventInput() {
+                if (e.preventDefault) {
+                    e.preventDefault()
+                } else {
+                    e.returnValue = false
+                }
+            }
+
+            // 判断最小值是不是负数
+            let arg_min = null
+            let preventFlag = null
+            if (vDir.value) {
+                arg_min = vDir.value.min
+                if (!NULL_ARR.includes(arg_min) && arg_min < 0) {
+                    preventFlag = !reP.test(inputKey) && !e.ctrlKey
+                } else {
+                    preventFlag = !re.test(inputKey) && !e.ctrlKey
+                }
+            }
+
+            if (preventFlag) {
+                preventInput()
+            } else if ((content.indexOf('.') > 0 && inputKey === '.') || (content.includes('-') && inputKey === '-')) {
+                // 已有小数点,再次输入小数点
+                preventInput()
+            }
+        })
+        // 按键弹起=>并限制最大最小, 最大长度
+        el.addEventListener('keyup', event => {
+            let e = event || window.event
+            if (!Number(e.target.value) && e.target.value != 0) {
+                e.target.value = ''
+                return ''
+            }
+            if (!e.target.value) {
+                return null
+            }
+            content = e.target.value
+            let inputKey = String.fromCharCode(e.keyCode || e.charCode)
+            // 判断是不是才输入的初始状态
+            vDir.value[`isMoney`] && (el.children[el.children.length - 1].innerText = amountFormat(content || ''))
+
+            if (!content) {
+                content = ''
+            }
+            let arg_max = ''
+            let arg_min = ''
+            let max = 9999999999999
+            if (vDir.value) {
+                arg_max = vDir.value.max
+                arg_min = vDir.value.min // 没用到
+            }
+            if (!arg_max || arg_max >= max) {
+                max = arg_max
+            }
+            if (arg_max && content > arg_max) {
+                e.target.value = arg_max
+                content = arg_max
+            }
+            let maxl = max.toString().length
+
+            // console.log('判断结果', Number(arg_min) < 0, inputKey === '½')
+
+            // 验证数字的最大长度
+            if (!NULL_ARR.includes(vDir.value[`isMoney`])) {
+
+                // 如果输入为负号， 不处理
+                // console.log('判断结果', Number(arg_min) < 0, currentInputValue)
+                if (Number(arg_min) < 0 && ['½', 'm', '\b', '-'].includes(inputKey)) {
+                    return null
+                }
+                let numPart = e.target.value.split('.')
+                let intPart = numPart[0] || ''
+                let decimalPart = numPart[1] || ''
+                if (numPart.length === 1) {
+                    try {
+                        Number(arg_min) >= 0 ? (e.target.value = Math.abs(intPart.toString().slice(0, maxl))) : (e.target.value = intPart.toString().slice(0, maxl))
+                    } catch {
+                        e.target.value = intPart.toString().slice(0, maxl)
+                    }
+
+                } else {
+                    try {
+                        Number(arg_min) >= 0 ? (e.target.value = Math.abs(intPart.toString().slice(0, maxl) + '.' + decimalPart.slice(0, 2))) : (e.target.value = intPart.toString().slice(0, maxl) + '.' + decimalPart.slice(0, 2))
+                    } catch {
+                        e.target.value = intPart.toString().slice(0, maxl) + '.' + decimalPart.slice(0, 2)
+                    }
+
+                }
+                //同步修改vue v-model绑定值
+                e.target.dispatchEvent(new Event('input'));
+                // e.target.value = e.target.value
+
+            } else if (!NULL_ARR.includes(vDir.value.maxLength)) {
+                // console.log('验证数字的最大长度', vDir.value.maxLength, e.target.value)
+                if (!isNaN(Number(vDir.value.maxLength))) {
+                    if (vDir.value.maxLength > maxl) {
+                        e.target.value = e.target.value.toString().slice(0, maxl)
+                    } else {
+                        e.target.value = e.target.value.toString().slice(0, vDir.value.maxLength)
+                    }
+
+                }
+            }
+        })
+        updateInput(el, vDir)
+        // 失去焦点=>保留指定位小数
+        el.addEventListener('focusout', event => { // 此处会在 el-input 的 @change 后执行
+
+            let e = event || window.event
+            let arg_precision = vDir.value.precision || 0  // 默认保留至整数
+
+            currentFocusUUID = ''
+            // 显示三点一抖的数字temp
+            if (!Number(e.target.value) && e.target.value != 0) {
+                e.target.value = ''
+                return ''
+            }
+            if (!e.target.value) {
+                return null
+            } else {
+                el.classList.add('nstc-amount-num-temp')
+            }
+            content = e.target.value
+            if (NULL_ARR.includes(content)) {
+                el.classList.add('nstc-amount-temp-transparent')
+            } else {
+                el.classList.remove('nstc-amount-temp-transparent')
+            }
+
+            if (!content) {
+                content = ''
+            }
+            let arg_min = ''
+            if (vDir.value) {
+                arg_min = vDir.value.min
+            }
+            if (!NULL_ARR.includes(arg_min) && content < arg_min) {
+                // 设置input的框的值
+                e.target.value = arg_min
+                content = arg_min
+
+                // 还原遮罩层
+                if (vDir.value[`isMoney`]) {
+                    el.children[el.children.length - 1].innerText = amountFormat(content, arg_precision);
+
+                } else {
+                    el.children[el.children.length - 1].innerText = content
+                }
+            }
+
+            if (vDir.value.precision) {
+
+                let word_ = !NULL_ARR.includes(content) && (Number(content).toFixed(arg_precision))
+                let after_ = word_.slice(-Number(arg_precision))
+                if (amountFormat(word_ || '', arg_precision).indexOf('.') !== -1) {
+                    let index = amountFormat(word_ || '', arg_precision).indexOf('.')
+                    let before_ = amountFormat(word_ || '', arg_precision).slice(0, index)
+                    el.children[el.children.length - 1].innerText = `${before_}.${after_}`
+                }
+                e.target.value = Number(word_)
+                // e.target.dispatchEvent(new Event('input'));
+            }
+            if (!vDir.value[`isMoney`]) {
+                e.target.value = Number(e.target.value).toFixed(vDir.value.precision)
+            }
+            // !NULL_ARR.includes(content) && (e.target.value = Number(content))
+            // e.target.dispatchEvent(new Event('input'));
+            //  updateInput(el, vDir)
+
+            //更新遮罩层
+            // e.target.dispatchEvent(new Event('input'));
+            // updateInput(el, vDir)
+            // -- callback写法1
+            // vNode.data.model.callback = ()=>{
+            //     e.target.value = content.toFixed(arg_precision)
+            // }
+            // vNode.data.model.callback();
+            // -- callback 写法2
+            // vNode.data.model.callback(
+            //     e.target.value = content.toFixed(arg_precision)
+            // )
+        })
+
+        // 当时去焦点时
+        el.addEventListener('blur', () => {
+
+        })
+
+        // 聚焦事件
+        el.addEventListener('focus', event => {
+            let e = event || window.event
+            if (!vDir.value[`isMoney`]) {
+                if (e.target.value !== '') {
+                    e.target.value = Number(e.target.value)
+                }
+            }
+        }, true)
+    },
+    componentUpdated(el, binding, vnode, oldVnode) {
+        updateInput(el, binding, vnode, oldVnode)
+    },
+    update() {
+    }
+}

package/src/index.js

@@ -21,6 +21,7 @@ import Statis from './components/Statis/index.vue'
 import StatisItem from './components/Statis/statisItem.vue'
 import StatisPopover from './components/Statis/statisPopover.vue'
 import ApprovalCard from './components/ApprovalCard/index.vue'
+import approvalImg from './components/ApprovalRecord/approvalImg.vue'
 import ApprovalRecord from './components/ApprovalRecord/index.vue'
 import ApprovalButtons from './components/ApprovalButtons/index.vue'
 import Expandable from './components/Expandable/index.vue'
@@ -46,6 +47,14 @@ import FlowStep from './components/FlowStep/index.vue'
 import CascaderArea from './components/CascaderArea/index.vue'
 import FileExportAsync from './components/FileExportAsync/index.vue'
 import FlowDialog from './components/ApprovalRecord/flowDialog.vue'
+import ChildRange from './components/ChildRange/index'
+import FileImport from './components/FileImport/index'
+import PageHeader from './components/PageHeader/index'
+import PlainText from './components/PlainText/index'
+import PlainTextItem from './components/PlainText/PlainTextItem'
+import ECharts from './components/ECharts/index'
+import Search from './components/Search/index.vue'
+import Stamp from './components/Stamp/index.vue'
 /* old */
 import TableO from './components/Table/indexO.vue'
 import FiltersO from './components/Filters/indexO.vue'
@@ -128,6 +137,15 @@ const components = [
   CascaderArea,
   FileExportAsync,
   FlowDialog,
+  ChildRange,
+  FileImport,
+  PageHeader,
+  PlainText,
+  PlainTextItem,
+  ECharts,
+  Search,
+  approvalImg,
+  Stamp,
   /* old */
   TableO,
   FiltersO,
@@ -228,5 +246,14 @@ export {
   FlowStep,
   CascaderArea,
   FileExportAsync,
-  FlowDialog
+  FlowDialog,
+  ChildRange,
+  FileImport,
+  PageHeader,
+  PlainText,
+  PlainTextItem,
+  ECharts,
+  Search,
+  approvalImg,
+  Stamp
 }