el-plus-crud 0.1.39 → 0.1.41

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

@@ -6,7 +6,7 @@
         <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; display: flex" :prop="formItem.field" :style="{ width: formItem._attrs?.width || formItem.width || (isTable ? '150px' : '100%') }">
+              <el-form-item style="min-height: 40px; display: flex" :prop="formItem.field" :style="{ width: formItem._attrs?.width || formItem.width || (isTable ? '150px' : '100%'), marginBottom: itemMB }">
                 <template #label>
                   <div v-if="showLabel && formItem.showLabel !== false" class="crud-form-label" :style="{ width: formItem.labelWidth || computedFormAttrs._labelWidth || (isDialog ? '100px' : '120px') }">
                     <span :class="{ required: formItem.required }">
@@ -47,7 +47,6 @@ export default {
 <script lang="ts" setup>
 import { ref, computed, useAttrs, nextTick, onMounted, watch, inject, Ref, useSlots } from 'vue'
 import { castArray, isMobile, time, isPromiseLike } from '../../util'
-import { cloneDeep, debounce } from 'lodash'
 import * as validates from './util/validate'
 import { typeList } from './components/index'
 import ElPlusFormBtn from './components/ElPlusFormBtn.vue'
@@ -110,10 +109,13 @@ export interface IFormProps {
   isGroupForm?: boolean
   // 是否禁用最后一个元素的tab
   disabledTab?: boolean
+  // item的底部边距
+  itemMB?: string
   // 比如 beforeValidate, beforeRequest, success, requestError, requestEnd
   // 其他钩子 直接放到attrs里面去了
 }
 
+const lodash = inject('lodash') as any
 const defaultConf = inject('defaultConf') as ICRUDConfig
 
 const emits = defineEmits(['request', 'reset', 'cancel'])
@@ -168,7 +170,9 @@ const props = withDefaults(defineProps<IFormProps>(), {
   // 唯一标识符。默认为id
   idKey: 'id',
   // 是否禁用最后一个元素的tab
-  disabledTab: false
+  disabledTab: false,
+  // item的底部边距
+  itemMB: '18px'
   // 其他钩子 直接放到attrs里面去了
   // 比如 beforeValidate, beforeRequest, success, requestError, requestEnd
 })
@@ -226,7 +230,7 @@ const computedRules = computed(() => {
         required = (props.formDesc && props.formDesc[field].required) || false
       }
       if (typeof required === 'function') {
-        required = required(cloneDeep(props.modelValue))
+        required = required(lodash.cloneDeep(props.modelValue))
       }
       if (props.formDesc) {
         if (props.formDesc[field].rules) {
@@ -286,7 +290,7 @@ const attrMapToTableList = computed(() => {
   const formLayoutRows = [] as Array<Array<IFormDescItem>>
   if (props.formDesc) {
     initFormAttrs()
-    const tempFormDesc = cloneDeep(props.formDesc)
+    const tempFormDesc = lodash.cloneDeep(props.formDesc)
     let tempData = [] as Array<IFormDescItem>
     for (const key in tempFormDesc) {
       tempData.push({ ...tempFormDesc[key], field: key })
@@ -342,7 +346,7 @@ const attrMapToTableList = computed(() => {
 })
 
 // 整体初始化属性
-const initFormAttrs = debounce(
+const initFormAttrs = lodash.debounce(
   () => {
     if (props.formDesc) {
       Object.keys(props.formDesc).forEach((field) => {
@@ -447,6 +451,7 @@ const btnList = computed(() => {
         label: props.submitBtnText || '提交',
         size: size.value,
         type: 'primary',
+        disabled: props.disabled,
         loading: props.isLoading || innerIsLoading.value,
         on: { click: handleSubmitForm }
       }
@@ -833,7 +838,7 @@ watch(
       // 检查联动
       // if (JSON.stringify(data) !== JSON.stringify(oldFormData)) {
       if (!oldFormData) {
-        oldFormData = cloneDeep(data)
+        oldFormData = lodash.cloneDeep(data)
       }
       initFormAttrs()
       // }
@@ -885,7 +890,6 @@ defineExpose({ fid: props.fid, formRef: refElPlusForm, submit: handleSubmitForm,
   }
   .el-plus-form-column-panel {
     & > .el-form-item {
-      margin-bottom: 18px !important;
       // & > .el-form-item__label-wrap {
       & > .el-form-item__label {
         line-height: 40px;

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

@@ -25,12 +25,13 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash'
 import { isPromiseLike } from '../../util'
-import { computed, ref, useSlots } from 'vue'
+import { computed, inject, ref, useSlots } from 'vue'
 import ElPlusForm, { IFormProps } from './ElPlusForm.vue'
 import { IFormDesc, IFormGroupConfig } from '../../../types'
 
+const lodash = inject('lodash') as any
+
 const emits = defineEmits(['update:show', 'update:modelValue', 'before-validate', 'before-request', 'request-success', 'request-error', 'request-end', 'request'])
 const props = defineProps<{
   modelValue: { [key: string]: any } | {}
@@ -82,7 +83,7 @@ const getGroupFowmLayout = computed(() => {
     return item._vif
   })
 
-  const tempFormConfig = cloneDeep(props.formGroup) as any
+  const tempFormConfig = lodash.cloneDeep(props.formGroup) as any
   const column = props.formGroup.column || 1
   // 移除无用
   delete tempFormConfig.group

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

@@ -28,9 +28,9 @@ export default {
 </script>
 <script lang="ts" setup>
 import { ref, computed, useAttrs, watch, inject } from 'vue'
-import { cloneDeep } from 'lodash'
 import { IBtnBack, ICRUDConfig } from '../../../../types'
 
+const lodash = inject('lodash') as any
 const defaultConf = inject('defaultConf') as ICRUDConfig
 
 const props = defineProps<{
@@ -81,7 +81,7 @@ const onEvents = computed(() => {
         }
       } else {
         events[key] = function () {
-          props.desc?.on[key]({ row: cloneDeep(props.formData || {}), field: props.field, rowIndex: props.rowIndex } as IBtnBack)
+          props.desc?.on[key]({ row: lodash.cloneDeep(props.formData || {}), field: props.field, rowIndex: props.rowIndex } as IBtnBack)
         }
       }
     }

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

@@ -35,10 +35,11 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { cloneDeep } from 'lodash'
-import { ref, reactive, watch, onMounted, computed } from 'vue'
+import { ref, reactive, watch, onMounted, computed, inject } from 'vue'
 import { IBtnBack, ITableConfig } from '../../../../types'
 
+const lodash = inject('lodash') as any
+
 interface ILinkItem {
   label: string
   value: string
@@ -98,7 +99,7 @@ function handelVisibleChange(val: any) {
   if (val) {
     selectRef.value.blur()
     isShowDialog.value = true
-    selectList.value = cloneDeep(selectData.map((item) => item.dataItem))
+    selectList.value = lodash.cloneDeep(selectData.map((item) => item.dataItem))
     // 这里存储一下老数据
     selectOldData.splice(0, selectOldData.length, ...selectData)
   }
@@ -177,7 +178,7 @@ function submit() {
 
   // 触发外部change事件
   if (onEvents.value.change) {
-    onEvents.value.change(cloneDeep(selectData))
+    onEvents.value.change(lodash.cloneDeep(selectData))
   }
 
   isShowDialog.value = false
@@ -190,7 +191,7 @@ watch(
   (val) => {
     let tempConfig = {} as ITableConfig
     if (val) {
-      tempConfig = cloneDeep(val)
+      tempConfig = lodash.cloneDeep(val)
       if (typeof props.desc.multiple === 'function') {
         multiple.value = props.desc.multiple(props.formData || {})
       } else {

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

@@ -72,10 +72,10 @@ export default {
 <script lang="ts" setup>
 import { ref, reactive, nextTick, watch, onMounted, computed, inject, onBeforeMount, useAttrs } from 'vue'
 import { Share, UserFilled } from '@element-plus/icons-vue'
-import { cloneDeep } from 'lodash'
 import { getAttrs } from '../mixins'
 import { ICRUDConfig } from '../../../../types'
 
+const lodash = inject('lodash') as any
 const globalData = inject('globalData') as any
 const defaultConf = inject('defaultConf') as ICRUDConfig
 
@@ -158,7 +158,7 @@ const tableData = computed(() => {
   if (deptDataList.value.length) {
     tempData = deptDataList.value
   } else {
-    tempData = cloneDeep(globalData[defaultConf.form?.linkUser?.deptListKey || ''])
+    tempData = lodash.cloneDeep(globalData[defaultConf.form?.linkUser?.deptListKey || ''])
   }
   if (deptTreeIndex.value && deptTreeIndex.value.length > 0) {
     deptTreeIndex.value.map((item) => {

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

@@ -25,8 +25,8 @@ import { getAttrs } from '../mixins'
 import { isEqual, isPromiseLike } from '../../../util'
 import { ICRUDConfig } from '../../../../types'
 import { useVModel } from '@vueuse/core'
-import { cloneDeep } from 'lodash'
 
+const lodash = inject('lodash') as any
 const defaultConf = inject('defaultConf') as ICRUDConfig
 const globalData = inject('globalData') as any
 
@@ -146,7 +146,7 @@ function initDefault() {
         if (index >= 0) {
           options.splice(index, 1)
         }
-        options.unshift({ value: val, label: defaultLabel[i], dataItem: cloneDeep(props.formData) })
+        options.unshift({ value: val, label: defaultLabel[i], dataItem: lodash.cloneDeep(props.formData) })
       }
     })
   }

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

@@ -21,8 +21,8 @@ import { isEqual } from '../../../util'
 import { ref, reactive, useAttrs, onBeforeMount, watch, inject, nextTick } from 'vue'
 import { getAttrs, getEvents } from '../mixins'
 import { useVModel } from '@vueuse/core'
-import { cloneDeep } from 'lodash'
 
+const lodash = inject('lodash') as any
 const globalData = inject('globalData') as any
 
 const props = defineProps<{
@@ -63,7 +63,6 @@ function handelCheckChange(item: any, isSelect: boolean) {
     // 这里判断一下全选状态
     selectAll.value = isSelect && allIds.value.length === currentValue.value?.length
     emits('validateThis')
-    console.log('validateThis******************')
   })
 }
 
@@ -72,7 +71,7 @@ function handelCheckChange(item: any, isSelect: boolean) {
  */
 function handelSelectAll() {
   let selectIds = [] as any[]
-  if (selectAll.value) selectIds = cloneDeep(allIds.value)
+  if (selectAll.value) selectIds = lodash.cloneDeep(allIds.value)
   currentValue.value = selectIds
   treeRef.value!.setCheckedKeys(currentValue.value)
 }

package/lib/components/el-plus-table/ElPlusTable.vue

@@ -102,7 +102,6 @@ import { ref, reactive, onMounted, computed, watch, nextTick, useSlots, inject,
 import EleTabletHeader from './components/header.vue'
 import ElPlusTableColumn from './ElPlusTableColumn.vue'
 import { handelListColumn, isEqual } from '../../util'
-import { cloneDeep, debounce } from 'lodash'
 import { Loading } from '@element-plus/icons-vue'
 import type { TableColumnCtx } from 'element-plus'
 import { ICRUDConfig, ITableConfig, ITableTabItem, ITreeProps } from '../../../types'
@@ -114,6 +113,7 @@ interface SpanMethodProps {
   columnIndex: number
 }
 
+const lodash = inject('lodash') as any
 const defaultConf = inject('defaultConf') as ICRUDConfig
 const format = inject('format') as any
 
@@ -231,7 +231,7 @@ const haveClassRowList = reactive([])
 const loadingStatus = ref(0)
 
 // 保存所有的选中行
-const allSelectRowList = reactive((cloneDeep(props.selectList) || []) as any[])
+const allSelectRowList = reactive((lodash.cloneDeep(props.selectList) || []) as any[])
 // 记录树形展开的数组的下标
 const treeIndexList = reactive([] as any[][])
 
@@ -424,7 +424,7 @@ async function loadExpandData(row: any, treeNode: any, resolve: any) {
   postData[props.tableConfig?.explan?.idName || 'parentId'] = row.id
   props.tableConfig.fetch &&
     props.tableConfig.fetch(postData).then((pageInfo) => {
-      resolve(pageInfo?.[props.tableConfig?.fetchMap?.list || 'records'])
+      resolve(pageInfo?.[defaultConf.table?.list || props.tableConfig?.fetchMap?.list || 'records'])
     })
 }
 
@@ -448,7 +448,7 @@ function handelTableSelect(selection: any[], item: any) {
   checkAndRemove(item, !selection.some((i) => i[props.rowKey] === item[props.rowKey]))
   // 通知父类
   emits('select', selection, item)
-  emits('selection', cloneDeep(allSelectRowList))
+  emits('selection', lodash.cloneDeep(allSelectRowList))
 }
 
 /**
@@ -463,7 +463,7 @@ function handelTableSelectAll(selection: any[]) {
   })
   // 通知父类
   emits('selectAll', selection, isRemove)
-  emits('selection', cloneDeep(allSelectRowList))
+  emits('selection', lodash.cloneDeep(allSelectRowList))
 }
 
 /**
@@ -531,8 +531,8 @@ async function getListQueryData() {
   } as any
   if (props.isPager) {
     // 封装分页信息
-    queryMap.current = pageInfo.current
-    queryMap.size = pageInfo.size
+    queryMap[defaultConf.table?.page?.current || props.tableConfig?.fetchMap?.page?.current || 'current'] = pageInfo.current
+    queryMap[defaultConf.table?.page?.pageSize || props.tableConfig?.fetchMap?.page?.pageSize || 'size'] = pageInfo.size
   }
   // 这里处理一下列表Tab的查询条件
   if (props.tableConfig?.tabConf && props.tableConfig?.tabConf?.prop) {
@@ -659,16 +659,16 @@ async function loadData(isInit: Boolean) {
     let dataPage = ((await props.tableConfig.fetch(postData)) || {}) as any
     // 这里要进行赋值操作-同时要转换相关key
     if (Array.isArray(dataPage)) {
-      dataPage = { [props.tableConfig?.fetchMap?.list || 'records']: dataPage }
+      dataPage = { [defaultConf.table?.list || props.tableConfig?.fetchMap?.list || 'records']: dataPage }
     }
     try {
       let dataResult = [] as any
       if (props.isPager) {
-        pageInfo.total = dataPage[props.tableConfig?.fetchMap?.total || 'total'] * 1 || 0
-        pageInfo.current = dataPage[props.tableConfig?.fetchMap?.current || 'current'] || 1
-        dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
+        pageInfo.total = dataPage[defaultConf.table?.page?.total || props.tableConfig?.fetchMap?.page?.total || 'total'] * 1 || 0
+        pageInfo.current = dataPage[defaultConf.table?.page?.current || props.tableConfig?.fetchMap?.page?.current || 'current'] || 1
+        dataResult = dataPage[defaultConf.table?.list || props.tableConfig?.fetchMap?.list || 'records'] || null
       } else {
-        dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
+        dataResult = dataPage[defaultConf.table?.list || props.tableConfig?.fetchMap?.list || 'records'] || null
       }
 
       if (props.type !== 'expand' && props.isTempId && Array.isArray(dataResult)) {
@@ -704,7 +704,7 @@ async function loadData(isInit: Boolean) {
   localLoading.value = false
 }
 
-const noticeInited = debounce(
+const noticeInited = lodash.debounce(
   () => {
     emits('inited', tableData.value)
   },

package/lib/components/el-plus-table/ElPlusTableColumn.vue

@@ -26,10 +26,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { IColumnItem } from '../../../types'
 import ColumnItem from './components/columnItem.vue'
-import { cloneDeep } from 'lodash'
+
+const lodash = inject('lodash') as any
 
 const props = defineProps<{
   item: IColumnItem
@@ -40,7 +41,7 @@ const props = defineProps<{
  * 绑定属性
  */
 const columnAttr = computed(() => {
-  const tempAttr = cloneDeep(props.item)
+  const tempAttr = lodash.cloneDeep(props.item)
   delete tempAttr.children
   return tempAttr
 })

package/lib/index.ts

@@ -6,6 +6,7 @@ import ElPlusFormGroup from './components/el-plus-form/ElPlusFormGroup.vue'
 import ElPlusTable from './components/el-plus-table/ElPlusTable.vue'
 import defaultConf from './config'
 import * as all from '../types'
+import { cloneDeep, debounce } from 'lodash-es'
 
 export default {
   install: (app: App, config?: all.ICRUDConfig, format?: { [key: string]: Function }, globalData?: { [key: string]: Function }) => {
@@ -20,6 +21,9 @@ export default {
     // 这里注入defaultConf
     app.provide('defaultConf', defaultConf)
 
+    // 这里注入lodash
+    app.provide('lodash', { cloneDeep, debounce })
+
     // 循环注册表单组件
     components.unshift(ElPlusForm)
     components.unshift(ElPlusFormDialog)

package/lib/util/index.ts

@@ -1,4 +1,3 @@
-import { cloneDeep } from 'lodash'
 import { ICRUDConfig, IColumnItem } from '../../types'
 
 /**
@@ -156,7 +155,7 @@ export function getUID(): string {
 export function getValue(keys: string | Array<string>, obj: any) {
   if (!obj || !keys || keys.length <= 0) return null
   if (Array.isArray(keys)) {
-    let tempObj = cloneDeep(obj) as any
+    let tempObj = JSON.parse(JSON.stringify(obj)) as any
     for (let i = 0; i < keys.length; i++) {
       tempObj = tempObj[Array.isArray(tempObj) ? parseInt(keys[i]) : keys[i]]
       if (tempObj === undefined || tempObj === null) return null
@@ -204,7 +203,7 @@ export function handelListColumn(columnList: Array<IColumnItem> | undefined, def
   const tempColumnList = [] as any[]
   if (columnList && columnList.length > 0) {
     // 不影响原有的对象，这里进行拷贝
-    cloneDeep(columnList).map((item: IColumnItem) => {
+    JSON.parse(JSON.stringify(columnList)).map((item: IColumnItem) => {
       // 如果有子集
       if (item.children) {
         // 表头居中

package/package.json

@@ -2,7 +2,7 @@
   "name": "el-plus-crud",
   "description": "采用Vue3 + TS，封装的element-plus数据驱动表单、列表组件",
   "author": "K.D.Jack",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "license": "MIT",
   "private": false,
   "main": "dist/el-plus-crud.mjs",
@@ -35,7 +35,6 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "element-plus": "2.5.1",
-    "lodash": "^4.17.21",
     "vue": "^3.2.47"
   },
   "devDependencies": {
@@ -50,6 +49,7 @@
     "eslint-plugin-vue": "^9.9.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
+    "lodash-es": "^4.17.21",
     "prettier": "^3.0.0",
     "sass": "^1.58.3",
     "standard-version": "^9.5.0",

package/types/index.d.ts

@@ -34,13 +34,17 @@ export interface IFetch<T> {
 /**
  * 设定如何解析请求结果
  */
-export interface IFetchMap {
+export interface IFetchTableMap {
   // 结果列表key-默认records
   list?: string
-  // 总数key-默认total
-  total?: string
-  // 当前页key-默认current
-  current?: string
+  page?: {
+    // 总数key-默认total
+    total?: string
+    // 当前页key-默认current
+    current?: string
+    // 最大显示条数
+    pageSize?: string
+  }
 }
 
 /**
@@ -58,7 +62,7 @@ export type IDescItem = {
   label?: string | ((data?: any) => string)
   prop?: string | ((data?: any) => string)
   width?: string
-  format?: string | ((data?: any) => string)
+  format?: string | ((val?: any, row?: any) => string)
   vif?: boolean | ((data?: any) => boolean)
   vshow?: boolean | ((data?: any) => boolean)
   limit?: number
@@ -369,7 +373,7 @@ export interface ITableConfig {
   // 调用接口
   fetch?: IFetch<any>
   // 如何去解析数据结果
-  fetchMap?: IFetchMap
+  fetchMap?: IFetchTableMap
   // 列表配置，包含表头，每列信息等
   column?: Array<IColumnItem>
   // 查询条件
@@ -517,6 +521,7 @@ export interface ICRUDConfig {
     // 用户自定义form组件的名称,使用这个，全局注册的名字为el-plus-form-xxx，form中就可以使用xxx进行引入
     comList?: string[]
   }
+  table?: IFetchTableMap
   // 上传组件配置
   upload?: {
     // 类型 minio 或者 七牛 / 阿里云 或者不填，不填则完全依赖 action