el-plus-crud 0.0.82 → 0.0.85

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

@@ -194,7 +194,6 @@ const formLayout = computed(() => ({ display: 'flex', flexDirection: props.isTab
 // 表单的Attrs
 const computedFormAttrs = computed(() => {
   return {
-    scrollToError: true,
     ...props.formAttrs,
     labelWidth: props.labelWidth === 'auto' ? (props.isDialog ? '100px' : '120px') : parseInt(props.labelWidth + '') + 'px',
     // validateOnRuleChange: false,
@@ -478,7 +477,6 @@ const handelValToForm = (desc: IFormDescItem, field: string, val: any) => {
       result[desc.propPrefix ? desc.propPrefix + 'StreetId' : 'streetId'] = sid || -1
     }
   } else if (desc.type === 'daterange') {
-    console.log('val: ', val)
     if (val && val.length === 2) {
       const startTimeKey = desc.propPrefix ? desc.propPrefix + 'StartTime' : 'startTime'
       const endTimeKey = desc.propPrefix ? desc.propPrefix + 'EndTime' : 'endTime'

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

@@ -1,152 +1,150 @@
-<template>
-  <el-input-number v-if="isInit" class="ElPlusFormNumber-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :disabled="disabled" @focus="handelFocus" @blur="handelBlur" onkeypress="return( /[\d\.]/.test(String.fromCharCode(event.keyCode)))" />
-</template>
-<script lang="ts">
-export default {
-  name: 'ElPlusFormNumber',
-  inheritAttrs: false,
-  typeName: 'number',
-  customOptions: {}
-}
-</script>
-<script lang="ts" setup>
-import { ref, computed, useAttrs, onBeforeMount, nextTick, inject } from 'vue'
-import { getAttrs, getEvents } from '../mixins'
-import { ElMessage } from 'element-plus'
-import { ICRUDConfig } from 'types'
-
-const defaultConf = inject('defaultConf') as ICRUDConfig
-
-const props = defineProps<{
-  modelValue?: number | null
-  field: string
-  loading?: boolean
-  desc: { [key: string]: any }
-  formData: { [key: string]: any }
-  rowIndex?: number
-  disabled?: boolean
-}>()
-
-const emits = defineEmits(['update:modelValue', 'validateThis'])
-const currentValue = ref(props.modelValue)
-emits('update:modelValue', currentValue)
-const attrs = ref({} as any)
-const isInit = ref(false)
-const onEvents = ref(getEvents(props))
-
-const isDoChange = ref(false)
-
-onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { ...defaultConf.form?.leng.nbinput, ...useAttrs() })
-  delete attrs.value.min
-  delete attrs.value.max
-  isInit.value = true
-})
-
-/**
- * 获取焦点
- */
-function handelFocus() {
-  isDoChange.value = false
-}
-
-/**
- * 处理失去焦点
- * @param event
- */
-function handelBlur() {
-  console.log('currentValue', currentValue.value)
-
-  if (!isDoChange.value) {
-    if (currentValue.value !== 0 && !currentValue.value) {
-      nextTick(() => {
-        currentValue.value = props.desc?.required ? numBindAttr.value.min : 0
-        if (currentValue.value === 0) {
-          // 查看了源码，这里需要二次赋不一样的值，这里才会真正重新渲染
-          nextTick(() => {
-            currentValue.value = null
-            change && change()
-          })
-        }
-      })
-    } else {
-      handelValChange(currentValue.value, 0)
-    }
-  }
-  nextTick(() => {
-    emits('validateThis')
-  })
-}
-
-/**
- * 绑定属性
- */
-const numBindAttr = computed(() => {
-  let numAttrs = props.desc.attrs || defaultConf.form?.leng.nbinput
-  if (typeof props.desc.attrs === 'function') {
-    numAttrs = props.desc.attrs(props.formData)
-  }
-  // 这里判断一下，最小和最大值的大小
-  if (numAttrs.min > numAttrs.max) {
-    numAttrs.min = numAttrs.max
-  } else if (numAttrs.max < numAttrs.min) {
-    numAttrs.max = numAttrs.min
-  }
-  return numAttrs
-})
-
-// 判断一下初始值
-if (currentValue.value !== undefined && currentValue.value !== null) {
-  if (currentValue.value < numBindAttr.value.min) {
-    currentValue.value = numBindAttr.value.min
-  } else if (currentValue.value > numBindAttr.value.max) {
-    currentValue.value = numBindAttr.value.max
-  }
-}
-
-const change = onEvents.value.change
-if (change) {
-  onEvents.value.change = (val: any, oldVal: any) => {
-    handelValChange(val, oldVal)
-  }
-} else {
-  onEvents.value.change = handelValChange
-}
-
-/**
- * 监听值改变
- * @param val
- */
-function handelValChange(val: any, oldVal: any) {
-  isDoChange.value = true
-  if (val !== oldVal) {
-    if (val < numBindAttr.value.min) {
-      ElMessage.warning(`${props.desc?.label || ''}最少不能低于${numBindAttr.value.min}`)
-      nextTick(() => {
-        currentValue.value = numBindAttr.value.min
-        change && change()
-      })
-    } else if (val > numBindAttr.value.max) {
-      ElMessage.warning(`${props.desc?.label || ''}最多不能大于${numBindAttr.value.max}`)
-      nextTick(() => {
-        currentValue.value = numBindAttr.value.max
-        change && change()
-      })
-    } else {
-      change && change()
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.ElPlusFormNumber-panel {
-  width: 100% !important;
-  max-width: 100%;
-  :deep(.el-input__wrapper) {
-    // padding-left: 11px !important;
-    input {
-      text-align: left !important;
-    }
-  }
-}
-</style>
+<template>
+  <el-input-number v-if="isInit" class="ElPlusFormNumber-panel" v-bind="attrs" v-on="onEvents" v-model="currentValue" :disabled="disabled" @focus="handelFocus" @blur="handelBlur" onkeypress="return( /[\d\.]/.test(String.fromCharCode(event.keyCode)))" />
+</template>
+<script lang="ts">
+export default {
+  name: 'ElPlusFormNumber',
+  inheritAttrs: false,
+  typeName: 'number',
+  customOptions: {}
+}
+</script>
+<script lang="ts" setup>
+import { ref, computed, useAttrs, onBeforeMount, nextTick, inject } from 'vue'
+import { getAttrs, getEvents } from '../mixins'
+import { ElMessage } from 'element-plus'
+import { ICRUDConfig } from 'types'
+
+const defaultConf = inject('defaultConf') as ICRUDConfig
+
+const props = defineProps<{
+  modelValue?: number | null
+  field: string
+  loading?: boolean
+  desc: { [key: string]: any }
+  formData: { [key: string]: any }
+  rowIndex?: number
+  disabled?: boolean
+}>()
+
+const emits = defineEmits(['update:modelValue', 'validateThis'])
+const currentValue = ref(props.modelValue)
+emits('update:modelValue', currentValue)
+const attrs = ref({} as any)
+const isInit = ref(false)
+const onEvents = ref(getEvents(props))
+
+const isDoChange = ref(false)
+
+onBeforeMount(async () => {
+  attrs.value = await getAttrs(props, { ...defaultConf.form?.leng?.nbinput, ...useAttrs() })
+  delete attrs.value.min
+  delete attrs.value.max
+  isInit.value = true
+})
+
+/**
+ * 获取焦点
+ */
+function handelFocus() {
+  isDoChange.value = false
+}
+
+/**
+ * 处理失去焦点
+ * @param event
+ */
+function handelBlur() {
+  if (!isDoChange.value) {
+    if (currentValue.value !== 0 && !currentValue.value) {
+      nextTick(() => {
+        currentValue.value = props.desc?.required ? numBindAttr.value.min : 0
+        if (currentValue.value === 0) {
+          // 查看了源码，这里需要二次赋不一样的值，这里才会真正重新渲染
+          nextTick(() => {
+            currentValue.value = null
+            change && change()
+          })
+        }
+      })
+    } else {
+      handelValChange(currentValue.value, 0)
+    }
+  }
+  nextTick(() => {
+    emits('validateThis')
+  })
+}
+
+/**
+ * 绑定属性
+ */
+const numBindAttr = computed(() => {
+  let numAttrs = props.desc.attrs || defaultConf.form?.leng?.nbinput
+  if (typeof props.desc.attrs === 'function') {
+    numAttrs = props.desc.attrs(props.formData)
+  }
+  // 这里判断一下，最小和最大值的大小
+  if (numAttrs.min > numAttrs.max) {
+    numAttrs.min = numAttrs.max
+  } else if (numAttrs.max < numAttrs.min) {
+    numAttrs.max = numAttrs.min
+  }
+  return numAttrs
+})
+
+// 判断一下初始值
+if (currentValue.value !== undefined && currentValue.value !== null) {
+  if (currentValue.value < numBindAttr.value.min) {
+    currentValue.value = numBindAttr.value.min
+  } else if (currentValue.value > numBindAttr.value.max) {
+    currentValue.value = numBindAttr.value.max
+  }
+}
+
+const change = onEvents.value.change
+if (change) {
+  onEvents.value.change = (val: any, oldVal: any) => {
+    handelValChange(val, oldVal)
+  }
+} else {
+  onEvents.value.change = handelValChange
+}
+
+/**
+ * 监听值改变
+ * @param val
+ */
+function handelValChange(val: any, oldVal: any) {
+  isDoChange.value = true
+  if (val !== oldVal) {
+    if (val < numBindAttr.value.min) {
+      ElMessage.warning(`${props.desc?.label || ''}最少不能低于${numBindAttr.value.min}`)
+      nextTick(() => {
+        currentValue.value = numBindAttr.value.min
+        change && change()
+      })
+    } else if (val > numBindAttr.value.max) {
+      ElMessage.warning(`${props.desc?.label || ''}最多不能大于${numBindAttr.value.max}`)
+      nextTick(() => {
+        currentValue.value = numBindAttr.value.max
+        change && change()
+      })
+    } else {
+      change && change()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ElPlusFormNumber-panel {
+  width: 100% !important;
+  max-width: 100%;
+  :deep(.el-input__wrapper) {
+    // padding-left: 11px !important;
+    input {
+      text-align: left !important;
+    }
+  }
+}
+</style>

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

@@ -39,7 +39,7 @@ const currentValue = ref(props.modelValue)
 emits('update:modelValue', currentValue)
 
 onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng.textare, showWordLimit: true, rows: 3, ...useAttrs() })
+  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng?.textare, showWordLimit: true, rows: 3, ...useAttrs() })
   isInit.value = true
 })
 

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

@@ -134,9 +134,9 @@ watch(
   () => currentValue.value,
   (val: any) => {
     if (attrs.value.allowCreate) {
-      if (val && Array.isArray(val) && (val as Array<any>).some((item) => typeof item === 'string' && item.length > (defaultConf.form?.leng.input || 20))) {
-        ElMessage.warning('最大长度为： ' + (defaultConf.form?.leng.input || 20))
-        currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= (defaultConf.form?.leng.input || 20))
+      if (val && Array.isArray(val) && (val as Array<any>).some((item) => typeof item === 'string' && item.length > (defaultConf.form?.leng?.input || 20))) {
+        ElMessage.warning('最大长度为： ' + (defaultConf.form?.leng?.input || 20))
+        currentValue.value = (val as Array<string>).filter((item) => typeof item !== 'string' || item.length <= (defaultConf.form?.leng?.input || 20))
       }
     }
   }

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

@@ -33,7 +33,7 @@ const currentValue = ref(props.modelValue)
 emits('update:modelValue', currentValue)
 
 onBeforeMount(async () => {
-  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng.textare, showWordLimit: true, rows: 3, ...useAttrs() })
+  attrs.value = await getAttrs(props, { maxlength: defaultConf.form?.leng?.textare, showWordLimit: true, rows: 3, ...useAttrs() })
   isInit.value = true
 })
 

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

@@ -29,7 +29,26 @@
         <slot name="main" :tableData="tableData"></slot>
       </template>
       <!-- 这里开始是表格内容  -->
-      <el-table ref="elPlusTableRef" v-else style="width: 100%" height="100%" :maxHeight="tableConfig.maxHeight || 'auto'" v-bind="tableConfig.tableAttr" :class="{ 'big-h-bar': tableConfig?.tableAttr?.bigHBar, 'big-v-bar': tableConfig.tableAttr?.bigVBar }" :data="tableData" :row-key="rowKey" lazy :load="loadExpandData" :size="size" :row-class-name="initRowClassName" @select="handelTableSelect" @select-all="handelTableSelectAll" @expand-change="handelTableExpandChange" :treeProps="treeProps">
+      <el-table
+        ref="elPlusTableRef"
+        v-else
+        style="width: 100%"
+        height="100%"
+        :maxHeight="tableConfig.maxHeight || 'auto'"
+        v-bind="tableConfig.tableAttr"
+        :class="{ 'big-h-bar': tableConfig?.tableAttr?.bigHBar, 'big-v-bar': tableConfig.tableAttr?.bigVBar }"
+        :data="tableData"
+        :row-key="rowKey"
+        lazy
+        :load="loadExpandData"
+        :size="size"
+        :row-class-name="initRowClassName"
+        @select="handelTableSelect"
+        @select-all="handelTableSelectAll"
+        @expand-change="handelTableExpandChange"
+        :treeProps="treeProps"
+        :span-method="handelSpanMethod"
+      >
         <!-- 复选框 -->
         <el-table-column v-if="type === 'selection'" type="selection" width="55px" :selectable="selectable" header-align="center" align="center" />
         <!-- 下标 -->
@@ -77,12 +96,20 @@ import ElPlusTableColumn from './ElPlusTableColumn.vue'
 import { handelListColumn } from './util'
 import { cloneDeep } from 'lodash'
 import { Loading } from '@element-plus/icons-vue'
+import type { TableColumnCtx } from 'element-plus'
 import { ICRUDConfig, ITableConfig, ITableTabItem, ITreeProps } from 'types'
 
+interface SpanMethodProps {
+  row: any
+  column: TableColumnCtx<any>
+  rowIndex: number
+  columnIndex: number
+}
+
 const defaultConf = inject('defaultConf') as ICRUDConfig
 const format = inject('format') as any
 
-const emits = defineEmits(['getUrlConsumerIds', 'selection', 'select', 'selectAll', 'update:modelValue', 'tabChange', 'expandChange'])
+const emits = defineEmits(['getUrlConsumerIds', 'selection', 'select', 'selectAll', 'update:modelValue', 'tabChange', 'expandChange', 'inited'])
 const props = withDefaults(
   defineProps<{
     tableConfig: ITableConfig
@@ -133,6 +160,10 @@ const props = withDefaults(
   }
 )
 
+// 合并行算法
+const needSpanColIndex = ref([] as any[])
+const handelSpanMethod = ref(null as unknown as Function)
+
 const elPlusTableRef = ref()
 
 // 顶部Tab数据
@@ -188,6 +219,50 @@ const treeProps = (props.tableConfig?.explan?.treeProps || { children: 'children
 // 处理后的列显示
 const headerColumns = computed(() => {
   const tempList = handelListColumn(props.tableConfig?.column, defaultConf, props.tableConfig?.tbName || '', props.headerAlign, props.isDialog ? 'auto' : props.colMinWidth)
+  // 这里重构一下合并行算法
+  // 获取所有列
+  const allColumn = getColumList(tempList)
+  // 查询是否有合并行属性
+  needSpanColIndex.value = []
+  allColumn.map((item, i) => {
+    if (item.isRowSpan) {
+      needSpanColIndex.value.push(i)
+      let value = undefined as any
+      let first = 0
+      let count = 1
+      // 这里修改data数据
+      tableData.value?.map((row, j) => {
+        if (value !== row[item.prop]) {
+          if (count > 1 && j > 0) {
+            // 这里要设置之前的数据合并行数
+            tableData.value[first]['rowSpan_' + i] = count
+          }
+          first = j
+          count = 1
+          value = row[item.prop]
+        } else {
+          count += 1
+          row['rowSpan_' + i] = 0
+        }
+        if (j === tableData.value.length - 1) {
+          // 这里要设置之前的数据合并行数
+          tableData.value[first]['rowSpan_' + i] = count
+        }
+      })
+    }
+  })
+  if (needSpanColIndex.value.length > 0) {
+    handelSpanMethod.value = ({ row, column, columnIndex }: SpanMethodProps) => {
+      let tempColumnIndex = columnIndex
+      // 这里要排除默认的列
+      if (props.type === 'selection') tempColumnIndex -= 1
+      if (props.isIndex) tempColumnIndex -= 1
+      if (useSlots().firstColumn) tempColumnIndex -= 1
+      if (needSpanColIndex.value.includes(tempColumnIndex)) {
+        return { rowspan: row['rowSpan_' + tempColumnIndex], colspan: 1 }
+      }
+    }
+  }
   return tempList
 })
 
@@ -222,6 +297,49 @@ const summaryList = computed(() => {
   return tempList
 })
 
+/**
+ * 获取所有显示的列信息
+ * @param list
+ */
+function getColumList(list: Array<any>): Array<any> {
+  const tempList = [] as any
+  list?.map((item) => {
+    if (item.children?.length) {
+      tempList.push(...getColumList(item.children))
+    } else {
+      if (item.__vif) {
+        tempList.push(item)
+      }
+    }
+  })
+  return tempList
+}
+
+/**
+ * 获取合并行方法
+ * @param param0
+ */
+function getSpanMethod(): Function {
+  // const
+  return ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+    if (needSpanColIndex.value.includes(columnIndex)) {
+    }
+    if (columnIndex === 0) {
+      if (rowIndex % 2 === 0) {
+        return {
+          rowspan: 2,
+          colspan: 1
+        }
+      } else {
+        return {
+          rowspan: 0,
+          colspan: 0
+        }
+      }
+    }
+  }
+}
+
 /**
  * Tab切换
  * @param val
@@ -497,9 +615,11 @@ async function loadData(isInit: Boolean) {
       dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
     }
     tableData.value = dataResult
+    // 初始化完毕后，调用一次父类更新
+    emits('update:modelValue', tableData)
     if (isInit) {
-      // 初始化完毕后，调用一次父类更新
-      // emits('update:modelValue', tableData)
+      // 调用父类init
+      emits('inited', tableData)
     }
     // 如果是树形结构
     if (props.type === 'expand') {

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

@@ -120,7 +120,13 @@ async function handelDownload({ callBack }: IBtnBack) {
       }
     }
     if (props.toolbar.export.fetch) {
-      url = (await props.toolbar.export.fetch(postData)) as string
+      let result = (await props.toolbar.export.fetch(postData)) as string
+      if (props.toolbar.export.urlKey) {
+        let tempKeyList = (typeof props.toolbar.export.urlKey === 'string' ? [props.toolbar.export.urlKey] : props.toolbar.export.urlKey) as string[]
+        // 循环遍历
+        tempKeyList?.map((key) => (result = result[key]))
+      }
+      url = result
     } else {
       if (!props.toolbar.export.noQuery && method === 'get') {
         url += (url.indexOf('?') >= 0 ? '&' : '?') + mapToUrlStr(postData)
@@ -138,7 +144,7 @@ async function handelDownload({ callBack }: IBtnBack) {
       if (typeof defaultConf.token === 'function') {
         token = defaultConf.token()
       }
-      xhr.setRequestHeader('Authorization', '' + token)
+      xhr.setRequestHeader(props.toolbar?.export?.tokenKey || 'Authorization', '' + token)
     }
     xhr.onload = function () {
       if (this.status == 200) {

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "el-plus-crud",
-  "version": "0.0.82",
+  "version": "0.0.85",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "el-plus-crud",
-      "version": "0.0.82",
+      "version": "0.0.85",
       "license": "MIT",
       "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",

package/package.json

@@ -2,7 +2,7 @@
   "name": "el-plus-crud",
   "description": "采用Vue3 + TS，封装的element-plus数据驱动表单、列表组件",
   "author": "K.D.Jack",
-  "version": "0.0.82",
+  "version": "0.0.85",
   "license": "MIT",
   "private": false,
   "main": "dist/el-plus-crud.mjs",

package/types/index.d.ts

@@ -173,6 +173,12 @@ export interface IFormGroupConfig {
   group: Array<{
     // 小标题
     title?: string
+    // 是否显示showBtns
+    showBtns?: boolean
+    // 最大宽度
+    maxWidth?: string
+    // label宽度
+    labelWidth?: string
     // 表单的列数，默认是1
     column?: number
     // 表单描述对象
@@ -207,6 +213,8 @@ export interface IColumnItem extends IDescItem {
   noHide?: boolean | ((data?: any) => boolean)
   // 真正的vif
   __vif?: boolean
+  // 是否合并行
+  isRowSpan?: boolean
 }
 
 /**
@@ -217,12 +225,16 @@ export interface IExportConfig {
   url?: string
   // 查询导出URL的fetch
   fetch?: IFetch<string>
+  // 如何去解析数据结果获取url
+  urlKey?: string | Array<string>
   // 请求夹带的数据
   data?: Object
   // 文件名
   name?: string
   // 是否增加token权限
   isAuth?: Boolean
+  // token名称
+  tokenKey?: string
   // 是否需要拼接查询条件
   noQuery?: Boolean
   // 导出文件的后缀