图片上传组件默认值和只读显示

 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-03-29 18:04:07
+ * @LastEditTime: 2024-06-06 16:50:41
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 图片上传控件
 -->
@@ -16,24 +16,36 @@
       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 style="padding: 1rem">
-      <van-uploader
-        :name="item.name"
-        upload-icon="add"
-        :before-read="beforeRead"
-        :after-read="afterRead"
-        :before-delete="beforeDelete"
-        v-model="fileList"
-        :multiple="item.component_props.max_size > 1"
-      />
+    <div v-if="!item.component_props.readonly">
+      <div style="padding: 1rem">
+        <van-uploader
+          :name="item.name"
+          upload-icon="add"
+          :before-read="beforeRead"
+          :after-read="afterRead"
+          :before-delete="beforeDelete"
+          v-model="fileList"
+          :multiple="item.component_props.max_size > 1"
+        />
+      </div>
+      <div class="type-text">上传类型:&nbsp;{{ type_text }}</div>
+      <div
+        v-if="show_empty"
+        class="van-field__error-message"
+        style="padding: 0 1rem 1rem 1rem"
+      >
+        图片上传不能为空
+      </div>
     </div>
-    <div class="type-text">上传类型:&nbsp;{{ type_text }}</div>
-    <div
-      v-if="show_empty"
-      class="van-field__error-message"
-      style="padding: 0 1rem 1rem 1rem"
-    >
-      图片上传不能为空
+    <div v-else style="padding: 1rem">
+      <van-image
+      v-for="(item, index) in default_list" :key="index"
+      @click="onImgClick(index)"
+        width="100"
+        height="100"
+        :src="item"
+        style="margin-right: 0.5rem; margin-block-end: 0.25rem;"
+      />
     </div>
     <van-divider />
   </div>
@@ -52,7 +64,7 @@
  * @param image_type[Array] 图片上传类型
  * @param multiple[Boolean] 图片多选
  */
-import { showSuccessToast, showFailToast, showToast } from "vant";
+import { showSuccessToast, showFailToast, showToast, showImagePreview } from "vant";
 import _ from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from "@/api/common";
@@ -65,10 +77,29 @@ const $route = useRoute();
 const props = defineProps({
   item: Object,
 });
+
 // 隐藏显示
 const HideShow = computed(() => {
   return !props.item.component_props.disabled
+});
+// 默认图片列表
+const default_tmp = [{
+  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) {
+    default_list.value = default_tmp.map(item => item.url)
+    console.log("🚀 ~ file: index.vue:97 ~ onMounted ~ default_list.value :", default_list.value );
+  }
 })
+
 const emit = defineEmits(["active"]);
 const show_empty = ref(false);
 
@@ -328,6 +359,14 @@ const validImageUploader = () => {
   return !show_empty.value;
 };
 
+// 预览只读图片
+const onImgClick = (i) => {
+  showImagePreview({
+    images: default_list.value,
+    startPosition: i,
+  });
+}
+
 defineExpose({ validImageUploader });
 </script>