图片上传组件优化

src/components/Upload/src/BasicUpload.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
-    <a-button-group>
+    <a-button-group style="width: 100%; height: 33px">
+      <Input
+        v-if="showChooseBtn"
+        class="upload-input"
+        :value="imageUrls"
+        @focus="onFocus"
+        @change="onInputChange"
+        @blur="onBlur"
+      />
       <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
         {{ t('component.upload.upload') }}
       </a-button>
@@ -10,7 +18,7 @@
         type="danger"
         @click="openChooseModal"
         preIcon="ic:sharp-view-list"
-        iconSize="16"
+        :iconSize="16"
       >
         {{ t('component.upload.choose') }}
       </a-button>
@@ -28,7 +36,7 @@
           </template>
         </a-button> -->
       </Tooltip>
-      <span class="tip-span" v-if="tip">{{ tip }}</span>
+      <span class="tip-span" v-if="tipShow">{{ tip }}</span>
     </a-button-group>
 
     <UploadModal
@@ -46,8 +54,8 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, watch, unref, computed, toRefs } from 'vue';
-
+  import { defineComponent, ref, watch, unref, computed, toRefs, reactive } from 'vue';
+  import { Input } from 'ant-design-vue';
   import UploadModal from './UploadModal.vue';
   import UploadPreviewModal from './UploadPreviewModal.vue';
   import Icon from '/@/components/Icon';
@@ -61,9 +69,9 @@
 
   export default defineComponent({
     name: 'BasicUpload',
-    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
+    components: { UploadModal, UploadPreviewModal, Icon, Tooltip, Input },
     props: uploadContainerProps,
-    emits: ['change', 'openChooseModal'],
+    emits: ['change', 'openChooseModal', 'onInputChange'],
 
     setup(props, { emit, attrs }) {
       const { t } = useI18n();
@@ -80,10 +88,14 @@
         if (!emptyHidePreview) return true;
         return emptyHidePreview ? fileListRef.value.length > 0 : true;
       });
+      const state = reactive({
+        imageUrls: props.urls,
+        tipShow: false,
+      });
 
       const bindValue = computed(() => {
         const value = { ...attrs, ...props };
-        return omit(value, 'onChange');
+        return omit(value, 'inputChange');
       });
 
       watch(
@@ -93,6 +105,12 @@
         },
         { immediate: true }
       );
+      watch(
+        () => props.urls,
+        (urls) => {
+          state.imageUrls = urls;
+        }
+      );
 
       // 上传modal保存操作
       function handleChange(urls: string[]) {
@@ -110,6 +128,18 @@
         emit('openChooseModal');
       }
 
+      function onFocus() {
+        state.tipShow = true;
+      }
+
+      function onBlur() {
+        state.tipShow = false;
+      }
+
+      function onInputChange(e) {
+        emit('onInputChange', e.target.value);
+      }
+
       return {
         registerUploadModal,
         openUploadModal,
@@ -118,11 +148,15 @@
         handlePreviewChange,
         registerPreviewModal,
         openPreviewModal,
+        onFocus,
+        onBlur,
+        onInputChange,
         fileListRef,
         showPreview,
         bindValue,
         t,
         ...toRefs(props),
+        ...toRefs(state),
       };
     },
   });
@@ -138,4 +172,10 @@
     line-height: 250%;
     color: gray;
   }
+
+  .upload-input {
+    width: 45%;
+    height: 33px;
+    margin-right: 5px;
+  }
 </style>

src/components/Upload/src/props.ts

@@ -58,6 +58,10 @@ export const uploadContainerProps = {
     type: String,
     default: '',
   },
+  urls: {
+    type: String,
+    default: '',
+  },
 };
 
 export const previewProps = {

src/views/general/config/customComponents/UploadImage.vue

@@ -1,20 +1,24 @@
 <template>
   <div>
     <BasicUpload
+      :urls="imageUrls"
       :tip="tip"
       :showChooseBtn="true"
       :maxSize="20"
       :maxNumber="10"
       @change="handleChange"
       @openChooseModal="openChooseModal"
+      @onInputChange="inputChange"
       :api="uploadApi"
-      class="my-5"
+      class="my-3"
     />
     <div class="image-list" v-if="image_list">
-      <div class="image-item" v-for="(item, index) in image_list" :key="index">
-        <div class="image-wrap"> <a-image width="70px" :src="item" /></div>
-        <div class="dele-image" @click="deleteImage">
-          <Icon icon="ri:delete-bin-5-fill" />
+      <div v-for="(item, index) in image_list" :key="index">
+        <div class="image-item" v-if="imageUrls.split(',').includes(item.url)">
+          <div class="image-wrap"> <a-image width="70px" :src="item.preUrl" /></div>
+          <div class="dele-image" @click="deleteImage(item.url)">
+            <Icon icon="ri:delete-bin-5-fill" />
+          </div>
         </div>
       </div>
     </div>
@@ -27,7 +31,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, toRefs } from 'vue';
+  import { defineComponent, reactive, toRefs } from 'vue';
   import { BasicUpload } from '/@/components/Upload';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { uploadApi } from '/@/api/sys/upload';
@@ -39,6 +43,7 @@
   const props = {
     value: { type: String, default: '' },
     tip: { type: String, default: '' },
+    urls: { type: String, default: '' },
     type: { type: String, default: '' },
     errMsg: { type: String, default: '' },
     rules: { type: Array, default: [] },
@@ -53,9 +58,44 @@
       function openChooseModal() {
         openModal(true);
       }
+      const state = reactive({
+        imageUrls: props.urls,
+        image_list: [
+          {
+            url: '/fake/fake.jpg',
+            preUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
+          },
+          {
+            url: '/fake1/fake1.jpg',
+            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            url: '/fake2/fake2.jpg',
+            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            url: '/fake3/fake3.jpg',
+            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            url: '/fake4/fake4.jpg',
+            preUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+          },
+          {
+            url: '/fake5/fake5.jpg',
+            preUrl: 'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
+          },
+        ],
+      });
 
-      function deleteImage() {
-        console.log('========deleteImage========');
+      function deleteImage(url) {
+        const arr = state.imageUrls.split(',');
+        arr.splice(
+          arr.findIndex((item) => item === url),
+          1
+        );
+        state.imageUrls = arr.toString();
+        console.log(`state.imageUrls`, state.imageUrls);
       }
       function checked(key, closeModal) {
         console.log(`key`, key);
@@ -69,13 +109,11 @@
         console.log('========checkedBatches========');
         emit('change');
       }
-      const image_list = [
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        'http://jetbill.cn/uploads/20210713/a05d360766d30868cdb878b4c0aac77d.jpg',
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-      ];
+      function inputChange(val) {
+        state.imageUrls = val;
+      }
+
       return {
-        image_list,
         handleChange: (list: string[]) => {
           createMessage.info(`已上传文件${JSON.stringify(list)}`);
         },
@@ -83,10 +121,12 @@
         checked,
         openChooseModal,
         deleteImage,
+        inputChange,
         uploadApi,
         chooseModalRegister,
         openModal,
         ...toRefs(props),
+        ...toRefs(state),
       };
     },
   });
@@ -95,7 +135,7 @@
   .image-list {
     display: flex;
     flex-wrap: wrap;
-    width: 65%;
+    width: 70%;
   }
 
   .image-item {

src/views/general/config/data.ts

@@ -154,6 +154,7 @@ export const columns: BasicColumn[] = [
             value: record.value,
             type: 'image',
             tip: record.tip,
+            urls: '/fake/fake.jpg,/fake1/fake1.jpg,/fake4/fake4.jpg',
             // options: record.content,
             // style: { width: '65%' },
             // onChange: onArrayChange,
@@ -163,6 +164,7 @@ export const columns: BasicColumn[] = [
             value: record.value,
             type: 'images',
             tip: record.tip,
+            urls: 'fake/fake.jpg,fake1/fake1.jpg',
             // options: record.content,
             // style: { width: '65%' },
             // onChange: onArrayChange,