添加修改头像功能

OrangeFormsOpen-VUE3/components.d.ts

@@ -77,6 +77,7 @@ declare module 'vue' {
     InputNumberRange: typeof import('./src/components/InputNumberRange/index.vue')['default']
     Layout: typeof import('./src/components/layout/index.vue')['default']
     LayoutComponentsBreadCrumb: typeof import('./src/components/layout/components/BreadCrumb.vue')['default']
+    LayoutComponentsFormModifyHeadImage: typeof import('./src/components/layout/components/formModifyHeadImage/index.vue')['default']
     LayoutComponentsFormModifyPassword: typeof import('./src/components/layout/components/formModifyPassword/index.vue')['default']
     LayoutComponentsMultiColumn: typeof import('./src/components/layout/components/multi-column.vue')['default']
     LayoutComponentsMultiColumnMenu: typeof import('./src/components/layout/components/multi-column-menu.vue')['default']

OrangeFormsOpen-VUE3/src/api/system/LoginController.ts

@@ -1,9 +1,9 @@
-import { API_CONTEXT } from '../config';
 import { loginParam, LoginUserInfo } from '@/types/upms/login';
 import { UserInfo } from '@/types/upms/user';
 import { BaseController } from '@/api/BaseController';
 import { RequestOption, TableData } from '@/common/http/types';
 import { ANY_OBJECT } from '@/types/generic';
+import { API_CONTEXT } from '../config';
 
 export default class LoginController extends BaseController {
   static login(params: loginParam) {
@@ -17,4 +17,8 @@ export default class LoginController extends BaseController {
   static changePassword(params: ANY_OBJECT, httpOptions?: RequestOption) {
     return super.post(API_CONTEXT + '/upms/login/changePassword', params, httpOptions);
   }
+
+  static changeHeadImageUrl() {
+    return API_CONTEXT + '/upms/login/changeHeadImage';
+  }
 }

OrangeFormsOpen-VUE3/src/common/staticDict/combined.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/namespace
 import * as generatedDict from './generated';
 import * as baseDict from './index';
 

OrangeFormsOpen-VUE3/src/components/layout/components/formModifyHeadImage/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="form-single-fragment" style="position: relative">
+    <el-form
+      ref="formModifyPassword"
+      class="full-width-input"
+      style="width: 100%"
+      label-width="80px"
+      :size="defaultFormItemSize"
+      label-position="right"
+      @submit.prevent
+    >
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form-item label="用户头像">
+            <el-upload
+              class="upload-image-item"
+              name="uploadFile"
+              :headers="getUploadHeaders"
+              :action="headImageUploadUrl"
+              :show-file-list="false"
+              accept=".jpg,.png,.jpeg"
+              :on-success="onHeadImageUploadSuccess"
+              :on-error="onUploadError"
+              :on-exceed="onUploadLimit"
+            >
+              <img v-if="getHeadImageUrl()" class="upload-image-show" :src="getHeadImageUrl()" />
+              <i v-else class="el-icon-plus upload-image-item" />
+            </el-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ElMessage, UploadFile } from 'element-plus';
+import { ANY_OBJECT } from '@/types/generic';
+import { useUpload } from '@/common/hooks/useUpload';
+import { useLoginStore } from '@/store';
+import LoginController from '@/api/system/LoginController';
+import { SystemController } from '@/api';
+
+const { getUploadFileUrl, getUploadActionUrl, getUploadHeaders } = useUpload();
+const loginStore = useLoginStore();
+const userInfo = loginStore.userInfo;
+
+const onHeadImageUploadSuccess = (
+  response: ANY_OBJECT,
+  file: UploadFile,
+  fileList: UploadFile[],
+) => {
+  if (response.success) {
+    loginStore.setHeadImage(response.data);
+  } else {
+    ElMessage.error(response.message);
+  }
+};
+
+const onUploadError = (e, file, fileList) => {
+  ElMessage.error('文件上传失败');
+};
+const onUploadLimit = (files, fileList) => {
+  ElMessage.error('已经超出最大上传个数限制');
+};
+
+const getHeadImageUrl = () => {
+  if (userInfo && userInfo.headImageUrl != null && userInfo.headImageUrl !== '') {
+    let temp = getUploadFileUrl(userInfo.headImageUrl, {
+      filename: userInfo.headImageUrl.filename,
+    });
+    return temp;
+  } else {
+    return null;
+  }
+};
+
+const headImageUploadUrl = computed(() => {
+  return getUploadActionUrl(LoginController.changeHeadImageUrl());
+});
+</script>
+
+<style></style>

OrangeFormsOpen-VUE3/src/components/layout/index.vue

@@ -135,11 +135,12 @@ import { SysMenuBindType, SysOnlineFormType } from '@/common/staticDict';
 import LoginController from '@/api/system/LoginController';
 import { MenuItem } from '@/types/upms/menu';
 import { useUpload } from '@/common/hooks/useUpload';
+import { useCommon } from '@/common/hooks/useCommon';
 import Sidebar from './components/Sidebar.vue';
 import BreadCrumb from './components/BreadCrumb.vue';
 import TagPanel from './components/TagPanel.vue';
-import { useCommon } from '@/common/hooks/useCommon';
 import FormModifyPassword from './components/formModifyPassword/index.vue';
+import FormModifyHeadImage from './components/formModifyHeadImage/index.vue';
 
 const { Dialog } = useCommon();
 const router = useRouter();
@@ -340,6 +341,9 @@ const handleCommand = (command: string) => {
     case 'modifyPassword':
       Dialog.show('修改密码', FormModifyPassword, { area: '500px' }, {});
       break;
+    case 'modifyHeadImage':
+      Dialog.show('修改头像', FormModifyHeadImage, { area: '500px' }, {});
+      break;
     default:
       ElMessage.warning(`click on item ${command}`);
       break;

OrangeFormsOpen-VUE3/src/online/components/OnlineCustomUpload.vue

@@ -170,8 +170,9 @@ const uploadWidgetImpl = reactive(
 
 const getDisabledStatus = () => {
   if (form().isEdit) return true;
-  const formWidgetAuth: ANY_OBJECT | null = form().formAuth && form().formAuth() && form().formAuth().pc
+  const formWidgetAuth: ANY_OBJECT | null =
-    ? form().formAuth().pc[pps.widget.variableName]
+    form().formAuth && form().formAuth() && form().formAuth().pc
+      ? form().formAuth().pc[props.widget.variableName]
       : null;
   if (formWidgetAuth && formWidgetAuth.disabled) return true;
   return props.widget.props.disabled;

OrangeFormsOpen-VUE3/src/online/components/OnlineCustomWidget.vue

@@ -355,7 +355,8 @@ const getWidgetProps = computed(() => {
 });
 
 const getDisabledStatus = () => {
-  const formWidgetAuth: ANY_OBJECT | null = form().formAuth && form().formAuth() && form().formAuth().pc
+  const formWidgetAuth: ANY_OBJECT | null =
+    form().formAuth && form().formAuth() && form().formAuth().pc
       ? form().formAuth().pc[pps.widget.variableName]
       : null;
   if (formWidgetAuth && formWidgetAuth.disabled) return true;

OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/OnlineEditForm/index.vue

@@ -482,9 +482,9 @@ const initFormData = () => {
       // 如果是复制，清空主键以及自动编码字段
       let clearColumnList: string[] = [];
       if (isRelation.value) {
-        formData[masterTable.value.relation.variableName] = {
+        Object.keys(dialogParams.value.rowData).forEach(key => {
-          ...dialogParams.value.rowData,
+          formData[masterTable.value.relation.variableName][key] = dialogParams.value.rowData[key];
-        };
+        });
         clearFormData(formData[masterTable.value.relation.variableName], clearColumnList);
         resolve();
       } else {

OrangeFormsOpen-VUE3/src/pages/online/OnlinePageRender/hooks/useForm.ts

@@ -144,9 +144,8 @@ export const useForm = (props: ANY_OBJECT, formRef: Ref<FormInstance> | null = n
     }
   };
   const getWidgetVisible = widget => {
-    const formWidgetAuth: ANY_OBJECT | null = formAuth.value && formAuth.value.pc
+    const formWidgetAuth: ANY_OBJECT | null =
-      ? formAuth.value.pc[widget.variableName]
+      formAuth.value && formAuth.value.pc ? formAuth.value.pc[widget.variableName] : null;
-      : null;
     if (formWidgetAuth && formWidgetAuth.hide) return false;
     return true;
   };

OrangeFormsOpen-VUE3/src/store/login.ts

@@ -19,6 +19,10 @@ export default defineStore('login', {
     setUserInfo(info: UserInfo) {
       this.userInfo = initUserInfo(info);
     },
+    setHeadImage(headImage: (string & { downloadUri: string; filename: string }) | null) {
+      if (this.userInfo == null) return;
+      this.userInfo.headImageUrl = headImage;
+    },
   },
   persist: {
     // 开启持久存储