dap
1 year ago
parent
450a598b30
commit
71f137eda3
@ -0,0 +1,20 @@
|
||||
import type { SocialInfo } from './model';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
enum Api {
|
||||
root = '/system/social',
|
||||
socialList = '/system/social/list',
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取绑定的社交信息列表
|
||||
* @returns info
|
||||
*/
|
||||
export function socialList() {
|
||||
return requestClient.get<SocialInfo[]>(Api.socialList);
|
||||
}
|
||||
|
||||
export function socialInfo(id: number | string) {
|
||||
return requestClient.get(`${Api.root}/${id}`);
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
export interface SocialInfo {
|
||||
id: string;
|
||||
userId: number;
|
||||
tenantId: string;
|
||||
authId: string;
|
||||
source: string;
|
||||
accessToken: string;
|
||||
expireIn: number;
|
||||
refreshToken: string;
|
||||
openId: string;
|
||||
userName: string;
|
||||
nickName: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
accessCode?: any;
|
||||
unionId?: any;
|
||||
scope: string;
|
||||
tokenType: string;
|
||||
idToken?: any;
|
||||
macAlgorithm?: any;
|
||||
macKey?: any;
|
||||
code?: any;
|
||||
oauthToken?: any;
|
||||
oauthTokenSecret?: any;
|
||||
createTime: string;
|
||||
}
|
||||
@ -0,0 +1,79 @@
|
||||
<script setup lang="tsx">
|
||||
import type { ColumnsType } from 'ant-design-vue/es/table';
|
||||
|
||||
import type { SocialInfo } from '#/api/system/social/model';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { Avatar, Modal, Table } from 'ant-design-vue';
|
||||
|
||||
import { authUnbinding } from '#/api';
|
||||
import { socialList } from '#/api/system/social';
|
||||
|
||||
const columns: ColumnsType = [
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'source',
|
||||
title: '绑定平台',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
customRender: ({ value }) => {
|
||||
return <Avatar src={value} />;
|
||||
},
|
||||
dataIndex: 'avatar',
|
||||
title: '头像',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'userName',
|
||||
title: '账号',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
dataIndex: 'action',
|
||||
title: '操作',
|
||||
},
|
||||
];
|
||||
|
||||
const tableData = ref<SocialInfo[]>([]);
|
||||
|
||||
async function reload() {
|
||||
tableData.value = await socialList();
|
||||
}
|
||||
|
||||
onMounted(reload);
|
||||
|
||||
/**
|
||||
* 解绑账号
|
||||
*/
|
||||
function handleUnbind(record: Record<string, any>) {
|
||||
Modal.confirm({
|
||||
content: `确定解绑[${record.source}]平台的[${record.userName}]账号吗？`,
|
||||
async onOk() {
|
||||
await authUnbinding(record.id);
|
||||
await reload();
|
||||
},
|
||||
title: '提示',
|
||||
type: 'warning',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
size="middle"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<a-button type="link" @click="handleUnbind(record)">解绑</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
<div>todo: 绑定功能</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,104 @@
|
||||
<script setup lang="ts">
|
||||
import type { UserProfile } from '#/api/system/profile/model';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { useUserStore } from '@vben/stores';
|
||||
|
||||
import { Form, FormItem, Input, RadioGroup } from 'ant-design-vue';
|
||||
|
||||
import { userProfileUpdate } from '#/api/system/profile';
|
||||
import { useAuthStore } from '#/store';
|
||||
import { getDictOptions } from '#/utils/dict';
|
||||
|
||||
const props = defineProps<{ profile: UserProfile }>();
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
/**
|
||||
* 要重构
|
||||
*/
|
||||
const form = ref({
|
||||
email: props.profile.user.email,
|
||||
nickName: props.profile.user.nickName,
|
||||
phonenumber: props.profile.user.phonenumber,
|
||||
sex: props.profile.user.sex,
|
||||
userId: props.profile.user.userId,
|
||||
});
|
||||
|
||||
const sexOptions = getDictOptions('sys_user_sex');
|
||||
|
||||
const userStore = useUserStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const loading = ref(false);
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
loading.value = true;
|
||||
await userProfileUpdate(form.value);
|
||||
// 更新store
|
||||
const userInfo = await authStore.fetchUserInfo();
|
||||
userStore.setUserInfo(userInfo);
|
||||
// 左边reload
|
||||
emit('reload');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mt-[16px] md:w-full lg:w-1/2 xl:w-1/3">
|
||||
<Form :label-col="{ span: 4 }" :model="form" @finish="handleSubmit">
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入昵称' }]"
|
||||
label="昵称"
|
||||
name="nickName"
|
||||
>
|
||||
<Input v-model:value="form.nickName" placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的邮箱',
|
||||
pattern:
|
||||
/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
|
||||
},
|
||||
]"
|
||||
label="邮箱"
|
||||
name="email"
|
||||
>
|
||||
<Input v-model:value="form.email" placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="性别" name="sex">
|
||||
<RadioGroup
|
||||
v-model:value="form.sex"
|
||||
:options="sexOptions"
|
||||
button-style="solid"
|
||||
option-type="button"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的电话',
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
},
|
||||
]"
|
||||
label="电话"
|
||||
name="phonenumber"
|
||||
>
|
||||
<Input v-model:value="form.phonenumber" placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem :wrapper-col="{ span: 4, offset: 4 }">
|
||||
<a-button :loading="loading" html-type="submit" type="primary">
|
||||
更新信息
|
||||
</a-button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,8 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
在线设备
|
||||
<div>先不做</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,5 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>安全设置</div>
|
||||
</template>
|
||||
@ -0,0 +1,59 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import { TabPane, Tabs } from 'ant-design-vue';
|
||||
|
||||
import AccountBind from './components/account-bind.vue';
|
||||
import BaseSetting from './components/base-setting.vue';
|
||||
import OnlineDevice from './components/online-device.vue';
|
||||
import SecureSetting from './components/secure-setting.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
AccountBind,
|
||||
BaseSetting,
|
||||
OnlineDevice,
|
||||
SecureSetting,
|
||||
TabPane,
|
||||
Tabs,
|
||||
},
|
||||
setup() {
|
||||
const settingList = [
|
||||
{
|
||||
component: 'BaseSetting',
|
||||
key: '1',
|
||||
name: '基本设置',
|
||||
},
|
||||
{
|
||||
component: 'SecureSetting',
|
||||
key: '2',
|
||||
name: '安全设置',
|
||||
},
|
||||
{
|
||||
component: 'AccountBind',
|
||||
key: '3',
|
||||
name: '账号绑定',
|
||||
},
|
||||
{
|
||||
component: 'OnlineDevice',
|
||||
key: '4',
|
||||
name: '在线设备',
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
settingList,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tabs class="bg-background rounded-[var(--radius)] px-[16px] lg:flex-1">
|
||||
<template v-for="item in settingList" :key="item.key">
|
||||
<TabPane :tab="item.name">
|
||||
<component :is="item.component" v-bind="$attrs" />
|
||||
</TabPane>
|
||||
</template>
|
||||
</Tabs>
|
||||
</template>
|
||||
Loading…
Reference in new issue