0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 个人中心

This commit is contained in:
easy 2023-03-09 17:28:35 +08:00
parent 80faeb5f0f
commit 37e381f961
7 changed files with 119 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/AIcon/index.tsx
View File

@ -77,6 +77,7 @@ const iconKeys = [
'CloudDownloadOutlined', 'CloudDownloadOutlined',
'PauseCircleOutlined',, 'PauseCircleOutlined',,
'FormOutlined', 'FormOutlined',
'EyeInvisibleOutlined',
] ]
const Icon = (props: {type: string}) => { const Icon = (props: {type: string}) => {

27
src/views/account/Center/components/EditInfoDialog.vue
View File

@ -5,6 +5,7 @@
@ok="handleOk" @ok="handleOk"
width="770px" width="770px"
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
:confirmLoading="loading"
> >
<j-form :model="form" layout="vertical" ref="formRef"> <j-form :model="form" layout="vertical" ref="formRef">
<j-row :gutter="24"> <j-row :gutter="24">
@ -12,7 +13,10 @@
<j-form-item <j-form-item
label="姓名" label="姓名"
name="name" name="name"
:rules="[{ required: true, message: '姓名必填' }]" :rules="[
{ required: true, message: '姓名必填' },
{ max: 64, message: '最多可输入64个字符' },
]"
> >
<j-input <j-input
v-model:value="form.name" v-model:value="form.name"
@ -56,7 +60,16 @@
</j-row> </j-row>
<j-row :gutter="24"> <j-row :gutter="24">
<j-col :span="12"> <j-col :span="12">
<j-form-item label="手机号"> <j-form-item
label="手机号"
name="telephone"
:rules="[
{
pattern: /^1[3456789]\d{9}$/,
message: '请输入正确手机号',
},
]"
>
<j-input <j-input
v-model:value="form.telephone" v-model:value="form.telephone"
placeholder="请输入手机号" placeholder="请输入手机号"
@ -64,7 +77,11 @@
</j-form-item> </j-form-item>
</j-col> </j-col>
<j-col :span="12"> <j-col :span="12">
<j-form-item label="邮箱"> <j-form-item
label="邮箱"
name="email"
:rules="[{ type: 'email',message:'邮箱不是一个有效的email' }]"
>
<j-input <j-input
v-model:value="form.email" v-model:value="form.email"
placeholder="请输入邮箱" placeholder="请输入邮箱"
@ -87,17 +104,19 @@ const props = defineProps<{
visible: boolean; visible: boolean;
data: userInfoType; data: userInfoType;
}>(); }>();
const loading = ref(false)
const form = ref(props.data); const form = ref(props.data);
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const handleOk = () => { const handleOk = () => {
formRef.value?.validate().then(() => { formRef.value?.validate().then(() => {
loading.value = true
updateMeInfo_api(form.value).then((resp) => { updateMeInfo_api(form.value).then((resp) => {
if (resp.status === 200) { if (resp.status === 200) {
message.success('保存成功'); message.success('保存成功');
emits('ok'); emits('ok');
emits('update:visible', false); emits('update:visible', false);
} }
}); }).finally(()=>loading.value = false)
}); });
}; };
</script> </script>

17
src/views/account/Center/components/EditPasswordDialog.vue
View File

@ -4,6 +4,7 @@
title="重置密码" title="重置密码"
@ok="handleOk" @ok="handleOk"
width="520px" width="520px"
:confirmLoading="loading"
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
> >
<j-form :model="form" layout="vertical" ref="formRef"> <j-form :model="form" layout="vertical" ref="formRef">
@ -11,7 +12,7 @@
label="旧密码" label="旧密码"
name="oldPassword" name="oldPassword"
:rules="[ :rules="[
{ required: true }, { required: true, message: '请输入密码' },
{ validator: checkMothods.old, trigger: 'blur' }, { validator: checkMothods.old, trigger: 'blur' },
]" ]"
> >
@ -24,7 +25,7 @@
label="密码" label="密码"
name="newPassword" name="newPassword"
:rules="[ :rules="[
{ required: true }, { required: true,message:'请输入密码' },
{ validator: checkMothods.new, trigger: 'blur' }, { validator: checkMothods.new, trigger: 'blur' },
]" ]"
> >
@ -37,7 +38,7 @@
label="确认密码" label="确认密码"
name="confirmPassword" name="confirmPassword"
:rules="[ :rules="[
{ required: true }, { required: true, message: '请输入确认密码' },
{ validator: checkMothods.confirm, trigger: 'blur' }, { validator: checkMothods.confirm, trigger: 'blur' },
]" ]"
> >
@ -63,6 +64,7 @@ const emits = defineEmits(['ok', 'update:visible']);
const props = defineProps<{ const props = defineProps<{
visible: boolean; visible: boolean;
}>(); }>();
const loading = ref(false)
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const form = ref<formType>({ const form = ref<formType>({
oldPassword: '', oldPassword: '',
@ -72,7 +74,7 @@ const form = ref<formType>({
const checkMothods = { const checkMothods = {
old: async (_rule: Rule, value: string) => { old: async (_rule: Rule, value: string) => {
if (!value) return Promise.reject('请输入密码'); if (!value) return Promise.reject();
try { try {
const resp: any = await checkOldPassword_api(value); const resp: any = await checkOldPassword_api(value);
if (resp.status === 200 && !resp.result.passed) if (resp.status === 200 && !resp.result.passed)
@ -83,7 +85,7 @@ const checkMothods = {
} }
}, },
new: async (_rule: Rule, value: string) => { new: async (_rule: Rule, value: string) => {
if (!value) return Promise.reject('请输入密码'); if (!value) return Promise.reject();
else if ( else if (
form.value.confirmPassword && form.value.confirmPassword &&
value !== form.value.confirmPassword value !== form.value.confirmPassword
@ -99,7 +101,7 @@ const checkMothods = {
} }
}, },
confirm: async (_rule: Rule, value: string) => { confirm: async (_rule: Rule, value: string) => {
if (!value) return Promise.reject('请输入确认密码'); if (!value) return Promise.reject();
try { try {
const resp: any = await validateField_api('password', value); const resp: any = await validateField_api('password', value);
@ -114,6 +116,7 @@ const checkMothods = {
const handleOk = () => { const handleOk = () => {
formRef.value?.validate().then(() => { formRef.value?.validate().then(() => {
loading.value = true
const params = { const params = {
oldPassword: form.value.oldPassword, oldPassword: form.value.oldPassword,
newPassword: form.value.newPassword, newPassword: form.value.newPassword,
@ -124,7 +127,7 @@ const handleOk = () => {
emits('ok'); emits('ok');
emits('update:visible', false); emits('update:visible', false);
} }
}); }).finally(()=>loading.value = false)
}); });
}; };
console.clear(); console.clear();

43
src/views/account/Center/index.vue
View File

@ -8,10 +8,15 @@
style="width: 350px; justify-content: center" style="width: 350px; justify-content: center"
> >
<img <img
v-if="userInfo.avatar"
:src="userInfo.avatar" :src="userInfo.avatar"
style="width: 140px; border-radius: 70px" style="width: 140px; border-radius: 70px"
alt="" alt=""
/> />
<div class="default-avatar" v-else>
<AIcon type="UserOutlined" />
</div>
<div <div
style=" style="
width: 100%; width: 100%;
@ -29,6 +34,7 @@
}" }"
:action="`${BASE_API_PATH}/file/static`" :action="`${BASE_API_PATH}/file/static`"
@change="upload.changeBackUpload" @change="upload.changeBackUpload"
:beforeUpload="upload.beforeUpload"
> >
<j-button> <j-button>
<AIcon type="UploadOutlined" /> <AIcon type="UploadOutlined" />
@ -51,11 +57,17 @@
</div> </div>
<div class="info-card"> <div class="info-card">
<p>注册时间</p> <p>注册时间</p>
<p>{{ moment(userInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}</p> <p>
{{
moment(userInfo.createTime).format(
'YYYY-MM-DD HH:mm:ss',
)
}}
</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<p>电话</p> <p>电话</p>
<p>{{ userInfo.telephone }}</p> <p>{{ userInfo.telephone || '-' }}</p>
</div> </div>
<div class="info-card"> <div class="info-card">
<p>姓名</p> <p>姓名</p>
@ -117,7 +129,7 @@
type="link" type="link"
@click="editPasswordVisible = true" @click="editPasswordVisible = true"
> >
<AIcon type="EditOutlined" style="color: #1d39c4;" /> <AIcon type="EditOutlined" style="color: #1d39c4" />
</PermissionButton> </PermissionButton>
</span> </span>
</div> </div>
@ -205,7 +217,7 @@
<EditInfoDialog <EditInfoDialog
v-if="editInfoVisible" v-if="editInfoVisible"
v-model:visible="editInfoVisible" v-model:visible="editInfoVisible"
:data="{...userInfo}" :data="{ ...userInfo }"
@ok="getUserInfo" @ok="getUserInfo"
/> />
<EditPasswordDialog <EditPasswordDialog
@ -277,6 +289,15 @@ const upload = reactive({
message.error('logo上传失败，请稍后再试'); message.error('logo上传失败，请稍后再试');
} }
}, },
beforeUpload: ({ size, type }: File) => {
const imageTypes = ['jpg', 'png', 'jfif', 'pjp', 'pjpeg', 'jpeg'];
const typeBool =
imageTypes.filter((typeStr) => type.includes(typeStr)).length > 0;
const sizeBool = size < 4 * 1024 * 1024;
(typeBool && sizeBool) || message.error('请上传正确格式的图片');
return typeBool && sizeBool;
},
}); });
// 首页视图 // 首页视图
const isApiUser = ref<boolean>(); const isApiUser = ref<boolean>();
@ -346,7 +367,7 @@ function getViews() {
background-color: #f0f2f5; background-color: #f0f2f5;
min-height: 100vh; min-height: 100vh;
.card { .card {
margin: 24px; margin: 16px 0;
padding: 24px; padding: 24px;
background-color: #fff; background-color: #fff;
position: relative; position: relative;
@ -370,6 +391,18 @@ function getViews() {
flex-wrap: wrap; flex-wrap: wrap;
.content-item { .content-item {
margin-right: 24px; margin-right: 24px;
.default-avatar {
background-color: #ccc;
color: #fff;
border-radius: 50%;
font-size: 70px;
width: 140px;
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
.info-card { .info-card {
width: 25%; width: 25%;

19
src/views/account/NotificationSubscription/components/EditDialog.vue
View File

@ -3,6 +3,7 @@
visible visible
:title="props.data.id ? '编辑' : '新增'" :title="props.data.id ? '编辑' : '新增'"
width="865px" width="865px"
:confirmLoading="loading"
@ok="confirm" @ok="confirm"
@cancel="emits('update:visible', false)" @cancel="emits('update:visible', false)"
> >
@ -92,6 +93,7 @@ const props = defineProps<{
data: rowType; data: rowType;
}>(); }>();
const loading = ref(false);
const initForm = { const initForm = {
subscribeName: '', subscribeName: '',
topicConfig: {}, topicConfig: {},
@ -106,13 +108,16 @@ const form = ref({
const confirm = () => { const confirm = () => {
formRef.value && formRef.value &&
formRef.value.validate().then(() => { formRef.value.validate().then(() => {
save_api(form.value).then((resp) => { loading.value = true;
if (resp.status === 200) { save_api(form.value)
message.success('操作成功'); .then((resp) => {
emits('ok') if (resp.status === 200) {
emits('update:visible', false); message.success('操作成功');
} emits('ok');
}); emits('update:visible', false);
}
})
.finally(() => (loading.value = false));
}); });
}; };

29
src/views/home/index.vue
View File

@ -17,12 +17,22 @@
<div class="card"> <div class="card">
<h3 style="margin: 0 0 24px 0">基本信息</h3> <h3 style="margin: 0 0 24px 0">基本信息</h3>
<p> <p>
<span style="font-weight: bold">clientId: </span> <span class="label">clientId: </span>
<span>{{ clientId }}</span> <span class="value">{{ clientId }}</span>
</p> </p>
<p> <p>
<span style="font-weight: bold">secureKey:</span> <span class="label">secureKey:</span>
<span>{{ secureKey }}</span> <span class="value">
{{ showKey ? secureKey : '****************' }}
</span>
<AIcon
:type="
showKey
? 'EyeOutlined'
: 'EyeInvisibleOutlined'
"
@click="showKey = !showKey"
/>
</p> </p>
</div> </div>
</template> </template>
@ -47,7 +57,7 @@ const currentView = ref<string>('');
const loading = ref<boolean>(true); const loading = ref<boolean>(true);
const clientId = useUserInfo().$state.userInfos.id; const clientId = useUserInfo().$state.userInfos.id;
const secureKey = ref<string>(''); const secureKey = ref<string>('');
const showKey = ref(false);
// 获取选择的视图 // 获取选择的视图
const setCurrentView = () => { const setCurrentView = () => {
getView_api().then((resp: any) => { getView_api().then((resp: any) => {
@ -91,6 +101,15 @@ if (isNoCommunity) {
p { p {
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
.label {
font-weight: bold;
margin-right: 3px;
}
.value {
margin-right: 10px;
font-size: 14px;
}
} }
} }
} }

17
src/views/system/Platforms/Api/index.vue
View File

@ -3,7 +3,7 @@
<div class="top"> <div class="top">
<slot name="top" /> <slot name="top" />
</div> </div>
<j-row :gutter="24"> <j-row :gutter="24" class="content">
<j-col <j-col
:span="24" :span="24"
v-if="props.showTitle" v-if="props.showTitle"
@ -151,11 +151,16 @@ function init() {
<style lang="less" scoped> <style lang="less" scoped>
.api-page-container { .api-page-container {
.tree-content { .content {
padding-bottom: 30px; background-color: #fff;
height: calc(100vh - 230px); padding: 24px;
overflow-y: auto; margin: 0 !important;
border-right: 1px solid #e9e9e9; .tree-content {
padding-bottom: 30px;
height: calc(100vh - 230px);
overflow-y: auto;
border-right: 1px solid #e9e9e9;
}
} }
} }
</style> </style>