【值班系统】后台管理-通知公告，查看页面样式和原型UI不一致，缺少发布人、发布单位、发布时间、类型

src/components/cus/CusDialog.vue

@@ -8,6 +8,7 @@
       :modal-class="`
         __cus-dialog
         ${maxHeight === 'unset' ? '' : '__cus-dialog-auto-height'}
+        ${noHead ? '__cus-dialog-no-head' : ''}
       `"
       v-bind="$attrs"
       v-model="showDialog"
@@ -94,7 +95,8 @@ export default defineComponent({
     loading: {
       default: false,
       type: Boolean
-    }
+    },
+    noHead: {default: false}
   },
   setup(props, {emit}) {
     const store = useStore();

src/style/cus.scss

@@ -142,6 +142,7 @@
 }
 
 .__cus-dialog {
+  $borderRadius: 10px;
   &.__cus-dialog-auto-height {
     .el-overlay-dialog {
       .el-dialog {
@@ -151,11 +152,18 @@
       }
     }
   }
+  &.__cus-dialog-no-head {
+    .el-dialog__header {
+      display: none;
+    }
+    .el-dialog__body {
+      border-radius: $borderRadius !important;
+    }
+  }
   .el-overlay-dialog {
     .el-dialog {
       background-color: #0E2F57;
       height: var(--cus-dialog_height);
-      $borderRadius: 10px;
       border-radius: $borderRadius;
       display: flex;
       flex-direction: column;

src/views/system/notice-announcement/detail.vue

@@ -1,5 +1,6 @@
 <template>
   <CusDialog
+      :class="{view: isViewCpt}"
       title="通知公告"
       :show="show"
       @close="$emit('update:show', false)"
@@ -9,36 +10,64 @@
       :loading="loading"
       :showSubmit="!isViewCpt"
       :submitText="transfer.method === 'add' ? '确认发布' : '确认'"
+      :closeText="isViewCpt ? '关闭' : '取消'"
+      :noHead="isViewCpt"
+      :footAlign="isViewCpt ? 'right' : 'center'"
+      :append-to-body="false"
   >
     <div class="__normal-form">
-      <CusForm labelWidth="100px" ref="ref_form" :formView="isViewCpt">
-        <CusFormColumn
-            :span="24"
-            required
-            label="标题:"
-            v-model:param="cusDetail.title"
-            :maxLength="100"/>
-        <CusFormColumn
-            :span="24"
-            required
-            label="内容:"
-            type="textarea"
-            :rows="8"
-            v-model:param="cusDetail.noticeBody"/>
-        <CusFormColumn
-            :span="24"
-            required
-            label="类型:"
-            link="select"
-            v-model:param="cusDetail.type"
-            :options="$store.state.dictionary.noticeTypeList"/>
-        <CusFormColumn
-            :span="24"
-            label="上传附件:"
-            link="upload"
-            v-model:param="fileList"
-            :delRule="(file) => true"/>
-      </CusForm>
+      <template v-if="!isViewCpt">
+        <CusForm labelWidth="100px" ref="ref_form" :formView="isViewCpt">
+          <CusFormColumn
+              :span="24"
+              required
+              label="标题:"
+              v-model:param="cusDetail.title"
+              :maxLength="100"/>
+          <CusFormColumn
+              :span="24"
+              required
+              label="内容:"
+              type="textarea"
+              :rows="8"
+              v-model:param="cusDetail.noticeBody"/>
+          <CusFormColumn
+              :span="24"
+              required
+              label="类型:"
+              link="select"
+              v-model:param="cusDetail.type"
+              :options="$store.state.dictionary.noticeTypeList"/>
+          <CusFormColumn
+              :span="24"
+              label="上传附件:"
+              link="upload"
+              v-model:param="fileList"
+              :delRule="(file) => true"/>
+        </CusForm>
+      </template>
+      <template v-else>
+        <div class="view-content">
+          <div class="title">{{cusDetail.title}}</div>
+          <div class="sub">
+            <div class="sub-people">发布人：{{cusDetail.publisher}}</div>
+            <div class="sub-dept">发布单位：{{cusDetail.deptName}}</div>
+            <div class="sub-dept">发布时间：{{cusDetail.publishTime}}</div>
+            <div class="sub-dept">类型：{{$store.state.dictionary.noticeTypeMap.get(cusDetail.type)}}</div>
+          </div>
+          <div class="content">
+            {{cusDetail.noticeBody}}
+          </div>
+          <div class="file" v-if="fileList?.length > 0">
+            <div class="label">附件：</div>
+            <div class="value">
+              <template v-for="f in fileList">
+                <div class="value-file __hover" @click="onDownload(f)">{{f.name}}</div>
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
     </div>
   </CusDialog>
 </template>
@@ -59,6 +88,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import {downLoadBlob} from "@/utils/downLoadUrl";
 
 export default defineComponent({
   name: '',
@@ -114,7 +144,9 @@ export default defineComponent({
           })
         }
         nextTick(() => {
-          ref_form.value.reset()
+          if (!isViewCpt.value) {
+            ref_form.value.reset()
+          }
         })
       }
     })
@@ -160,15 +192,87 @@ export default defineComponent({
         })
       })
     }
+    const onDownload = (file) => {
+      that.$api.commonDownload({filePath: file.url}).then(res => {
+        downLoadBlob(res, file.name)
+      }).catch(() => {
+        ElMessage.error('下载失败！')
+      })
+    }
     return {
       ...toRefs(state),
       onSubmit,
       isViewCpt,
-      ref_form
+      ref_form,
+      onDownload
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
+.view {
+  .__normal-form {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-y: auto;
+    .view-content {
+      width: 100%;
+      height: 100%;
+      .title {
+        margin-top: 20px;
+        font-size: 20px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: rgba(255,255,255,0.7);
+        line-height: 23px;
+        text-align: center;
+      }
+      .sub {
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: rgba(255,255,255,0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 8px;
+        >div {
+          margin-right: 24px;
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+      .content {
+        margin-top: 24px;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        color: rgba(255,255,255,0.7);
+        line-height: 21px;
+      }
+      .file {
+        margin-top: 30px;
+        display: flex;
+        font-size: 14px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        .label {
+          color: rgba(255,255,255,0.7);
+          line-height: 22px;
+        }
+        .value {
+          flex: 1;
+          text-decoration: underline;
+          color: #2EB8FF;
+          .value-file {
+            line-height: 22px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>