el-plus-crud 0.0.113 → 0.0.114

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

@@ -46,8 +46,8 @@ export default {
 </script>
 <script lang="ts" setup>
 import { ref, computed, useAttrs, nextTick, onMounted, watch, inject, Ref } from 'vue'
-import { castArray, isMobile, time, throttle, isPromiseLike } from './util'
-import { cloneDeep } from 'lodash'
+import { castArray, isMobile, time, isPromiseLike } from './util'
+import { cloneDeep, throttle } from 'lodash'
 import * as validates from './util/validate'
 import { typeList } from './components/index'
 import ElPlusFormBtn from './components/ElPlusFormBtn.vue'
@@ -106,6 +106,10 @@ export interface IFormProps {
   idKey?: string
   // 最大宽度
   maxWidth?: string
+  // 是否是group的Form
+  isGroupForm?: boolean
+  // 是否禁用最后一个元素的tab
+  disabledTab?: boolean
   // 比如 beforeValidate, beforeRequest, success, requestError, requestEnd
   // 其他钩子 直接放到attrs里面去了
 }
@@ -162,7 +166,9 @@ const props = withDefaults(defineProps<IFormProps>(), {
   // 是否是列表头部的表单
   isTable: false,
   // 唯一标识符。默认为id
-  idKey: 'id'
+  idKey: 'id',
+  // 是否禁用最后一个元素的tab
+  disabledTab: false
   // 其他钩子 直接放到attrs里面去了
   // 比如 beforeValidate, beforeRequest, success, requestError, requestEnd
 })
@@ -275,9 +281,10 @@ const computedRules = computed(() => {
 const attrMapToTableList = computed(() => {
   const formLayoutRows = [] as Array<Array<IFormDescItem>>
   if (props.formDesc) {
+    const tempFormDesc = cloneDeep(props.formDesc)
     let tempData = [] as Array<IFormDescItem>
-    for (const key in props.formDesc) {
-      tempData.push({ ...props.formDesc[key], field: key })
+    for (const key in tempFormDesc) {
+      tempData.push({ ...tempFormDesc[key], field: key })
     }
     // 这里处理一下layout的布局-渲染
     let rowItemList = [] as Array<IFormDescItem>
@@ -302,6 +309,30 @@ const attrMapToTableList = computed(() => {
       formLayoutRows.push(rowItemList)
     }
   }
+
+  // 这里处理下是否禁用最后一个元素的tab
+  if (formLayoutRows?.length && props.disabledTab && (!props.isGroupForm || (props.isGroupForm && props.groupFormDesc))) {
+    for (let i = formLayoutRows[formLayoutRows.length - 1].length - 1; i >= 0; i--) {
+      const type = formLayoutRows[formLayoutRows.length - 1][i].type || ''
+      if (['image', 'link', 'rate', 'status', 'tag', 'text'].indexOf(type) < 0) {
+        const eventOn = formLayoutRows[formLayoutRows.length - 1][i].on || {}
+        const oldFocus = eventOn.focus
+        const oldBlur = eventOn.blur
+        eventOn.focus = function () {
+          document.onkeydown = (event) => {
+            if (event.keyCode == 9) return false
+          }
+          oldFocus && oldFocus()
+        }
+        eventOn.blur = function () {
+          document.onkeydown = function () {}
+          oldBlur && oldBlur()
+        }
+        formLayoutRows[formLayoutRows.length - 1][i].on = eventOn
+        break
+      }
+    }
+  }
   return formLayoutRows
 })
 
@@ -746,7 +777,7 @@ const clear = () => {
  * @param field
  */
 function handelValidateThis(field: string) {
-  refElPlusForm.value.validateField(field, (err: any) => {
+  refElPlusForm.value?.validateField(field, (err: any) => {
     // console.log('err: ', err)
   })
 }
@@ -833,7 +864,7 @@ defineExpose({ fid: props.fid, submit: handleSubmitForm, getData: getFormData, v
     border-radius: 4px;
   }
   .el-plus-form-column-panel {
-    & > .el-form-item--default {
+    & > .el-form-item {
       margin-bottom: 18px !important;
       // & > .el-form-item__label-wrap {
       & > .el-form-item__label {

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

@@ -7,7 +7,7 @@
       <slot :name="'title' + indexList[i]">
         <div class="title-line" v-if="group.title">{{ group.title }}</div>
       </slot>
-      <ElPlusForm v-model="currentValue" v-bind="group.formProps" :ref="setComponentRef" @reset="handleReset(group.formProps?.fid || '')">
+      <ElPlusForm v-model="currentValue" v-bind="group.formProps" isGroupForm :ref="setComponentRef" @reset="handleReset(group.formProps?.fid || '')">
         <template v-if="useSlots()['default' + indexList[i]]">
           <slot :name="'default' + indexList[i]"> </slot>
         </template>
@@ -38,6 +38,8 @@ const props = defineProps<{
   formGroup: IFormGroupConfig
   // 提交状态
   isLoading?: boolean
+  // 是否禁用最后一个元素的tab
+  disabledTab?: boolean
 }>()
 
 const formRefs = ref([] as any[])
@@ -100,6 +102,7 @@ const getGroupFowmLayout = computed(() => {
   tempGroupList.map((item) => {
     Object.assign(tempFormConfig.groupFormDesc, item.formDesc)
   })
+  tempFormConfig.disabledTab = props.disabledTab
 
   // 遍历
   tempGroupList.map((groupItem, i) => {

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

@@ -530,7 +530,7 @@ async function getListQueryData() {
     queryMap.size = pageInfo.size
   }
   // 这里处理一下列表Tab的查询条件
-  if (props.tableConfig?.tabConf && props.tableConfig?.tabConf.prop) {
+  if (props.tableConfig?.tabConf && props.tableConfig?.tabConf?.prop) {
     queryMap[props.tableConfig?.tabConf.prop] = tableTabVal.value
   }
 
@@ -751,17 +751,28 @@ function initCol() {
 }
 
 // 监听父类数据变更
+// watch(
+//   () => props.modelValue,
+//   (data) => {
+//     if (!props.tableConfig.fetch) {
+//       console.log('watch modelValue data: ', data)
+//     }
+//   }
+// )
 watch(
   () => props.modelValue,
   (data) => {
     if (!props.tableConfig.fetch) {
-      if (JSON.parse(JSON.stringify(data)) !== JSON.parse(JSON.stringify(tableData.value))) {
+      // console.log('watch modelValue data: ', data)
+      // if (JSON.parse(JSON.stringify(data)) !== JSON.parse(JSON.stringify(tableData.value))) {
+      // 优化代码，这里就直接比较一下length就行了
+      if (data?.length !== tableData.value?.length) {
         loadingStatus.value = 2
-        tableData.value.splice(0, tableData.value.length, ...(data || []))
+        tableData.value?.splice(0, tableData.value.length, ...(data || []))
       }
     }
-  },
-  { deep: true }
+  }
+  // { deep: true }
 )
 
 watch(

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "el-plus-crud",
-  "version": "0.0.113",
+  "version": "0.0.114",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "el-plus-crud",
-      "version": "0.0.113",
+      "version": "0.0.114",
       "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.113",
+  "version": "0.0.114",
   "license": "MIT",
   "private": false,
   "main": "dist/el-plus-crud.mjs",

package/types/index.d.ts

@@ -74,6 +74,8 @@ export type IDescItem = {
   _vif?: boolean
   // 权限
   auth?: string
+  // 其他字符串
+  [key: string]: any
 }
 
 /**
@@ -314,7 +316,7 @@ export interface IStatisticConfig {
  * 列表的选项卡配置
  */
 export interface ITableTabConf {
-  prop: string
+  prop?: string
   tabs: Array<ITableTabItem>
   attrs?: IBaseObj | Function
   // 远程拉取数量信息