feat: 驿站人员头像

vue/src/views/baseSettings/siteUser/detail.vue

@@ -4,6 +4,10 @@
     <a-descriptions bordered>
       <a-descriptions-item label="姓名">{{ siteUserInfo.siteUserName }}</a-descriptions-item>
       <a-descriptions-item label="性别">{{ siteUserInfo.genderName }}</a-descriptions-item>
+      <a-descriptions-item label="头像">
+        <img v-if="!avtImageUrl" src="~@/assets/images/admin.png" alt="" class="avt-img"/>
+        <img v-else :src="avtImageUrl" alt="" style="border-radius: 50%" class="avt-img"/>
+      </a-descriptions-item>
       <a-descriptions-item label="联系电话">{{ siteUserInfo.mobile }}</a-descriptions-item>
       <a-descriptions-item label="工号">{{ siteUserInfo.userNo }}</a-descriptions-item>
       <a-descriptions-item label="用户类型">{{ siteUserInfo.roleName }}</a-descriptions-item>
@@ -27,18 +31,23 @@
       <a-descriptions-item label="邮箱">{{ siteUserInfo.email }}</a-descriptions-item>
       <a-descriptions-item label="住址">{{ siteUserInfo.address }}</a-descriptions-item>
     </a-descriptions>
-    <a-divider orientation="left">相片</a-divider>
-    <b-upload-file :fileRefId="siteUserInfo.userID" :readonly="true" :multiple="false" :restrict="1"
-                   :setFileList="setFileList" :accept="'.pdf,.png,.jpg'"></b-upload-file>
+    <!--    <a-divider orientation="left">相片</a-divider>-->
+    <!--    <b-upload-file :fileRefId="siteUserInfo.userID" :readonly="true" :multiple="false" :restrict="1"-->
+    <!--                   :setFileList="setFileList" :accept="'.pdf,.png,.jpg'"></b-upload-file>-->
   </div>
 </template>
 
 <script setup lang="ts">
 import {onMounted, reactive, ref} from "vue";
 import {getSiteUserByID} from "@/api/baseSettings/userInfo";
-import BUploadFile from "@/components/file/uploadFile.vue";
+// import BUploadFile from "@/components/file/uploadFile.vue";
 import dayjs from "dayjs";
+// import {useUserStore} from "@/store/modules/user";
+import {getFileBase64, getList} from "@/api/system/file";
+import {base64ToBlob} from "@/utils/imageUtils";
 
+// const userStore = useUserStore();
+// const userInfo = reactive(userStore.getUserInfo);
 // 站点人员信息
 const siteUserInfo = reactive({
   siteUserID: "",
@@ -64,12 +73,14 @@ const siteUserInfo = reactive({
   updateUserName: "",
   updateTime: ""
 })
+// 头像图片
+const avtImageUrl = ref<any>("")
 
 // 文件列表
-const fileList = ref();
-const setFileList = (files) => {
-  fileList.value = files;
-};
+// const fileList = ref();
+// const setFileList = (files) => {
+//   fileList.value = files;
+// };
 
 // 站点人员数据加载
 function loadData(siteUserID: string) {
@@ -77,9 +88,26 @@ function loadData(siteUserID: string) {
     Object.keys(siteUserInfo).forEach(key => {
       siteUserInfo[key] = result[key];
     })
+    getAvtImag(result.userID)
   });
 }
 
+// 获取头像
+function getAvtImag(fileRefID) {
+  getList({fileRefID}).then((res) => {
+    if (!res) {
+      avtImageUrl.value = false;
+    } else {
+      // 获取图片
+      getFileBase64({fileId: res[0].fileId}).then(data => {
+        if (data) {
+          avtImageUrl.value = URL.createObjectURL(base64ToBlob("data:image/png;base64," + data));
+        }
+      })
+    }
+  })
+}
+
 // 页面初始化
 onMounted(() => {
   const id = history.state.params?.id;
@@ -87,6 +115,9 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-
+<style lang="less">
+.avt-img {
+  width: 40px;
+  height: 40px;
+}
 </style>