canrd-outside / order-erp-front · Commits

Commit 49e72a8e76b78fe54e19de9e23d7c72a19427f01

Authored by 无木
1 parent 6f845b53

feat(basic-upload): add preview-delete event 

添加预览Modal中删除文件的事件

close: #835
Inline Side-by-side
Showing 2 changed files with 10 additions and 3 deletions
src/components/Upload/src/BasicUpload.vue
  View file @49e72a8
@@ -32,6 +32,7 @@ @@ -32,6 +32,7 @@
32 :value="fileList" 32 :value="fileList"
33 @register="registerPreviewModal" 33 @register="registerPreviewModal"
34 @list-change="handlePreviewChange" 34 @list-change="handlePreviewChange"
  35 + @delete="handlePreviewDelete"
35 /> 36 />
36 </div> 37 </div>
37 </template> 38 </template>
@@ -50,7 +51,7 @@ @@ -50,7 +51,7 @@
50 name: 'BasicUpload', 51 name: 'BasicUpload',
51 components: { UploadModal, UploadPreviewModal, Icon, Tooltip }, 52 components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
52 props: uploadContainerProps, 53 props: uploadContainerProps,
53 - emits: ['change', 'delete'], 54 + emits: ['change', 'delete', 'preview-delete'],
54 55
55 setup(props, { emit, attrs }) { 56 setup(props, { emit, attrs }) {
56 const { t } = useI18n(); 57 const { t } = useI18n();
@@ -97,6 +98,10 @@ @@ -97,6 +98,10 @@
97 emit('delete', record); 98 emit('delete', record);
98 } 99 }
99 100
  101 + function handlePreviewDelete(url: string) {
  102 + emit('preview-delete', url);
  103 + }
  104 +
100 return { 105 return {
101 registerUploadModal, 106 registerUploadModal,
102 openUploadModal, 107 openUploadModal,
@@ -108,6 +113,7 @@ @@ -108,6 +113,7 @@
108 showPreview, 113 showPreview,
109 bindValue, 114 bindValue,
110 handleDelete, 115 handleDelete,
  116 + handlePreviewDelete,
111 t, 117 t,
112 }; 118 };
113 }, 119 },
src/components/Upload/src/UploadPreviewModal.vue
  View file @49e72a8
@@ -24,7 +24,7 @@ @@ -24,7 +24,7 @@
24 export default defineComponent({ 24 export default defineComponent({
25 components: { BasicModal, FileList }, 25 components: { BasicModal, FileList },
26 props: previewProps, 26 props: previewProps,
27 - emits: ['list-change', 'register'], 27 + emits: ['list-change', 'register', 'delete'],
28 setup(props, { emit }) { 28 setup(props, { emit }) {
29 const [register, { closeModal }] = useModalInner(); 29 const [register, { closeModal }] = useModalInner();
30 const { t } = useI18n(); 30 const { t } = useI18n();
@@ -50,7 +50,8 @@ @@ -50,7 +50,8 @@
50 function handleRemove(record: PreviewFileItem) { 50 function handleRemove(record: PreviewFileItem) {
51 const index = fileListRef.value.findIndex((item) => item.url === record.url); 51 const index = fileListRef.value.findIndex((item) => item.url === record.url);
52 if (index !== -1) { 52 if (index !== -1) {
53 - fileListRef.value.splice(index, 1); 53 + const removed = fileListRef.value.splice(index, 1);
  54 + emit('delete', removed[0].url);
54 emit( 55 emit(
55 'list-change', 56 'list-change',
56 fileListRef.value.map((item) => item.url) 57 fileListRef.value.map((item) => item.url)