From 50156e770d0c88393d53b6135bde1823422bbd0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Thu, 17 Aug 2023 16:44:34 +0800
Subject: [PATCH] =?UTF-8?q?:zap:=E6=96=B0=E5=A2=9Ezr-dialog=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=AF=E4=BB=A5=E5=AE=9E=E7=8E=B0=E5=85=A8=E5=B1=8F?=
 =?UTF-8?q?dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element-ui.scss |  5 ++
 src/components/Dialog/index.vue   | 93 +++++++++++++++++++++++++++++++
 src/main.js                       |  3 +
 src/views/system/notice/index.vue |  4 +-
 4 files changed, 103 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Dialog/index.vue

diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index d599028..73de1bf 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -128,7 +128,12 @@
     justify-content: space-between;
   }
 }
+
 // el-table 表头样式
 .el-table-header-cell {
   text-align: center !important;
 }
+
+.el-dialog__headerbtn {
+  width: 47px !important;
+}
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
new file mode 100644
index 0000000..8222794
--- /dev/null
+++ b/src/components/Dialog/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <el-dialog
+    :width="width"
+    :title="title"
+    :lock-scroll="false"
+    v-model="open"
+    :lockScroll="lockScroll"
+    :fullscreen="isFullscreen"
+    :draggable="draggable"
+    @closed="close">
+    <template #header="{ close, titleId, titleClass }">
+      <div class="custom-header">
+        <span :id="titleId" :class="titleClass">{{ title }}</span>
+        <span class="fullscreen" @click="handleScreen()">
+          <svg-icon :name="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
+        </span>
+      </div>
+    </template>
+
+    <slot></slot>
+
+    <template v-slot:footer>
+      <slot name="footer"> </slot>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: String
+  },
+  width: {
+    type: [Number, String],
+    default: 0
+  },
+  fullScreen: {
+    type: Boolean,
+    default: false
+  },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const isFullscreen = ref(false)
+const open = ref(false)
+watch(
+  () => props.modelValue,
+  (val) => {
+    open.value = val
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.fullScreen,
+  (val) => {
+    isFullscreen.value = val
+  },
+  { deep: true, immediate: true }
+)
+
+const emit = defineEmits()
+function handleScreen() {
+  isFullscreen.value = !isFullscreen.value
+}
+function close() {
+  emit('close')
+}
+</script>
+<style>
+.custom-header {
+  position: relative;
+}
+.fullscreen {
+  position: absolute;
+  right: 13px;
+  top: 5px;
+  cursor: pointer;
+  width: 27px;
+  height: 27px;
+  text-align: center;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index c48be56..ca1a1ce 100644
--- a/src/main.js
+++ b/src/main.js
@@ -41,6 +41,8 @@ import ImagePreview from '@/components/ImagePreview'
 import DictTag from '@/components/DictTag'
 // el-date-picker 快捷选项
 import dateOptions from '@/utils/dateOptions'
+// Dialog组件
+import Dialog from '@/components/Dialog'
 
 const app = createApp(App)
 signalR.init(import.meta.env.VITE_APP_SOCKET_API)
@@ -65,6 +67,7 @@ app.component('UploadImage', ImageUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('svg-icon', SvgIcon)
+app.component('ZrDialog', Dialog)
 
 directive(app)
 
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index 62489fd..3a0c993 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -68,7 +68,7 @@
     <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改公告对话框 -->
-    <el-dialog :title="title" v-model="open" width="780px" append-to-body>
+    <zr-dialog :title="title" v-model="open" width="780px" @close="cancel" fullScreen>
       <el-form ref="noticeRef" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :lg="24">
@@ -104,7 +104,7 @@
         <el-button text @click="cancel">{{ $t('btn.cancel') }}</el-button>
         <el-button type="primary" @click="submitForm">{{ $t('btn.submit') }}</el-button>
       </template>
-    </el-dialog>
+    </zr-dialog>
   </div>
 </template>