easydo-mes-web/src/views/userCenter/index.vue

<template>
    <el-container class="user-container">
        <el-card header="个人信息">
            <el-avatar :size="70"><sc-iconify icon="ep:avatar" size="45"></sc-iconify></el-avatar>
            <el-form>
                <el-divider></el-divider>
                <el-form-item>
                    <template #label><sc-iconify icon="material-symbols:login-rounded"></sc-iconify>登录账号</template>
                    <vxe-text-ellipsis :title="$TOOL.data.get('USER_INFO').username" :content="$TOOL.data.get('USER_INFO').username"></vxe-text-ellipsis>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item>
                    <template #label><sc-iconify icon="Nickname"></sc-iconify>用户昵称</template>
                    <vxe-text-ellipsis :title="$TOOL.data.get('USER_INFO').nickName" :content="$TOOL.data.get('USER_INFO').nickName"></vxe-text-ellipsis>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item>
                    <template #label><sc-iconify icon="ant-design:apartment-outlined"></sc-iconify>所属企业</template>
                    <vxe-text-ellipsis :title="XEUtils.get($TOOL.data.get('USER_INFO'), 'dept.name', '暂未设置')" :content="XEUtils.get($TOOL.data.get('USER_INFO'), 'dept.name', '暂未设置')"></vxe-text-ellipsis>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item>
                    <template #label><sc-iconify icon="roentgen:phone"></sc-iconify>手机号码</template>
                    <vxe-text-ellipsis :title="$TOOL.data.get('USER_INFO').phone" :content="$TOOL.data.get('USER_INFO').phone"></vxe-text-ellipsis>
                </el-form-item>
                <el-divider></el-divider>
                <el-form-item>
                    <template #label><sc-iconify icon="mdi:email-outline"></sc-iconify>用户邮箱</template>
                    <vxe-text-ellipsis :title="$TOOL.data.get('USER_INFO').email" :content="$TOOL.data.get('USER_INFO').email"></vxe-text-ellipsis>
                </el-form-item>
                <el-divider></el-divider>
            </el-form>
        </el-card>
        
        <el-card header="基本资料">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100">
                <el-form-item label="用户昵称" prop="nickName">
                    <el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱">
                    <el-input v-model="form.email" placeholder="请输入用户邮箱"></el-input>
                </el-form-item>
                <el-form-item label="用户性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="isSaving" type="primary" auto-insert-space @click="submit">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-container>
</template>

<script setup>
import XEUtils from "xe-utils";

import API from "@/api";
import TOOL from "@/utils/tool";
const store = useStore();

const isSaving = ref(false);
const form = ref(XEUtils.clone(TOOL.data.get("USER_INFO"), true));
const rules = reactive({
    nickName: [{ required: true, message: "用户昵称不能为空" }],
    phone: [{ pattern: /^\d{11}$/, message: "请输入11位手机号码" }]
});

const formRef = ref();
const submit = () => {
    formRef.value.validate(valid => {
        if (valid) {
            const data = XEUtils.omit(form.value, "dept", "password", "pwdResetTime", "roleList");
            XEUtils.set(data, "roleList", XEUtils.map(form.value.roleList, item => ({ id: item.id })));

            isSaving.value = true;
            API.auth.user.edit(data).then(res => {
                isSaving.value = false;
                ElMessage.success("操作成功");
                TOOL.data.set("USER_INFO", form.value);
                
                setTimeout(() => {
                    store.commit("setRouteShow", false);
                    nextTick(() => store.commit("setRouteShow", true));
                }, 0);

            }).catch(() => isSaving.value = false);
        } else {
            return false;
        }
    });
}
</script>

<style lang="scss" scoped>
.user-container {padding: 20px;}

.user-container .el-card {
    --el-card-border-radius: 8px;width: 300px;height: fit-content;
    :deep(.el-card__body) {padding: 24px;text-align: center;}
    .el-avatar {margin-top: 10px;margin-bottom: 24px;}
    .el-avatar .sc-iconify-icon {top: -2px;}
    .el-divider {margin: 4px 0;border-color: var(--el-border-color-lighter);}
    .el-form .el-form-item {margin-bottom: 0;color: rgba(0, 0, 0, 0.88);}
    .el-form :deep(.el-form-item__label) {display: flex;align-items: center;color: rgba(0, 0, 0, 0.88);}
    .el-form :deep(.el-form-item__label) .sc-iconify-icon {margin-right: 6px;}
}

.el-card + .el-card {flex: 1;margin-left: 20px;
    .el-form {padding-right: 16px;}
    .el-form .el-form-item {margin-bottom: 18px;}
}

@media (max-width: 992px) {
    .user-container .el-card {width: 100%;}
    .el-card + .el-card {margin-top: 15px;margin-left: 0;}
}
</style>