From 283b6eb2ebcbf6e15ecca72f694f093c11a25eca Mon Sep 17 00:00:00 2001
From: crazyrunsnail <fjyuan1991@163.com>
Date: Wed, 3 Apr 2024 17:17:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0admin/setting=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/config.js                |  22 ++++++
 src/router/routes/admin.js          |   2 +-
 src/views/admin/setting/Basic.vue   | 112 ++++++++++++++++++++++++++++
 src/views/admin/setting/Bind.vue    |  58 ++++++++++++++
 src/views/admin/setting/Custom.vue  |  35 +++++++++
 src/views/admin/setting/Message.vue |  37 +++++++++
 src/views/admin/setting/Safe.vue    | 103 +++++++++++++++++++++++++
 src/views/admin/setting/index.vue   |  52 +++++++++++++
 8 files changed, 420 insertions(+), 1 deletion(-)
 create mode 100644 src/views/admin/setting/Basic.vue
 create mode 100644 src/views/admin/setting/Bind.vue
 create mode 100644 src/views/admin/setting/Custom.vue
 create mode 100644 src/views/admin/setting/Message.vue
 create mode 100644 src/views/admin/setting/Safe.vue
 create mode 100644 src/views/admin/setting/index.vue

diff --git a/src/router/config.js b/src/router/config.js
index d1edd95..c4bb81c 100644
--- a/src/router/config.js
+++ b/src/router/config.js
@@ -47,4 +47,26 @@ export const constantRoutes = [
         path: '/404',
         component: () => import('@/views/exception/404.vue'),
     },
+    {
+        path: '/setting',
+        component: layouts.BasicLayout,
+        meta: {
+            breadcrumb: [{ name: 'setting' }],
+        },
+        children: [
+            {
+                path: '',
+                name: 'setting',
+                component: () => import('@/views/admin/setting/index.vue'),
+                meta: {
+                    title: '个人设置',
+                    isMenu: false,
+                    keepAlive: false,
+                    permission: '*',
+                    active: 'setting',
+                    openKeys: 'setting',
+                },
+            },
+        ],
+    },
 ]
diff --git a/src/router/routes/admin.js b/src/router/routes/admin.js
index c4d15a8..86028a3 100644
--- a/src/router/routes/admin.js
+++ b/src/router/routes/admin.js
@@ -12,4 +12,4 @@ export default [
             openKeys: 'setting',
         },
     },
-]
\ No newline at end of file
+]
diff --git a/src/views/admin/setting/Basic.vue b/src/views/admin/setting/Basic.vue
new file mode 100644
index 0000000..28c507f
--- /dev/null
+++ b/src/views/admin/setting/Basic.vue
@@ -0,0 +1,112 @@
+<template>
+    <a-row
+        type="flex"
+        :gutter="48">
+        <a-col flex="0 0 480px">
+            <a-form
+                ref="formRef"
+                :rules="formRules"
+                :model="formData"
+                layout="vertical">
+                <a-form-item
+                    name="name"
+                    label="昵称">
+                    <a-input v-model:value="formData.name"></a-input>
+                </a-form-item>
+                <a-form-item
+                    label="邮箱"
+                    name="email">
+                    <a-input v-model:value="formData.email"></a-input>
+                </a-form-item>
+                <a-form-item
+                    name="phone"
+                    label="联系电话">
+                    <a-input v-model:value="formData.phone"></a-input>
+                </a-form-item>
+
+                <a-form-item
+                    label="个人简介"
+                    name="remark">
+                    <a-textarea v-model:value="formData.remark"></a-textarea>
+                </a-form-item>
+
+                <a-form-item>
+                    <a-button
+                        @click="handleOk"
+                        type="primary"
+                        >更新资料
+                    </a-button>
+                </a-form-item>
+            </a-form>
+        </a-col>
+        <!--        <a-col class="align-center">-->
+        <!--            <div>-->
+        <!--                <a-avatar-->
+        <!--                    src="http://cdn.xuanyunet.com/images/avatar.jpg"-->
+        <!--                    :size="144"></a-avatar>-->
+        <!--            </div>-->
+        <!--            <div class="mt-8-2">-->
+        <!--                <a-upload :show-upload-list="false">-->
+        <!--                    <a-button>-->
+        <!--                        <template #icon>-->
+        <!--                            <upload-outlined></upload-outlined>-->
+        <!--                        </template>-->
+        <!--                        上传头像-->
+        <!--                    </a-button>-->
+        <!--                </a-upload>-->
+        <!--            </div>-->
+        <!--        </a-col>-->
+    </a-row>
+</template>
+
+<script setup>
+import apis from '@/apis'
+
+defineOptions({
+    name: 'Basic',
+})
+import { config } from '@/config'
+import { useForm } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const { formRef, formData, formRules } = useForm()
+
+getUserInfo()
+
+/**
+ * 获取用户信息
+ * @returns {Promise<void>}
+ */
+async function getUserInfo() {
+    const { data } = await apis.user.getUserDetail().catch((err) => {
+        console.log(err)
+    })
+    formData.value = data
+}
+
+/**
+ * 提交表单
+ */
+function handleOk() {
+    formRef.value.validateFields().then(async (values) => {
+        const params = {
+            ...values,
+        }
+        const { success } = await apis.user.updateUser(formData.value.id, params).catch((err) => {
+            console.log(err)
+        })
+        if (config('http.code.success') === success) {
+            message.success('修改成功')
+            setTimeout(() => {
+                router.back()
+            }, 1500)
+        }
+    })
+}
+
+// updateUser
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/admin/setting/Bind.vue b/src/views/admin/setting/Bind.vue
new file mode 100644
index 0000000..03ee978
--- /dev/null
+++ b/src/views/admin/setting/Bind.vue
@@ -0,0 +1,58 @@
+<template>
+    <a-list
+        item-layout="horizontal"
+        row-key="id"
+        :data-source="listData">
+        <template #renderItem="{ item }">
+            <a-list-item>
+                <template #actions>
+                    <a>绑定</a>
+                </template>
+                <a-list-item-meta>
+                    <template #avatar>
+                        <a-avatar
+                            shape="square"
+                            :size="48"
+                            :style="{
+                                backgroundColor: item.color,
+                            }">
+                            <template #icon>
+                                <component :is="item.avatar"></component>
+                            </template>
+                        </a-avatar>
+                    </template>
+                    <template #title>{{ item.title }}</template>
+                    <template #description>{{ item.description }}</template>
+                </a-list-item-meta>
+            </a-list-item>
+        </template>
+    </a-list>
+</template>
+
+<script setup>
+import { AlipayOutlined, DingdingOutlined, TaobaoOutlined } from '@ant-design/icons-vue'
+
+defineOptions({
+    name: 'Bind',
+})
+
+const listData = [
+    { id: '1', title: '绑定淘宝', description: '当前未绑定淘宝账号', avatar: TaobaoOutlined, color: '#ff5800' },
+    {
+        id: '2',
+        title: '绑定支付宝',
+        description: '当前未绑定支付宝账号',
+        avatar: AlipayOutlined,
+        color: '#1677ff',
+    },
+    {
+        id: '3',
+        title: '绑定钉钉',
+        description: '当前未绑定钉钉账号',
+        avatar: DingdingOutlined,
+        color: '#007fff',
+    },
+]
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/admin/setting/Custom.vue b/src/views/admin/setting/Custom.vue
new file mode 100644
index 0000000..e2f3556
--- /dev/null
+++ b/src/views/admin/setting/Custom.vue
@@ -0,0 +1,35 @@
+<template>
+    <a-list item-layout="horizontal">
+        <a-list-item>
+            <template #actions>
+                <a-switch
+                    v-model:checked="themeColor"
+                    checked-children="黑色"
+                    un-checked-children="白色"></a-switch>
+            </template>
+            <a-list-item-meta>
+                <template #title>风格配色</template>
+                <template #description>整体风格配色设置</template>
+            </a-list-item-meta>
+        </a-list-item>
+        <a-list-item>
+            <template #actions> </template>
+            <a-list-item-meta>
+                <template #title>主题色</template>
+                <template #description>页面风格配色</template>
+            </a-list-item-meta>
+        </a-list-item>
+    </a-list>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({
+    name: 'Custom',
+})
+
+const themeColor = ref(false)
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/admin/setting/Message.vue b/src/views/admin/setting/Message.vue
new file mode 100644
index 0000000..e8d3cd9
--- /dev/null
+++ b/src/views/admin/setting/Message.vue
@@ -0,0 +1,37 @@
+<template>
+    <a-list
+        item-layout="horizontal"
+        row-key="id"
+        :data-source="listData">
+        <template #renderItem="{ item }">
+            <a-list-item>
+                <template #actions>
+                    <a-switch
+                        v-model:checked="item.checked"
+                        checked-children="开"
+                        un-checked-children="关"></a-switch>
+                </template>
+                <a-list-item-meta>
+                    <template #title>{{ item.title }}</template>
+                    <template #description>{{ item.description }}</template>
+                </a-list-item-meta>
+            </a-list-item>
+        </template>
+    </a-list>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({
+    name: 'Message',
+})
+
+const listData = ref([
+    { id: '1', title: '账户密码', description: '其他用户的消息将以站内信的形式通知', checked: true },
+    { id: '2', title: '系统消息', description: '系统消息将以站内信的形式通知', checked: true },
+    { id: '3', title: '待办任务', description: '待办任务将以站内信的形式通知', checked: true },
+])
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/admin/setting/Safe.vue b/src/views/admin/setting/Safe.vue
new file mode 100644
index 0000000..779e6a2
--- /dev/null
+++ b/src/views/admin/setting/Safe.vue
@@ -0,0 +1,103 @@
+<template>
+    <a-row
+        type="flex"
+        :gutter="48">
+        <a-col flex="0 0 480px">
+            <a-form
+                ref="formRef"
+                :rules="formRules"
+                :model="formData"
+                layout="vertical">
+                <a-form-item
+                    name="old_password"
+                    label="旧密码">
+                    <a-input-password
+                        v-model:value="formData.old_password"
+                        size="large"
+                        type="password">
+                        <template #prefix>
+                            <lock-outlined></lock-outlined>
+                        </template>
+                    </a-input-password>
+                </a-form-item>
+                <a-form-item
+                    label="新密码"
+                    name="new_password">
+                    <a-input-password
+                        v-model:value="formData.new_password"
+                        size="large"
+                        type="password">
+                        <template #prefix>
+                            <lock-outlined></lock-outlined>
+                        </template>
+                    </a-input-password>
+                </a-form-item>
+                <a-form-item
+                    name="new_passwords"
+                    label="确认新密码">
+                    <a-input-password
+                        v-model:value="formData.new_passwords"
+                        size="large"
+                        type="password">
+                        <template #prefix>
+                            <lock-outlined></lock-outlined>
+                        </template>
+                    </a-input-password>
+                </a-form-item>
+
+                <a-form-item>
+                    <a-button
+                        @click="handleOk"
+                        type="primary"
+                        >更新密码
+                    </a-button>
+                </a-form-item>
+            </a-form>
+        </a-col>
+    </a-row>
+</template>
+
+<script setup>
+import apis from '@/apis'
+
+defineOptions({
+    name: 'Safe',
+})
+import { config } from '@/config'
+import { useForm } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const { formRef, formData, formRules } = useForm()
+import { LockOutlined } from '@ant-design/icons-vue'
+
+/**
+ * 提交表单
+ */
+function handleOk() {
+    formRef.value.validateFields().then(async (values) => {
+        const params = {
+            old_password: values.old_password,
+            new_password: values.new_password,
+        }
+        if (values.new_passwords !== params.new_password) {
+            return message.error('两次密码不一致')
+        }
+
+        const { success } = await apis.user.updatePassword(params.old_password, params).catch((err) => {
+            console.log(err)
+        })
+        if (config('http.code.success') === success) {
+            message.success('修改成功')
+            setTimeout(() => {
+                router.back()
+            }, 1500)
+        }
+    })
+}
+
+// updateUser
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/admin/setting/index.vue b/src/views/admin/setting/index.vue
new file mode 100644
index 0000000..09c8572
--- /dev/null
+++ b/src/views/admin/setting/index.vue
@@ -0,0 +1,52 @@
+<template>
+    <a-card :body-style="{ paddingLeft: 0, paddingRight: 0 }">
+        <a-row type="flex">
+            <a-col flex="0 0 224px">
+                <a-menu
+                    v-model:selectedKeys="selectedKeys"
+                    mode="inline">
+                    <a-menu-item
+                        v-for="item in menuList"
+                        :key="item.key"
+                        >{{ item.name }}
+                    </a-menu-item>
+                </a-menu>
+            </a-col>
+            <a-col
+                class="px-8-5"
+                flex="auto">
+                <div class="setting-title">{{ cpSelectedMenu.name }}</div>
+                <keep-alive>
+                    <component :is="cpSelectedMenu.component"></component>
+                </keep-alive>
+            </a-col>
+        </a-row>
+    </a-card>
+</template>
+
+<script setup>
+import { find, head } from 'lodash-es'
+import { computed, markRaw, ref } from 'vue'
+
+import Basic from './Basic.vue'
+import Safe from './Safe.vue'
+
+defineOptions({
+    name: 'userSetting',
+})
+
+const menuList = ref([
+    { name: '基本设置', key: 'basic', component: markRaw(Basic) },
+    { name: '安全设置', key: 'safe', component: markRaw(Safe) },
+])
+const selectedKeys = ref(['basic'])
+const cpSelectedMenu = computed(() => find(menuList.value, { key: head(selectedKeys.value) }))
+</script>
+
+<style lang="less" scoped>
+:deep(.setting-title) {
+    font-size: 20px;
+    color: @color-text-heading;
+    margin-bottom: 16px;
+}
+</style>