el-plus-crud 0.0.2

package/lib/components/el-plus-form/mixins/index.ts

@@ -0,0 +1,113 @@
+export interface IMixinsProps {
+  modelValue?: any
+  field: string
+  rowIndex?: number
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  isMobile?: boolean
+  defineEmits?: any
+}
+
+/**
+ * 获取属性
+ * @param props
+ * @param customAttrs
+ * @returns
+ */
+export const getAttrs = async (props: IMixinsProps, customAttrs?: { [key: string]: any }) => {
+  // 合并属性
+  const attrs = Object.assign({}, customAttrs, props.desc?._attrs, props.desc?.attrs, getPlaceholder(props.desc))
+
+  // 处理多选
+  if (props.desc.multiple) {
+    attrs.multiple = true
+    attrs.showCheckbox = true
+    if (['select'].indexOf(props.desc.type) >= 0) {
+      attrs.collapseTags = props.desc.attrs?.collapseTags ?? false
+      attrs.collapseTagsTooltip = props.desc.attrs?.collapseTagsTooltip ?? false
+    }
+  }
+
+  // if (['area'].indexOf(props.desc.type) >= 0) {
+  //   delete attrs.options
+  // }
+
+  // 处理下elType
+  if (props.desc.elType) {
+    if (typeof props.desc.elType === 'function') {
+      attrs.type = props.desc.elType(props.formData)
+    } else {
+      attrs.type = props.desc.elType
+    }
+  }
+  return attrs
+}
+
+/**
+ * 获取事件
+ * @returns
+ */
+export const getEvents = (props: IMixinsProps) => {
+  const tempOn = {} as any
+  if (props.desc?.on) {
+    Object.keys(props.desc.on).map((key: string) => {
+      tempOn[key] = (val: any) => {
+        props.desc.on[key](props.formData, props.rowIndex, val)
+      }
+    })
+  }
+  return tempOn
+}
+
+/**
+ * 根据类型获取属性 placeholder
+ * @param desc
+ * @returns
+ */
+function getPlaceholder(desc: { [key: string]: any }) {
+  if (!desc || !desc.type) return ''
+  switch (desc.type) {
+    case 'input':
+    case 'nbinput':
+    case 'password':
+    case 'number':
+    case 'validCode':
+    case 'tag':
+      return { placeholder: desc?.placeholder || '请输入' + desc?._label }
+    case 'switch':
+      return {}
+    case 'area':
+    case 'select':
+    case 'category':
+    case 'cascader':
+      return { placeholder: desc?.placeholder || '请选择' + (desc.remote ? (desc.initLoad !== false ? '（默认查10个，其余请输入搜索）' : '或输入进行搜索') : desc?._label) }
+    case 'data':
+    case 'datetime':
+    case 'datas':
+      return { placeholder: '选择日期' }
+    case 'daterange':
+    case 'datetimerange':
+    case 'timerange':
+    case 'monthrange':
+      return {
+        startPlaceholder: '开始日期',
+        endPlaceholder: '结束日期'
+      }
+    case 'dates':
+      return { placeholder: '选择一个或多个日期' }
+    case 'month':
+      return { placeholder: '选择月' }
+    case 'time':
+    case 'timsPicker':
+      return { placeholder: '请选择时间' }
+    case 'week':
+      return { placeholder: '请选择周' }
+    case 'year':
+      return { placeholder: '请选择年' }
+    case 'upimg':
+      return { placeholder: '请上传' }
+    case 'upfile':
+      return { placeholder: '点击上传' }
+  }
+}

package/lib/components/el-plus-form/util/index.ts

@@ -0,0 +1,266 @@
+// 是否定义
+export function isDef(val: any) {
+  return !isUnDef(val)
+}
+
+// 是否没定义
+export function isUnDef(val: any) {
+  return val === null || val === undefined
+}
+
+// 判断是否为函数
+export function isFunction(val: any) {
+  return typeof val === 'function'
+}
+
+/**
+ * 获取随机字符串
+ * @returns {string}
+ */
+export function getUID(): string {
+  let str = ''
+  const arr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+  for (let i = 0; i < 32; i++) {
+    let index = Math.floor(arr.length * Math.random())
+    if (index < 0) index = 0
+    str += arr[index]
+  }
+  return str
+}
+
+/**
+ * 判断是否是移动端
+ */
+export function isMobile() {
+  if (navigator.userAgent.match(/('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i)) {
+    return true
+  } else {
+    return false
+  }
+}
+
+// 判断类型
+export function is(val: any, type: any) {
+  const typeArr = Array.isArray(type) ? type : [type]
+  const valType = Object.prototype.toString.call(val)
+  return typeArr.some((type) => `[object ${type}]` === valType)
+}
+
+// 获取 display: none 的节点宽度和高度
+export function getSize(elem: any) {
+  const noneNodes: any[] = []
+  const nodeStyle: any[] = []
+
+  getNoneNode(elem) // 获取多层display：none;的元素
+  setNodeStyle()
+  const width = elem.clientWidth
+  const height = elem.clientHeight
+  resumeNodeStyle()
+
+  return {
+    width: width,
+    height: height
+  }
+
+  function getNoneNode(node: any) {
+    const display = getStyles(node).getPropertyValue('display')
+    const tagName = node.nodeName.toLowerCase()
+    if (display !== 'none' && tagName !== 'body') {
+      getNoneNode(node.parentNode)
+    } else {
+      noneNodes.push(node)
+      if (tagName !== 'body') getNoneNode(node.parentNode)
+    }
+  }
+
+  // 这方法才能获取最终是否有display属性设置，不能style.display。
+  function getStyles(elem: any) {
+    // Support: IE<=11+, Firefox<=30+ (#15098, #14150)
+    // IE throws on elements created in popups
+    // FF meanwhile throws on frame elements through "defaultView.getComputedStyle"
+    let view = elem.ownerDocument.defaultView
+
+    if (!view || !view.opener) {
+      view = window
+    }
+    return view.getComputedStyle(elem)
+  }
+
+  function setNodeStyle() {
+    let i = 0
+    for (; i < noneNodes.length; i++) {
+      const visibility = noneNodes[i].style.visibility
+      const display = noneNodes[i].style.display
+      const style = noneNodes[i].getAttribute('style')
+      // 覆盖其他display样式
+      noneNodes[i].setAttribute('style', 'visibility:hidden;display:block !important;' + style)
+      nodeStyle[i] = {
+        visibility: visibility,
+        display: display
+      }
+    }
+  }
+
+  function resumeNodeStyle() {
+    let i = 0
+    for (; i < noneNodes.length; i++) {
+      noneNodes[i].style.visibility = nodeStyle[i].visibility
+      noneNodes[i].style.display = nodeStyle[i].display
+    }
+  }
+}
+
+// 如果 value 不是数组, 那么强制转为数组
+// 空转为空数组 undefined | null | '' => []
+// 1 => [1], false => [false], {} => [{}]
+export function castArray(value: any) {
+  if (Array.isArray(value)) {
+    return value
+  } else if (value === undefined || value === null || value === '') {
+    return []
+  } else {
+    return value.split(',')
+  }
+}
+// 数据转移为cascade的category
+export function castCategory(value: any, formData: any) {
+  if (Array.isArray(value)) {
+    return value
+  } else {
+    const tempList = []
+    if (formData.categoryId1) tempList.push(formData.categoryId1)
+    if (formData.categoryId2) tempList.push(formData.categoryId2)
+    if (formData.categoryId3) tempList.push(formData.categoryId3)
+    return tempList
+  }
+}
+// 如果 value 不是数组, 那么强制转为数组
+export function castFileList(value: any) {
+  if (Array.isArray(value)) {
+    return value
+  } else if (value === undefined || value === null || value === '') {
+    return []
+  } else {
+    return value.split(',')
+  }
+}
+// 如果 value 不是字符串, 那么强制转为字符串
+export function castString(value: any) {
+  if (typeof value === 'string') {
+    return value
+  } else if (value === undefined || value === null) {
+    return ''
+  } else if (value.toString) {
+    return value.toString()
+  } else {
+    return value + ''
+  }
+}
+// 如果 value 不是Boolean, 那么强制转为Boolean
+export function castBoolean(value: any) {
+  if (typeof value === 'boolean') {
+    return value
+  } else {
+    return Boolean(value)
+  }
+}
+// 如果 value 不是Number, 那么强制转为Number
+export function castNumber(value: any): number {
+  if (typeof value === 'number') {
+    return value
+  } else {
+    return Number(value) || 0
+  }
+}
+
+// 判断是否为空
+// 空数组 / null / undefined / 空字符串
+export function isEmpty(val: any) {
+  if (Array.isArray(val) && val.length === 0) {
+    return true
+  } else if (isUnDef(val)) {
+    return true
+  } else if (typeof val === 'string' && val === '') {
+    return true
+  } else {
+    return false
+  }
+}
+
+/**
+ * 格式化表单字段
+ * @param formData
+ * @param formDesc
+ */
+export function valueFormat(formData: any, formDesc: any) {
+  for (const field in formData) {
+    const formItem = formDesc[field]
+    if (formItem && formItem.valueFormat) {
+      if (typeof formItem.valueFormat === 'function') {
+        formData[field] = formItem.valueFormat(formData[field], formData)
+      }
+      switch (formItem.valueFormat) {
+        case 'arrayToStr':
+          formData[field] = arrayToStr(formData[field])
+          break
+        default:
+          throw Error('无效的 valueFormat 类型')
+      }
+    }
+  }
+}
+
+/**
+ *
+ * @param val 数组转字符串
+ */
+export function arrayToStr(val: any) {
+  if (Array.isArray(val)) {
+    return val.join(',')
+  } else {
+    return val + ''
+  }
+}
+
+// 默认起止时间
+const maxMinTime = new Date('2010-01-01 00:00:00')
+const maxMaxTime = new Date('2040-01-01 00:00:00')
+
+/**
+ * 获取可用的时间
+ */
+export const getEnabledDate = (date: Date, startTime: number, endTime: number) => {}
+
+/**
+ * 裁剪长度
+ * @param str
+ * @param len
+ * @param isTransHz 是否转换汉字长度为2个英文字母长度
+ */
+export const cutString = (str: string = '', len: number, isTransHz: boolean = false) => {
+  if (!str) return ''
+  const length = isTransHz ? getStrLength(str) : str.length
+  if (length > len) {
+    return str.substring(0, len - 2) + '...' + str.substring(len - 2, len)
+  }
+  return str
+}
+
+/**
+ * 获取字符串长度
+ * @type {(p1?:*)}
+ */
+export const getStrLength = (str: any) => {
+  // <summary>获得字符串实际长度，中文2，英文1</summary>
+  // <param name='str'>要获得长度的字符串</param>
+  if (!str) return 0
+  let realLength = 0
+  const len = str.length
+  let charCode = -1
+  for (let i = 0; i < len; i++) {
+    charCode = str.charCodeAt(i)
+    if (charCode >= 0 && charCode <= 128) realLength += 1
+    else realLength += 2
+  }
+  return realLength
+}

package/lib/components/el-plus-form/util/validate.ts

@@ -0,0 +1,310 @@
+/**
+ * 获取通用的校验规则
+ */
+
+/**
+ * 不能为空
+ */
+export const notNull = [{ required: true, trigger: 'blur', validator: validateInputNotNull }]
+
+/**
+ * 不能全是空格
+ */
+export const notAllBlank = [{ required: true, trigger: 'blur', validator: validateInputNotAllBlank }]
+
+/**
+ * 必须是数字
+ */
+export const number = [{ type: 'number', message: '请填入数字！' }]
+
+/**
+ * 校验验证码
+ */
+export const vCode = [{ required: true, trigger: 'blur', validator: validateValidateCode }]
+
+/**
+ * 校验邮箱
+ */
+export const email = [{ trigger: 'blur', validator: validateEmail }]
+
+/**
+ * 校验手机号
+ */
+export const phone = [{ required: true, trigger: 'blur', validator: validatePhone }]
+
+/**
+ * 校验密码
+ */
+export const password = [{ required: true, trigger: 'blur', validator: validatePassword }]
+
+/**
+ * 校验密码
+ */
+export const password2 = [{ trigger: 'blur', validator: validatePassword }]
+
+/**
+ * 校验账户
+ */
+export const account = [{ required: true, trigger: 'blur', validator: validateAccount }]
+
+/**
+ * 校验英文字母加数字
+ */
+export const wordnum = [{ trigger: 'blur', validator: validateWordNumber }]
+export const wordnum2 = [{ required: true, trigger: 'blur', validator: validateWordNumber }]
+
+/**
+ * 必须是数字且不为空
+ */
+export const numberNotNull = [
+  { required: true, message: '不能为空！', trigger: 'blur' },
+  { type: 'number', message: '请填入数字！' }
+]
+
+/**
+ * 正整数
+ */
+export const zhengZhengShu = [{ required: true, trigger: 'blur', validator: validateZhengZhengShu }]
+
+/**
+ * Double类型
+ */
+export const double = [{ required: true, trigger: 'blur', validator: validateDouble }]
+/**
+ * Double类型且必填
+ */
+export const double2 = [{ trigger: 'blur', validator: validateDouble }]
+
+/**
+ * 选择
+ */
+export const select = [{ required: true, trigger: 'change', validator: validateSelect }]
+
+/**
+ * 级联选择
+ * @type {[*]}
+ */
+export const cascader = [{ required: true, trigger: 'change', validator: validateSelect }]
+
+/**
+ * 必须上传
+ */
+export const upload = [{ required: true, trigger: 'change', validator: validateUpload }]
+
+/**
+ * 文本域
+ */
+export const textarea = [{ required: true, trigger: 'change', validator: validateTextarea }]
+
+/**
+ * 正整数校验
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateZhengZhengShu(rule: any, value: any, callback?: any) {
+  if (!/^[1-9]\d*$/.test(value * 1 + '')) {
+    callback(new Error('请输入正整数！'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 选择
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateValidateCode(rule: any, value: any, callback?: any) {
+  if (value.length !== 4) {
+    callback(new Error('验证码必须是4位！'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 选择
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateInputNotNull(rule: any, value: any, callback?: any) {
+  if (typeof value === 'undefined' || value === '' || value === null) {
+    callback(new Error('此项必填！'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 不能全是空格
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateInputNotAllBlank(rule: any, value: any, callback?: any) {
+  if (typeof value === 'undefined' || value === '' || value === null) {
+    callback(new Error('此项必填！'))
+  } else {
+    if (typeof value === 'number') {
+      value = value + ''
+    }
+    if (typeof value === 'string' && value.match(/^[ ]*$/)) {
+      callback(new Error('不能全是空格!'))
+    } else {
+      callback()
+    }
+  }
+}
+
+/**
+ * 选择
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateSelect(rule: any, value: any, callback?: any) {
+  if (value === null || typeof value === 'undefined' || value === '' || value.length <= 0) {
+    callback(new Error('请选择！'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 上传
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateUpload(rule: any, value: any, callback?: any) {
+  if (value === null || typeof value === 'undefined' || value === '' || value.length <= 0) {
+    callback(new Error('请上传！'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 文本域
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateTextarea(rule: any, value: any, callback?: any) {
+  if (typeof value === 'undefined' || value === '' || value === null) {
+    callback(new Error('此项必填！'))
+  } else if (!value.replace(/\n/g, '')) {
+    callback(new Error('不能全是换行！'))
+  } else if (typeof value === 'string' && value.replace(/\n/g, '').match(/^[ ]*$/)) {
+    callback(new Error('不能全是空格!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 小数校验规则
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateDouble(rule: any, value: any, callback?: any) {
+  if (!/^\d+(\.(\d{1}|\d{2}))?$/.test(value * 1 + '')) {
+    callback(new Error('小数格式错误(最多两位)!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 校验邮箱
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateEmail(rule: any, value: any, callback?: any) {
+  if (!value) {
+    callback(new Error('邮箱必填'))
+  } else if (!/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value)) {
+    callback(new Error('邮箱格式错误!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 校验手机号
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validatePhone(rule: any, value: any, callback?: any) {
+  if (!value) {
+    callback(new Error('手机号必填'))
+  } else if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
+    callback(new Error('手机号格式错误!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 校验密码
+ * @param rule
+ * @param value
+ * @param callback
+ */
+export function validatePassword(rule: any, value: any, callback?: any) {
+  if (!value || !/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?=.*[~!@#$%^&*])(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/.test(value)) {
+    callback(new Error('密码为8-32位字母大小写+特殊字符+数字!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 校验密码
+ * @param rule
+ * @param value
+ * @param callback
+ */
+export function validatePassword2(rule: any, value: any, callback?: any) {
+  if (value && !/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?=.*[~!@#$%^&*])(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/.test(value)) {
+    callback(new Error('密码为8-32位字母大小写+特殊字符+数字!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 校验账户
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateAccount(rule: any, value: any, callback?: any) {
+  if (typeof value === 'undefined' || value === '' || value === null) {
+    callback(new Error('此项必填！'))
+  } else if (value && !/^([a-z,A-z,0-9]){4,20}$/.test(value)) {
+    callback(new Error('账号为4-20位字母或数字!'))
+  } else {
+    callback()
+  }
+}
+
+/**
+ * 校验字母和数字组成
+ * @param rule
+ * @param value
+ * @param callback
+ */
+function validateWordNumber(rule: any, value: any, callback?: any) {
+  if (value && !/^([a-z,A-z,0-9]){16,20}$/.test(value)) {
+    callback(new Error('请输入16-20位字母或数字!'))
+  } else {
+    callback()
+  }
+}