feat:防汛预案静态页面

src/views/announcement-management/index.vue

@@ -113,9 +113,6 @@
           <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-item label="创建人" prop="createrName">
-          <el-input v-model="form.createrName"></el-input>
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn" v-loading="loading">确 定</el-button>
@@ -169,7 +166,6 @@ export default {
       form: {
         announcementName: '',
         images: '',
-        createrName: '',
         announcementStatus: 2,
         announcementContent: ''
       },
@@ -195,7 +191,6 @@ export default {
         announcementName: [{ required: true, message: '请输入公告名称', trigger: 'blur' }],
         announcementContent: [{ required: true, message: '请输入公告内容', trigger: 'blur' }],
         address: [{ required: true, message: '请输入水文站位置', trigger: 'blur' }],
-        createrName: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
         images: [{ required: true, validator: valiIcon, trigger: 'change' }]
       },
       loading:false,
@@ -418,7 +413,6 @@ export default {
         announcementStatus: 2,
         announcementContent: ''
       }
-      this.$refs.form.resetFields();
     },
     handleRemove(file, fileList) {
       this.objClass.upLoadHide = false

src/views/flood-prevention-plan/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="flood-plan-container">
+    <el-form :model="searchForm" label-width="100px" ref="searchForm">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="预案名称">
+            <el-input v-model="searchForm.announcementName" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="创建人">
+            <el-input v-model="searchForm.createrName" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row justify="flex-end" class="mb20">
+        <el-col :span="12" style="text-align: left">
+          <el-button size="small" icon="el-icon-plus" class="primaryBtn" @click="toAdd">新增防汛预案</el-button>
+        </el-col>
+        <el-col :span="12" style="text-align: right">
+          <el-button size="small" icon="el-icon-search" @click="searchData" class="primaryBtn">查询</el-button>
+          <el-button size="small" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" border style="width: 100%" height="620">
+      <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="createTime" label="创建时间" align="center">
+        <template slot-scope="scope">
+          {{ formatDate(scope.row.createTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <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="handleDownLoad(scope.row)"><i class="el-icon-download"></i> 下载</el-button>
+          <el-button size="small" type="text" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="page"
+      popper-class="v-pageination"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="searchForm.pageNum"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="searchForm.pageSize"
+      small
+      background
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+    <el-dialog :visible.sync="dialogVisible">
+      <template slot="title">
+        {{ isEditing ? '编辑防汛预案' : '添加防汛预案' }}
+      </template>
+      <el-form ref="form" :model="form" :rules="rules" label-width="130px">
+        <el-form-item label="防汛预案名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="上传文件" prop="file">
+          <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :file-list="fileList">
+            <el-button size="small" type="primary" class="primaryBtn">上传</el-button>
+            <div slot="tip" class="el-upload__tip">温馨提示:请上传ppt文件！</div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn" v-loading="loading">确 定</el-button>
+        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  data() {
+    return {
+      searchForm: {
+        name: '',
+        createrName: '',
+        pageSize: 10,
+        pageNum: 1
+      },
+      rules:{
+         name: [{ required: true, message: '请输入防汛预案名称', trigger: 'blur' }],
+        file: [{ required: true, message: '请输入公告内容', trigger: 'change' }],
+      },
+      loading:false,
+      dialogVisible: false,
+      fileList: [],
+      total: 0,
+      isEditing: false,
+      tableData: [],
+      form: {
+        name: '',
+        fileUrl: ''
+      }
+    }
+  },
+  mounted() {
+    this.searchData()
+  },
+  methods: {
+    toAdd() {
+        this.dialogVisible = true
+    },
+    searchData() {
+      this.isEditing = false
+    },
+    resetForm() {
+      this.form = {
+        name: '',
+        fileUrl: ''
+      }
+      this.isEditing = false
+    },
+    formatDate(date) {
+      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+    },
+    handleChange() {},
+    handleEdit() {
+      this.isEditing = true
+    },
+    confirmSubmit(){
+
+    },
+    handleDownLoad() {},
+    handleDelete() {
+        if (confirm('确定要删除吗？')) {
+            console.info('')
+        }
+    },
+    handleSizeChange(val) {
+      this.searchForm.pageSize = val
+      this.fetchData()
+    },
+    handleCurrentChange(val) {
+      this.searchForm.pageNum = val
+      this.fetchData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.flood-plan-container {
+  height: 100%;
+  width: 100%;
+  padding: px-to-rem(24);
+  background-color: #fff;
+  :deep(.el-form .el-select),
+  :deep(.el-input__inner) {
+    width: 100%;
+  }
+  .primaryBtn {
+    color: #fff !important;
+    background-color: #ff6a6c !important;
+    border-color: #ff6a6c !important;
+  }
+  .el-upload__tip {
+    color: #ff6a6c;
+  }
+  .vIcon {
+    width: px-to-rem(12);
+    height: px-to-rem(12);
+  }
+  :deep(.el-form-item .el-form-item__label) {
+    color: #606266;
+    font-size: px-to-rem(14);
+    font-weight: 600;
+  }
+  :deep(.el-range-editor.is-active),
+  :deep(.el-range-editor.is-active:hover),
+  :deep(.el-select .el-input.is-focus .el-input__inner),
+  :deep(.el-select .el-input__inner:focus),
+  :deep(.el-pagination__sizes .el-input .el-input__inner:hover) {
+    border-color: #a9a9a9;
+  }
+  :deep(.el-table th.el-table__cell) {
+    background-color: #f5f7fa;
+  }
+  :deep(.el-table th.el-table__cell > .cell) {
+    font-size: px-to-rem(14);
+    color: #515a6e;
+    font-weight: 600;
+  }
+  :deep(.el-pagination .el-select .el-input .el-input__inner) {
+    font-size: px-to-rem(14);
+    border-radius: px-to-rem(4);
+    height: px-to-rem(26);
+  }
+}
+.page {
+    margin-top: px-to-rem(20);
+    text-align: right;
+  }
+   .mb20 {
+    margin-bottom: px-to-rem(20);
+  }
+:deep(.el-pager li.active) {
+  background-color: rgba(240, 105, 106, 1) !important;
+}
+</style>