fix 上传相关组件默认值和只读问题处理

hookehuyr
Commit e6add2a030eda541709e6e2bc4f5bbdc89a284a3 e6add2a0 1 parent 8656940d
Showing 2 changed files with 60 additions and 51 deletions
src/components/FileUploaderField/index.vue
src/components/ImageUploaderField/index.vue
--- a/src/components/FileUploaderField/index.vue
View file @e6add2a
+++ b/src/components/FileUploaderField/index.vue
View file @e6add2a
 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-10 11:17:21
+ * @LastEditTime: 2024-06-13 16:07:24
  * @FilePath: /data-table/src/components/FileUploaderField/index.vue
  * @Description: 文件上传控件
 -->
@@ -16,41 +16,53 @@
       v-html="item.component_props.note"
       style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
     />
-    <div>
+    <div v-if="!item.component_props.readonly" class="upload-wrapper">
-      <p
+      <div>
-        v-for="(file, index) in fileList"
+        <p
-        :key="index"
+          v-for="(file, index) in fileList"
-        style="padding-left: 1rem; margin-bottom: 0.5rem"
+          :key="index"
-      >
+          style="padding-left: 1rem; margin-bottom: 0.5rem"
-        <p style="font-size: 1rem; word-break: break-all; margin-right: 0.75rem;">
+        >
-          <span>{{ index + 1 }}.&nbsp;{{ file.filename }}&nbsp;&nbsp;{{ (file.size / 1024 / 1024).toFixed(2) }}MB</span>
+          <p style="font-size: 1rem; word-break: break-all; margin-right: 0.75rem;">
-          &nbsp;&nbsp;
+            <span>{{ index + 1 }}.&nbsp;{{ file.filename }}&nbsp;&nbsp;{{ (file.size / 1024 / 1024).toFixed(2) }}MB</span>
-          <span style="color: #e32525; font-size: 0.85rem" @click="beforeDelete(file)">移除</span>
+            &nbsp;&nbsp;
+            <span style="color: #e32525; font-size: 0.85rem" @click="beforeDelete(file)">移除</span>
+          </p>
         </p>
-      </p>
+      </div>
-    </div>
+      <div style="padding: 1rem">
-    <div style="padding: 1rem">
+        <van-uploader
-      <van-uploader
+          :name="item.name"
-        :name="item.name"
+          upload-icon="add"
-        upload-icon="add"
+          accept="*"
-        accept="*"
+          :before-read="beforeRead"
-        :before-read="beforeRead"
+          :after-read="afterRead"
-        :after-read="afterRead"
+          :before-delete="beforeDelete"
-        :before-delete="beforeDelete"
+          :multiple="item.component_props.max_size > 1"
-        :multiple="item.component_props.max_size > 1"
+        >
+          <van-button icon="plus" type="primary">上传文件</van-button>
+        </van-uploader>
+      </div>
+      <!-- <div class="type-text">上传格式：{{ type_text }}</div> -->
+      <div
+        v-if="show_empty"
+        class="van-field__error-message"
+        style="padding: 0 1rem 1rem 1rem"
       >
-        <van-button icon="plus" type="primary">上传文件</van-button>
+        文件上传不能为空
-      </van-uploader>
+      </div>
+      <van-divider />
     </div>
-    <!-- <div class="type-text">上传格式：{{ type_text }}</div> -->
+    <div v-else style="padding: 1rem;">
-    <div
+        <a
-      v-if="show_empty"
+          v-for="(item, index) in default_file" :key="index"
-      class="van-field__error-message"
+          :href="item.url"
-      style="padding: 0 1rem 1rem 1rem"
+          :download="item.name"
-    >
+          style="color: #000; font-size: 0.9rem; text-decoration: underline; margin-right: 0.5rem;"
-      文件上传不能为空
+        >
+          {{ item.name }}
+        </a>
     </div>
-    <van-divider />
   </div>
   <van-overlay :show="loading">
@@ -86,6 +98,7 @@ const HideShow = computed(() => {
 })
 const emit = defineEmits(["active"]);
 const show_empty = ref(false);
+const default_file = ref(props.item.component_props.default)
 // 文件类型中文页面显示
 const type_text = computed(() => {
--- a/src/components/ImageUploaderField/index.vue
View file @e6add2a
+++ b/src/components/ImageUploaderField/index.vue
View file @e6add2a
 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-06 16:50:41
+ * @LastEditTime: 2024-06-13 16:40:11
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 图片上传控件
 -->
@@ -41,10 +41,12 @@
       <van-image
       v-for="(item, index) in default_list" :key="index"
       @click="onImgClick(index)"
-        width="100"
+        width="80"
-        height="100"
+        height="80"
+        fit="contain"
+        position="center"
         :src="item"
-        style="margin-right: 0.5rem; margin-block-end: 0.25rem;"
+        style="margin-right: 0.5rem; margin-block-end: 0.25rem; border: 1px solid #eee; padding: 0.5rem;"
       />
     </div>
     <van-divider />
@@ -83,20 +85,13 @@ const HideShow = computed(() => {
   return !props.item.component_props.disabled
 });
 // 默认图片列表
-const default_tmp = [{
+const default_tmp = ref(props.item.component_props.default)
-  name : "92C3D730-CB73-40DD-AB1F-E86A159D2F11.png",
-  url : "https://cdn.ipadbiz.cn/uploadForm/kibnjo/91b15c62bc3d002fb1c2dd2023648376.png"
-}, {
-  name : "92C3D730-CB73-40DD-AB1F-E86A159D2F11.png",
-  url : "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
-}];
 const default_list = ref([]);
 onMounted(() => {
-  // TODO: 没有默认的default字段
+  // 默认图片显示
-  if (default_tmp.length) {
+  if (default_tmp.value.length) {
-    default_list.value = default_tmp.map(item => item.url)
+    default_list.value = default_tmp.value.map(item => item.url)
-    console.log("🚀 ~ file: index.vue:97 ~ onMounted ~ default_list.value :", default_list.value );
   }
 })
@@ -361,10 +356,11 @@ const validImageUploader = () => {
 // 预览只读图片
 const onImgClick = (i) => {
-  showImagePreview({
+  // showImagePreview({
-    images: default_list.value,
+  //   images: default_list.value,
-    startPosition: i,
+  //   startPosition: i,
-  });
+  //   className: "my-image-preview",
+  // });
 }
 defineExpose({ validImageUploader });