el-plus-crud 0.0.97 → 0.0.98

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>
@@ -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,
@@ -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,7 +1,9 @@
 <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>
@@ -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/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

@@ -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)
@@ -699,7 +695,11 @@ async function reload(isTab: boolean = false) {
  */
 async function handelTopQuery() {
   topQueryData.value = cloneDeep(tableHeaderRef.value.getData())
-  emits('queryChange', await getListQueryData())
+  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()
 }
 

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 }" />

package/package-lock.json

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