修复部分bug

src/views/basicdata/carrier/basicdataCarrier2.vue

@@ -95,6 +95,7 @@
           :fullscreen="details.fullscreenObj.dialogVisible"
           :show-close="false"
           draggable
+          overflow
         >
           <!-- 标题 -- 头部控件区 -->
           <template #header="{ close, titleId, titleClass }">
@@ -104,16 +105,16 @@
                 <div @click="() => handleFullScrean('dialogVisible')" class="mr20">
                   <!-- 全屏显示按钮 -->
                   <el-button type="text" v-if="!details.fullscreenObj.dialogVisible">
-                    <el-icon size="20px" class=""><FullScreen /></el-icon>
+                    <el-icon size="18px" class=""><FullScreen /></el-icon>
                   </el-button>
                   <el-button type="text" v-else>
-                    <el-icon size="20px" class=""><CopyDocument /></el-icon>
+                    <el-icon size="18px" class=""><CopyDocument /></el-icon>
                   </el-button>
                 </div>
 
                 <!-- 弹窗关闭按钮 -->
                 <el-button type="text">
-                  <el-icon size="20px" class="" @click="close"><Close /></el-icon>
+                  <el-icon size="18px" class="" @click="close"><Close /></el-icon>
                 </el-button>
               </div>
             </div>
@@ -197,6 +198,47 @@
                   />
                 </template>
               </el-form-item>
+
+              <el-form-item label="道路运输许可证图片" class="w100">
+                <div class="w100">
+                  <el-upload
+                    v-model:file-list="details.imgList"
+                    list-type="picture"
+                    :action="doubledCount"
+                    :before-upload="beforeAvatarUpload"
+                    :on-success="res => handleAvatarSuccess(res)"
+                    :headers="headers"
+                    multiple
+                    :show-file-list="false"
+                  >
+                    <template #default>
+                      <div class="pageTitle title mb20">
+                        <el-button type="primary" icon="CirclePlus"> 添 加 </el-button>
+
+                        <!-- <el-button icon="Delete" @click.stop="() => handleEmpty(item)"> 清 空 </el-button> -->
+                      </div>
+                    </template>
+                  </el-upload>
+
+                  <div class="imgRow">
+                    <div v-for="(value, index) in details.imgList" :key="value.url">
+                      <el-image
+                        class="img"
+                        :src="value.url"
+                        v-loading="!value.imgUrl"
+                        :zoom-rate="1.2"
+                        :max-scale="7"
+                        :min-scale="0.2"
+                        :preview-src-list="details.imgList.map(val => val.imgUrl)"
+                        :initial-index="index"
+                        fit="cover"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </el-form-item>
+
+              <el-form-item label="合同附件"></el-form-item>
             </el-form>
           </div>
 
@@ -242,6 +284,8 @@ import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
 import functions from '@/utils/functions.js';
 import dayjs from 'dayjs';
 import { mapGetters } from 'vuex';
+import { getToken } from '@/utils/auth';
+import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
 /** 获取字典 */
 import { getDictionaryBiz } from '@/api/system/dict';
 import {
@@ -334,6 +378,7 @@ const details = reactive<any>({
     dialogVisible: false,
   },
   formOptions: deepClone(formOptions),
+  imgList: [],
 });
 
 const { search, query, shortcuts, stockupDate, data, loadingObj, selectionList, drawerShow, page } =
@@ -547,6 +592,56 @@ const handleDelete = (isBatch, row: any = {}) => {
     })
     .catch(() => {});
 };
+
+// 图片上传接口
+const doubledCount = computed(() => {
+  return '/api/blade-resource/oss/endpoint/put-file';
+});
+
+// 上传图片规则
+const beforeAvatarUpload = async rawFile => {
+  console.log(rawFile);
+  if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
+    ElMessage.error('图片格式只能为 png/jpg!');
+    return false;
+  } else if (rawFile.size / 1024 / 1024 > 10) {
+    ElMessage.error('图片大小不能大于10MB!');
+    return false;
+  }
+  const res = await compressImageBlob(rawFile);
+  return res;
+};
+
+// 图片上传必须携带TOKEN
+const headers = computed(() => {
+  return { 'Blade-Auth': 'Bearer ' + getToken() };
+});
+
+// 图片上传成功
+const handleAvatarSuccess = response => {
+  for (let i = 0; i < details.imgList.length; i++) {
+    const value = details.imgList[i];
+    console.log('value :>> ', value);
+    value.imgUrl =
+      value.response && value.response.code === 200 ? value.response.data.link : value.imgUrl || '';
+  }
+  ElMessage.success('上传成功');
+};
+
+/** 确认清空 */
+const handleEmpty = item => {
+  if (item.imgList.length === 0) return ElMessage.warning('没有图片可以清空');
+
+  ElMessageBox.confirm('确定要清空吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => {
+      item.imgList = [];
+    })
+    .catch(() => {});
+};
 </script>
 
 <style scoped lang="scss">
@@ -598,4 +693,15 @@ const handleDelete = (isBatch, row: any = {}) => {
 :deep(.el-input__inner) {
   text-align: left;
 }
+
+.imgRow {
+  display: flex;
+  flex-wrap: wrap;
+  .img {
+    margin: 10px;
+    border-radius: 5px;
+    width: 100px;
+    height: 100px;
+  }
+}
 </style>