perf(views): 初步编写退出，修改密码功能

src/i18n/locales/zh.json

@@ -118,6 +118,7 @@
     "confirm": "确认",
     "confirmClose": "确定关闭{name}",
     "confirmDeletion": "是否确认删除?",
+    "confirmExitPrompt": "是否确认退出？",
     "confirmOpen": "确定开启{name}",
     "content": "内容",
     "coolingPump": "冷却泵",
@@ -137,6 +138,7 @@
     "enable": "启用",
     "endTime": "结束时间",
     "entire": "全部",
+    "exitConfirmation": "退出确定",
     "exitEdit": "退出编辑",
     "export": "导出",
     "exportImg": "导出图片",

src/layout/HvacAside.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
 import Simplebar from 'simplebar-vue';
 
+import ConfirmModal from '@/components/ConfirmModal.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import { useRequest } from '@/hooks/request';
 import { dataCenterRoutes, opsCenterRoutes } from '@/router';
@@ -11,8 +12,9 @@ import { t } from '@/i18n';
 import { getNoticePageList, getPageList, getUnreadNotifications } from '@/api';
 import { translateNavigation } from '@/utils';
 
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
-import type { DeviceGroupItem, NoticePageItem, PageParams } from '@/types';
+import type { ChangePasswordForm, DeviceGroupItem, NoticePageItem, PageParams } from '@/types';
 
 const router = useRouter();
 const route = useRoute();
@@ -21,7 +23,15 @@ const selectedKeys = ref<string[]>([route.path]);
 const openKeys = ref<string[]>([]);
 const deviceGroupList = ref<DeviceGroupItem[]>([]);
 const messageOpen = ref<boolean>(false);
+const changePasswordOpen = ref<boolean>(false);
 const messageList = ref<NoticePageItem[]>([]);
+const formRef = ref<FormInstance>();
+const modalComponentRef = useTemplateRef('modalComponent');
+const changePasswordForm = ref<ChangePasswordForm>({
+  name: '',
+  name1: '',
+  name2: '',
+});
 const messageParam = ref<PageParams>({
   pageIndex: 1,
   pageSize: 10,
@@ -43,6 +53,22 @@ const menuGroupList = computed(() => {
   ];
 });
 
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  name1: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  name2: [
+    { required: true, message: t('common.cannotEmpty'), trigger: 'change' },
+    {
+      validator: (_rule: unknown, value: string) => {
+        if (changePasswordForm.value.name1 !== value) {
+          return Promise.reject('确定新密码错误！');
+        }
+        return Promise.resolve();
+      },
+    },
+  ],
+};
+
 const messageColumns = [
   {
     title: '报警内容',
@@ -172,6 +198,29 @@ const clickNavigateGroup = (devGroupId: number) => {
     messageOpen.value = false;
   }
 };
+const clickExit = () => {
+  modalComponentRef.value?.showView();
+};
+const confirm = () => {
+  modalComponentRef.value?.hideView();
+};
+
+const changePassword = () => {
+  changePasswordOpen.value = true;
+};
+const handleClose = () => {
+  changePasswordForm.value = {
+    name: '',
+    name1: '',
+    name2: '',
+  };
+  formRef.value?.resetFields();
+};
+const bindingPassword = () => {
+  formRef.value?.validate().then(() => {
+    changePasswordOpen.value = false;
+  });
+};
 </script>
 
 <template>
@@ -254,7 +303,28 @@ const clickNavigateGroup = (devGroupId: number) => {
       <SvgIcon name="unfold" @click="toggleCollapsed" />
     </div>
     <div class="aside-footer">
-      <div class="aside-footer-avatar"></div>
+      <ADropdown overlay-class-name="hvac-dropdown" placement="topLeft" :align="{ offset: [0, -30] }">
+        <div class="aside-footer-avatar" @click.prevent></div>
+        <template #overlay>
+          <AMenu>
+            <AMenuItem>
+              <div @click="changePassword">
+                <AFlex class="hvac-item" justify="space-between" align="center">
+                  <AFlex align="center"><SvgIcon class="icon-style" name="edit-o" /> 修改密码</AFlex>
+                  <SvgIcon name="right"
+                /></AFlex>
+              </div>
+            </AMenuItem>
+            <AMenuDivider />
+            <AMenuItem>
+              <div @click="clickExit">
+                <AFlex class="hvac-item" align="center"> <SvgIcon name="edit-o" class="icon-style" /> 退出登陆 </AFlex>
+              </div>
+            </AMenuItem>
+          </AMenu>
+        </template>
+      </ADropdown>
+
       <div v-show="!collapsed">
         <SvgIcon name="setting" />
         <span @click="addInformation">
@@ -297,6 +367,52 @@ const clickNavigateGroup = (devGroupId: number) => {
       />
     </AFlex>
   </AModal>
+  <AModal
+    v-model:open="changePasswordOpen"
+    title="修改密码"
+    width="460px"
+    :footer="null"
+    :mask-closable="false"
+    :keyboard="false"
+    :after-close="handleClose"
+  >
+    <AForm
+      ref="formRef"
+      :colon="false"
+      label-align="left"
+      :model="changePasswordForm"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      class="form-style"
+    >
+      <AFlex :vertical="true">
+        <AFormItem label="原密码" name="name">
+          <AInput class="input-width" v-model:value="changePasswordForm.name" placeholder="请输入原密码" />
+        </AFormItem>
+        <AFormItem label="新密码" name="name1">
+          <AInput class="input-width" v-model:value="changePasswordForm.name1" placeholder="请输入新密码" />
+        </AFormItem>
+        <AFormItem label="确认新密码" name="name2">
+          <AInput class="input-width" v-model:value="changePasswordForm.name2" placeholder="请输入新密码" />
+        </AFormItem>
+      </AFlex>
+    </AForm>
+
+    <AFlex justify="flex-end">
+      <AButton class="button-style" type="primary" ghost @click="changePasswordOpen = false">{{
+        $t('common.cancel')
+      }}</AButton>
+      <AButton class="button-style" type="primary" @click="bindingPassword">确定</AButton>
+    </AFlex>
+  </AModal>
+  <ConfirmModal
+    ref="modalComponent"
+    :title="t('common.exitConfirmation')"
+    :description-text="t('common.confirmExitPrompt')"
+    :icon="{ name: 'delete' }"
+    :icon-bg-color="'#F56C6C'"
+    @confirm="confirm"
+  />
 </template>
 
 <style lang="scss">
@@ -313,6 +429,37 @@ const clickNavigateGroup = (devGroupId: number) => {
 </style>
 
 <style lang="scss" scoped>
+.form-style {
+  margin-top: 24px;
+}
+
+.button-style {
+  width: 76px;
+  margin-left: 16px;
+}
+
+.input-width {
+  width: 256px;
+}
+
+.hvac-item {
+  width: 190px;
+  height: 50px;
+}
+
+.icon-style {
+  margin-right: 12px;
+}
+
+.hvac-dropdown > ul > li {
+  width: 190px;
+  margin-left: 10px !important;
+}
+
+.hvac-dropdown {
+  bottom: 20px;
+}
+
 .text-style {
   font-size: 14px;
   font-style: normal;
@@ -530,6 +677,7 @@ const clickNavigateGroup = (devGroupId: number) => {
   justify-content: center;
   width: 40px;
   height: 40px;
+  cursor: pointer;
   background: var(--antd-color-primary);
   border-radius: 50%;
 

src/types/index.ts

@@ -2675,3 +2675,9 @@ export interface loginForm {
   refresh_token: string;
   token_type: string;
 }
+
+export interface ChangePasswordForm {
+  name: string;
+  name1: string;
+  name2: string;
+}