修改密码

src/components/layer/index.vue

@@ -1,52 +0,0 @@
-<template>
-  <div>
-    <el-dialog ref="dialog" v-model="layer.show" :title="layer.title" :width="layer.width" center>
-      <slot></slot>
-      <template #footer v-if="layer.showButton">
-        <div>
-          <el-button type="primary" @click="confirm">确认</el-button>
-          <el-button @click="close">取消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  props: {
-    layer: {
-      type: Object,
-      default: () => {
-        return {
-          show: false,
-          title: '',
-          showButton: false,
-        }
-      },
-      required: true,
-    },
-  },
-  setup(props, ctx) {
-    const dialog = ref(null)
-
-    function confirm() {
-      ctx.emit('confirm')
-    }
-
-    function close() {
-      dialog.value.handleClose()
-    }
-
-    return {
-      dialog,
-      confirm,
-      close,
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped></style>

src/layout/HeaderV2/PasswordLayer.vue

@@ -1,5 +1,7 @@
 <template>
-  <Layer :layer="layer" @confirm="submit" ref="layerDom">
+  <el-dialog ref="dialog" :close-on-click-modal="false"
+             v-model="showLayer" title="修改密码" :close-on-press-escape="false"
+             :show-close="props.closable" width="360px">
     <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" style="margin-right: 30px">
       <el-form-item label="用户名：" prop="name"> {{ username }}</el-form-item>
       <el-form-item label="原密码：" prop="old">
@@ -9,76 +11,67 @@
         <el-input v-model="form.new" placeholder="请输入新密码" class="security"></el-input>
       </el-form-item>
     </el-form>
-  </Layer>
+    <template #footer>
+      <div>
+        <el-button type="primary" @click="submit">确认</el-button>
+        <el-button v-show="props.closable" @click="close">取消</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
 </template>
 
-<script>
-import {defineComponent, ref} from 'vue'
+<script setup>
+import {ref} from 'vue'
 import {useStore} from 'vuex'
 import {changePassword} from '@/api/settings/user-settings'
-import Layer from '@/components/layer'
 
-export default defineComponent({
-  components: {
-    Layer,
-  },
-  props: {
-    layer: {
-      type: Object,
-      default: () => {
-        return {
-          show: false,
-          title: '',
-          showButton: true,
-        }
-      },
-    },
+const props = defineProps({
+  closable: {
+    type: Boolean,
+    default: true
   },
-  setup(props, ctx) {
-    const ruleForm = ref(null)
-    const layerDom = ref(null)
-    const store = useStore()
-    const username = store.getters['user/info'].name
-    let form = ref({
-      codeRs: store.getters['user/info'].codeRs,
-      name: '',
-      old: '',
-      new: '',
-    })
-    const rules = {
-      old: [{required: true, message: '请输入原密码', trigger: 'blur'}],
-      new: [{required: true, message: '请输入新密码', trigger: 'blur'}],
-    }
+})
+
+const showLayer = ref(true)
+const ruleForm = ref(null)
+const layerDom = ref(null)
+const store = useStore()
+const username = store.getters['user/info'].name
+let form = ref({
+  codeRs: store.getters['user/info'].codeRs,
+  name: '',
+  old: '',
+  new: '',
+})
+const rules = {
+  old: [{required: true, message: '请输入原密码', trigger: 'blur'}],
+  new: [{required: true, message: '请输入新密码', trigger: 'blur'}],
+}
 
-    function submit() {
-      if (ruleForm.value) {
-        ruleForm.value.validate((valid) => {
-          if (valid) {
-            let params = {
-              oldPassword: form.value.old,
-              newPassword: form.value.new,
-            }
-            changePassword(params).then(() => {
-              layerDom.value && layerDom.value.close()
-              store.dispatch('user/logout')
-            })
-          } else {
-            return false
-          }
+function submit() {
+  if (ruleForm.value) {
+    ruleForm.value.validate((valid) => {
+      if (valid) {
+        let params = {
+          oldPassword: form.value.old,
+          newPassword: form.value.new,
+        }
+        changePassword(params).then(() => {
+          layerDom.value && layerDom.value.close()
+          store.dispatch('user/logout')
         })
+      } else {
+        return false
       }
-    }
+    })
+  }
+}
+
+function close() {
+  showLayer.value = false
+}
 
-    return {
-      username,
-      form,
-      rules,
-      layerDom,
-      ruleForm,
-      submit,
-    }
-  },
-})
 </script>
 
 <style lang="scss" scoped></style>

src/layout/HeaderV2/ToolInfoBar.vue

@@ -1,38 +1,38 @@
 <template>
-    <div class="tool_info_bar">
-        <!--    -->
-        <!-- 快捷功能按钮 -->
-        <div class="function-list">
-
-            <div class="function-list-item" style="width:max-content">
-                <scroll-notifications/>
-            </div>
-            <div class="function-list-item">
-                <Download/>
-            </div>
-            <div class="function-list-item">
-                <Message/>
-            </div>
-            <div class="function-list-item" id="tutorial_full_screen">
-                <Full-screen/>
-            </div>
-            <div class="function-list-item">
-                <SizeChange/>
-            </div>
-            <div class="function-list-item">
-                <theme/>
-            </div>
-            <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px" id="tutorial_user_info">
-                <user-info @password="showPasswordLayer" @logout="logout"/>
-            </div>
-        </div>
-        <!-- 修改密码 -->
-        <password-layer v-if="layer.show" :layer="layer"/>
+  <div class="tool_info_bar">
+    <!--    -->
+    <!-- 快捷功能按钮 -->
+    <div class="function-list">
+
+      <div class="function-list-item" style="width:max-content">
+        <scroll-notifications/>
+      </div>
+      <div class="function-list-item">
+        <Download/>
+      </div>
+      <div class="function-list-item">
+        <Message/>
+      </div>
+      <div class="function-list-item" id="tutorial_full_screen">
+        <Full-screen/>
+      </div>
+      <div class="function-list-item">
+        <SizeChange/>
+      </div>
+      <div class="function-list-item">
+        <theme/>
+      </div>
+      <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px" id="tutorial_user_info">
+        <user-info @password="showPasswordLayer" @logout="logout"/>
+      </div>
     </div>
+    <!-- 修改密码 -->
+    <password-layer />
+  </div>
 </template>
 
 <script setup name='ToolInfoBar' lang="ts">
-import {reactive} from 'vue'
+import {ref} from 'vue'
 import {useStore} from 'vuex'
 import Download from './function-list/Download.vue'
 import Message from './function-list/Message.vue'
@@ -46,17 +46,14 @@ import Theme from "./function-list/Theme.vue";
 
 const store = useStore()
 
-const layer = reactive({
-    show: false,
-    showButton: true,
-})
+const showLayer = ref(false)
 
 const showPasswordLayer = () => {
-    layer.show = true
+  showLayer.value = true
 }
 
 const logout = () => {
-    store.dispatch('user/logout')
+  store.dispatch('user/logout')
 }
 
 </script>