feat: 公司添加和修改缩略图，隐藏移动端视角按钮

src/api/scene/sceneOperate.ts

@@ -17,7 +17,8 @@ export interface ComAddDatas {
   parent?: null | ComAddDatas;
   longitude?: number; //经度
   latitude?: number; //纬度
-  regionCode: string;
+  regionCode?: string;
+  thumbnail?: string;
 }
 
 /**

src/views/page-config/ConfigEdit.vue

@@ -39,12 +39,12 @@
               </el-radio-group></div
             >
           </div>
-          <div v-if="label" style="display: flex">
+          <!-- <div v-if="false" style="display: flex">
             <div class="label-workshop" style="margin-left: 10px">是否开启移动端视角</div>
             <div>
               <el-switch v-model="isMobileView" style="margin-left: 10px" />
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="flex">
           <!-- <el-button @click="toJson">tojson</el-button> -->

src/views/system-config/scene-manage/CompanyDrawer-shangfei.vue

@@ -154,7 +154,7 @@
       remark?: string;
       longitude?: number; //经度
       latitude?: number; //纬度
-      regionCode: string;
+      regionCode?: string;
     };
   }>();
 
@@ -188,7 +188,7 @@
     remark?: string; //备注，可用于添加经纬度，非必要
     longitude?: number; //经度
     latitude?: number; //纬度
-    regionCode: string;
+    regionCode?: string;
   }
 
   const ruleForm = reactive<RuleForm>({

src/views/system-config/scene-manage/CompanyDrawer.vue

@@ -7,6 +7,7 @@
       @close="() => emit('onClose')"
       with-header="true"
       size="35%"
+      destroy-on-close
     >
       <template #header="{ titleId }">
         <p :id="titleId">{{ title }}</p>
@@ -38,10 +39,10 @@
             >
               <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
                 <el-option
-                  v-for="item1 in props.sceneList"
-                  :key="item1.id"
-                  :label="item1.name"
-                  :value="item1.id"
+                  v-for="scene in props.sceneList"
+                  :key="scene.id"
+                  :label="scene.name"
+                  :value="scene.id"
                 />
               </el-select>
               <img
@@ -50,10 +51,10 @@
                 style="width: 16px; margin-left: 2px; margin-right: 2px" />
               <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
                 <el-option
-                  v-for="item2 in props.templateList"
-                  :key="item2.id"
-                  :label="item2.name"
-                  :value="item2.id"
+                  v-for="template in props.templateList"
+                  :key="template.id"
+                  :label="template.name"
+                  :value="template.id"
                 />
               </el-select>
               <img
@@ -77,10 +78,10 @@
         <el-form-item label="所在省市" prop="regionCode" required>
           <el-select v-model="ruleForm.regionCode" placeholder="请选择省市" style="width: 200px">
             <el-option
-              v-for="item in provinceList"
-              :key="item.regionCode"
-              :label="item.regionName"
-              :value="item.regionCode"
+              v-for="province in provinceList"
+              :key="province.regionCode"
+              :label="province.regionName"
+              :value="province.regionCode"
             />
           </el-select>
         </el-form-item>
@@ -101,6 +102,28 @@
             class="switchUse"
           />
         </el-form-item>
+        <el-form-item label="公司头像">
+          <el-upload
+            ref="uploadRef"
+            :class="{ 'no-el-upload': fileList.length > 0 }"
+            :action="actionUrl"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleUploadRemove"
+            :on-success="handleUploadSuccess"
+            :before-upload="beforeThumbnailUpload"
+            :limit="1"
+            :headers="getHeaders()"
+            :data="{ bizType: 'COMPANY_THUMBNAIL' }"
+            list-type="picture-card"
+            v-model:file-list="fileList"
+          >
+            <!-- <img v-if="ruleForm.thumbnail" :src="ruleForm.thumbnail" />
+            <el-icon v-else><Plus /></el-icon> -->
+            <el-icon v-if="!ruleForm.thumbnail || ruleForm.thumbnail.length === 0"
+              ><Plus
+            /></el-icon>
+          </el-upload>
+        </el-form-item>
       </el-form>
       <div style="position: absolute; left: 108px; bottom: 67px">
         <el-button v-if="!props.comEdit" @click="resetDrawCom">重置</el-button>
@@ -109,8 +132,11 @@
           提交
         </el-button>
       </div>
-    </el-drawer></div
-  >
+    </el-drawer>
+    <el-dialog v-model="dialogVisible">
+      <img w-full :src="dialogImageUrl" alt="Preview Image" />
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -128,7 +154,11 @@
   import { addCompany, editCompany } from '@/api/scene/sceneOperate';
   import { getProvinceList } from '@/api/system/region';
   import { useRequest } from 'vue-hooks-plus';
-  import { string } from 'vue-types';
+  import { Plus } from '@element-plus/icons-vue';
+  import { getHeaders } from '@/utils/http/axios';
+  import type { UploadRawFile, UploadFile } from 'element-plus';
+  import urlJoin from 'url-join';
+  import { useGlobSetting } from '@/hooks/setting';
 
   interface SelectItemType {
     tag: string;
@@ -150,10 +180,58 @@
       remark?: string;
       longitude?: number; //经度
       latitude?: number; //纬度
-      regionCode: string;
+      regionCode?: string;
+      thumbnail?: string;
     };
   }>();
 
+  const { urlPrefix } = useGlobSetting();
+
+  const actionUrl = computed(() => {
+    return urlJoin(urlPrefix!, `/issue/uploadPicture`);
+  });
+
+  const uploadRef = ref();
+
+  const dialogImageUrl = ref('');
+  const dialogVisible = ref(false);
+  const fileList = ref<UploadFile[]>([]);
+
+  onMounted(() => {
+    console.log('props.detail', props.detail.thumbnail);
+
+    if (props.detail.thumbnail) {
+      fileList.value.push({
+        name: '公司头像',
+        status: 'success',
+        uid: 1,
+        url: props.detail.thumbnail,
+      });
+    }
+  });
+  const beforeThumbnailUpload = (file: UploadRawFile) => {
+    if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
+      ElMessage.error('仅支持上传png/jpg/jpeg格式的图片');
+      return false;
+    } else if (file.size / 1024 / 1024 > 10) {
+      ElMessage.error('上传图片大小不能超过10MB');
+      return false;
+    }
+    return true;
+  };
+  const handlePictureCardPreview = (file: UploadFile) => {
+    dialogImageUrl.value = file.url!;
+    dialogVisible.value = true;
+  };
+
+  const handleUploadRemove = () => {
+    ruleForm.thumbnail = '';
+  };
+
+  const handleUploadSuccess = (res) => {
+    ruleForm.thumbnail = res.data.url;
+  };
+
   const title = computed(() => {
     if (props.comEdit) {
       return '编辑公司';
@@ -184,7 +262,9 @@
     remark?: string; //备注，可用于添加经纬度，非必要
     longitude?: number; //经度
     latitude?: number; //纬度
-    regionCode: string;
+    regionCode?: string;
+    /** 公司缩略图 */
+    thumbnail?: string;
   }
 
   const ruleForm = reactive<RuleForm>({
@@ -240,6 +320,7 @@
       ruleForm.latitude = data.latitude;
       ruleForm.longitude = data.longitude;
       ruleForm.regionCode = data.regionCode;
+      ruleForm.thumbnail = data.thumbnail;
     },
     { immediate: true },
   );
@@ -309,6 +390,7 @@
           longitude: ruleForm.longitude,
           latitude: ruleForm.latitude,
           regionCode: ruleForm.regionCode,
+          thumbnail: ruleForm.thumbnail,
         };
         //提交数据并重置关闭el-draw
         addCompany(newComData)
@@ -378,6 +460,7 @@
         longitude: ruleForm.longitude,
         latitude: ruleForm.latitude,
         regionCode: ruleForm.regionCode,
+        thumbnail: ruleForm.thumbnail,
       };
       // 编辑上传
       editCompany(editNewCom)
@@ -409,4 +492,8 @@
   };
 </script>
 
-<style scoped></style>
+<style scoped>
+  :deep(.no-el-upload .el-upload--picture-card) {
+    display: none;
+  }
+</style>

src/views/system-config/scene-manage/SceneManage.vue

@@ -428,6 +428,7 @@
         longitude: editedItem.value?.longitude!,
         latitude: editedItem.value?.latitude!,
         regionCode: editedItem.value?.regionCode,
+        thumbnail: editedItem.value?.thumbnail,
       };
     } else if (level.value === DATA_LEVEL.workshop && 'companyId' in editedItem.value!) {
       showDrawer.value = DrawerType.workshop;