fix(baseinfo): 修复基础资料上传头像不显示bug

Author: Hacker233

src/components.d.ts

@@ -27,6 +27,8 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton'];
     ElCarousel: typeof import('element-plus/es')['ElCarousel'];
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'];
+    ElCollapse: typeof import('element-plus/es')['ElCollapse'];
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'];
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'];
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker'];
     ElDialog: typeof import('element-plus/es')['ElDialog'];

src/material/BaseInfo/BaseInfo4/BaseInfo.vue

@@ -25,7 +25,10 @@
       </template>
       <template v-else>
         <div v-show="isShow.avatar" class="avatar-shape-box">
-          <component :is="avatarComponents[modelData.avatarShape]"></component>
+          <component
+            :is="avatarComponents[modelData.avatarShape]"
+            :model-data="modelData"
+          ></component>
         </div>
       </template>
     </div>

src/material/BaseInfo/BaseInfo5/BaseInfo.vue

@@ -23,7 +23,10 @@
       </template>
       <template v-else>
         <div v-show="isShow.avatar" class="avatar-shape-box">
-          <component :is="avatarComponents[modelData.avatarShape]"></component>
+          <component
+            :is="avatarComponents[modelData.avatarShape]"
+            :model-data="modelData"
+          ></component>
         </div>
       </template>
     </div>

src/material/BaseInfo/BaseInfo6/BaseInfo.vue

@@ -11,7 +11,10 @@
         </template>
         <template v-else>
           <div v-show="isShow.avatar" class="avatar-shape-box">
-            <component :is="avatarComponents[modelData.avatarShape]"></component>
+            <component
+              :is="avatarComponents[modelData.avatarShape]"
+              :model-data="modelData"
+            ></component>
           </div>
         </template>
         <div class="right">

src/material/BaseInfo/BaseInfo7/BaseInfo.vue

@@ -11,7 +11,10 @@
         </template>
         <template v-else>
           <div v-show="isShow.avatar" class="avatar-shape-box">
-            <component :is="avatarComponents[modelData.avatarShape]"></component>
+            <component
+              :is="avatarComponents[modelData.avatarShape]"
+              :model-data="modelData"
+            ></component>
           </div>
         </template>
         <div class="right">

src/material/Common/BaseInfo/components/avatar/avatar1.vue

@@ -6,7 +6,7 @@
   </template>
   <template v-else>
     <div v-show="isShow.avatar" class="avatar-shape-box">
-      <component :is="avatarComponents[modelData.avatarShape]"></component>
+      <component :is="avatarComponents[modelData.avatarShape]" :model-data="modelData"></component>
     </div>
   </template>
 </template>

src/options/BaseInfoOptions_1.vue

@@ -5,7 +5,10 @@
       <el-form label-width="100px" label-position="left">
         <!-- 头像形状选择 -->
         <el-form-item label="头像形状选择:">
-          <el-input v-model="modelItem.data.name" type="text" maxlength="15" show-word-limit />
+          <avatar-popover-shape-vue
+            :model-item="modelItem"
+            @change-shape="handleChangeShape"
+          ></avatar-popover-shape-vue>
         </el-form-item>
         <!-- 公共样式属性 -->
         <common-options></common-options>
@@ -68,6 +71,7 @@
   import useDesignSelectModelItem from '@/hooks/material/useDesignSelectModelItem';
   import CONFIG from '@/config';
   import appStore from '@/store';
+  import AvatarPopoverShapeVue from '@/components/AvatarPopoverShape/AvatarPopoverShape.vue';
   defineOptions({ name: 'BASE_INFO_OPTIONS' });
   // 选中的模块
   const { modelItem } = useDesignSelectModelItem();
@@ -97,6 +101,12 @@
     }
     return true;
   };
+
+  // 改变头像形状
+  const handleChangeShape = (value: string | number) => {
+    modelItem.data.avatarShape = value;
+    console.log('切换头像后的数据', modelItem.data);
+  };
 </script>
 <style lang="scss">
   .avatar-uploader .el-upload {