|
|
@@ -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>
|
