140 lines
3.7 KiB
Vue
140 lines
3.7 KiB
Vue
<template>
|
|
<ElDialog v-model="showDialog"
|
|
:close-on-click-modal="false"
|
|
@close="dialogCloseHandler"
|
|
destroy-on-close
|
|
width="25vw">
|
|
<ElForm :model="userFormData"
|
|
class="sys_user-form"
|
|
label-width="auto">
|
|
<ElFormItem label-width="90" label="姓名">
|
|
<ElInput
|
|
:readonly="userFormData.id=='1'"
|
|
v-model="userFormData.nickname"
|
|
:disabled="status === 'view'"
|
|
placeholder="姓名"/>
|
|
</ElFormItem>
|
|
<ElFormItem label-width="90" label="头像">
|
|
<Uploader
|
|
v-model:file="userFormData.avatar"
|
|
:disabled="status === 'view'"
|
|
:upload-props="{
|
|
accept: 'image/*',
|
|
listType:'picture'
|
|
}">
|
|
<ElButton>点击上传头像</ElButton>
|
|
</Uploader>
|
|
</ElFormItem>
|
|
<ElFormItem label-width="90" label="联系电话">
|
|
<ElInput
|
|
v-model="userFormData.phone"
|
|
:disabled="status === 'view'"
|
|
placeholder="联系电话"/>
|
|
</ElFormItem>
|
|
<ElFormItem v-if="status === 'add'" label="用户名">
|
|
<ElInput
|
|
v-model="userFormData.account.username"
|
|
placeholder="用户名"/>
|
|
</ElFormItem>
|
|
<ElFormItem v-if="status === 'add'" label="密码">
|
|
<ElInput
|
|
v-model="userFormData.account.secret"
|
|
autocomplete="new-password"
|
|
placeholder="密码"
|
|
show-password
|
|
type="password"/>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
|
|
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
|
</template>
|
|
</ElDialog>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import UserApi from '@/pages/sys/user/user-api.ts'
|
|
import Strings from '@/common/utils/strings.ts'
|
|
import { ElMessage } from 'element-plus'
|
|
import Uploader from '@/components/uploader/Uploader.vue'
|
|
|
|
const emits = defineEmits([ 'editSucc' ])
|
|
const showDialog = ref(false)
|
|
const submiting = ref(false)
|
|
const status = ref<'add' | 'view' | 'modify'>('add')
|
|
const userFormData = ref<UserTypes.SearchUserResult>({
|
|
account: {
|
|
username: '',
|
|
secret: '',
|
|
},
|
|
})
|
|
|
|
function dialogCloseHandler() {
|
|
userFormData.value = {
|
|
account: {
|
|
username: '',
|
|
secret: '',
|
|
},
|
|
}
|
|
}
|
|
|
|
function submitHandler() {
|
|
if (status.value === 'view') return
|
|
submiting.value = true
|
|
if (userFormData.value.id != null) {
|
|
const {id, nickname, avatar, email, phone} = userFormData.value
|
|
UserApi.modify({id, nickname, avatar, email, phone})
|
|
.then(() => {
|
|
ElMessage.success('修改成功')
|
|
emits('editSucc')
|
|
showDialog.value = false
|
|
})
|
|
.finally(() => {
|
|
submiting.value = false
|
|
})
|
|
} else {
|
|
const {nickname, avatar, email, phone, account} = userFormData.value
|
|
UserApi.add({nickname, avatar, email, phone, account})
|
|
.then(() => {
|
|
ElMessage.success('添加成功')
|
|
emits('editSucc')
|
|
showDialog.value = false
|
|
})
|
|
.finally(() => {
|
|
submiting.value = false
|
|
})
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
open(data?: UserTypes.SearchUserResult) {
|
|
showDialog.value = true
|
|
if (data != null && !Strings.isBlank(data.id)) {
|
|
status.value = 'modify'
|
|
UserApi.detail(data.id!)
|
|
.then(res => {
|
|
userFormData.value = {
|
|
...res.data, account: {},
|
|
}
|
|
})
|
|
} else {
|
|
status.value = 'add'
|
|
userFormData.value = {
|
|
account: {
|
|
username: '',
|
|
secret: '',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="stylus" scoped>
|
|
.sys_user-form {
|
|
padding 20px
|
|
}
|
|
|
|
.avatar-uploader {
|
|
width 100%
|
|
}
|
|
</style>
|