日期范围框、表单图片上传、下拉选择框，更新依赖

package.json

@@ -35,7 +35,7 @@
         "unplugin-auto-import": "^0.15.1",
         "unplugin-vue-components": "^0.24.1",
         "vite": "^4.1.4",
-        "z-element-plus": "^1.0.2",
+        "z-element-plus": "1.0.6",
         "z-vfonts": "^0.0.1"
     }
 }

src/components/plugins/table-form/hc-date-picker-1.vue

@@ -41,7 +41,7 @@ const props = defineProps({
     },
     rangeSeparator: {
         type: String,
-        default: ''
+        default: '-'
     },
     startPlaceholder: {
         type: String,

src/components/plugins/table-form/hc-form-upload.vue

@@ -1,28 +1,34 @@
 <template>
-    <el-upload class="hc-upload-table-form" :disabled="isLoading" :placeholder="placeholder" :keyname="isKeyName" :headers="getTokenHeader()" :action="action" :accept="accept" :show-file-list="false"
-               :on-progress="uploadprogress" @exceed="formUploadExceed" :on-error="formUploadError" @success="formUploadSuccess" v-loading="isLoading" element-loading-text="上传中...">
-        <img v-if="isSrc" :src="isSrc" class="hc-table-form-img" alt="">
-        <div class="hc-table-form-icon" v-else>点此选择文件并上传</div>
+    <el-upload v-loading="isLoading" :accept="accept" :action="action" :class="isFocus?'is-focus':''"
+               :disabled="isLoading" :headers="getTokenHeader()" :keyname="isKeyName"
+               :on-error="formUploadError"
+               :on-progress="uploadprogress" :placeholder="placeholder" :show-file-list="false"
+               class="hc-upload-table-form"
+               element-loading-text="上传中..." @exceed="formUploadExceed" @success="formUploadSuccess">
+        <img v-if="isSrc" :src="isSrc" alt="" class="hc-table-form-img">
+        <div v-else class="hc-table-form-icon">点此选择文件并上传</div>
         <div v-if="isSrc" class="hc-table-form-del">
-            <el-button type="danger" plain @click.stop="delTableFormFile">删除当前文件</el-button>
+            <el-button plain type="danger" @click.stop="delTableFormFile">删除当前文件</el-button>
         </div>
+        <input :id="isKeyName" v-model="isSrc" class="hc-upload-input-src" @blur="handleBlur" @focus="handleFocus"/>
     </el-upload>
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
+import {ref, watch} from 'vue'
 import {getTokenHeader} from '~src/api/request/header';
+
 const props = defineProps({
     src: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     keyname: {
-        type: [Number,String],
+        type: [Number, String],
         default: ''
     },
     placeholder: {
-        type: [Number,String],
+        type: [Number, String],
         default: '相片'
     },
 })
@@ -79,8 +85,30 @@ const formUploadExceed = () => {
 const delTableFormFile = () => {
     emit('del', isKeyName.value)
 }
+
+const isFocus = ref(false)
+
+//获得焦点
+const handleFocus = () => {
+    isFocus.value = true
+}
+
+//失去焦点
+const handleBlur = () => {
+    isFocus.value = false
+}
 </script>
 
 <style lang="scss" scoped>
-
+.hc-upload-table-form {
+    border-radius: 3px;
+    transition: box-shadow 0.3s, background-color 0.3s;
+    &.is-focus, &:hover {
+        background-color: #eddac4;
+        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
+    }
+    .hc-upload-input-src {
+        z-index: -1;
+    }
+}
 </style>

src/plugins/HTableForm.js

@@ -8,15 +8,16 @@ import ElTimePicker from "~com/plugins/table-form/hc-time-picker.vue"
 import ElDatePicker from "~com/plugins/table-form/hc-date-picker-1.vue"
 
 import {
-    ElButton, ElTooltip, ElInput, ElUpload,
-    ElInputNumber, ElSelect, ElOption, ElRadioGroup,
-    ElRadio, ElCheckbox, ElCheckboxGroup
+    ElSelect, ElOption,
+} from 'z-element-plus'
+
+import {
+    ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElRadioGroup, ElRadio, ElCheckbox, ElCheckboxGroup
 } from 'element-plus'
 
 const components = {
-    ElButton, ElTooltip, ElInput, ElDatePicker, ElUpload,
-    ElInputNumber, ElTimePicker, ElSelect, ElOption, ElRadioGroup,
-    ElRadio, ElCheckbox, ElCheckboxGroup, HcTableFormUpload, HcFormSelectSearch,
+    ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElSelect, ElOption, ElRadioGroup,
+    ElRadio, ElCheckbox, ElCheckboxGroup, ElDatePicker, ElTimePicker, HcTableFormUpload, HcFormSelectSearch,
     HcFormCheckboxGroup
 }
 

src/styles/app/element.scss

@@ -696,6 +696,11 @@
                 color: var(--el-color-primary);
             }
         }
+        //下拉框
+        .el-select {
+            width: 100%;
+            height: 100%;
+        }
     }
     //非输入框颜色
     td:not([titlexx]), td[titlexx*=''],

yarn.lock

@@ -1403,10 +1403,10 @@ yaml@^1.10.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-z-element-plus@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/z-element-plus/-/z-element-plus-1.0.2.tgz#0a626bf4c58b3d8513c9fbe3a9969ab18843a941"
-  integrity sha512-zkm0dSN4QsWGH7B2UgCWX0nxGW+MWLQcXPVzbXTQCKyp6rUwtfcvYM1IKoyrb+kXMEMnoRXT71lgavM7wVuBIQ==
+z-element-plus@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/z-element-plus/-/z-element-plus-1.0.6.tgz#4adb300c31ad0b491b8c12e0f01c08f70e6d4f14"
+  integrity sha512-6Dyat/vir3DNmJYdFGghrt6WedKX63kUpLGVjEblzo6BZJg/Vwjg/w0DMlL80dhtb65A7IzJq+hdQmeX0IW54w==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.0.6"