el-plus-crud 0.0.97 → 0.0.99

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

@@ -6,7 +6,14 @@
         <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" :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%') }">
+              <el-form-item style="min-height: 40px; display: flex" :prop="formItem.field" :style="{ width: formItem._attrs?.width || formItem.width || (isTable ? '150px' : '100%') }">
+                <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 }">
+                      {{ formItem._label }}
+                    </span>
+                  </div>
+                </template>
                 <component style="min-width: 80px; width: 100%; flex: 1" :is="formItem._type" :formData="props.modelValue" :disabled="formItem._disabled ?? disabled ?? false" v-bind="formItem._attrs" :desc="formItem" :ref="setComponentRef" :field="formItem.field" v-model="props.modelValue[formItem.field || '']" :isTable="isTable" @validateThis="() => handelValidateThis(formItem.field || '')"></component>
                 <div class="el-plus-form-tip" v-if="formItem._tip" v-html="formItem._tip" />
               </el-form-item>
@@ -38,7 +45,7 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { ref, computed, useAttrs, nextTick, onMounted, watch, inject } from 'vue'
+import { ref, computed, useAttrs, nextTick, onMounted, watch, inject, Ref } from 'vue'
 import { castArray, isMobile, time, cloneDeep, throttle, isPromiseLike } from './util'
 import * as validates from './util/validate'
 import { typeList } from './components/index'
@@ -185,7 +192,7 @@ const formLayout = computed(() => ({ display: 'flex', flexDirection: props.isTab
 const computedFormAttrs = computed(() => {
   return {
     ...props.formAttrs,
-    labelWidth: props.labelWidth === 'auto' ? (props.isDialog ? '100px' : '120px') : parseInt(props.labelWidth + '') + 'px',
+    _labelWidth: props.labelWidth === 'auto' ? (props.isDialog ? '100px' : '120px') : parseInt(props.labelWidth + '') + 'px',
     // validateOnRuleChange: false,
     disabled: props.disabled || innerIsLoading.value,
     rules: computedRules,
@@ -205,7 +212,7 @@ const computedRules = computed(() => {
   if (props.formDesc) {
     Object.keys(props.formDesc).map((field: any) => {
       if (!tempRules[field]) tempRules[field] = []
-      let required = false as boolean | ((data?: any) => boolean)
+      let required = false as boolean | ((data?: any) => boolean) | Ref<boolean>
       if (props.formDesc && props.formDesc[field]) {
         required = (props.formDesc && props.formDesc[field].required) || false
       }
@@ -223,6 +230,11 @@ const computedRules = computed(() => {
               tempRules[field].push(item)
             })
           }
+          // 这里判断一下rules中是否有required
+          if (tempRules[field].find((item: any) => item.required)) {
+            // 设置必填
+            props.formDesc[field].required = true
+          }
         } else if (required) {
           let rules = 'notAllBlank'
           switch (props.formDesc[field].type) {
@@ -820,10 +832,26 @@ defineExpose({ fid: props.fid, submit: handleSubmitForm, getData: getFormData, v
   .el-plus-form-column-panel {
     & > .el-form-item--default {
       margin-bottom: 18px !important;
+      // & > .el-form-item__label-wrap {
       & > .el-form-item__label {
         line-height: 40px;
         margin-bottom: 0;
+        width: auto !important;
+        &::before {
+          content: '' !important;
+        }
+        .crud-form-label {
+          text-align: right;
+          .required {
+            &::before {
+              content: '*';
+              color: var(--el-color-danger);
+              margin-right: 4px;
+            }
+          }
+        }
       }
+      // }
     }
   }
 }

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

@@ -1,10 +1,12 @@
 <template>
   <div class="ele-form-image">
     <template v-if="imagLIst && imagLIst.length > 0">
-      <el-image v-for="(image, i) in imagLIst" :class="desc.class" :key="image" :preview-src-list="attrs.isShowPreview === false ? null : imagLIst" :initial-index="i" :src="format.imgUrl(image)" v-bind="attrs" :style="styles" v-on="onEvents" :fit="attrs.fit || 'cover'" />
+      <template v-for="(image, i) in imagLIst" :key="image + i">
+        <el-image :class="desc.class" :src="image" :preview-src-list="attrs.isShowPreview === false ? null : imagLIst" :initial-index="i" v-bind="attrs" :style="styles" v-on="onEvents" :fit="attrs.fit || 'cover'" />
+      </template>
     </template>
     <div v-else>
-      <span class="no-img-tip">—</span>
+      <span class="no-img-tip">-</span>
     </div>
   </div>
 </template>
@@ -17,12 +19,9 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { ref, computed, useAttrs, onBeforeMount, inject } from 'vue'
+import { ref, computed, useAttrs, onBeforeMount } from 'vue'
 import { getAttrs, getEvents } from '../mixins'
 
-// 格式化
-const format = inject('format') as any
-
 const props = defineProps<{
   modelValue?: Array<any> | string | null
   field?: string
@@ -49,7 +48,7 @@ const imagLIst = computed(() => {
       return props.modelValue.map((item) => item.shareUrl || item.furl)
     }
   } else if (typeof props.modelValue === 'string') {
-    return props.modelValue.split(',').map((url) => format.imgUrl(url))
+    return props.modelValue.split(',')
   } else {
     // console.log('unknown image Type.....')
   }

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

@@ -29,6 +29,7 @@ const props = defineProps<{
 
 const emits = defineEmits(['update:modelValue', 'validateThis'])
 const currentValue = ref(props.modelValue)
+
 emits('update:modelValue', currentValue)
 const attrs = ref({} as any)
 const isInit = ref(false)

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

@@ -70,7 +70,7 @@ watch(
   () => props.modelValue,
   async () => {
     if (!props.desc.format) {
-      formatValue.value = props.modelValue === '' ? props.desc.default ?? '—' : props.modelValue ?? props.desc.default ?? '—'
+      formatValue.value = props.modelValue === '' ? props.desc.default ?? '-' : props.modelValue ?? props.desc.default ?? '-'
     } else {
       if (typeof props.desc.format === 'function') {
         // 如果有方法类型的判断，则需要启用动态监测
@@ -78,7 +78,7 @@ watch(
       } else if (typeof props.desc.format === 'string') {
         formatValue.value = format[props.desc.format] ? format[props.desc.format](props.modelValue, props.formData || {}, props.field) : '--'
       } else {
-        formatValue.value = props.modelValue || '—'
+        formatValue.value = props.modelValue || '-'
       }
     }
   },

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

@@ -62,7 +62,7 @@ watch(
   () => props.modelValue,
   async () => {
     if (!props.desc.format) {
-      formatValue.value = props.modelValue === '' ? '—' : props.modelValue ?? '—'
+      formatValue.value = props.modelValue === '' ? '-' : props.modelValue ?? '-'
     } else {
       if (typeof props.desc.format === 'function') {
         // 如果有方法类型的判断，则需要启用动态监测
@@ -70,7 +70,7 @@ watch(
       } else if (typeof props.desc.format === 'string') {
         formatValue.value = (await format)[props.desc.format](props.modelValue, props.formData || {}, props.field)
       } else {
-        formatValue.value = props.modelValue || '—'
+        formatValue.value = props.modelValue || '-'
       }
     }
   },

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

@@ -80,7 +80,7 @@ watch(
   () => props.modelValue,
   async () => {
     if (!props.desc.format) {
-      formatValue.value = props.modelValue === '' ? props.desc.default ?? '—' : props.modelValue ?? props.desc.default ?? '—'
+      formatValue.value = props.modelValue === '' ? props.desc.default ?? '-' : props.modelValue ?? props.desc.default ?? '-'
     } else {
       if (typeof props.desc.format === 'function') {
         // 如果有方法类型的判断，则需要启用动态监测
@@ -89,7 +89,7 @@ watch(
       } else if (typeof props.desc.format === 'string') {
         formatValue.value = format[props.desc.format] ? format[props.desc.format](props.modelValue, props.formData, props.field) : '--'
       } else {
-        formatValue.value = props.modelValue || '—'
+        formatValue.value = props.modelValue || '-'
       }
     }
   },

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

@@ -223,7 +223,11 @@ async function handelUploadSuccess(response: any, file: any) {
     file.raw.path = response.furl || file.path
   }
   file.raw.shareUrl = file.path
-  file.url = getFileIcon(file.raw)
+  if (props.desc.upType !== 'file') {
+    file.url = getFileIcon(file.raw)
+  } else {
+    file.url = response.furl || file.path
+  }
   handelListChange(file, 1)
 }
 
@@ -232,18 +236,16 @@ async function handelUploadSuccess(response: any, file: any) {
  * @param file
  */
 function getFileIcon(file?: any): string {
-  if (file && props.desc.upType !== 'file') {
-    const fileUrl = file.shareUrl || file.furl || file.path || file.url
-    const suffix = (file?.suffix || fileUrl.substring(fileUrl.lastIndexOf('.')) || '') as string
-    if (suffix) {
-      if (fileTypes.imageSuffixes.indexOf(suffix.toLocaleLowerCase()) >= 0) {
-        return fileUrl
-      }
-      for (let i = 0; i < fileTypes.suffixTypes.length; i++) {
-        for (let j = 0; j < fileTypes.suffixTypes[i].suffixes.length; j++) {
-          if (fileTypes.suffixTypes[i].suffixes[j] === suffix) {
-            return iconMap[fileTypes.suffixTypes[i].type]
-          }
+  const fileUrl = file.shareUrl || file.furl || file.path || file.url
+  const suffix = (file?.suffix || fileUrl.substring(fileUrl.lastIndexOf('.')) || '') as string
+  if (suffix) {
+    if (fileTypes.imageSuffixes.indexOf(suffix.toLocaleLowerCase()) >= 0) {
+      return fileUrl
+    }
+    for (let i = 0; i < fileTypes.suffixTypes.length; i++) {
+      for (let j = 0; j < fileTypes.suffixTypes[i].suffixes.length; j++) {
+        if (fileTypes.suffixTypes[i].suffixes[j] === suffix) {
+          return iconMap[fileTypes.suffixTypes[i].type]
         }
       }
     }
@@ -270,7 +272,7 @@ function handelListChange(item: UploadUserFile, type: 0 | 1) {
     currentValue.value.push({
       name: item.name,
       furl: (item.raw as any)?.path || item.url,
-      url: getFileIcon(item.raw),
+      url: props.desc.upType !== 'file' ? getFileIcon(item.raw) : item.url,
       fsize: item.size,
       uid: item.uid,
       mimeType: item.raw?.type,
@@ -361,9 +363,12 @@ watch(
       } else {
         currentValue.value =
           data?.map((item: IOssInfo) => {
-            item.url = getFileIcon(item)
-            item.furl = getFileIcon(item)
-            item.suffix = item.suffix || item.url.substring(item.url.lastIndexOf('.'))
+            if (props.desc.upType !== 'file') {
+              item.url = getFileIcon(item)
+              item.furl = getFileIcon(item)
+            }
+            item.suffix = item.suffix || item.url?.substring(item.url.lastIndexOf('.'))
+            item.previewUrl = item.furl || item.url
             return item
           }) || []
       }

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

@@ -206,7 +206,7 @@ const listLoading = ref(false)
 const size = defaultConf.size || 'default'
 
 // 顶部查询条件数据缓存
-const topQueryData = ref({} as any)
+// const topQueryData = ref({} as any)
 
 // 数据
 let toolFormData = reactive({} as any)
@@ -497,8 +497,8 @@ async function getListQueryData() {
   let queryMap = {
     // 封装查询条件
     // ...route.query,
-    // ...tableHeaderRef.value.getData(),
-    ...topQueryData.value,
+    // ...topQueryData.value,
+    ...tableHeaderRef.value.getData(),
     ...(typeof props.tableConfig.queryMap === 'function' ? await props.tableConfig.queryMap() : props.tableConfig.queryMap),
     t_: new Date().getTime()
   } as any
@@ -643,10 +643,6 @@ async function loadData(isInit: Boolean) {
       dataResult = dataPage[props.tableConfig?.fetchMap?.list || 'records'] || null
     }
     tableData.value = dataResult
-    if (isInit) {
-      // 调用父类init
-      emits('inited', tableData)
-    }
     // 如果是树形结构
     if (props.type === 'expand') {
       treeIndexList.splice(0, treeIndexList.length)
@@ -698,8 +694,12 @@ async function reload(isTab: boolean = false) {
  * 处理顶部条件表单筛选
  */
 async function handelTopQuery() {
-  topQueryData.value = cloneDeep(tableHeaderRef.value.getData())
-  emits('queryChange', await getListQueryData())
+  // topQueryData.value = cloneDeep(tableHeaderRef.value.getData())
+  let tempQueryData = await getListQueryData()
+  if (props.tableConfig?.toolbar?.formConfig?.beforeRequest) {
+    tempQueryData = props.tableConfig?.toolbar?.formConfig?.beforeRequest(JSON.parse(JSON.stringify(tempQueryData))) || tempQueryData
+  }
+  if (tempQueryData) emits('queryChange', tempQueryData)
   reload()
 }
 
@@ -741,7 +741,10 @@ if (props.isDIYMain) {
 }
 
 onMounted(() => {
-  reload()
+  // toolbar.formConfig
+  if (!(Object.keys(props.tableConfig?.toolbar?.formConfig || {}).length || props.tableConfig?.tbName)) {
+    reload()
+  }
 })
 
 defineExpose({ reload, tableData, changeSelect, resetSelect, initCol })

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

@@ -3,7 +3,7 @@
     <template v-if="props.toolbar && Object.keys(props.toolbar || {}).length">
       <el-form :inline="true" class="el-plus-table-header-form" :style="{ justifyContent: !props.toolbar.formConfig && props.toolbar.btnRight ? 'flex-end' : 'space-between' }">
         <div v-if="props.toolbar.formConfig" class="el-plus-table-form-items">
-          <ElPlusForm ref="elPlusFormRef" v-bind="formConfig" v-model="props.modelValue" labelWidth="1" :requestFn="handelQueryData" :showBtns="false" :isTable="true">
+          <ElPlusForm ref="elPlusFormRef" v-bind="formConfig" v-model="props.modelValue" :requestFn="handelQueryData" :showBtns="false" :isTable="true">
             <template #row>
               <div class="table-header-form-btns">
                 <ElPlusFormBtn type="primary" icon="ele-Search" :loading="loading" :desc="{ label: '查询', on: { click: handelSearch }, size }" />
@@ -193,7 +193,7 @@ async function handelDownload({ callBack }: IBtnBack) {
  * 处理搜索
  */
 function handelSearch() {
-  elPlusFormRef.value.submit()
+  elPlusFormRef.value?.submit()
 }
 
 /**
@@ -202,7 +202,7 @@ function handelSearch() {
 function handelReset() {
   elPlusFormRef.value.clear()
   nextTick(() => {
-    elPlusFormRef.value.submit()
+    elPlusFormRef.value?.submit()
   })
 }
 
@@ -251,7 +251,13 @@ function initCol() {
   }
 }
 
-onMounted(() => {})
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      handelSearch()
+    }, 200)
+  })
+})
 
 defineExpose({ getData: () => elPlusFormRef.value?.getData(), initCol })
 </script>

package/package-lock.json

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

package/types/index.d.ts

@@ -1,3 +1,5 @@
+import { Ref } from 'vue'
+
 // 基础类型
 export type IBaseObj = IBaseObj
 
@@ -79,14 +81,14 @@ export type IDescItem = {
  */
 export interface IFormDescItem extends IDescItem {
   field?: string
-  disabled?: boolean | ((data?: any) => boolean)
+  disabled?: boolean | Ref<boolean> | ((data?: any) => boolean)
   showLabel?: boolean
   labelWidth?: string | number
   tip?: string | ((data?: any) => string)
   size?: string
   placeholder?: string
   attrs?: IBaseObj | ((data?: any) => IBaseObj)
-  options?: Array<IFormDescItemOptionItem> | IFetch<Array<IFormDescItemOptionItem>> | string
+  options?: Ref<Array<IFormDescItemOptionItem>> | Array<IFormDescItemOptionItem> | (() => Array<IFormDescItemOptionItem>) | IFetch<Array<IFormDescItemOptionItem>> | string
   default?: string | boolean | number
   defaultItem?: { value: string | number; label: string; dataItem?: IBaseObj }
   rules?: string | Array<any>