Merge remote-tracking branch 'origin/master'

src/views/profile/index.vue

@@ -1,52 +1,228 @@
 <template>
-	<el-container class="page-user">
-		待处理
-		<el-main>
-			<Suspense>
-				<template #default>
-					todo...
-					<!--					<component :is="page" />-->
+	<div class="pageWrap bgc">
+		<div :class="['h-full mr-2 aside-wrap', isCollapsed ? 'aside-wrap--collapsed' : '']">
+			<div :class="['trigger-bar', isCollapsed ? 'trigger-bar--collapsed' : '']" @click="isCollapsed = !isCollapsed">
+				<div class="bar__top"></div>
+				<div class="bar__bottom"></div>
+			</div>
+			<el-card class="h-full border-none menu-card" shadow="never">
+				<template #header>
+					<div class="card-header">
+						<span>个人信息</span>
+					</div>
+					<el-divider border-style="dashed" />
 				</template>
-				<template #fallback>
-					<el-skeleton :rows="3" />
-				</template>
-			</Suspense>
-		</el-main>
-	</el-container>
+
+				<!-- 头像 + 昵称-->
+				<div class="w-100px h-100px flex-align-pack-center flex flex-col">
+					<el-avatar :src="showForm.avatar" :size="100" />
+
+					<div class="mt-5">{{ showForm.nickName }}</div>
+				</div>
+
+				<!-- 用户信息描述 -->
+				<el-descriptions :column="1" class="mt-10">
+					<!-- 用户名 -->
+					<el-descriptions-item>
+						<template #label>
+							<el-icon class="align-middle"><User /></el-icon>
+							用户名
+						</template>
+						{{ showForm.username }}
+						<el-icon v-if="showForm.sex == '男'" class="align-middle color-blue">
+							<Male />
+						</el-icon>
+						<el-icon v-else class="align-middle color-pink">
+							<Female />
+						</el-icon>
+					</el-descriptions-item>
+					<el-descriptions-item>
+						<template #label>
+							<el-icon class="align-middle"><Phone /></el-icon>
+							手机号码
+						</template>
+						-
+					</el-descriptions-item>
+					<el-descriptions-item>
+						<template #label>
+							<el-icon class="align-middle"><Message /></el-icon>
+							邮箱
+						</template>
+						-
+					</el-descriptions-item>
+					<el-descriptions-item>
+						<template #label>
+							<el-icon class="align-middle"><Timer /></el-icon>
+							创建日期
+						</template>
+						{{ showForm.createTime }}
+					</el-descriptions-item>
+				</el-descriptions>
+			</el-card>
+		</div>
+
+		<div class="content-warp flex-column-page-wrap" style="background-color: #fff">
+			<div class="p-4">
+				<el-tabs tab-position="top">
+					<el-tab-pane label="基本资料">
+						<el-form :model="form" :label-position="'top'" label-width="auto" style="max-width: 600px">
+							<el-form-item label="昵称">
+								<el-input v-model="form.nickName" />
+							</el-form-item>
+							<el-form-item label="真实姓名">
+								<el-input v-model="form.realName" />
+							</el-form-item>
+							<el-form-item label="性别">
+								<el-radio-group v-model="form.sex">
+									<el-radio label="男">男</el-radio>
+									<el-radio label="女">女</el-radio>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="手机号">
+								<el-input v-model="form.phone" type="tel" :maxlength="11" />
+							</el-form-item>
+							<el-form-item label="邮箱">
+								<el-input v-model="form.email" type="email" />
+							</el-form-item>
+							<el-form-item>
+								<el-button type="primary" @click="saveInfoEv">保存</el-button>
+							</el-form-item>
+						</el-form>
+					</el-tab-pane>
+					<el-tab-pane label="修改密码">
+						<el-form
+							ref="passwordChangeFormRef"
+							:model="passwordChangeForm"
+							:rules="passwordChangeRules"
+							:label-position="'top'"
+							label-width="auto"
+							style="max-width: 600px"
+						>
+							<el-form-item label="原密码" prop="oldPassword">
+								<el-input v-model="passwordChangeForm.oldPassword" type="password" show-password />
+							</el-form-item>
+							<el-form-item label="新密码" prop="newPassword">
+								<el-input v-model="passwordChangeForm.newPassword" type="password" show-password />
+							</el-form-item>
+							<el-form-item label="确认密码" prop="confirmPassword">
+								<el-input v-model="passwordChangeForm.confirmPassword" type="password" show-password />
+							</el-form-item>
+							<el-form-item>
+								<el-button type="primary" @click="savePwdEv">保存</el-button>
+							</el-form-item>
+						</el-form>
+					</el-tab-pane>
+				</el-tabs>
+			</div>
+		</div>
+	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-	/* eslint-disable */
-  // @ts-ignore
-	name: 'profileIndex',
-  /* eslint-disable */
-	//路由跳转进来 判断from是否有特殊标识做特殊处理
-	beforeRouteEnter(to, from, next) {
-		next(vm => {
-			// console.error(vm, 'vm', to, 'to', from, 'from')
-			vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
-				type: 'success',
-				center: true
-			})
-				.then(() => {})
-				.catch(() => {})
-			/*if (from.is) {
-        //删除特殊标识，防止标签刷新重复执行
-        delete from.is
-        //执行特殊方法
-        vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
-          type: 'success',
-          center: true
-        })
-            .then(() => {})
-            .catch(() => {})
-      }*/
-		})
-	},
-	created() {
-		console.error('created...')
-	}
+<script setup>
+import user from '@/api/system/user.ts'
+import { ref } from 'vue'
+import { ls } from '@/utils'
+import {ElMessage} from "element-plus";
+const isCollapsed = ref(false)
+const showForm = ref({})
+const form = ref({
+	username: '',
+	realName: '',
+	sex: '男',
+	phone: '',
+	email: ''
+})
+
+const passwordChangeForm = ref({
+	oldPassword: '',
+	newPassword: '',
+	confirmPassword: ''
 })
+
+// 修改密码校验规则
+const passwordChangeRules = {
+	oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+	newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+	confirmPassword: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }]
+}
+
+const getUserInfo = async () => {
+	try {
+		const userInfo = ls.get('userInfo')
+		const data = await user.userGetApi(userInfo.userId)
+		/**
+		 * {
+		 *         "id": "0",
+		 *         "createId": "0",
+		 *         "createBy": "青苗",
+		 *         "createTime": "2021-11-02 00:32",
+		 *         "updateBy": "admin",
+		 *         "updateTime": "2024-05-02 13:25",
+		 *         "username": "admin",
+		 *         "realName": "CEO",
+		 *         "nickName": "CEO",
+		 *         "avatar": "https://lolicode.gitee.io/scui-doc/demo/img/avatar.jpg",
+		 *         "sex": "男",
+		 *         "phoneVerified": 0,
+		 *         "emailVerified": 0,
+		 *         "status": 1
+		 *     }
+		 */
+		showForm.value = data
+		form.value = data
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+const saveInfoEv = async () => {
+	try {
+		await user.userAddOrEditSaveApi(form.value)
+		await getUserInfo()
+	} catch (e) {
+		console.log(e)
+	}
+}
+
+const savePwdEv = () => {
+	ElMessage.success('修改成功')
+}
+
+getUserInfo()
 </script>
+
+<style lang="scss" scoped>
+.content-warp {
+	// 300 + 28
+	width: calc(100% - 328px);
+}
+.aside-wrap--collapsed {
+	margin-left: -10px;
+	.menu-card {
+		width: 0;
+	}
+}
+@media (max-width: 750px) {
+	.pageWrap {
+		//overflow-y: auto;
+		flex-direction: column;
+		overflow-y: auto;
+		:deep(.aside-wrap) {
+			margin-bottom: 10px;
+			margin-right: 0;
+			//height: 50%;
+			.menu-card {
+				.el-card__body {
+					width: 100%;
+				}
+			}
+			.trigger-bar {
+				display: none;
+			}
+		}
+		.content-warp {
+			width: 100%;
+		}
+	}
+}
+</style>

src/views/setting/configure/index.vue

@@ -49,6 +49,7 @@
 	</div>
 </template>
 <script lang="tsx" setup>
+import dayjs from "dayjs";
 import configure from '@/api/system/configure'
 import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
@@ -73,7 +74,7 @@ const formsDialog = [
 		rules: [{ required: true, message: '请输入标题', trigger: 'blur' }]
 	},
 	{
-		prop: 'key',
+		prop: 'keyword',
 		label: '关键字',
 		itemType: 'input',
 		rules: [{ required: true, message: '请输入关键字', trigger: 'blur' }]
@@ -115,7 +116,7 @@ const forms = ref([
 		placeholder: '请输入分类'
 	},
 	{
-		prop: 'key',
+		prop: 'keyword',
 		label: '关键字：',
 		itemType: 'input',
 		placeholder: '请输入关键字'
@@ -148,7 +149,7 @@ const columns = [
 		minWidth: 250
 	},
 	{
-		prop: 'key',
+		prop: 'keyword',
 		label: '关键字',
 		minWidth: 150
 	},
@@ -265,7 +266,7 @@ const submitHandler = async params => {
 	formOptions.value.formConfig.submitLoading = true
 	try {
 		params.status = params.status ? 1 : 0
-		params.expire = params.expire + ' 00:00:00'
+		params.expire = params.expire ? params.expire + ' 00:00:00' : dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
 		params.id = activeData.value.id ? activeData.value.id : null
 		await configure.configureAddOrEditSaveApi(params)
 		ElMessage.success(`${isCreate.value ? '新增' : '修改'}成功~`)