Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e6add2a0 1 parent 8656940d

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

Inline Side-by-side
Showing 2 changed files with 29 additions and 20 deletions
1 <!-- 1 <!--
2 * @Date: 2022-08-31 16:16:49 2 * @Date: 2022-08-31 16:16:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-02-10 11:17:21 4 + * @LastEditTime: 2024-06-13 16:07:24
5 * @FilePath: /data-table/src/components/FileUploaderField/index.vue 5 * @FilePath: /data-table/src/components/FileUploaderField/index.vue
6 * @Description: 文件上传控件 6 * @Description: 文件上传控件
7 --> 7 -->
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
16 v-html="item.component_props.note" 16 v-html="item.component_props.note"
17 style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;" 17 style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem; white-space: pre-wrap;"
18 /> 18 />
19 + <div v-if="!item.component_props.readonly" class="upload-wrapper">
19 <div> 20 <div>
20 <p 21 <p
21 v-for="(file, index) in fileList" 22 v-for="(file, index) in fileList"
...@@ -52,6 +53,17 @@ ...@@ -52,6 +53,17 @@
52 </div> 53 </div>
53 <van-divider /> 54 <van-divider />
54 </div> 55 </div>
56 + <div v-else style="padding: 1rem;">
57 + <a
58 + v-for="(item, index) in default_file" :key="index"
59 + :href="item.url"
60 + :download="item.name"
61 + style="color: #000; font-size: 0.9rem; text-decoration: underline; margin-right: 0.5rem;"
62 + >
63 + {{ item.name }}
64 + </a>
65 + </div>
66 + </div>
55 67
56 <van-overlay :show="loading"> 68 <van-overlay :show="loading">
57 <div class="wrapper" @click.stop> 69 <div class="wrapper" @click.stop>
...@@ -86,6 +98,7 @@ const HideShow = computed(() => { ...@@ -86,6 +98,7 @@ const HideShow = computed(() => {
86 }) 98 })
87 const emit = defineEmits(["active"]); 99 const emit = defineEmits(["active"]);
88 const show_empty = ref(false); 100 const show_empty = ref(false);
101 +const default_file = ref(props.item.component_props.default)
89 102
90 // 文件类型中文页面显示 103 // 文件类型中文页面显示
91 const type_text = computed(() => { 104 const type_text = computed(() => {
......
1 <!-- 1 <!--
2 * @Date: 2022-08-31 16:16:49 2 * @Date: 2022-08-31 16:16:49
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-06-06 16:50:41 4 + * @LastEditTime: 2024-06-13 16:40:11
5 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue 5 * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
6 * @Description: 图片上传控件 6 * @Description: 图片上传控件
7 --> 7 -->
...@@ -41,10 +41,12 @@ ...@@ -41,10 +41,12 @@
41 <van-image 41 <van-image
42 v-for="(item, index) in default_list" :key="index" 42 v-for="(item, index) in default_list" :key="index"
43 @click="onImgClick(index)" 43 @click="onImgClick(index)"
44 - width="100" 44 + width="80"
45 - height="100" 45 + height="80"
46 + fit="contain"
47 + position="center"
46 :src="item" 48 :src="item"
47 - style="margin-right: 0.5rem; margin-block-end: 0.25rem;" 49 + style="margin-right: 0.5rem; margin-block-end: 0.25rem; border: 1px solid #eee; padding: 0.5rem;"
48 /> 50 />
49 </div> 51 </div>
50 <van-divider /> 52 <van-divider />
...@@ -83,20 +85,13 @@ const HideShow = computed(() => { ...@@ -83,20 +85,13 @@ const HideShow = computed(() => {
83 return !props.item.component_props.disabled 85 return !props.item.component_props.disabled
84 }); 86 });
85 // 默认图片列表 87 // 默认图片列表
86 -const default_tmp = [{ 88 +const default_tmp = ref(props.item.component_props.default)
87 - name : "92C3D730-CB73-40DD-AB1F-E86A159D2F11.png",
88 - url : "https://cdn.ipadbiz.cn/uploadForm/kibnjo/91b15c62bc3d002fb1c2dd2023648376.png"
89 -}, {
90 - name : "92C3D730-CB73-40DD-AB1F-E86A159D2F11.png",
91 - url : "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
92 -}];
93 const default_list = ref([]); 89 const default_list = ref([]);
94 90
95 onMounted(() => { 91 onMounted(() => {
96 - // TODO: 没有默认的default字段 92 + // 默认图片显示
97 - if (default_tmp.length) { 93 + if (default_tmp.value.length) {
98 - default_list.value = default_tmp.map(item => item.url) 94 + default_list.value = default_tmp.value.map(item => item.url)
99 - console.log("🚀 ~ file: index.vue:97 ~ onMounted ~ default_list.value :", default_list.value );
100 } 95 }
101 }) 96 })
102 97
...@@ -361,10 +356,11 @@ const validImageUploader = () => { ...@@ -361,10 +356,11 @@ const validImageUploader = () => {
361 356
362 // 预览只读图片 357 // 预览只读图片
363 const onImgClick = (i) => { 358 const onImgClick = (i) => {
364 - showImagePreview({ 359 + // showImagePreview({
365 - images: default_list.value, 360 + // images: default_list.value,
366 - startPosition: i, 361 + // startPosition: i,
367 - }); 362 + // className: "my-image-preview",
363 + // });
368 } 364 }
369 365
370 defineExpose({ validImageUploader }); 366 defineExpose({ validImageUploader });
......