reactor:公告页面字段调整及页面样式单位调整

src/views/announcement-management/index.vue

@@ -4,26 +4,27 @@
       <el-row>
         <el-col :span="8">
           <el-form-item label="公告名称">
-            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
+            <el-input v-model="searchForm.announcementName" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="公告状态">
-            <el-select v-model="searchForm.status" placeholder="请选择">
+            <el-select v-model="searchForm.announcementStatus" placeholder="请选择">
               <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="创建人">
-            <el-input v-model="searchForm.createUser" placeholder="请输入"></el-input>
+            <el-input v-model="searchForm.createrName" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="8">
           <el-form-item label="创建时间">
-            <el-date-picker v-model="searchForm.createDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
+            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="handleDateChange">
+            </el-date-picker>
           </el-form-item>
         </el-col>
       </el-row>
@@ -38,14 +39,14 @@
       </el-row>
     </el-form>
     <el-table :data="tableData" border style="width: 100%" height="580">
-      <el-table-column prop="name" label="公告名称" align="center"> </el-table-column>
-      <el-table-column prop="createUser" label="创建人" align="center"> </el-table-column>
+      <el-table-column prop="announcementName" label="公告名称" align="center"> </el-table-column>
+      <el-table-column prop="createrName" label="创建人" align="center"> </el-table-column>
       <el-table-column prop="createDate" label="创建时间" align="center"> </el-table-column>
-      <el-table-column prop="status" label="公告状态" align="center"></el-table-column>
+      <el-table-column prop="announcementStatus" label="公告状态" align="center"></el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button size="small" type="text" @click="handleRelease(scope.row)"><img src="@/assets/image/common/p0.png" class="vIcon"/> 发布</el-button>
-          <el-button size="small" type="text" @click="handleTakeDown(scope.row)"><img src="@/assets/image/common/p3.png" class="vIcon"/>下架</el-button>
+          <el-button size="small" type="text" @click="handleRelease(scope.row)"><img src="@/assets/image/common/p0.png" class="vIcon" /> 发布</el-button>
+          <el-button size="small" type="text" @click="handleTakeDown(scope.row)"><img src="@/assets/image/common/p3.png" class="vIcon" />下架</el-button>
           <el-button size="small" type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
           <el-button size="small" type="text" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
         </template>
@@ -66,27 +67,22 @@
     </el-pagination>
     <el-dialog :title="title" :visible.sync="addDialogVisible">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="公告名称" prop="name">
-          <el-input v-model="form.name"></el-input>
+        <el-form-item label="公告名称" prop="announcementName">
+          <el-input v-model="form.announcementName"></el-input>
         </el-form-item>
-        <el-form-item label="公告内容" prop="content">
-          <el-input type="textarea" :rows="10" v-model="form.content"> </el-input>
+        <el-form-item label="公告内容" prop="announcementContent">
+          <el-input type="textarea" :rows="10" v-model="form.announcementContent"> </el-input>
         </el-form-item>
         <el-form-item label="上传图片" required>
-          <el-upload
-            class="avatar-uploader"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload"
-          >
+          <el-upload class="avatar-uploader" action="/api/announcement/uploadImage" accept=".jpg,.jpeg,.png" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeUpload">
             <el-button size="small" class="primaryBtn">上传</el-button>
             <div slot="tip" class="el-upload__tip">温馨提示:仅需上传一张小于5M的配图即可，格式支持JPG、PNG、JPEG</div>
+            <img v-if="form.images" :src="form.images" class="preview-image">
           </el-upload>
         </el-form-item>
         <el-form-item label="公告状态">
-          <el-radio v-model="form.status" label="1">草稿</el-radio>
-          <el-radio v-model="form.status" label="2">发布</el-radio>
+          <el-radio v-model="form.announcementStatus" label="2">草稿</el-radio>
+          <el-radio v-model="form.announcementStatus" label="1">发布</el-radio>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -94,7 +90,7 @@
         <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
       </div>
     </el-dialog>
-    <el-dialog :title="releaseTitle" :visible.sync="releaseDialogVisible" width="30%" :before-close="handleClose">
+    <el-dialog :title="releaseTitle" :visible.sync="releaseDialogVisible" width="30%">
       <span> 确定改变本条公告状态为“{{ type == 1 ? '发布' : '草稿' }}”吗？</span>
       <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="toConfirm" size="small" class="primaryBtn">确 定</el-button>
@@ -108,34 +104,36 @@
 export default {
   data() {
     return {
+      dateRange: [],
       searchForm: {
-        name: '',
-        status: '',
-        createUser: '',
-        createDate: ''
+        announcementName: '',
+        announcementStatus: '',
+        createrName: '',
+        startTime: '',
+        endTime: ''
       },
       imageUrl: '',
       form: {
-        name: '',
-        img: '',
-        status: '1',
-        content: ''
+        announcementName: '',
+        images: '',
+        announcementStatus: 2,
+        announcementContent: ''
       },
       statusOptions: [
         {
-          value: '1',
+          value: 2,
           label: '草稿'
         },
         {
-          value: '2',
+          value: 1,
           label: '已发布'
         }
       ],
       tableData: [
         {
-          name: '',
-          status: '',
-          createUser: '',
+          announcementName: '',
+          announcementStatus: '',
+          createrName: '',
           createDate: ''
         }
       ],
@@ -148,23 +146,29 @@ export default {
       releaseDialogVisible: false,
       type: 1,
       rules: {
-          name: [
-            { required: true, message: '请输入公告名称', trigger: 'blur' },
-          ],
-          content: [
-            { required: true, message: '请输入公告内容', trigger: 'blur' }
-          ],
-          address:[
-            {required:true,message:'请输入水文站位置',trigger:'blur'}
-          ],
-       }
+        announcementName: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
+        announcementContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
+        address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }]
+      }
     }
   },
+  mounted(){
+    this.fetchData()
+  },  
   methods: {
     handleSearch() {},
     resetForm() {
       this.$refs.searchForm.resetFields()
     },
+    handleDateChange(val) {
+      if (val && val.length === 2) {
+        this.searchForm.startTime = val[0]
+        this.searchForm.endTime = val[1]
+      } else {
+        this.searchForm.startTime = ''
+        this.searchForm.endTime = ''
+      }
+    },
     handleRelease(row) {
       console.info(row)
       this.releaseTitle = '发布公告'
@@ -195,19 +199,19 @@ export default {
     },
     fetchData() {},
     handleAvatarSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw)
+      this.form.images = URL.createObjectURL(file.raw)
     },
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isLt2M = file.size / 1024 / 1024 < 2
+    beforeUpload(file) {
+      const isImage = ['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)
+      const isLt5M = file.size / 1024 / 1024 < 5
 
-      if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!')
+      if (!isImage) {
+        this.$message.error('只能上传JPG/PNG/JPEG格式图片!')
       }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!')
+      if (!isLt5M) {
+        this.$message.error('图片大小不能超过5MB!')
       }
-      return isJPG && isLt2M
+      return isImage && isLt5M
     },
     toAdd() {
       this.title = '新增公告'
@@ -219,7 +223,8 @@ export default {
       } else {
         console.info('下架')
       }
-    }
+    },
+    confirmSubmit() {}
   }
 }
 </script>
@@ -231,10 +236,10 @@ export default {
     width: 100%;
   }
   .mb20 {
-    margin-bottom: 20px;
+    margin-bottom:  px-to-rem(20);
   }
   .page {
-    margin-top: 20px;
+    margin-top:  px-to-rem(20);
     text-align: right;
   }
   .primaryBtn {
@@ -245,12 +250,18 @@ export default {
   .el-upload__tip {
     color: #ff6a6c;
   }
-  .vIcon{
-    width: 12px;
-    height: 12px;
+  .vIcon {
+    width: px-to-rem(12);
+    height:  px-to-rem(12);
   }
 }
- :deep(.el-pager li.active){
-    background-color: rgba(240, 105, 106, 1)!important;
-  }
+:deep(.el-pager li.active) {
+  background-color: rgba(240, 105, 106, 1) !important;
+}
+.preview-image {
+  max-width: px-to-rem(100);
+  max-height: px-to-rem(100);
+  margin-top: px-to-rem(10);
+  border-radius: px-to-rem(4);
+}
 </style>

src/views/hydrological-station/hyInfo.vue

@@ -240,10 +240,10 @@ export default {
   width: 100%;
 }
 .mb20 {
-  margin-bottom: 20px;
+  margin-bottom:  px-to-rem(20);
 }
 .page {
-  margin-top: 20px;
+  margin-top:  px-to-rem(20);
   text-align: right;
 }
 .primaryBtn {
@@ -255,8 +255,8 @@ export default {
   color: #ff6a6c;
 }
 .vIcon{
-    width: 12px;
-    height: 12px;
+    width:  px-to-rem(12);
+    height:  px-to-rem(12);
 }
  :deep(.el-pager li.active){
     background-color: rgba(240, 105, 106, 1)!important;

src/views/hydrological-station/jcInfo.vue

@@ -225,10 +225,10 @@ export default {
   width: 100%;
 }
 .mb20 {
-  margin-bottom: 20px;
+  margin-bottom:  px-to-rem(20);
 }
 .page {
-  margin-top: 20px;
+  margin-top:  px-to-rem(20);
   text-align: right;
 }
 .primaryBtn {
@@ -240,20 +240,20 @@ export default {
   color: #ff6a6c;
 }
 .vIcon{
-  width: 10px;
-  height: 10px;
+  width:  px-to-rem(10);
+  height:  px-to-rem(10);
 }
 .addJcForm :deep(.el-form-item__content){
   display: flex;
 }
 .addJcForm :deep(.el-form-item__content span){
   display: inline-block;
-  width: 32px;
-  margin-left: 10px;
+  width:  px-to-rem(32);
+  margin-left:  px-to-rem(10);
 }
 .backBtn{
   text-align: center;
-  margin-top: 10px;
+  margin-top:  px-to-rem(10);
 }
  :deep(.el-pager li.active){
     background-color: rgba(240, 105, 106, 1)!important;