灾害预警统一完成

src/components/BasicForm.vue

@@ -55,11 +55,20 @@
 </script>
 
 <style lang="scss" scoped>
+  @use '@/views/disaster/style/basic-form.scss' as *;
   .el-form {
     display: flex;
     flex-direction: column;
     width: 600px;
     height: 100%;
-    gap: 12px;
+    gap: 32px;
+
+    .el-form-item {
+      margin-bottom: 0;
+    }
+    
+    :deep(.el-form-item__label) {
+      padding: 0;
+    }
   }
 </style>

src/components/BasicTable.vue

@@ -81,19 +81,6 @@
   .el-table {
     width: 100%;
   }
-  :deep(.el-table th),
-  :deep(.el-table.is-scrolling-none th.el-table-fixed-column--left),
-  :deep(.el-table.is-scrolling-none th.el-table-fixed-column--right) {
-    font-size: 14px;
-    color: rgba($text-color, 0.85);
-    background-color: #fafafa !important;
-  }
-  :deep(.el-table td) {
-    font-size: 14px;
-    color: rgba($text-color, 0.65);
-    border: none;
-    padding: 16px;
-  }
   .el-pagination {
     display: flex;
     justify-content: flex-end;
@@ -101,9 +88,11 @@
   :deep(.el-loading-mask) {
     background-color: rgba(0, 0, 0, 0.05);
   }
+
   :deep(.el-table--fit .el-table__inner-wrapper:before) {
-    height: 0;
+    height: 0 !important;
   }
+
   :deep(.el-table__empty-text) {
     @include flex-center;
     flex-direction: column;

src/styles/common.scss

@@ -11,22 +11,31 @@
 
 //表格
 .el-table {
-  --el-table-header-bg-color: #f5f7fa;
-  --el-table-header-text-color: rgb(31, 34, 37) !important;
+  --el-table-text-color: rgba(0, 0, 0, 0.88) !important;
+  --el-fill-color-light: #f8f9fa !important;
+  --el-table-header-text-color: rgba(0, 0, 0, 0.88) !important;
 }
-
-.el-table thead {
-  background-color: rgb(31, 34, 37);
-}
-
+// 表头
 .el-table th.el-table__cell {
-  background-color: #f5f7fa !important;
+  --el-table-header-bg-color: rgba(0, 0, 0, 0.02);
 }
-
-.el-table {
-  .el-button {
-    font-weight: 400;
-  }
+// 固定列
+.el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table__header-wrapper tr th.el-table-fixed-column--right {
+  --el-table-header-bg-color: #fafafa;
+}
+// 悬浮颜色
+// 表格下横线
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  --el-table-border: 1px solid rgba(0, 0, 0, 0.06);
+}
+// 表格的padding
+.el-table .el-table__cell {
+  padding: 12px 0 !important;
+}
+.el-table .cell {
+  padding: 0 24px !important;
 }
 
 .el-button--primary {

src/styles/custom-component.scss

@@ -1,9 +1,7 @@
 @use './variables.scss' as *;
 
 .custom-tooltip {
-  width: 200px;
-  max-height: 200px;
-  overflow-y: auto;
+  max-width: 1000px;
 }
 
 .customDialog--pushObject {
@@ -52,16 +50,15 @@ $message-box-content-padding--icon: 36px;
   }
 }
 
- .customMessageBox--default {
+.customMessageBox--default {
   @extend .customMessageBox;
   .el-message-box__content {
     padding-left: $message-box-content-padding--default;
   }
 }
 
- 
 .customMessageBox--primary {
-   @extend .customMessageBox--icon;
+  @extend .customMessageBox--icon;
   .el-message-box__title::before {
     background-image: url('@/assets/images/message-box/primary@1X.png');
   }

src/types/disaster-warning/index.ts

@@ -10,12 +10,13 @@ interface BasicResponse {
 export interface WarningInfoListResponse extends BasicResponse {
   warnTime: string;
   content: string;
+  contentEltooptip?: boolean;
 }
 
 interface BasicListQuery {
-  disasterType?: string;
-  disasterLevel?: string;
-  effectState?: string;
+  disasterType?: string | null;
+  disasterLevel?: string | null;
+  effectState?: number | null;
 }
 
 export interface WarningInfoListQuery extends BasicListQuery {}

src/views/disaster/components/Search.vue

@@ -59,7 +59,6 @@
     &--item {
       @include flex-center;
       white-space: nowrap;
-      gap: 10px;
     }
     span {
       color: rgba(0, 0, 0, 0.85);

src/views/disaster/constant/index.ts

@@ -17,14 +17,14 @@ export enum ACTIVE_STATUS {
 
 export const ACTIVE_STATUS_COLOR = {
   [ACTIVE_STATUS.ACTIVE]: '#52c41a',
-  [ACTIVE_STATUS.INACTIVE]: '#ff4d4f',
-  [ACTIVE_STATUS.NOT_EFFECTIVE]: '#1890ff',
+  [ACTIVE_STATUS.NOT_EFFECTIVE]: '#ff4d4f',
+  [ACTIVE_STATUS.INACTIVE]: '#1890ff',
 };
 
 export const ACTIVE_STATUS_MAP: Record<number, string> = {
-  [ACTIVE_STATUS.INACTIVE]: '失效',
-  [ACTIVE_STATUS.NOT_EFFECTIVE]: '未生效',
   [ACTIVE_STATUS.ACTIVE]: '生效',
+  [ACTIVE_STATUS.NOT_EFFECTIVE]: '未生效',
+  [ACTIVE_STATUS.INACTIVE]: '失效',
 };
 
 export const ACTIVE_STATUS_OPTIONS_DEFAULT = [

src/views/disaster/disaster-warning/PageDefenseNotice.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="disaster-precaution-container">
     <header class="disaster-precaution-container__header">
-      <span class="disaster-precaution-container__title">灾害防御通知</span>
+      <span class="disaster-precaution-container__title">管理规定与通知</span>
     </header>
     <main class="disaster-precaution-container__main">
       <div class="disaster-precaution">
@@ -12,7 +12,7 @@
             :icon="Plus"
             @click="handleCreateDefenseNotice"
             v-if="defenseNoticePermissions"
-            >创建灾害防御通知
+            >创建规定与通知
           </el-button>
           <Search
             :searchConfig="
@@ -65,36 +65,38 @@
             </div>
           </template>
           <template #action="scope">
-            <ActionButton
-              text="编辑"
-              v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE && defenseNoticePermissions"
-              @click="handleEditDefenseNotice(scope.row.id)"
-            />
-            <ActionButton text="查看" @click="handleViewDefenseNotice(scope.row.id)" />
-            <ActionButton
-              text="发布"
-              :popconfirm="{
-                title: '确定要发布?',
-              }"
-              v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE && defenseNoticePermissions"
-              @confirm="handlePublishDefenseNotice(scope.row.id, scope.row.effectState)"
-            />
-            <ActionButton
-              text="撤回"
-              :popconfirm="{
-                title: '确定要撤回?',
-              }"
-              v-else-if="scope.row.effectState === ACTIVE_STATUS.ACTIVE && defenseNoticePermissions"
-              @confirm="handlePublishDefenseNotice(scope.row.id, scope.row.effectState)"
-            />
-            <ActionButton
-              text="删除"
-              :popconfirm="{
-                title: '确定要删除?',
-              }"
-              @confirm="handleDeleteDefenseNotice(scope.row.id)"
-              v-if="defenseNoticePermissions"
-            />
+            <div class="action-container--div">
+              <ActionButton
+                text="编辑"
+                v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE && defenseNoticePermissions"
+                @click="handleEditDefenseNotice(scope.row.id)"
+              />
+              <ActionButton text="查看" @click="handleViewDefenseNotice(scope.row.id)" />
+              <ActionButton
+                text="发布"
+                :popconfirm="{
+                  title: '确定要发布?',
+                }"
+                v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE && defenseNoticePermissions"
+                @confirm="handlePublishDefenseNotice(scope.row.id, scope.row.effectState)"
+              />
+              <ActionButton
+                text="撤回"
+                :popconfirm="{
+                  title: '确定要撤回?',
+                }"
+                v-else-if="scope.row.effectState === ACTIVE_STATUS.ACTIVE && defenseNoticePermissions"
+                @confirm="handlePublishDefenseNotice(scope.row.id, scope.row.effectState)"
+              />
+              <ActionButton
+                text="删除"
+                :popconfirm="{
+                  title: '确定要删除?',
+                }"
+                @confirm="handleDeleteDefenseNotice(scope.row.id)"
+                v-if="defenseNoticePermissions"
+              />
+            </div>
           </template>
         </BasicTable>
       </div>
@@ -181,9 +183,9 @@
     ElMessage.success('删除成功');
   };
   const searchData = reactive({
-    disasterType: '',
-    disasterLevel: '',
-    effectState: '',
+    disasterType: null,
+    disasterLevel: null,
+    effectState: null,
   });
   const { tableConfig, pagination } = useTableConfig(DEFENSE_NOTICE_TABLE_COLUMNS_DEFAULT, TABLE_OPTIONS);
   let defenseNoticeListQuery: QueryPageRequest<DefenseNoticeListQuery> = {
@@ -193,13 +195,13 @@
   };
   const handleSearch = () => {
     defenseNoticeListQuery.queryParam = {};
-    if (searchData.disasterLevel !== '') {
+    if (searchData.disasterLevel) {
       defenseNoticeListQuery.queryParam.disasterLevel = searchData.disasterLevel;
     }
-    if (searchData.effectState !== '') {
+    if (searchData.effectState) {
       defenseNoticeListQuery.queryParam.effectState = searchData.effectState;
     }
-    if (searchData.disasterType !== '') {
+    if (searchData.disasterType) {
       defenseNoticeListQuery.queryParam.disasterType = searchData.disasterType;
     }
     if (Object.keys(defenseNoticeListQuery.queryParam).length > 0) {

src/views/disaster/disaster-warning/PageDefenseNoticeItem.vue

@@ -30,13 +30,13 @@
   const operate = route.query.operate;
   const id = route.query.id;
   const headerTitle = computed(() => {
-    const fixedTitle = '灾害防御通知';
+    const fixedTitle = '管理规定与通知';
     if (operate === 'create') {
       return `创建${fixedTitle}`;
     } else if (operate === 'edit') {
       return `编辑${fixedTitle}`;
     }
-    return '通知详情';
+    return '详情';
   });
   const dynamicComponent = computed(() => {
     if (operate === 'create') {

src/views/disaster/disaster-warning/PageWarningInfo.vue

@@ -60,10 +60,18 @@
             <span>{{ getDisasterLevel(scope.row.disasterLevel) }}</span>
           </template>
           <template #content="scope">
-            <div class="content--div">
-              <el-tooltip :content="scope.row.content" placement="top" popper-class="custom-tooltip" effect="light">
+            <div class="content--div" :style="{ maxHeight: contentMaxHeight + 'px' }">
+              <el-tooltip
+                :content="scope.row.content"
+                placement="top"
+                popper-class="custom-tooltip"
+                effect="light"
+                :hide-after="0"
+                v-if="scope.row.contentEltooptip"
+              >
                 <span>{{ scope.row.content }}</span>
               </el-tooltip>
+              <span v-else>{{ scope.row.content }}</span>
             </div>
           </template>
           <template #effectState="scope">
@@ -76,34 +84,36 @@
             </div>
           </template>
           <template #action="scope">
-            <ActionButton
-              text="编辑"
-              @click="handleEditWarningInfo(scope.row.id)"
-              v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE"
-            />
-            <ActionButton
-              text="发布"
-              :popconfirm="{
-                title: '确定要发布?',
-              }"
-              v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE"
-              @confirm="handlePublishWarningInfo(scope.row.id, scope.row.effectState)"
-            />
-            <ActionButton
-              text="撤回"
-              :popconfirm="{
-                title: '确定要撤回?',
-              }"
-              v-else-if="scope.row.effectState === ACTIVE_STATUS.ACTIVE"
-              @confirm="handlePublishWarningInfo(scope.row.id, scope.row.effectState)"
-            />
-            <ActionButton
-              text="删除"
-              :popconfirm="{
-                title: '确定要删除?',
-              }"
-              @confirm="handleDeleteWarningInfo(scope.row.id)"
-            />
+            <div class="action-container--div">
+              <ActionButton
+                text="编辑"
+                @click="handleEditWarningInfo(scope.row.id)"
+                v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE"
+              />
+              <ActionButton
+                text="发布"
+                :popconfirm="{
+                  title: '确定要发布?',
+                }"
+                v-if="scope.row.effectState === ACTIVE_STATUS.NOT_EFFECTIVE"
+                @confirm="handlePublishWarningInfo(scope.row.id, scope.row.effectState)"
+              />
+              <ActionButton
+                text="撤回"
+                :popconfirm="{
+                  title: '确定要撤回?',
+                }"
+                v-else-if="scope.row.effectState === ACTIVE_STATUS.ACTIVE"
+                @confirm="handlePublishWarningInfo(scope.row.id, scope.row.effectState)"
+              />
+              <ActionButton
+                text="删除"
+                :popconfirm="{
+                  title: '确定要删除?',
+                }"
+                @confirm="handleDeleteWarningInfo(scope.row.id)"
+              />
+            </div>
           </template>
         </BasicTable>
       </div>
@@ -112,7 +122,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, reactive } from 'vue';
+  import { ref, onMounted, reactive, nextTick } from 'vue';
   import { Plus } from '@element-plus/icons-vue';
   import Search from '@/views/disaster/components/Search.vue';
   import BasicTable from '@/components/BasicTable.vue';
@@ -149,10 +159,11 @@
     useDisasterWarningHook();
 
   const router = useRouter();
+  const contentMaxHeight = 50;
   const searchData = reactive({
-    disasterType: '',
-    disasterLevel: '',
-    effectState: '',
+    disasterType: null,
+    disasterLevel: null,
+    effectState: null,
   });
   const getWarningIcon = (disasterCode: string) => {
     const icon = warningTypeDice.value.find((item) => item.itemCode === disasterCode)?.imageUrl;
@@ -201,13 +212,13 @@
   };
   const handleSearch = () => {
     wanrningInfoListQuery.queryParam = {};
-    if (searchData.disasterLevel !== '') {
+    if (searchData.disasterLevel) {
       wanrningInfoListQuery.queryParam.disasterLevel = searchData.disasterLevel;
     }
-    if (searchData.disasterType !== '') {
+    if (searchData.disasterType) {
       wanrningInfoListQuery.queryParam.disasterType = searchData.disasterType;
     }
-    if (searchData.effectState !== '') {
+    if (searchData.effectState) {
       wanrningInfoListQuery.queryParam.effectState = searchData.effectState;
     }
     if (Object.keys(wanrningInfoListQuery.queryParam).length > 0) {
@@ -232,6 +243,15 @@
     tableData.value = res.records;
     pagination.total = res.totalRow;
     tableConfig.loading = false;
+
+    nextTick(() => {
+      const contentDivs = document.querySelectorAll('.content--div');
+      contentDivs.forEach((div, index) => {
+        if (div.scrollHeight > contentMaxHeight) {
+          tableData.value[index - 1].contentEltooptip = true;
+        }
+      });
+    });
   };
   onMounted(() => {
     getTableData();
@@ -256,7 +276,6 @@
   }
   .content--div {
     width: 100%;
-    max-height: 50px;
     overflow-y: hidden;
   }
 </style>

src/views/disaster/disaster-warning/src/common.scss

@@ -4,5 +4,5 @@
   gap: 8px !important;
 }
 .el-select {
-  width: 200px;
+  --el-select-width: 200px;
 }

src/views/disaster/disaster-warning/src/components/CreateDefenseNoticeItem.vue

@@ -1,44 +1,42 @@
 <template>
   <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-        <template #disasterType>
-          <el-select v-model="ruleFormData.disasterType" placeholder="请选择灾害类型" filterable>
-            <el-option
-              v-for="item in disasterTypeDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #disasterLevel>
-          <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-            <el-option
-              v-for="item in disasterLevelDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #attachmentListRes>
-          <UploadFiles label="上传附件" ref="uploadFilesRef" @uploadSuccess="handleUploadSuccess" />
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush">
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-          <SelectGroup
-            v-if="ruleFormData.isPush === IS_PUSH.PUSH"
-            ref="selectGroupRef"
-            :userGroupList="ruleFormData.userGroupList || []"
-            @userGroupListChange="handleUserGroupListChange"
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #disasterType>
+        <el-select v-model="ruleFormData.disasterType" placeholder="请选择灾害类型" filterable>
+          <el-option
+            v-for="item in disasterTypeDice"
+            :key="item.itemCode"
+            :label="item.itemValue"
+            :value="item.itemCode"
           />
-        </template>
-      </BasicForm>
-    </section>
+        </el-select>
+      </template>
+      <template #disasterLevel>
+        <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+          <el-option
+            v-for="item in disasterLevelDice"
+            :key="item.itemCode"
+            :label="item.itemValue"
+            :value="item.itemCode"
+          />
+        </el-select>
+      </template>
+      <template #attachmentListRes>
+        <UploadFiles label="上传附件" ref="uploadFilesRef" @uploadSuccess="handleUploadSuccess" />
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+        </el-radio-group>
+        <SelectGroup
+          v-if="ruleFormData.isPush === IS_PUSH.PUSH"
+          ref="selectGroupRef"
+          :userGroupList="ruleFormData.userGroupList || []"
+          @userGroupListChange="handleUserGroupListChange"
+        />
+      </template>
+    </BasicForm>
   </div>
 </template>
 
@@ -74,8 +72,6 @@
 
   const handleUploadSuccess = (fileList: FileItem[]) => {
     ruleFormData.attachmentListRes = fileList;
-    if (!basicFormRef.value) return;
-    basicFormRef.value.validateField('attachmentListRes');
   };
 
   const handleValidate = async () => {

src/views/disaster/disaster-warning/src/components/CreateWarningInfoItem.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-        <template #disasterType>
-          <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
-            <el-option
-              v-for="item in warningTypeDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #disasterLevel>
-          <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-            <el-option
-              v-for="item in disasterLevelDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush">
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-          <SelectGroup
-            v-if="ruleFormData.isPush"
-            ref="selectGroupRef"
-            :userGroupList="ruleFormData.userGroupList || []"
-            @userGroupListChange="handleUserGroupListChange"
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #disasterType>
+        <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
+          <el-option
+            v-for="item in warningTypeDice"
+            :key="item.itemCode"
+            :label="item.itemValue"
+            :value="item.itemCode"
           />
-        </template>
-      </BasicForm>
-    </section>
+        </el-select>
+      </template>
+      <template #disasterLevel>
+        <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+          <el-option
+            v-for="item in disasterLevelDice"
+            :key="item.itemCode"
+            :label="item.itemValue"
+            :value="item.itemCode"
+          />
+        </el-select>
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+        </el-radio-group>
+        <SelectGroup
+          v-if="ruleFormData.isPush"
+          ref="selectGroupRef"
+          :userGroupList="ruleFormData.userGroupList || []"
+          @userGroupListChange="handleUserGroupListChange"
+        />
+      </template>
+    </BasicForm>
   </div>
 </template>
 
@@ -95,7 +93,4 @@
 
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
-  :deep(.el-date-editor) {
-    --el-date-editor-width: 100%;
-  }
 </style>

src/views/disaster/disaster-warning/src/components/EditDefenseNoticeItem.vue

@@ -76,8 +76,6 @@
 
   const handleUploadSuccess = (fileList: FileItem[]) => {
     ruleFormData.attachmentListRes = fileList;
-    if (!basicFormRef.value) return;
-    basicFormRef.value.validateField('attachmentListRes');
   };
 
   const getDefenseNoticeDetailData = async () => {

src/views/disaster/disaster-warning/src/components/EditWarningInfoItem.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-        <template #disasterType>
-          <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
-            <el-option
-              v-for="item in warningTypeDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #disasterLevel>
-          <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-            <el-option
-              v-for="item in disasterLevelDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush">
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-          <SelectGroup
-            v-if="ruleFormData.isPush"
-            ref="selectGroupRef"
-            :userGroupList="ruleFormData.userGroupList || []"
-            @userGroupListChange="handleUserGroupListChange"
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #disasterType>
+        <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
+          <el-option
+            v-for="item in warningTypeDice"
+            :key="item.itemCode"
+            :label="item.itemValue"
+            :value="item.itemCode"
           />
-        </template>
-      </BasicForm>
-    </section>
+        </el-select>
+      </template>
+      <template #disasterLevel>
+        <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+          <el-option
+            v-for="item in disasterLevelDice"
+            :key="item.itemCode"
+            :label="item.itemValue"
+            :value="item.itemCode"
+          />
+        </el-select>
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+        </el-radio-group>
+        <SelectGroup
+          v-if="ruleFormData.isPush"
+          ref="selectGroupRef"
+          :userGroupList="ruleFormData.userGroupList || []"
+          @userGroupListChange="handleUserGroupListChange"
+        />
+      </template>
+    </BasicForm>
   </div>
 </template>
 
@@ -68,7 +66,6 @@
 
   const getWarningInfoDetailData = async () => {
     const res = await getWarningInfoDetail(props.id);
-    console.log(res);
     for (const key in res) {
       if (key in ruleFormData) {
         ruleFormData[key] = res[key as keyof typeof res];
@@ -109,7 +106,5 @@
 
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
-  :deep(.el-date-editor) {
-    --el-date-editor-width: 100%;
-  }
+  @use '@/views/disaster/style/basic-form.scss' as *;
 </style>

src/views/disaster/disaster-warning/src/components/ViewDefenseNoticeItem.vue

@@ -1,9 +1,16 @@
 <template>
   <div class="info-container">
     <header class="info-container__header">
-      <el-tooltip :content="defenseNoticeDetail?.title" placement="bottom-start" effect="light">
+      <el-tooltip
+        :content="defenseNoticeDetail?.title"
+        placement="bottom-start"
+        effect="light"
+        :hide-after="0"
+        v-if="defenseNoticeDetail?.title && defenseNoticeDetail.title.length > 50"
+      >
         <span class="title">{{ defenseNoticeDetail?.title }}</span>
       </el-tooltip>
+      <span class="title" v-else>{{ defenseNoticeDetail?.title }}</span>
       <div class="disaster">
         <p class="info-item">
           灾害类型：<span class="info-content">{{ getDisasterType(defenseNoticeDetail?.disasterType || '') }}</span>
@@ -14,9 +21,10 @@
       </div>
       <span class="publish-info">
         <p class="info-item">
-          <span>{{ defenseNoticeDetail?.pushTime? '发布人：': '创建人：' }}</span>
+          <span>{{ defenseNoticeDetail?.pushTime ? '发布人：' : '创建人：' }}</span>
           <span class="info-content">
-            {{  defenseNoticeDetail?.pushTime? defenseNoticeDetail.pushName : defenseNoticeDetail?.realname }} {{ defenseNoticeDetail?.pushTime }}
+            {{ defenseNoticeDetail?.pushTime ? defenseNoticeDetail.pushName : defenseNoticeDetail?.realname }}
+            {{ defenseNoticeDetail?.pushTime }}
           </span>
         </p>
       </span>
@@ -25,7 +33,7 @@
     <section class="content">
       <div v-html="defenseNoticeDetail?.content"></div>
     </section>
-    <section class="attachment">
+    <section class="attachment" v-if="defenseNoticeDetail?.attachmentListRes.length">
       <span class="info-content">附件({{ defenseNoticeDetail?.attachmentListRes.length }})</span>
       <a @click="downloadAll">下载全部</a>
       <div class="attachment-list">
@@ -93,14 +101,13 @@
   .info-container {
     width: 100%;
     height: 100%;
-    overflow-y: auto;
     &__header {
       display: flex;
       flex-direction: column;
+      width: 100%;
     }
   }
   .title {
-    width: 100%;
     font-size: 20px;
     font-weight: 600;
     color: rgba($text-color, 0.85);
@@ -140,7 +147,6 @@
     a {
       color: $primary-color;
       cursor: pointer;
-      
     }
   }
   .attachment-list {
@@ -165,8 +171,12 @@
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }
     &--name {
+      width: 100%;
       font-size: 14px;
       color: #333;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     &--footer {
       @include flex-center;

src/views/disaster/disaster-warning/src/config/form.ts

@@ -5,17 +5,17 @@ import type { FormConfig } from '@/types/basic-form';
 // 通用表单信息
 const BASIC_FROM_CONFIG = {
   DISASTER_LEVEL: {
-    label: '灾害等级',
+    label: '灾害等级：',
     prop: 'disasterLevel',
     slot: 'disasterLevel',
   },
   IS_PUSH: {
-    label: '是否推送',
+    label: '是否推送：',
     prop: 'isPush',
     slot: 'isPush',
   },
   CREATE_USER: {
-    label: '创建人',
+    label: '创建人：',
     prop: 'realname',
     component: 'ElInput',
     componentProps: {
@@ -27,13 +27,13 @@ const BASIC_FROM_CONFIG = {
 // 预警信息表单信息
 export const WARNING_INFO_FROM_CONFIG: FormConfig[] = [
   {
-    label: '预警类型',
+    label: '预警类型：',
     prop: 'disasterType',
     slot: 'disasterType',
   },
   BASIC_FROM_CONFIG.DISASTER_LEVEL,
   {
-    label: '预警时间',
+    label: '预警时间：',
     prop: 'warnTime',
     component: 'ElDatePicker',
     componentProps: {
@@ -46,7 +46,7 @@ export const WARNING_INFO_FROM_CONFIG: FormConfig[] = [
     },
   },
   {
-    label: '信息来源',
+    label: '信息来源：',
     prop: 'source',
     component: 'ElInput',
     componentProps: {
@@ -56,7 +56,7 @@ export const WARNING_INFO_FROM_CONFIG: FormConfig[] = [
     },
   },
   {
-    label: '发布内容',
+    label: '发布内容：',
     prop: 'content',
     component: 'ElInput',
     componentProps: {
@@ -74,27 +74,27 @@ export const WARNING_INFO_FROM_CONFIG: FormConfig[] = [
 // 防御通知表单信息
 export const DEFENSE_NOTICE_FROM_CONFIG: FormConfig[] = [
   {
-    label: '灾害类型',
+    label: '灾害类型：',
     prop: 'disasterType',
     slot: 'disasterType',
   },
   BASIC_FROM_CONFIG.DISASTER_LEVEL,
   {
-    label: '通知标题',
+    label: '标题：',
     prop: 'title',
     component: 'ElInput',
     componentProps: {
-      placeholder: '请输入通知标题',
+      placeholder: '请输入标题',
       maxlength: 200,
       showWordLimit: true,
     },
   },
   {
-    label: '通知内容',
+    label: '内容：',
     prop: 'content',
     component: 'ElInput',
     componentProps: {
-      placeholder: '请输入通知内容',
+      placeholder: '请输入内容',
       type: 'textarea',
       rows: 5,
       maxlength: 1000,
@@ -102,7 +102,7 @@ export const DEFENSE_NOTICE_FROM_CONFIG: FormConfig[] = [
     },
   },
   {
-    label: '通知附件',
+    label: '附件：',
     prop: 'attachmentListRes',
     slot: 'attachmentListRes',
   },
@@ -161,6 +161,6 @@ export const WARNING_INFO_FROM_RULES = {
 export const DEFENSE_NOTICE_FROM_RULES = {
   disasterType: [{ required: true, message: '请选择灾害类型', trigger: 'change' }],
   ...BASIC_FROM_RULES,
-  title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
-  content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }]
+  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+  content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
 };

src/views/disaster/disaster-warning/src/config/search.ts

@@ -6,12 +6,12 @@ import type { SearchConfig } from '@/views/disaster/types';
 // 通用搜索配置
 const BASIC_SEARCH_CONFIG = {
   DISASTER_LEVEL: {
-    label: '灾害等级',
+    label: '灾害等级：',
     prop: 'disasterLevel',
     slot: 'disasterLevel',
   },
   EFFECT_STATE: {
-    label: '生效状态',
+    label: '生效状态：',
     prop: 'effectState',
     component: 'ElSelect',
     selectOptions: ACTIVE_STATUS_OPTIONS,
@@ -24,7 +24,7 @@ const BASIC_SEARCH_CONFIG = {
 // 预警信息搜索配置
 export const WARNING_INFO_SEARCH_CONFIG_DEFAULT: SearchConfig[] = [
   {
-    label: '预警类型',
+    label: '预警类型：',
     prop: 'disasterType',
     slot: 'disasterType',
   },
@@ -38,7 +38,7 @@ export const WARNING_INFO_SEARCH_CONFIG_PERMISSION: SearchConfig[] = [
 // 防御通知搜索配置
 export const DEFENSE_NOTICE_SEARCH_CONFIG_DEFAULT: SearchConfig[] = [
   {
-    label: '灾害类型',
+    label: '灾害类型：',
     prop: 'disasterType',
     slot: 'disasterType',
   },

src/views/disaster/disaster-warning/src/config/table.ts

@@ -9,7 +9,6 @@ export const TABLE_HEIGHT_PREMISSION = 'calc(65vh - 50px)';
 export const TABLE_OPTIONS = {
   emptyText: '暂无数据',
   loading: true,
-  stripe: true,
 };
 
 // 基础表格列配置
@@ -17,26 +16,23 @@ const BASIC_TABLE_COLUMNS = {
   DISASTER_TYPE: {
     prop: 'disasterType',
     label: '灾害类型',
-    align: 'center',
     slot: 'disasterType',
+    minWidth: '120px',
   },
   DISASTER_LEVEL: {
     prop: 'disasterLevel',
     label: '灾害等级',
-    align: 'center',
     slot: 'disasterLevel',
     minWidth: '150px',
   },
   PUBLISH_TIME: {
     prop: 'pushTime',
     label: '发布时间',
-    align: 'center',
     minWidth: '200px',
   },
   ACTIVE_STATUS: {
     prop: 'effectState',
     label: '生效状态',
-    align: 'center',
     slot: 'effectState',
     width: '120px',
   },
@@ -63,26 +59,23 @@ export const WARNING_INFO_TABLE_COLUMNS_DEFAULT: TableColumnProps[] = [
     label: '预警图标',
     align: 'center',
     slot: 'warningIcon',
-    minWidth: '150px',
+    width: '150px',
   },
   {
     prop: 'disasterType',
     label: '预警类型',
-    align: 'center',
     slot: 'disasterType',
-    minWidth: '200px',
+    minWidth: '180px',
   },
   BASIC_TABLE_COLUMNS.DISASTER_LEVEL,
   {
     prop: 'warnTime',
     label: '预警时间',
-    align: 'center',
     minWidth: '200px',
   },
   {
     prop: 'content',
     label: '发布内容',
-    align: 'center',
     minWidth: '200px',
     slot: 'content',
   },
@@ -98,15 +91,14 @@ export const WARNING_INFO_TABLE_COLUMNS_PERMISSION: TableColumnProps[] = [
 const DEFENSE_NOTICE_TABLE_COLUMNS_COMMON: TableColumnProps[] = [
   {
     prop: 'title',
-    label: '通知标题',
-    align: 'center',
+    label: '标题',
     minWidth: '200px',
   },
   {
     prop: 'disasterType',
     label: '灾害类型',
-    align: 'center',
     slot: 'disasterType',
+    minWidth: '120px',
   },
   BASIC_TABLE_COLUMNS.DISASTER_LEVEL,
 ];

src/views/disaster/style/basic-form.scss

@@ -0,0 +1,3 @@
+:deep(.el-date-editor) {
+  --el-date-editor-width: 100%;
+}

src/views/disaster/style/disaster.scss

@@ -68,6 +68,13 @@
   span {
     flex: 1;
     height: 100%;
-    text-align: center;
+    text-align: left;
   }
 }
+
+.action-container--div {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  gap: 12px;
+}

src/views/disaster/style/info-container.scss

@@ -1,4 +1,5 @@
 .info-container {
   width: 100%;
   height: 100%;
+  overflow-y: auto;
 }