通用样式

.env.production

@@ -14,8 +14,7 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
 VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 
 # 生产环境
-# VITE_APP_BASE_API = 'http://19.155.220.206:80'
-VITE_APP_BASE_API = 'http://10.181.7.235:80'
+VITE_APP_BASE_API = '/'
 VITE_APP_BASE_DOWNLOAD_API = '/api/file/download/'
 
 # 是否在打包时开启压缩，支持 gzip 和 brotli

src/assets/styles/element-ui.scss

@@ -75,20 +75,34 @@
 
     .el-dialog {
       margin: 0 auto !important;
-
+      padding: 0 !important;
+      .el-dialog__title {
+        color: rgba(0, 0, 0, 0.85) !important;
+        font-size: 14px !important;
+      }
       .el-dialog__body {
-        padding: 15px !important;
+        padding: 26px 24.5px 8px !important;
       }
       .el-dialog__header {
-        padding: 16px 16px 8px 16px;
+        padding: 13px 24.5px;
         box-sizing: border-box;
         border-bottom: 1px solid var(--brder-color);
         margin-right: 0;
       }
+      .el-dialog__footer {
+        padding-top: 0 !important;
+      }
     }
   }
 }
 
+.dialog-footer {
+  padding: 10px 24.5px !important;
+  border-top: 1px solid #E8E8E8;
+  display: flex;
+  justify-content: center;
+}
+
 .el-dialog__body {
   max-height: calc(90vh - 111px) !important;
   overflow-y: auto;
@@ -147,3 +161,273 @@
 .el-form--inline .el-input {
   width: 240px;
 }
+
+
+.el-select, .el-date-editor.el-input, .el-date-editor.el-input__wrapper, .el-input, .el-textarea  {
+  //width: 200px !important;
+  .el-select__wrapper, .el-input__wrapper, .el-textarea__inner {
+    border-radius: 2px;
+    box-shadow: 0 0 0 1px #d9d9d9 inset;
+  }
+}
+.el-button {
+  border-radius: 2px !important;
+  color: rgba(0, 0, 0, 0.65) !important;
+  &:hover {
+    border: 1px solid #65A3FF;
+    color: #65A3FF !important;
+  }
+  &:active {
+    color: #0067FF !important;
+    border: 1px solid #0067FF;
+  }
+  &:disabled {
+    color: rgba(90, 90, 90, 0.65) !important;
+    border: 1px solid #E7E7E7;
+  }
+}
+
+.el-button.el-button--primary {
+  background-color: #2c81ff !important;
+  border: 1px solid #2c81ff !important;
+  color: #ffffff !important;
+  &:hover {
+    background-color: #65a3ff !important;
+    border: 1px solid #65a3ff !important;
+    color: #ffffff !important;
+  }
+  &:active {
+    color: #ffffff !important;
+    border-color: #0067ff !important;
+    background-color: #0067ff !important;
+  }
+  &:disabled {
+    color: #ffffff !important;
+    background-color: #a6c6f7;
+    border-color: #a6c6f7 !important;
+  }
+}
+.el-button.el-button--danger {
+  background-color: #FF2F3C !important;
+  border: 1px solid #FF2F3C !important;
+  color: #ffffff !important;
+  &:hover {
+    background-color: #ff7780 !important;
+    border: 1px solid #ff7780 !important;
+    color: #ffffff !important;
+  }
+  &:active {
+    color: #ffffff !important;
+    border-color: #ea2e3a !important;
+    background-color: #ea2e3a !important;
+  }
+  &:disabled {
+    color: #ffffff !important;
+    background-color: #ec7880;
+    border-color: #ec7880 !important;
+  }
+}
+.el-button.el-button--success {
+  background-color: #40c75f !important;
+  border: 1px solid #40c75f !important;
+  color: #ffffff !important;
+  &:hover {
+    background-color: #75e48e !important;
+    border: 1px solid #75e48e !important;
+    color: #ffffff !important;
+  }
+  &:active {
+    color: #ffffff !important;
+    border-color: #05b42d !important;
+    background-color: #05b42d !important;
+  }
+  &:disabled {
+    color: #ffffff !important;
+    background-color: #8ad59b;
+    border-color: #8ad59b !important;
+  }
+}
+.el-button.el-button--warning {
+  background-color: #ffaf00 !important;
+  border: 1px solid #ffaf00 !important;
+  color: #ffffff !important;
+  &:hover {
+    background-color: #ffd16c !important;
+    border: 1px solid #ffd16c !important;
+    color: #ffffff !important;
+  }
+  &:active {
+    color: #ffffff !important;
+    border-color: #e9a000 !important;
+    background-color: #e9a000 !important;
+  }
+  &:disabled {
+    color: #ffffff !important;
+    background-color: #e6c273;
+    border-color: #e6c273 !important;
+  }
+}
+
+.el-button.is-plain {
+  background-color: transparent !important;
+}
+.el-button--primary.is-link, .el-button--primary.is-plain, .el-button--primary.is-text {
+  color: #2c81ff !important;
+  background-color: #ffffff !important;
+}
+.el-button.el-button--primary.is-plain {
+  color: #2C81FF !important;
+  &:hover {
+    background-color: #dce7f5 !important;
+  }
+  &:active {
+    background-color: #cadcf6 !important;
+  }
+  &:disabled {
+    border: 1px solid #2C81FF;
+    background-color: #dbe6f5 !important;
+  }
+}
+.el-button.el-button--danger.is-plain {
+  color: #FF2F3C !important;
+  &:hover {
+    background-color: #f2dfe1 !important;
+    color: #f90000 !important;
+  }
+  &:active {
+    background-color: #f4cbcf !important;
+  }
+  &:disabled {
+    border: 1px solid #f0cfd1 !important;
+    background-color: #f0cfd1 !important;
+  }
+}
+.el-button.el-button--success.is-plain {
+  color: #40c75f !important;
+  &:hover {
+    background-color: #deeee5 !important;
+    color: #40C75F !important;
+  }
+  &:active {
+    background-color: #ceead6 !important;
+  }
+  &:disabled {
+    border: 1px solid #d2ebd9 !important;
+    background-color: #d2ebd9 !important;
+  }
+}
+.el-button.el-button--warning.is-plain {
+  color: #FFAF00 !important;
+  &:hover {
+    background-color: #f2ecdb !important;
+    color: #FFAF00 !important;
+  }
+  &:active {
+    background-color: #f4e5c3 !important;
+  }
+  &:disabled {
+    border: 1px solid #eee5cd !important;
+    background-color: #eee5cd !important;
+  }
+}
+
+.el-form .el-form-item__label {
+  font-weight: 400 !important;
+  color: rgba(0, 0, 0, 0.85) !important;
+  padding-right: 0 !important;
+}
+.el-checkbox__inner {
+  width: 16px !important;
+  height: 16px !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+}
+.el-checkbox__inner:after {
+  top: 2px !important;
+  left: 5px !important;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: #2c81ff !important;
+  border-color: #2c81ff !important;
+  border-radius: 2px;
+}
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #ffffff !important;
+  border-color: rgba(0, 0, 0, 0.15) !important;
+  border-radius: 2px;
+  &::before {
+    width: 8px !important;
+    height: 8px !important;
+    background-color: #2c81ff !important;
+    transform: unset !important;
+    top: 3px !important;
+    left: 3px !important;
+  }
+}
+
+.el-table .el-table__inner-wrapper .el-table__header-wrapper th, .el-table .el-table__inner-wrapper .el-table__fixed-header-wrapper th {
+  color: rgba(0, 0, 0, 0.85) !important;
+  background-color: #fafafa !important;
+  border-color: #E8E8E8 !important;
+  font-weight: 500 !important;
+  height: 55px !important;
+}
+.el-table--enable-row-transition .el-table__body td.el-table__cell {
+  color: rgba(0, 0, 0, 0.65) !important;
+  border-color: #E8E8E8 !important;
+  height: 55px !important;
+}
+
+.el-pager li, .el-pagination.is-background .btn-next.is-disabled, .el-pagination.is-background .btn-prev.is-disabled, .el-pagination.is-background .el-pager li.is-disabled, .el-pagination.is-background .el-pager li:disabled, .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+  width: 32px !important;
+  height: 32px !important;
+  background: #FFFFFF !important;
+  border: 1px solid #D9D9D9 !important;
+  border-radius: 2px !important;
+  color: rgba(0, 0, 0, 0.65) !important;
+  font-size: 14px !important;
+  font-family: HelveticaNeue;
+  &:hover {
+    font-weight: normal !important;
+    background-color: #2C81FF !important;
+    border-color: #2C81FF !important;
+    color: #ffffff !important;
+  }
+}
+.el-pagination.is-background .btn-prev:disabled, .el-pagination.is-background .btn-next:disabled {
+  border-color: #D9D9D9 !important;
+  background-color: #f5f7fa !important;
+  color: #a8abb2 !important;
+  &:hover {
+    border-color: #D9D9D9 !important;
+    background-color: #f5f7fa !important;
+    color: #a8abb2 !important;
+  }
+}
+.el-pager li.is-active {
+  font-weight: normal !important;
+  background-color: #2C81FF !important;
+  border-color: #2C81FF !important;
+  color: #ffffff !important;
+}
+.el-pagination .el-select {
+  width: 100px !important;
+}
+.pagination-container {
+  margin-top: 5px !important;
+}
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label:before {
+  margin-right: 0 !important;
+}
+
+.el-button--warning.is-link, .el-button--warning.is-plain, .el-button--warning.is-text {
+  color: #e6a23c !important;
+}
+.el-button--success.is-link.is-disabled, .el-button--success.is-link.is-disabled:active, .el-button--success.is-link.is-disabled:focus, .el-button--success.is-link.is-disabled:hover, .el-button--success.is-plain.is-disabled, .el-button--success.is-plain.is-disabled:active, .el-button--success.is-plain.is-disabled:focus, .el-button--success.is-plain.is-disabled:hover, .el-button--success.is-text.is-disabled, .el-button--success.is-text.is-disabled:active, .el-button--success.is-text.is-disabled:focus, .el-button--success.is-text.is-disabled:hover {
+  color: #b3e19d !important;
+}
+.el-button--success.is-link, .el-button--success.is-plain, .el-button--success.is-text {
+  color: #67c23a !important;
+}
+.el-button--danger.is-link.is-disabled:active, .el-button--danger.is-link.is-disabled:focus, .el-button--danger.is-link.is-disabled:hover, .el-button--danger.is-plain.is-disabled:active, .el-button--danger.is-plain.is-disabled:focus, .el-button--danger.is-plain.is-disabled:hover, .el-button--danger.is-text.is-disabled:active, .el-button--danger.is-text.is-disabled:focus, .el-button--danger.is-text.is-disabled:hover {
+  color: #F90000 !important;
+}

src/assets/styles/index.scss

@@ -14,6 +14,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
+  color: rgba(0, 0, 0, 0.85);
   font-family:
     Helvetica Neue,
     Helvetica,
@@ -213,3 +214,91 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+.common-select-info {
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 15px;
+  background: #E6F7FF;
+  border: 1px solid #BAE7FF;
+  border-radius: 2px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  margin-bottom: 15px;
+  .info-left {
+    display: flex;
+    align-items: center;
+    .info-icon {
+      color: #2c81ff;
+      margin-right: 5px;
+    }
+    .info-text1 {
+      color: rgba(0, 0, 0, 0.65);
+    }
+    .info-text2 {
+      color: #2c81ff;
+      margin: 0 5px;
+    }
+  }
+  .clear-btn {
+    color: #2C81FF;
+    cursor: pointer;
+  }
+}
+
+.common-btn-text-primary {
+  color: #2C81FF !important;
+  cursor: pointer;
+  margin: 0 4px !important;
+}
+.common-btn-text-danger{
+  color: #F90000 !important;
+  cursor: pointer;
+  margin: 0 4px !important;
+}
+
+.common-dialog {
+  width: 100%;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  padding: 0 24px 24px;
+  z-index: 99;
+  .common-dialog-content {
+    border-bottom: 1px solid #e6f2ff;
+    border-left: 1px solid #e6f2ff;
+    border-right: 1px solid #e6f2ff;
+    background-image: linear-gradient(to bottom, #ffffff 0%, #ebf4ff 100%);
+    width: 100%;
+    height: 100%;
+    padding: 16px 24px;
+    .common-dialog-title-box {
+      font-size: 20px;
+      margin-bottom: 23.5px;
+      font-weight: 500;
+      display: flex;
+      align-items: flex-end;
+      .common-dialog-title-icon {
+        width: 16.54px;
+        height: 19.46px;
+        background: url('@/assets/images/edit.png') no-repeat;
+        background-size: 100% 100%;
+        margin-right: 4px;
+        margin-bottom: 2px;
+      }
+    }
+    .common-dialog-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

src/components/FileUpload/index.vue

@@ -1,43 +1,42 @@
 <template>
   <div class="upload-file">
-    <el-upload
-      ref="fileUploadRef"
-      multiple
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      :http-request="uploadFile"
-      class="upload-file-uploader"
-    >
-      <!-- 上传按钮 -->
-      <el-button type="primary">选取文件</el-button>
-    </el-upload>
-    <!-- 上传提示 -->
-    <div v-if="showTip" class="el-upload__tip">
-      请上传
-      <template v-if="fileSize">
-        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-      </template>
-      <template v-if="fileType">
-        格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b>
-      </template>
-      的文件
+    <div class="upload-flex">
+      <el-upload
+        ref="fileUploadRef"
+        multiple
+        :action="uploadFileUrl"
+        :before-upload="handleBeforeUpload"
+        :file-list="fileList"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        :on-success="handleUploadSuccess"
+        :show-file-list="false"
+        :headers="headers"
+        :http-request="uploadFile"
+        class="upload-file-uploader"
+      >
+        <!-- 上传按钮 -->
+        <el-button type="primary">
+          <div class="button-flex">
+            <i class="upload-icon" />
+            {{ buttonText }}
+          </div>
+        </el-button>
+      </el-upload>
+      <!-- 上传提示 -->
+      <div v-if="showTip" class="el-upload__tip">
+        <div>1.支持{{ fileType.join('、') }}文件</div>
+        <div>2.最多支持上传{{ limit }}个文件</div>
+      </div>
     </div>
     <!-- 文件列表 -->
     <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li v-for="(file, index) in fileList" :key="file.uid" class="el-upload-list__item ele-upload-list__item-content">
-        <el-link :underline="false" target="_blank" @click="handleDownload(file)">
+        <el-text class="common-btn-text-primary" @click="handleDownload(file)">
           <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-button type="danger" link @click="handleDelete(index)">删除</el-button>
-        </div>
+        </el-text>
+        <i class="delete-icon" @click="handleDelete(index)" />
       </li>
     </transition-group>
   </div>
@@ -54,6 +53,10 @@ const props = defineProps({
     type: [String, Object, Array],
     default: () => []
   },
+  buttonText: {
+    type: String,
+    default: '选取文件'
+  },
   // 数量限制
   limit: propTypes.number.def(5),
   // 大小限制(MB)
@@ -293,8 +296,7 @@ const handleDownload = (file: any) => {
 }
 
 .upload-file-list .el-upload-list__item {
-  border: 1px solid #e4e7ed;
-  line-height: 2;
+  line-height: 22px;
   margin-bottom: 10px;
   position: relative;
   padding: 3px 5px;
@@ -302,7 +304,6 @@ const handleDownload = (file: any) => {
 
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   color: inherit;
 }
@@ -310,4 +311,38 @@ const handleDownload = (file: any) => {
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+.upload-flex {
+  display: flex;
+  align-items: flex-start;
+  .el-upload__tip {
+    font-size: 12px;
+    line-height: 22px;
+    margin-left: 28.5px;
+    margin-top: 0;
+  }
+}
+.button-flex {
+  display: flex;
+  align-items: center;
+  .upload-icon {
+    width: 18px;
+    height: 14px;
+    background: url('@/assets/images/upload.png') no-repeat;
+    background-size: 100% 100%;
+    display: inline-block;
+    margin-right: 5px;
+  }
+}
+.el-upload-list__item:hover {
+  background-color: #fff !important;
+}
+.delete-icon {
+  width: 15px;
+  height: 16px;
+  background: url('@/assets/images/delete.png') no-repeat;
+  background-size: 100% 100%;
+  cursor: pointer;
+  margin-left: 7.5px;
+  display: inline-block;
+}
 </style>

src/types/components.d.ts

@@ -16,25 +16,16 @@ declare module 'vue' {
     CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -44,33 +35,27 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
-    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']

src/views/duty/eventing/CloseEventDialog.vue

@@ -1,45 +1,51 @@
 <template>
-  <el-dialog ref="formDialogRef" :model-value="visible" title="关闭事件" width="750px" append-to-body>
+  <el-dialog ref="formDialogRef" :model-value="visible" title="关闭事件" width="750px" append-to-body @close="closeDialog">
     <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
       <el-row>
         <el-col :span="24">
-          <el-form-item label="伤亡情况">
+          <el-form-item label="伤亡情况：">
             <el-row>
               <el-col :span="8">
-                <el-form-item label="死亡" prop="deaths">
-                  <el-input v-model="form.deaths">
-                    <template #append>人</template>
-                  </el-input>
-                </el-form-item>
+                <div class="flex">
+                  <span>死亡：</span>
+                  <el-form-item prop="deaths">
+                    <el-input v-model="form.deaths" />
+                  </el-form-item>
+                  <span style="margin: 0 24px 0 8px">人</span>
+                </div>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="受伤" prop="injuries">
-                  <el-input v-model="form.injuries">
-                    <template #append>人</template>
-                  </el-input>
-                </el-form-item>
+                <div class="flex">
+                  <span>受伤：</span>
+                  <el-form-item prop="injuries">
+                    <el-input v-model="form.injuries" />
+                  </el-form-item>
+                  <span style="margin: 0 24px 0 8px">人</span>
+                </div>
               </el-col>
               <el-col :span="8">
-                <el-form-item label="失联" prop="missing">
-                  <el-input v-model="form.missing">
-                    <template #append>人</template>
-                  </el-input>
-                </el-form-item>
+                <div class="flex">
+                  <span>失联：</span>
+                  <el-form-item prop="missing">
+                    <el-input v-model="form.missing" />
+                  </el-form-item>
+                  <span style="margin: 0 24px 0 8px">人</span>
+                </div>
               </el-col>
             </el-row>
           </el-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="总结报告" prop="fileNames">
-            <FileUpload v-model="form.fileNames" />
+          <el-form-item label="总结报告：" prop="fileNames">
+            <FileUpload v-model="form.fileNames" buttonText="上传报告" />
           </el-form-item>
         </el-col>
       </el-row>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="closeDialog">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
       </div>
     </template>
   </el-dialog>
@@ -118,4 +124,11 @@ const closeDialog = () => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  span {
+    white-space: nowrap;
+  }
+}
+</style>

src/views/duty/eventing/EventEditDialog.vue

@@ -1,101 +1,90 @@
 <template>
-    <el-dialog ref="formDialogRef" :model-value="visible" :title="props.title" width="650px" append-to-body @close="closeDialog">
+  <div v-show="modelValue" class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>{{ title }}</div>
+      </div>
+      <div class="common-dialog-box">
         <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
-            <el-form-item label="事件标题" prop="event_title">
-                <el-input v-model="form.event_title" placeholder="请输入事件标题" />
-            </el-form-item>
-            
-            <el-form-item label="事件类型" prop="event_type">
-                <el-select v-model="form.event_type" placeholder="请选择事件类型" clearable>
-                    <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            
-            <el-form-item label="事件等级" prop="event_level">
-                <el-select v-model="form.event_level" placeholder="请选择事件等级" clearable style="width:calc(100% - 30px)">
-                    <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-                <el-icon @click="eventLevelInfoDialogVisible = true" size="large" style="margin-left:8px"><WarningFilled /></el-icon>
-            </el-form-item>
-            
-            <el-form-item label="事件状态" prop="event_status">
-                <el-select v-model="form.event_status" placeholder="请选择事件状态" clearable :readonly="true">
-                    <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-            </el-form-item>
-            
-            <el-form-item label="事发时间" prop="event_time">
-                <el-date-picker v-model="form.event_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择事发时间"></el-date-picker>
-            </el-form-item>
-            
-            <el-form-item label="上报时间" prop="report_time">
-                <el-date-picker v-model="form.report_time" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择上报时间"></el-date-picker>
-            </el-form-item>
-            
-            <el-form-item label="伤亡情况">
-                <el-row :gutter="10">
-                    <el-col :span="6">
-                        <el-switch
-                            size="large"
-                            v-model="form.casualties"
-                            inline-prompt
-                            active-text="已上报"
-                            inactive-text="未上报"
-                            active-value="1"
-                            inactive-value="0"
-                        />
-                    </el-col>
-                    <el-col :span="4" v-show="form.casualties === '1'">
-                        <el-input v-model="form.deaths" placeholder="死亡">
-                            <template #suffix>人</template>
-                        </el-input>
-                    </el-col>
-                    <el-col :span="4" v-show="form.casualties === '1'">
-                        <el-input v-model="form.injuries" placeholder="受伤">
-                            <template #suffix>人</template>
-                        </el-input>
-                    </el-col>
-                    <el-col :span="4" v-show="form.casualties === '1'">
-                        <el-input v-model="form.missing" placeholder="失踪">
-                            <template #suffix>人</template>
-                        </el-input>
-                    </el-col>
-                </el-row>
-            </el-form-item>
-            
-            <el-form-item label="联系方式" prop="contact">
-                <el-input v-model="form.contact" placeholder="请输入联系方式" />
-            </el-form-item>
-            
-            <el-form-item label="事件来源" prop="event_source">
-                <el-input v-model="form.event_source" placeholder="请输入事件来源" />
-            </el-form-item>
-            
-            <el-form-item label="事件地点" prop="address">
-                <el-input v-model="form.address" placeholder="请输入事件地点" readonly >
-                    <template #append>
-                        <el-button @click="openMapDialog" type="primary">地图定位</el-button>
-                    </template>
-                </el-input> 
-            </el-form-item>
-
-            <el-form-item label="事件描述" prop="event_description">
-                <el-input type="textarea" v-model="form.event_description" placeholder="请输入事件描述" />
-            </el-form-item>
-        </el-form>
-        <template #footer>
-            <div class="dialog-footer">
-                <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
-                <el-button @click="closeDialog">取消</el-button>
+          <el-form-item label="事件标题：" prop="event_title">
+            <el-input v-model="form.event_title" placeholder="请输入事件标题" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="事件类型：" prop="event_type">
+            <el-select v-model="form.event_type" placeholder="请选择事件类型" clearable style="width: 468px !important">
+              <el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="事件等级：" prop="event_level">
+            <el-select v-model="form.event_level" placeholder="请选择事件等级" clearable style="width: 468px !important">
+              <el-option v-for="item in mm_event_level" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+            <el-icon size="large" style="margin-left: 8px; color: #2c81ff !important;cursor: pointer;" @click="eventLevelInfoDialogVisible = true"><WarningFilled /></el-icon>
+          </el-form-item>
+
+          <el-form-item label="事件状态：" prop="event_status">
+            <el-select v-model="form.event_status" placeholder="请选择事件状态" clearable :readonly="true" style="width: 468px !important">
+              <el-option v-for="item in mm_event_state" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="事发时间：" prop="event_time">
+            <el-date-picker v-model="form.event_time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择事发时间" style="width: 468px !important"></el-date-picker>
+          </el-form-item>
+
+          <el-form-item label="上报时间：" prop="report_time">
+            <el-date-picker v-model="form.report_time" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择上报时间" style="width: 468px !important"></el-date-picker>
+          </el-form-item>
+
+          <el-form-item label="伤亡情况：">
+            <div class="flex">
+              <span>死亡：</span>
+              <el-input v-model="form.deaths" style="width: 83px" />
+              <span style="margin: 0 24px 0 8px">人</span>
+              <span>受伤：</span>
+              <el-input v-model="form.injuries" style="width: 83px" />
+              <span style="margin: 0 24px 0 8px">人</span>
+              <span>失联：</span>
+              <el-input v-model="form.missing" style="width: 83px" />
+              <span style="margin: 0 24px 0 8px">人</span>
             </div>
-        </template>
-    </el-dialog>
-
-    <!-- 事故等级弹窗 -->
-    <EventLevelInfoDialog v-model="eventLevelInfoDialogVisible" @closeDialog="closeEventLevelInfoDialog" />
-
-    <!-- 地图弹窗 -->
-    <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
+          </el-form-item>
+
+          <el-form-item label="联系方式：" prop="contact">
+            <el-input v-model="form.contact" placeholder="请输入联系方式" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="事件来源：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入事件来源" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="事件地点：" prop="address">
+            <el-input v-model="form.address" placeholder="请输入事件地点" style="width: 468px !important" readonly>
+              <template #append>
+                <el-button type="primary" @click="openMapDialog">地图定位</el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item label="事件描述：" prop="event_description">
+            <el-input v-model="form.event_description" type="textarea" placeholder="请输入事件描述" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 事故等级弹窗 -->
+  <EventLevelInfoDialog v-model="eventLevelInfoDialogVisible" @close-dialog="closeEventLevelInfoDialog" />
+
+  <!-- 地图弹窗 -->
+  <company-map v-model:visible="mapDialogVisible" :address="form.address" @confirm="handleMapChange"></company-map>
 </template>
 
 <script lang="ts" setup>
@@ -104,11 +93,12 @@ import { addEvent, editEvent, postEditEvent } from '@/api/duty/eventing';
 import EventLevelInfoDialog from './EventLevelInfoDialog.vue';
 
 const proxy = getCurrentInstance()?.proxy;
-const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region'));
+const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
+  proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region')
+);
 
 const buttonLoading = ref(false);
 const eventFormRef = ref();
-const visible = ref(false);
 
 interface Props {
   modelValue: boolean;
@@ -119,44 +109,42 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: false
 });
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits(['update:modelValue', 'getList']);
 watch(
   () => props.modelValue,
   () => {
     // 界面显示初始化
     if (props.modelValue) {
-        if(props.eventId != "") {
-            editEvent({ event_id: props.eventId }).then((res) => {
-                form.value = res.data
-            });
-        }
-        else {
-            form.value = { ...initFormData };
-            eventFormRef.value?.resetFields();
-        }
+      if (props.eventId != '') {
+        editEvent({ event_id: props.eventId }).then((res) => {
+          form.value = res.data;
+        });
+      } else {
+        form.value = { ...initFormData };
+        eventFormRef.value?.resetFields();
+      }
     }
-    visible.value = props.modelValue;
   }
 );
 
 // 表单初始数据
 const initFormData = {
-    event_title: '', // 事件标题
-    event_type: '', // 事件类型
-    event_level: '', // 事件等级
-    event_status: '0', // 事件状态
-    address: '', // 事件地点
-    longitude: '', // 经度
-    latitude: '', // 纬度
-    event_time: '',// 事发时间
-    report_time: '',// 上报时间
-    casualties: '0', // 伤亡情况
-    deaths: '',
-    injuries: '',
-    missing: '',
-    event_source: '', // 事件来源
-    event_description: '', // 事件描述
-    contact: '' // 联系方式
+  event_title: '', // 事件标题
+  event_type: '', // 事件类型
+  event_level: '', // 事件等级
+  event_status: '0', // 事件状态
+  address: '', // 事件地点
+  longitude: '', // 经度
+  latitude: '', // 纬度
+  event_time: '', // 事发时间
+  report_time: '', // 上报时间
+  casualties: '1', // 伤亡情况
+  deaths: '',
+  injuries: '',
+  missing: '',
+  event_source: '', // 事件来源
+  event_description: '', // 事件描述
+  contact: '' // 联系方式
 };
 
 // 表单数据
@@ -180,40 +168,40 @@ const { form, rules } = toRefs(data);
 
 // 提交表单
 const submitForm = () => {
-    eventFormRef.value?.validate((valid) => {
+  eventFormRef.value?.validate((valid) => {
     if (valid) {
       buttonLoading.value = true;
       // 打印表单数据
       console.log('表单数据', form.value);
-      if(props.eventId === "") {
+      if (props.eventId === '') {
         addEvent(form.value)
-            .then((res) => {
-                proxy?.$modal.msgSuccess(res.msg);
-                closeDialog()
-            })
-            .finally(() => {
+          .then((res) => {
+            proxy?.$modal.msgSuccess(res.msg);
+            closeDialog();
+            emits('getList');
+          })
+          .finally(() => {
             buttonLoading.value = false;
-            });
-      }
-      else {
+          });
+      } else {
         postEditEvent(form.value)
-            .then((res) => {
-                proxy?.$modal.msgSuccess(res.msg);
-                closeDialog()
-            })
-            .finally(() => {
+          .then((res) => {
+            proxy?.$modal.msgSuccess(res.msg);
+            closeDialog();
+            emits('getList');
+          })
+          .finally(() => {
             buttonLoading.value = false;
-            });
-        }
+          });
+      }
     }
   });
-}
+};
 
 const closeDialog = () => {
   emits('update:modelValue', false);
 };
 
-
 // 地图定位
 const mapDialogVisible = ref(false);
 const openMapDialog = () => {
@@ -233,4 +221,13 @@ const eventLevelInfoDialogVisible = ref(false);
 const closeEventLevelInfoDialog = () => {
   eventLevelInfoDialogVisible.value = false;
 };
-</script>
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  span {
+    white-space: nowrap;
+  }
+}
+</style>

src/views/duty/eventing/index.vue

@@ -1,131 +1,136 @@
 <template>
   <div class="app-container">
-    <transition name="fade">
-      <div v-show="showSearch" class="mb-[20px]">
-        <el-form ref="queryFormRef" :model="queryParams">
-          <el-row :gutter="10">
-            <!-- 第一行 -->
-            <el-col :span="6">
-              <el-form-item label="事件类型" prop="event_type">
-                <el-select v-model="queryParams.event_type" placeholder="全部" clearable>
-                  <el-option label="全部" value=""></el-option>
-                  <el-option
-                    v-for="item in mm_event_type"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="事件等级" prop="event_level">
-                <el-select v-model="queryParams.event_level" placeholder="全部" clearable>
-                  <el-option label="全部" value=""></el-option>
-                  <el-option
-                    v-for="item in mm_event_level"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="事件状态" prop="event_status">
-                <el-select v-model="queryParams.event_status" placeholder="全部" clearable>
-                  <el-option label="全部" value=""></el-option>
-                  <el-option
-                    v-for="item in mm_event_state"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="行政区划" prop="region_code">
-                <el-select v-model="queryParams.region_code" placeholder="全部" clearable>
-                  <el-option label="全部" value=""></el-option>
-                  <el-option v-for="item in region" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row :gutter="10" class="mt-[10px]">
-            <el-col :span="6">
-              <el-form-item label="事发时间" prop="event_time">
-                <el-date-picker
-                  v-model="queryParams.event_time"
-                  type="date"
-                  value-format="YYYY-MM-DD"
-                  placeholder="选择事发时间"
-                ></el-date-picker>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item prop="keyword">
-                <el-input v-model="queryParams.keyword" placeholder="请输入事件标题/事件地点" clearable @keyup.enter="handleQuery" />
-              </el-form-item>
-            </el-col>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-          </el-row>
-        </el-form>
+    <div v-show="!eventEditDialogState.show">
+      <transition name="fade">
+        <div v-show="showSearch">
+          <el-form ref="queryFormRef" :model="queryParams">
+            <el-row :gutter="20">
+              <!-- 第一行 -->
+              <el-col :span="6">
+                <el-form-item label="事件类型：" prop="event_type">
+                  <el-select v-model="queryParams.event_type" clearable>
+                    <el-option
+                      v-for="item in mm_event_type"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="事件等级：" prop="event_level">
+                  <el-select v-model="queryParams.event_level" clearable>
+                    <el-option
+                      v-for="item in mm_event_level"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="事件状态：" prop="event_status">
+                  <el-select v-model="queryParams.event_status" clearable>
+                    <el-option
+                      v-for="item in mm_event_state"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="事发时间：" prop="event_time">
+                  <el-date-picker
+                    v-model="queryParams.event_time"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    placeholder="请选择"
+                    style="width: 100%"
+                  ></el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20" class="mt-[10px]">
+              <el-col :span="6">
+                <el-form-item label="行政区划：" prop="region_code">
+                  <el-select v-model="queryParams.region_code" clearable>
+                    <el-option v-for="item in region" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item prop="keyword">
+                  <el-input v-model="queryParams.keyword" placeholder="请输入事件标题/事件地点" clearable @keyup.enter="handleQuery" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-button type="primary" @click="handleQuery">搜索</el-button>
+                <el-button @click="resetQuery">重置</el-button>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </transition>
+
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button type="primary" icon="Plus" @click="handleAdd">登记事件</el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button type="danger" plain icon="Minus" :disabled="multiple" @click="handleDelete(selectedRow)">删除事件</el-button>
+        </el-col>
+      </el-row>
+
+      <div v-show="ids.length > 0" class="common-select-info">
+        <div class="info-left">
+          <el-icon class="info-icon"><InfoFilled /></el-icon>
+          <span class="info-text1">已选择</span>
+          <span class="info-text2">{{ ids.length }}</span>
+          <span class="info-text1">项</span>
+        </div>
+        <div class="clear-btn" @click="clearSelection">清空</div>
       </div>
-    </transition>
 
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增事件</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete(selectedRow)">删除事件 </el-button>
-      </el-col>
-    </el-row>
+      <!-- 表格组件 -->
+      <el-table ref="multipleTable" v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="事件编号" align="center" prop="event_id" />
+        <el-table-column label="事件标题" align="center" prop="event_title" />
+        <el-table-column label="事件类型" align="center" prop="event_type">
+          <template #default="scope">
+            <dict-tag :options="mm_event_type" :value="scope.row.event_type" />
+          </template>
+        </el-table-column>
+        <el-table-column label="事件等级" align="center" prop="event_level">
+          <template #default="scope">
+            <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
+          </template>
+        </el-table-column>
+        <el-table-column label="事件地点" align="center" prop="address" />
+        <el-table-column label="事件状态" align="center" prop="event_status">
+          <template #default="scope">
+            <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
+          </template>
+        </el-table-column>
+        <el-table-column label="事件时间" align="center" prop="event_time" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-text class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
+            <el-text class="common-btn-text-primary" @click="handleUpdate(scope.row)">编辑</el-text>
+            <el-text class="common-btn-text-danger" @click="handleClose(scope.row)">关闭事件</el-text>
+          </template>
+        </el-table-column>
+      </el-table>
 
-    <!-- 表格组件 -->
-    <el-table v-loading="loading" :data="eventList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="事件编号" align="center" prop="event_id" />
-      <el-table-column label="事件标题" align="center" prop="event_title" />
-      <el-table-column label="事件类型" align="center" prop="event_type">
-        <template #default="scope">
-          <dict-tag :options="mm_event_type" :value="scope.row.event_type" />
-        </template>
-      </el-table-column>
-      <el-table-column label="事件等级" align="center" prop="event_level">
-        <template #default="scope">
-          <dict-tag :options="mm_event_level" :value="scope.row.event_level" />
-        </template>
-      </el-table-column>
-      <el-table-column label="事件地点" align="center" prop="address" />
-      <el-table-column label="事件状态" align="center" prop="event_status">
-        <template #default="scope">
-          <dict-tag :options="mm_event_state" :value="scope.row.event_status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="事件时间" align="center" prop="event_time" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template #default="scope">
-          <el-tooltip content="查看" placement="top">
-            <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip content="编辑" placement="top">
-            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-          </el-tooltip>
-          <el-tooltip content="关闭事件" placement="top">
-            <el-button link type="primary" icon="Close" @click="handleClose(scope.row)"></el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-    </el-table>
-    
-    <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :eventId="eventId" @update:model-value="getList"/>
-    <CloseEventDialog v-model="closeDialogState.show" :data="closeDialogState.form" :eventId="eventId" @update:model-value="handleCloseEventDialog" />
+      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+    </div>
 
-    <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+    <EventEditDialog v-model="eventEditDialogState.show" :title="eventEditDialogState.title" :eventId="eventId" @getList="getList" />
+    <CloseEventDialog v-model="closeDialogState.show" :data="closeDialogState.form" :eventId="eventId" @update:model-value="handleCloseEventDialog" />
   </div>
 </template>
 
@@ -139,6 +144,7 @@ import CloseEventDialog from './CloseEventDialog.vue';
 const proxy = getCurrentInstance()?.proxy;
 const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(proxy?.useDict('mm_event_type', 'mm_event_level', 'mm_event_state', 'region'));
 const router = useRouter();
+const multipleTable = ref();
 const eventList = ref([]);
 const loading = ref(true);
 const showSearch = ref(true);
@@ -150,7 +156,7 @@ const selectedRow = ref(null);
 const eventId = ref('');
 const queryFormRef = ref();
 
- // 表单初始数据
+// 表单初始数据
 const initFormData = {
   event_title: '', // 事件标题
   event_type: '', // 事件类型
@@ -218,10 +224,15 @@ const handleSelectionChange = (selection) => {
   multiple.value = !selection.length;
 };
 
+// 清空所有选中行
+const clearSelection = () => {
+  multipleTable.value.clearSelection();
+};
+
 const eventEditDialogState = reactive({
   show: false,
   title: ''
-})
+});
 
 const handleAdd = () => {
   eventId.value = ""