每日速递功能优化

client/src/views/OaSystem/newsCenter/dailyNotify/index.vue

@@ -73,48 +73,83 @@
       width="600px"
       :close-on-click-modal="false"
       :title="
-        (operateType === 'add' ? '新增' : operateType === 'editor' ? '编辑' : '查看') + '速递'
+        '每日速递' + (operateType === 'add' ? '新增' : operateType === 'editor' ? '编辑' : '查看')
       "
     >
-      <el-form :model="formData" label-width="96px" :rules="rules" ref="formRef">
-        <el-form-item label="发布人：">
+      <div class="dailyNotifyDetail" v-if="operateType === 'look'">
+        <div>
+          <span class="dialog_label_icon">
+            <el-icon class="icon" size="18"><UserFilled /></el-icon>
+            发布人：
+          </span>
           <span>{{ formData.nickname }}</span>
-        </el-form-item>
-        <el-form-item v-if="operateType === 'look'" label="发布时间：">
+        </div>
+        <div>
+          <span class="dialog_label_icon">
+            <el-icon class="icon" size="18"><BellFilled /></el-icon>
+            发布时间：
+          </span>
           <span>{{ formData.createTime }}</span>
-        </el-form-item>
-        <template v-if="operateType !== 'look'">
-          <el-form-item label="发布内容：" prop="content">
-            <el-input
-              v-if="operateType !== 'look'"
-              v-model="formData.content"
-              maxlength="200"
-              placeholder="请输入您的发布内容，最多200字"
-              show-word-limit
-              :rows="8"
-              type="textarea"
-            />
-            <span v-else>{{ formData.content }}</span>
-          </el-form-item>
-        </template>
-        <template v-else>
-          <el-form-item label="发布内容：">
-            <span>{{ formData.content }}</span>
+        </div>
+        <div>
+          <span class="dialog_label_icon">
+            <el-icon class="icon" size="18"><Comment /></el-icon>
+            发布内容：
+          </span>
+          <span>{{ formData.content }}</span>
+        </div>
+      </div>
+      <div v-else class="dailyNotifyDetail">
+        <el-form :model="formData" label-width="120px" :rules="rules" ref="formRef">
+          <el-form-item label="发布人：">
+            <template #label>
+              <span class="dialog_label_icon">
+                <el-icon class="icon" size="18"><UserFilled /></el-icon>
+                发布人：
+              </span>
+            </template>
+            <span>{{ formData.nickname }}</span>
           </el-form-item>
-        </template>
-      </el-form>
+          <template v-if="operateType !== 'look'">
+            <el-form-item label="发布内容：" prop="content">
+              <template #label>
+                <span class="dialog_label_icon">
+                  <el-icon class="icon" size="18"><Comment /></el-icon>
+                  发布内容：
+                </span>
+              </template>
+              <el-input
+                v-model="formData.content"
+                maxlength="200"
+                placeholder="请输入您的发布内容，最多200字"
+                show-word-limit
+                :rows="8"
+                type="textarea"
+              />
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item label="发布内容：">
+              <span>{{ formData.content }}</span>
+            </el-form-item>
+          </template>
+        </el-form>
+      </div>
       <template #footer>
         <div class="dialog-footer">
+          <el-button type="primary" @click="dialogVisible = false" v-if="operateType === 'look'">
+            关闭
+          </el-button>
           <el-button type="primary" @click="onSubmitHandle" v-if="operateType !== 'look'">
             保存
           </el-button>
+          <el-button @click="dialogVisible = false" v-if="operateType !== 'look'"> 取消 </el-button>
         </div>
       </template>
     </el-dialog>
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
 import request from '@/config/axios'
 import { ElMessage } from 'element-plus'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
@@ -286,6 +321,51 @@ const onDeleteHandle = async (item: any) => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-dialog) {
+  border-radius: 10px;
+  overflow: hidden;
+  .el-dialog__header {
+    background: #f3f7fe;
+    margin-right: 0px;
+    padding: 15px 20px;
+    > span {
+      font-weight: bold;
+    }
+  }
+  .el-form-item__label,
+  .el-form-item__content {
+    font-size: 17px;
+  }
+  .el-form-item__label:before {
+    display: none;
+  }
+}
+.dailyNotifyDetail {
+  padding: 0px 20px;
+  padding-bottom: 20px;
+  .dialog_label_icon {
+    display: inline-block;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    > .icon {
+      color: #0079ee;
+      margin-right: 4px;
+    }
+  }
+  > div {
+    padding: 8px;
+    display: flex;
+    align-items: flex-start;
+    > span {
+      color: #333;
+      font-size: 17px;
+      &:nth-child(2) {
+        flex: 1;
+      }
+    }
+  }
+}
 .daily_notify_box {
   height: 100%;
   display: flex;

client/src/views/OaSystem/oaLayout/header.vue

@@ -29,18 +29,35 @@
         <img src="@/assets/imgs/OA/offLogin.png" alt="" />
       </div>
     </div>
-    <el-dialog v-model="dialogVisible" width="600px" title="查看速递">
-      <el-form :model="formData" label-width="96px">
-        <el-form-item label="发布人：">
+    <el-dialog v-model="dialogVisible" width="500px" title="每日速递详情">
+      <div class="dailyNotifyDetail">
+        <div>
+          <span class="dialog_label_icon">
+            <el-icon class="icon" size="18"><UserFilled /></el-icon>
+            发布人：
+          </span>
           <span>{{ formData.nickname }}</span>
-        </el-form-item>
-        <el-form-item label="发布时间：">
+        </div>
+        <div>
+          <span class="dialog_label_icon">
+            <el-icon class="icon" size="18"><BellFilled /></el-icon>
+            发布时间：
+          </span>
           <span>{{ formData.createTime }}</span>
-        </el-form-item>
-        <el-form-item label="发布内容：" prop="content">
+        </div>
+        <div>
+          <span class="dialog_label_icon">
+            <el-icon class="icon" size="18"><Comment /></el-icon>
+            发布内容：
+          </span>
           <span>{{ formData.content }}</span>
-        </el-form-item>
-      </el-form>
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -121,6 +138,18 @@ const toMoreHandle = () => {
 onMounted(() => {})
 </script>
 <style lang="scss" scoped>
+:deep(.el-dialog) {
+  border-radius: 10px;
+  overflow: hidden;
+  .el-dialog__header {
+    background: #f3f7fe;
+    margin-right: 0px;
+    padding: 15px 20px;
+    > span {
+      font-weight: bold;
+    }
+  }
+}
 .header {
   width: calc(100%);
   height: 60px;
@@ -246,4 +275,30 @@ onMounted(() => {})
     }
   }
 }
+.dailyNotifyDetail {
+  padding: 0px 20px;
+  padding-bottom: 20px;
+  .dialog_label_icon {
+    display: inline-block;
+    width: 120px;
+    display: flex;
+    align-items: center;
+    > .icon {
+      color: #0079ee;
+      margin-right: 4px;
+    }
+  }
+  > div {
+    padding: 8px;
+    display: flex;
+    align-items: flex-start;
+    > span {
+      color: #333;
+      font-size: 17px;
+      &:nth-child(2) {
+        flex: 1;
+      }
+    }
+  }
+}
 </style>