mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-13 02:25:06 +08:00
feat: add vue3(element-plus)
This commit is contained in:
xingyu
@ -0,0 +1,91 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import type { FormRules, FormInstance } from 'element-plus'
|
||||
import { ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElMessage } from 'element-plus'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { getUserProfileApi, updateUserProfileApi } from '@/api/system/user/profile'
|
||||
const { t } = useI18n()
|
||||
const formRef = ref<FormInstance>()
|
||||
interface BasicUserInfoVO {
|
||||
id: number
|
||||
nickname: string
|
||||
email: string
|
||||
mobile: string
|
||||
sex: number
|
||||
}
|
||||
interface userInfoType {
|
||||
basicUserInfo: BasicUserInfoVO
|
||||
}
|
||||
const user = reactive<userInfoType>({
|
||||
basicUserInfo: {
|
||||
id: 0,
|
||||
nickname: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
sex: 0
|
||||
}
|
||||
})
|
||||
// 表单校验
|
||||
const rules = reactive<FormRules>({
|
||||
nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
|
||||
email: [
|
||||
{ required: true, message: t('profile.rules.mail'), trigger: 'blur' },
|
||||
{
|
||||
type: 'email',
|
||||
message: t('profile.rules.truemail'),
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
mobile: [
|
||||
{ required: true, message: t('profile.rules.phone'), trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: t('profile.rules.truephone'),
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
const submit = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate(async (valid) => {
|
||||
if (valid) {
|
||||
await updateUserProfileApi({ params: user.basicUserInfo })
|
||||
ElMessage.success(t('common.updateSuccess'))
|
||||
}
|
||||
})
|
||||
}
|
||||
const reset = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
await getUserInfo()
|
||||
}
|
||||
const getUserInfo = async () => {
|
||||
const users = await getUserProfileApi()
|
||||
user.basicUserInfo = users
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getUserInfo()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<el-form ref="form" :model="user.basicUserInfo" :rules="rules" label-width="80px">
|
||||
<el-form-item :label="t('profile.user.nickname')" prop="nickname">
|
||||
<el-input v-model="user.basicUserInfo.nickname" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('profile.user.mobile')" prop="mobile">
|
||||
<el-input v-model="user.basicUserInfo.mobile" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('profile.user.email')" prop="email">
|
||||
<el-input v-model="user.basicUserInfo.email" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('profile.user.sex')" prop="sex">
|
||||
<el-radio-group v-model="user.basicUserInfo.sex">
|
||||
<el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
|
||||
<el-radio :label="2">{{ t('profile.user.woman') }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit(formRef)">{{ t('common.save') }}</el-button>
|
||||
<el-button type="danger" @click="reset(formRef)">{{ t('common.reset') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
113
yudao-ui-admin-vue3/src/views/Profile/components/ProfileUser.vue
Normal file
113
yudao-ui-admin-vue3/src/views/Profile/components/ProfileUser.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
import { getUserProfileApi } from '@/api/system/user/profile'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { UserAvatarVue } from './'
|
||||
import { ProfileVO } from '@/api/system/user/profile/types'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const { t } = useI18n()
|
||||
interface userInfoType {
|
||||
user: ProfileVO
|
||||
}
|
||||
const userInfo = reactive<userInfoType>({
|
||||
user: {
|
||||
id: 0,
|
||||
username: '',
|
||||
nickname: '',
|
||||
dept: {
|
||||
id: 0,
|
||||
name: ''
|
||||
},
|
||||
roles: [],
|
||||
posts: [],
|
||||
socialUsers: [],
|
||||
email: '',
|
||||
mobile: '',
|
||||
sex: 0,
|
||||
avatar: '',
|
||||
status: 0,
|
||||
remark: '',
|
||||
loginIp: '',
|
||||
loginDate: new Date(),
|
||||
createTime: new Date()
|
||||
}
|
||||
})
|
||||
const getUserInfo = async () => {
|
||||
const users = await getUserProfileApi()
|
||||
userInfo.user = users
|
||||
}
|
||||
onMounted(async () => {
|
||||
await getUserInfo()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<UserAvatarVue :img="userInfo.user.avatar" />
|
||||
</div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<Icon icon="ep:user" class="mr-5px" />{{ t('profile.user.username') }}
|
||||
<div class="pull-right">{{ userInfo.user.username }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<Icon icon="ep:phone" class="mr-5px" />{{ t('profile.user.mobile') }}
|
||||
<div class="pull-right">{{ userInfo.user.mobile }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<Icon icon="fontisto:email" class="mr-5px" />{{ t('profile.user.email') }}
|
||||
<div class="pull-right">{{ userInfo.user.email }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<Icon icon="carbon:tree-view-alt" class="mr-5px" />{{ t('profile.user.dept') }}
|
||||
<div class="pull-right" v-if="userInfo.user.dept">{{ userInfo.user.dept.name }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<Icon icon="ep:suitcase" class="mr-5px" />{{ t('profile.user.posts') }}
|
||||
<div class="pull-right" v-if="userInfo.user.posts">
|
||||
{{ userInfo.user.posts.map((post) => post.name).join(',') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<Icon icon="icon-park-outline:peoples" class="mr-5px" />{{ t('profile.user.roles') }}
|
||||
<div class="pull-right" v-if="userInfo.user.roles">
|
||||
{{ userInfo.user.roles.map((role) => role.name).join(',') }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<Icon icon="ep:calendar" class="mr-5px" />{{ t('profile.user.createTime') }}
|
||||
<div class="pull-right">{{ dayjs(userInfo.user.createTime).format('YYYY-MM-DD') }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.text-center {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 120px;
|
||||
}
|
||||
.list-group-striped > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-bottom: 1px solid #e7eaec;
|
||||
border-top: 1px solid #e7eaec;
|
||||
margin-bottom: -1px;
|
||||
padding: 11px 0px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<script setup lang="ts">
|
||||
import { InputPassword } from '@/components/InputPassword'
|
||||
import { ElForm, ElFormItem, ElMessage } from 'element-plus'
|
||||
import type { FormRules, FormInstance } from 'element-plus'
|
||||
import { updateUserPwdApi } from '@/api/system/user/profile'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
const { t } = useI18n()
|
||||
const formRef = ref<FormInstance>()
|
||||
const password = reactive({
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
// 表单校验
|
||||
const equalToPassword = (value, callback) => {
|
||||
if (password.newPassword !== value) {
|
||||
callback(new Error(t('profile.password.diffPwd')))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const rules = reactive<FormRules>({
|
||||
oldPassword: [
|
||||
{ required: true, message: t('profile.password.oldPwdMsg'), trigger: 'blur' },
|
||||
{ min: 3, max: 5, message: t('profile.password.pwdRules'), trigger: 'blur' }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: t('profile.password.newPwdMsg'), trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: t('profile.password.pwdRules'), trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: t('profile.password.cfPwdMsg'), trigger: 'blur' },
|
||||
{ required: true, validator: equalToPassword, trigger: 'blur' }
|
||||
]
|
||||
})
|
||||
const submit = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.validate(async (valid) => {
|
||||
if (valid) {
|
||||
await updateUserPwdApi(password.oldPassword, password.newPassword)
|
||||
ElMessage.success(t('common.updateSuccess'))
|
||||
}
|
||||
})
|
||||
}
|
||||
const reset = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<el-form ref="formRef" :model="password" :rules="rules" label-width="80px">
|
||||
<el-form-item :label="t('profile.password.oldPassword')">
|
||||
<InputPassword v-model="password.oldPassword" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('profile.password.newPassword')">
|
||||
<InputPassword v-model="password.newPassword" strength />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('profile.password.confirmPassword')">
|
||||
<InputPassword v-model="password.confirmPassword" strength />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit(formRef)">{{ t('common.save') }}</el-button>
|
||||
<el-button type="danger" @click="reset(formRef)">{{ t('common.reset') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
202
yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue
Normal file
202
yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue
Normal file
@ -0,0 +1,202 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import 'vue-cropper/dist/index.css'
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
import { ElRow, ElCol, ElUpload, ElMessage } from 'element-plus'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
import { uploadAvatarApi } from '@/api/system/user/profile'
|
||||
const cropper = ref()
|
||||
const props = defineProps({
|
||||
img: propTypes.string.def('')
|
||||
})
|
||||
const state = reactive({
|
||||
dialogVisible: false,
|
||||
cropperVisible: false,
|
||||
dialogTitle: '编辑头像',
|
||||
options: {
|
||||
img: props.img, //裁剪图片的地址
|
||||
autoCrop: true, // 是否默认生成截图框
|
||||
autoCropWidth: 200, // 默认生成截图框宽度
|
||||
autoCropHeight: 200, // 默认生成截图框高度
|
||||
fixedBox: true // 固定截图框大小 不允许改变
|
||||
},
|
||||
previews: {
|
||||
img: '',
|
||||
url: ''
|
||||
}
|
||||
})
|
||||
/** 编辑头像 */
|
||||
const editCropper = () => {
|
||||
state.dialogVisible = true
|
||||
state.cropperVisible = true
|
||||
}
|
||||
/** 覆盖默认上传行为 */
|
||||
const requestUpload = () => {}
|
||||
/** 向左旋转 */
|
||||
const rotateLeft = () => {
|
||||
cropper.value.rotateLeft()
|
||||
}
|
||||
/** 向右旋转 */
|
||||
const rotateRight = () => {
|
||||
cropper.value.rotateRight()
|
||||
}
|
||||
/** 图片缩放 */
|
||||
const changeScale = (num: number) => {
|
||||
num = num || 1
|
||||
cropper.value.changeScale(num)
|
||||
}
|
||||
/** 上传预处理 */
|
||||
const beforeUpload = (file: Blob) => {
|
||||
if (file.type.indexOf('image/') == -1) {
|
||||
ElMessage('文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。')
|
||||
} else {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => {
|
||||
state.options.img = reader.result
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 上传图片 */
|
||||
const uploadImg = () => {
|
||||
cropper.value.getCropBlob((data) => {
|
||||
let formData = new FormData()
|
||||
formData.append('avatarfile', data)
|
||||
uploadAvatarApi(formData)
|
||||
})
|
||||
}
|
||||
/** 实时预览 */
|
||||
const realTime = (data) => {
|
||||
state.previews = data
|
||||
}
|
||||
watch(
|
||||
() => props.img,
|
||||
() => {
|
||||
if (props.img) {
|
||||
state.options.img = props.img
|
||||
state.previews.img = props.img
|
||||
state.previews.url = props.img
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<div class="user-info-head" @click="editCropper()">
|
||||
<img :src="state.options.img" title="点击上传头像" class="img-circle img-lg" alt="" />
|
||||
</div>
|
||||
<Dialog
|
||||
v-model="state.dialogVisible"
|
||||
:title="state.dialogTitle"
|
||||
width="50%"
|
||||
:maxHeight="350"
|
||||
style="padding: 30px 20px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<VueCropper
|
||||
ref="cropper"
|
||||
:img="state.options.img"
|
||||
:info="true"
|
||||
:autoCrop="state.options.autoCrop"
|
||||
:autoCropWidth="state.options.autoCropWidth"
|
||||
:autoCropHeight="state.options.autoCropHeight"
|
||||
:fixedBox="state.options.fixedBox"
|
||||
@real-time="realTime"
|
||||
v-if="state.cropperVisible"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||||
<div class="avatar-upload-preview">
|
||||
<img
|
||||
:src="state.previews.url"
|
||||
:style="state.previews.img"
|
||||
style="!max-width: 100%"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<template #footer>
|
||||
<el-row>
|
||||
<el-col :lg="2" :md="2">
|
||||
<el-upload
|
||||
action="#"
|
||||
:http-request="requestUpload"
|
||||
:show-file-list="false"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<el-button size="small">
|
||||
<Icon icon="ep:upload-filled" class="mr-5px" />
|
||||
选择
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 2 }" :md="2">
|
||||
<el-button size="small" @click="changeScale(1)">
|
||||
<Icon icon="ep:zoom-in" class="mr-5px" />
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
|
||||
<el-button size="small" @click="changeScale(-1)">
|
||||
<Icon icon="ep:zoom-out" class="mr-5px" />
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
|
||||
<el-button size="small" @click="rotateLeft()">
|
||||
<Icon icon="ep:arrow-left-bold" class="mr-5px" />
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 1, offset: 1 }" :md="2">
|
||||
<el-button size="small" @click="rotateRight()">
|
||||
<Icon icon="ep:arrow-right-bold" class="mr-5px" />
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :lg="{ span: 2, offset: 6 }" :md="2">
|
||||
<el-button size="small" type="primary" @click="uploadImg()">提 交</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<style scoped>
|
||||
.user-info-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.img-lg {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.avatar-upload-preview {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(50%, -50%);
|
||||
transform: translate(50%, -50%);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: 0 0 4px #ccc;
|
||||
box-shadow: 0 0 4px #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user-info-head:hover:after {
|
||||
content: '+';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
color: #eee;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 24px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
cursor: pointer;
|
||||
line-height: 110px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { ElTable, ElTableColumn } from 'element-plus'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
interface sociaType {
|
||||
title: string
|
||||
type: string
|
||||
source: string
|
||||
img: string
|
||||
}
|
||||
interface socialUserType {
|
||||
socialUser: {
|
||||
socia: sociaType[]
|
||||
}
|
||||
}
|
||||
const state = reactive<socialUserType>({
|
||||
socialUser: {
|
||||
socia: []
|
||||
}
|
||||
})
|
||||
const initSocial = () => {
|
||||
console.info(1)
|
||||
}
|
||||
const bind = () => {
|
||||
console.info(1)
|
||||
}
|
||||
const unbind = () => {
|
||||
console.info(1)
|
||||
}
|
||||
onMounted(async () => {
|
||||
await initSocial()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<el-table :data="state.socialUser.socia" :show-header="false">
|
||||
<el-table-column label="社交平台" align="left" width="120" prop="socia">
|
||||
<template #socia="{ row }">
|
||||
<img style="height: 20px; vertical-align: middle" :src="row.img" alt="" />
|
||||
{{ row.title }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="left" prop="action">
|
||||
<template #action="{ row }">
|
||||
<div v-if="row.openid">
|
||||
已绑定
|
||||
<el-button link type="primary" @click="unbind()">(解绑)</el-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
未绑定
|
||||
<el-button link type="primary" @click="bind()">(绑定)</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
@ -0,0 +1,7 @@
|
||||
import BasicInfo from './BasicInfo.vue'
|
||||
import ProfileUser from './ProfileUser.vue'
|
||||
import ResetPwd from './ResetPwd.vue'
|
||||
import UserAvatarVue from './UserAvatar.vue'
|
||||
import UserSocial from './UserSocial.vue'
|
||||
|
||||
export { BasicInfo, ProfileUser, ResetPwd, UserAvatarVue, UserSocial }
|
||||
Reference in New Issue
Block a user