el-plus-crud 0.0.2

package/lib/components/el-plus-form/ElPlusForm.vue

@@ -0,0 +1,744 @@
+<template>
+  <div :style="formLayout">
+    <slot name="top" :formData="props.modelValue"></slot>
+    <div :style="{ display: 'flex', justifyContent: isDialog ? 'center' : '' }">
+      <el-form class="el-plus-form-panel" ref="refElPlusForm" :model="props.modelValue" @submit.prevent="handleSubmitForm" v-bind="computedFormAttrs">
+        <el-row :gutter="10" v-for="(formList, index) in attrMapToTableList" :key="index" :style="{ marginRight: isTable ? '20px' : 0 }">
+          <el-col v-for="(formItem, y) in formList" :key="index + '-' + y + '-' + formItem.field" :xs="24" :sm="24" :md="formItem.colspan && formItem.colspan >= column ? 24 : column >= 2 ? 12 : 24" :lg="formItem.colspan && formItem.colspan >= column ? 24 : Math.floor((24 / column) * (formItem.colspan || 1))" :xl="formItem.colspan && formItem.colspan >= column ? 24 : Math.floor((24 / column) * (formItem.colspan || 1))">
+            <div v-if="formItem._vif" class="el-plus-form-column-panel" :style="{ 'justify-content': isTable ? 'flex-end' : 'flex-start' }">
+              <el-form-item style="min-height: 40px" :label="showLabel && formItem.showLabel !== false ? formItem._label : null" :label-width="formItem.labelWidth || labelWidth || (isDialog ? '100px' : '120px')" :prop="formItem.field" :style="{ width: formItem._attrs?.width || formItem.width || (isTable ? '150px' : '100%') }">
+                <component style="min-width: 80px; width: 100%" :is="formItem._type" :formData="props.modelValue" :disabled="formItem._disabled ?? disabled ?? false" :readonly="readonly ?? false" v-bind="formItem._attrs" :desc="formItem" :ref="setComponentRef" :field="formItem.field" v-model="props.modelValue[formItem.field || '']" :isTable="isTable" @validateThis="() => handelValidateThis(formItem.field || '')" />
+                <div class="el-plus-form-tip" v-if="formItem._tip" v-html="formItem._tip" />
+              </el-form-item>
+            </div>
+          </el-col>
+        </el-row>
+        <slot name="row"></slot>
+      </el-form>
+    </div>
+    <slot name="default"></slot>
+    <el-form>
+      <slot :data="props.modelValue" name="form-btn">
+        <div v-if="btnList && btnList.length > 0" style="display: flex; justify-content: center">
+          <template v-for="(btn, index) of btnList" :key="index">
+            <ElPlusFormBtn v-bind="btn"></ElPlusFormBtn>
+          </template>
+        </div>
+      </slot>
+      <slot name="bottom" :formData="props.modelValue"></slot>
+    </el-form>
+    <slot name="form-footer" :formData="props.modelValue"></slot>
+  </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusForm',
+  inheritAttrs: false,
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs, nextTick, onMounted, watch, inject } from 'vue'
+import { throttle } from 'lodash'
+import { castArray, isMobile } from './util'
+import * as validates from './util/validate'
+import { typeList } from './components/index'
+import ElPlusFormBtn from './components/ElPlusFormBtn.vue'
+import { cloneDeep } from 'lodash'
+
+// IFormProps定义
+export interface IFormProps {
+  // 表单描述
+  formDesc?: IFormDesc | null
+  // 表单数据
+  modelValue?: { [key: string]: any } | {}
+  // 表单自身属性
+  formAttrs?: { [key: string]: any }
+  // 校检规则
+  rules?: { [key: string]: any } | null
+  // 提交状态
+  isLoading?: boolean
+  // 提交函数
+  requestFn?: Function | null
+  // 表单更新的函数
+  updateFn?: Function | null
+  // 是否显示底部按钮组
+  showBtns?: boolean
+  // 是否显示submit按钮
+  showSubmit?: boolean
+  // 提交按钮文本
+  submitBtnText?: string
+  // 是否显示 cancel 取消按钮
+  // 默认值: isDialog = true 时, 默认值为 true
+  showCancel?: boolean
+  // 取消按钮文本
+  cancelBtnText?: string
+  // 是否显示重置按钮
+  showReset?: boolean
+  // 重置按钮文本
+  resetBtnText?: string
+  // 是否显示label
+  showLabel?: boolean
+  // label宽度
+  labelWidth?: number | string
+  // 全局禁用表单
+  disabled?: boolean
+  // 全局的readonly
+  readonly?: boolean
+  // 是否为弹窗
+  isDialog?: boolean
+  // options 的请求方法
+  optionsFn?: Function | null
+  // 表单全局size
+  size?: string
+  // 表单列 默认1
+  column?: number
+  // 是否是列表头部的表单
+  isTable?: boolean
+  // 唯一标识符。默认为id
+  idKey?: string
+  // 最大宽度
+  maxWidth?: string
+  // 比如 beforeValidate, beforeRequest, success, requestError, requestEnd
+  // 其他钩子 直接放到attrs里面去了
+}
+
+// 定义全局的format对象
+const elPlusFormFormat = inject('format') as any
+
+const emits = defineEmits(['request', 'reset', 'cancel'])
+const props = withDefaults(defineProps<IFormProps>(), {
+  // 表单描述
+  formDesc: null,
+  // 表单数据
+  modelValue: () => {
+    return {}
+  },
+  // 表单自身属性
+  formAttrs: () => {
+    return {}
+  },
+  // 校检规则
+  rules: null,
+  // 提交状态
+  isLoading: false,
+  // 提交函数
+  requestFn: null,
+  // 表单更新的函数
+  updateFn: null,
+  // 是否显示按钮
+  showBtns: true,
+  // 是否显示submit按钮
+  showSubmit: true,
+  // 提交按钮文本
+  submitBtnText: '提交',
+  // 是否显示 cancel 取消按钮
+  // 默认值: isDialog = true 时, 默认值为 true
+  showCancel: false,
+  // 取消按钮
+  cancelBtnText: '取消',
+  // 是否显示重置按钮
+  showReset: true,
+  // 重置按钮
+  resetBtnText: '重置',
+  // 是否显示标签
+  showLabel: true,
+  // 标签宽度
+  labelWidth: '',
+  // 全局禁用表单
+  disabled: false,
+  // 全局的readonly
+  readonly: false,
+  // 是否为弹窗
+  isDialog: false,
+  // options 的请求方法
+  optionsFn: null,
+  // 表单全局size
+  size: 'small',
+  // 表单列 默认1
+  column: 1,
+  // 是否是列表头部的表单
+  isTable: false,
+  // 唯一标识符。默认为id
+  idKey: 'id'
+  // 其他钩子 直接放到attrs里面去了
+  // 比如 beforeValidate, beforeRequest, success, requestError, requestEnd
+})
+
+const refElPlusForm = ref()
+
+// 是否开启全局监听
+const isOpenListen = ref(false)
+
+const tempAttr = useAttrs()
+
+// 每个表单项的ref
+const fieldRefs_ = ref([] as Array<any>)
+
+// loading
+const innerIsLoading = ref(false)
+
+let oldFormData = null as any
+
+// 整体的布局方式
+const formLayout = computed(() => ({ display: 'flex', flexDirection: props.isTable ? 'row' : 'column' })) as any
+
+// 表单的Attrs
+const computedFormAttrs = computed(() => {
+  return {
+    scrollToError: true,
+    ...props.formAttrs,
+    labelWidth: props.labelWidth === 'auto' ? (props.isDialog ? '100px' : '120px') : parseInt(props.labelWidth + '') + 'px',
+    // validateOnRuleChange: false,
+    disabled: props.disabled || innerIsLoading.value,
+    rules: computedRules,
+    labelPosition: isMobile() ? 'top' : 'right',
+    style: {
+      width: props.maxWidth || props.isTable ? '100%' : props.isDialog ? '80%' : '1000px',
+      paddingRight: props.isTable ? '0' : '20px'
+    }
+  }
+})
+
+// 合并校验规则
+const computedRules = computed(() => {
+  // 首先拿到表单总体传入的rules
+  const tempRules = props.rules || []
+  // 遍历属性描述对象，看看里面有没有校验规则
+  if (props.formDesc) {
+    Object.keys(props.formDesc).map((field: any) => {
+      if (!tempRules[field]) tempRules[field] = []
+      if (props.formDesc) {
+        if (props.formDesc[field].rules) {
+          if (typeof props.formDesc[field].rules === 'string') {
+            // string的话，就行默认校验规则中取
+            tempRules[field].push(...(validates as any)[props.formDesc[field].rules as string])
+          } else {
+            // 查看总体规则中是否已经含有了该属性的校验
+            castArray(props.formDesc[field].rules).map((item: any) => {
+              tempRules[field].push(item)
+            })
+          }
+        } else if (props.formDesc[field].required || props.formDesc[field].require) {
+          // 如果直接指定 required || require，手动添加校验信息
+          //
+          let rules = 'notAllBlank'
+          switch (props.formDesc[field].type) {
+            case 'upload':
+            case 'select':
+            case 'password':
+            case 'textarea':
+              rules = props.formDesc[field].type
+              break
+            case 'cascader':
+            case 'tselect':
+            case 'linkuser':
+            case 'radio':
+              rules = 'select'
+              break
+          }
+          tempRules[field].push(...(validates as any)[rules])
+        }
+      }
+    })
+  }
+  return tempRules
+})
+
+// 属性对象转数组
+const attrMapToTableList = computed(() => {
+  const formLayoutRows = [] as Array<Array<IFormDescItem>>
+  if (props.formDesc) {
+    let tempData = [] as Array<IFormDescItem>
+    for (const key in props.formDesc) {
+      tempData.push({ ...props.formDesc[key], field: key })
+    }
+    // 这里处理一下layout的布局-渲染
+    let rowItemList = [] as Array<IFormDescItem>
+    let tempCount = 0
+    tempData.map((item) => {
+      if (item._vif || item.isBlank) {
+        rowItemList.push(item)
+        tempCount++
+        if (item.colspan) {
+          tempCount += item.colspan - 1
+        }
+        if (tempCount >= props.column) {
+          // 一行结束
+          formLayoutRows.push(rowItemList)
+          rowItemList = [] as Array<IFormDescItem>
+          tempCount = 0
+          return
+        }
+      }
+    })
+    if (rowItemList.length > 0) {
+      formLayoutRows.push(rowItemList)
+    }
+  }
+  return formLayoutRows
+})
+
+// 整体初始化属性
+const initFormAttrs = throttle(() => {
+  if (props.formDesc) {
+    Object.keys(props.formDesc).forEach((field) => {
+      if (props.formDesc) {
+        const formItem = props.formDesc[field]
+        if (formItem && formItem.type) {
+          // 设置 _type
+          formItem._type = typeList.includes(formItem.type.toLowerCase()) ? 'el-plus-form-' + formItem.type : formItem.type
+          // 触发 v-if 显示 / 隐藏 设置_vif
+          formItem._vif = handelKeyValue(formItem, 'vif', field, !formItem.isBlank ?? true)
+          // 触发 disabled 禁用 / 启用 设置_disabled
+          formItem._disabled = handelKeyValue(formItem, 'disabled', field, props.disabled ?? false)
+          // 动态属性 attrs
+          const tempAttr = {} as any
+          // if ((typeof formItem.attrs === 'object' && formItem.attrs?.options) || formItem.options) {
+          //   tempAttr.options = (formItem.attrs as any)?.options || formItem.options
+          // }
+          formItem._attrs = Object.assign({}, handelKeyValue(formItem, 'attrs', field), tempAttr)
+          // 动态options
+          // formItem._options = handelKeyValue(formItem, 'options', field)
+          // 动态 _label
+          formItem._label = handelKeyValue(formItem, 'label', field)
+          // 动态 prop
+          // formItem._prop = handelKeyValue(formItem, 'prop', field);
+          // 动态 _tip
+          formItem._tip = handelKeyValue(formItem, 'tip', field)
+          // 单独处理下上传
+          if (!formItem._tip && !formItem.noTip && formItem.type === 'upload') {
+            formItem._tip = `最多上传${formItem.multiple ? formItem.limit || 20 : 1}${formItem.upType === 'file' ? '个文件' : '张图片'}`
+          }
+          // 这里初始化一下默认值
+          if (formItem.default !== undefined && formItem.default !== null && props.modelValue[field] === undefined) {
+            props.modelValue[field] = formItem.default
+          }
+          // 这里格式化一下数据
+          if (formItem.format) {
+            if (typeof formItem.format === 'string') {
+              props.modelValue[field] = elPlusFormFormat[formItem.format](props.modelValue[field], props.modelValue)
+            } else if (typeof formItem.format === 'function') {
+              props.modelValue[field] = (formItem as any).format(props.modelValue[field], props.modelValue)
+            } else {
+              // console.log('未知的格式化类型:', formItem.format)
+            }
+          }
+        }
+      }
+    })
+  }
+}, 500)
+
+// 表单底部按钮
+const btnList = computed(() => {
+  let btnList_ = [] as any[]
+  if (!props.showBtns) {
+    return btnList_
+  }
+  // 取消按钮
+  if (props.showCancel) {
+    btnList_.push({
+      field: '_reset_btn',
+      desc: {
+        label: props.cancelBtnText || '取消',
+        size: props.size,
+        disabled: innerIsLoading.value,
+        on: { click: () => emits('cancel') }
+      }
+    })
+  }
+  // 重置按钮
+  if (props.showReset) {
+    btnList_.push({
+      field: '_reset_btn',
+      desc: {
+        label: props.resetBtnText || '重置',
+        confirm: `确定要${props.resetBtnText || '重置'}?`,
+        size: props.size,
+        disabled: innerIsLoading.value,
+        on: { click: reset }
+      }
+    })
+  }
+  // 提交按钮
+  if (props.showSubmit) {
+    btnList_.push({
+      field: '_reset_btn',
+      desc: {
+        label: props.submitBtnText || '提交',
+        size: props.size,
+        type: 'primary',
+        loading: props.isLoading || innerIsLoading.value,
+        on: { click: handleSubmitForm }
+      }
+    })
+  }
+  return btnList_
+})
+
+// 处理属性
+const handelKeyValue = (formItem: IFormDescItem, key: string, field: string, defVal: number | boolean | string | null = null) => {
+  if (typeof formItem[key] === 'function') {
+    // 如果有方法类型的判断，则需要启用动态监测
+    isOpenListen.value = true
+    return formItem[key](props.modelValue, props.modelValue[field])
+  } else if (typeof formItem[key] === 'boolean') {
+    return formItem[key] ?? false
+  } else if (typeof formItem[key] === 'string') {
+    return formItem[key] ?? ''
+  } else {
+    return formItem[key] ?? defVal
+  }
+}
+
+// 验证表单
+const validateForm = () => {
+  return new Promise((resolve: any, reject: any) => {
+    if (computedRules.value) {
+      // 当传递了验证规则
+      refElPlusForm.value.validate((valid: Boolean, invalidFields: any) => {
+        if (valid) {
+          // 验证通过
+          resolve()
+        } else {
+          // 显示错误
+          reject(invalidFields)
+        }
+      })
+    } else {
+      resolve()
+    }
+  })
+}
+
+// 设置子组件的ref-重置form的时候需要用到
+const setComponentRef = (el: any) => {
+  if (!el) return
+  if (fieldRefs_.value.filter((item: any) => item.field === el.field).length <= 0) {
+    fieldRefs_.value.push(el)
+  }
+}
+
+/**
+ * 处理单个表单值
+ * @param val
+ */
+const handelValToForm = (desc: IFormDescItem, field: string, val: any) => {
+  const result = {} as { [key: string]: any }
+  if (!desc) return { [field]: val }
+  if (!desc._vif || val === undefined || val === null) return result
+  if (desc.type === 'category') {
+    if (val === null) val = []
+    // 如果是直接显示结果
+    if (desc.checkStrictly === true) {
+      result.categoryId = val[2] ?? val[1] ?? val[0] ?? ''
+    } else {
+      for (let i = 0; i < 3; i++) {
+        result['categoryId' + (i + 1)] = val[i] ?? ''
+      }
+    }
+  } else if (desc.type === 'area') {
+    if (val === null) val = [null, null, null, null]
+    const [pid, cid, zid, sid] = val
+    if (desc.checkStrictly) {
+      result[field] = sid || zid || cid || pid || null
+    } else {
+      result.provinceId = pid || -1
+      result.cityId = cid || -1
+      result.zoneId = zid || -1
+      result.streetId = sid || -1
+    }
+  } else if (desc.type === 'daterange') {
+    if (val && val.length === 2) {
+      result.startTime = val[0]
+      if (typeof val[1] === 'string') {
+        result.endTime = new Date(val[1]).getTime()
+      } else {
+        result.endTime = val[1]
+      }
+      result.endTime = result.endTime + (24 * 60 * 60 - 1) * 1000
+      // 再处理一下时间戳
+      result.startTime = elPlusFormFormat.time(result.startTime, 3)
+      result.endTime = elPlusFormFormat.time(result.endTime, 3)
+    }
+  } else if (desc.type === 'linkuser') {
+    const [userIds, deptIds, userNames, deptNames] = val
+    result.userIds = userIds
+    result.deptIds = deptIds
+    result.userNames = userNames
+    result.deptNames = deptNames
+  } else {
+    // 这里处理下通用表单的数据类型
+    switch (desc.type) {
+      case 'checkbox':
+        if (Array.isArray(val)) {
+          val = val.join(',')
+        }
+        break
+    }
+    result[field] = val
+  }
+  return result
+}
+
+/**
+ * 获取处理过后的表单数据
+ */
+const getFormData = () => {
+  const tempData = {} as { [key: string]: any }
+  if (props.formDesc) {
+    // 循环获取表单数据
+    Object.keys(props.modelValue).map((key) => {
+      if (['provinceId', 'cityId', 'zoneId', 'streetId'].indexOf(key) >= 0) return
+      if (props.formDesc) {
+        Object.assign(tempData, handelValToForm(props.formDesc[key], key, props.modelValue[key]))
+      }
+    })
+  }
+  return tempData
+}
+
+/**
+ * 刷新验证码图片
+ */
+const changeValidImg = () => {
+  fieldRefs_.value.map((item) => {
+    if (item.CID) {
+      item.changeValidImg()
+    }
+  })
+}
+
+/**
+ * 提交表单
+ */
+const handleSubmitForm = async () => {
+  let postData = getFormData()
+  try {
+    // 校验表单事件处理
+    if (tempAttr.beforeValidate) {
+      const isPass = await (tempAttr.beforeValidate as Function)(postData)
+      if (isPass === false) return
+    }
+
+    await validateForm()
+    for (const field in postData) {
+      // 去除下划线开头的参数
+      if (field.indexOf('_') === 0) {
+        delete postData[field]
+        continue
+      }
+      if (props.formDesc) {
+        const formItem = props.formDesc[field]
+        // valueFormatter的处理
+        if (formItem && formItem.valueFormat) {
+          postData[field] = formItem.valueFormat(postData[field], postData)
+        }
+        // 处理带有true或者false值
+        if (postData[field] === true || postData[field] === false) {
+          postData[field] = +postData[field]
+        }
+      }
+    }
+
+    // 提交数据前的通知
+    if (tempAttr.beforeRequest) {
+      const beforeRequestData = await (tempAttr.beforeRequest as Function)(postData)
+      if (beforeRequestData === false) return
+      if (typeof beforeRequestData === 'object') {
+        postData = beforeRequestData
+      }
+    }
+    if (props.requestFn) {
+      // 在内部调用请求
+      if (innerIsLoading.value) return
+      innerIsLoading.value = true
+      try {
+        let response = {}
+        if (props.updateFn && postData && (postData as any)[props.idKey]) {
+          response = await props.updateFn(postData)
+        } else {
+          response = await props.requestFn(postData)
+        }
+        nextTick(() => {
+          if (tempAttr.success && typeof tempAttr.success === 'function') {
+            tempAttr.success({ response, formData: props.modelValue, callback: () => (innerIsLoading.value = false) } as IFormBack)
+            reset()
+          }
+        })
+      } catch (error) {
+        // 如果用户有处理异常的方法了
+        if (tempAttr.requestError && typeof tempAttr.requestError === 'function') {
+          tempAttr.requestError(error)
+        } else {
+          // 处理异常情况
+          if (error instanceof Error) {
+            // 返回的是Error类型, 则进行解析
+            try {
+              const msg = JSON.parse(error.message)
+              if (msg instanceof Object) {
+                // innerFormError.value = msg;
+              }
+              // eslint-disable-next-line
+            } catch {}
+          } else if (error instanceof Object) {
+            // 返回的是对象类型, 则直接设置
+            // innerFormError = error;
+          }
+          if (tempAttr.requestError && typeof tempAttr.requestError === 'function') {
+            tempAttr.requestError()
+          }
+        }
+        // 报错了这里恢复
+        innerIsLoading.value = false
+      } finally {
+        if (!props.isDialog) {
+          innerIsLoading.value = false
+        }
+        if (tempAttr.requestEnd && typeof tempAttr.requestEnd === 'function') {
+          tempAttr.requestEnd()
+        }
+      }
+    } else {
+      // 在外部用户自己处理请求
+      if (props.isLoading) return
+      emits('request', postData)
+    }
+  } catch (error) {
+    // console.log('error: ', error)
+  }
+}
+
+/**
+ * 重置，并清除校验
+ */
+const reset = () => {
+  // refElPlusForm.value.resetFields();
+  // 重置
+  Object.keys(props.modelValue).map((key) => {
+    props.modelValue[key] = oldFormData ? oldFormData[key] : (props.formDesc && props.formDesc[key] && props.formDesc[key].default) ?? null
+  })
+  setTimeout(() => {
+    // 清空校验
+    clearValid()
+  }, 100)
+  // 通知外部
+  emits('reset')
+}
+
+/**
+ * 清空校验
+ */
+const clearValid = () => {
+  refElPlusForm.value?.clearValidate()
+}
+
+/**
+ * 清理
+ */
+const clear = () => {
+  // 这里进行数据清空
+  if (props.modelValue) {
+    Object.keys(props.modelValue).map((key) => {
+      props.modelValue[key] = (props.formDesc && props.formDesc[key] && props.formDesc[key].default) ?? null
+    })
+  }
+  // 重置校验
+  nextTick(() => {
+    clearValid()
+  })
+}
+
+/**
+ * 单独校验一下字段
+ * @param field
+ */
+function handelValidateThis(field: string) {
+  refElPlusForm.value.validateField(field, (err: any) => {
+    // console.log('err: ', err)
+  })
+}
+
+// 监听Desc改变
+watch(
+  () => props.formDesc,
+  (formDesc) => {
+    if (formDesc) {
+      // 检查联动
+      initFormAttrs()
+    }
+  }
+)
+
+// 深度监听data改变
+watch(
+  () => props.modelValue,
+  (data, oldData) => {
+    if (isOpenListen.value && data) {
+      // 检查联动
+      initFormAttrs()
+      nextTick(() => {
+        setTimeout(() => {
+          if (!oldFormData) {
+            oldFormData = cloneDeep(props.modelValue)
+          }
+        }, 100)
+      })
+    }
+  },
+  { deep: true }
+)
+
+onMounted(async () => {
+  // 检查联动
+  if (!isOpenListen.value) {
+    initFormAttrs()
+  }
+  nextTick(() => {
+    setTimeout(() => {
+      clearValid()
+      setTimeout(() => {
+        if (!oldFormData) {
+          oldFormData = cloneDeep(props.modelValue)
+        }
+      }, 100)
+    }, 100)
+  })
+})
+
+// 暴露对外方法
+defineExpose({ submit: handleSubmitForm, getData: getFormData, validate: validateForm, reset, clearValid, clear, changeValidImg })
+</script>
+<style lang="scss">
+.el-plus-form-panel {
+  .el-plus-form--inline .el-plus-form-btns {
+    width: auto;
+  }
+
+  .el-form--inline .el-form-item {
+    margin-right: 12px !important;
+  }
+
+  .el-plus-form-col--break {
+    clear: both;
+  }
+
+  .el-plus-form-tip {
+    color: #909399;
+    line-height: 1.5em;
+    margin-top: 3px;
+  }
+
+  .el-plus-form-tip code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #c7254e;
+    background-color: #f9f2f4;
+    border-radius: 4px;
+  }
+  .el-form-item--default {
+    margin-bottom: 18px !important;
+  }
+}
+</style>