From 768e4d521b2408e187b0b482bae345f66f41794a Mon Sep 17 00:00:00 2001 From: shj <1790240199@qq.com> Date: 星期三, 23 三月 2022 10:44:20 +0800 Subject: [PATCH] 接口对接 --- src/views/contingencyplan/index.vue | 337 ++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 221 insertions(+), 116 deletions(-) diff --git a/src/views/contingencyplan/index.vue b/src/views/contingencyplan/index.vue index 714ced4..d60024e 100644 --- a/src/views/contingencyplan/index.vue +++ b/src/views/contingencyplan/index.vue @@ -1,130 +1,235 @@ <template> - <div class="app-container"> + <div class="app-container"> <el-form ref="form" :model="form" label-width="80px"> - <el-row> - <el-col :span="5"> - <el-form-item label="预案名称"> - <el-input v-model="form.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="4" style="text-align:center"> - <el-button type="primary" icon="el-icon-search">搜索</el-button> - <el-button type="primary" icon="el-icon-plus" @click="dialogVisible=true">新增</el-button> - </el-col> - </el-row> -</el-form> - <el-table - :data="tableData" - border - style="width: 100%"> - <el-table-column - prop="date" - label="预案名称" - width="150"> - </el-table-column> - <el-table-column - prop="name" - label="文件链接" - > - </el-table-column> - <el-table-column - prop="province" - label="备注" - > - </el-table-column> - <el-table-column - prop="city" - label="创建时间" - > - </el-table-column> - <el-table-column - prop="address" - label="更新时间" - > - </el-table-column> - <el-table-column - align="center" - label="操作" - > - <template slot-scope="scope"> - <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button> - <el-button type="text" size="small" style="color:red">删除</el-button> - </template> - </el-table-column> - </el-table> - <el-dialog - title="新增" - :visible.sync="dialogVisible" - width="30%" - :before-close="handleClose"> - <el-form ref="form" :model="form" label-width="68px"> - <el-form-item label="活动名称"> - <el-input v-model="form.name"></el-input> + <el-row> + <el-col :span="5"> + <el-form-item label="预案名称"> + <el-input v-model="listQuery.filter.name"></el-input> + </el-form-item> + </el-col> + <el-col :span="4" style="text-align: center"> + <el-button type="primary" class="btns" icon="el-icon-search" @click="find()" + >搜索</el-button + > + <el-button + type="primary" + icon="el-icon-plus" + @click="emergencyPlanC('', '新增')" + class="btns" + >新增</el-button + > + </el-col> + </el-row> + </el-form> + <el-table :data="list" border style="width: 100%"> + <el-table-column prop="name" label="预案名称" width="150"> + </el-table-column> + <el-table-column prop="name" label="文件链接"> </el-table-column> + <el-table-column prop="remark" label="备注"> </el-table-column> + <el-table-column prop="createTime" label="创建时间"> </el-table-column> + <el-table-column prop="updateTime" label="更新时间"> </el-table-column> + <el-table-column align="center" label="操作"> + <template slot-scope="scope"> + <el-button + @click="emergencyPlanC(scope.row, '编辑')" + type="text" + size="small" + >编辑</el-button + > + <el-button + type="text" + size="small" + @click="deleteById(scope.row.id)" + style="color: red" + >删除</el-button + > + </template> + </el-table-column> + </el-table> + <el-pagination + v-show="recordTotal>0" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="currentPage" + :page-sizes="[10, 20, 30, 50]" + :page-size="pageSize" + layout="total, sizes, prev, pager, next, jumper" + :total="recordTotal" + > + </el-pagination> + <el-dialog :title="title" :visible.sync="dialogVisible" width="30%"> + <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> - <el-form-item label="文件类型"> - <el-radio-group v-model="form.resource"> - <el-radio label="0">图片</el-radio> - <el-radio label="1">文件</el-radio> - </el-radio-group> - </el-form-item> - <el-form-item label="图片上传"> - <el-input v-model="form.name"></el-input> + <el-form-item label="文件类型"> + <el-radio-group v-model="form.fileType"> + <el-radio label="0">图片</el-radio> + <el-radio label="1">文件</el-radio> + </el-radio-group> </el-form-item> - <el-form-item label="文件链接"> - <el-input v-model="form.name"></el-input> + <el-form-item label="图片上传"> + <el-input ></el-input> </el-form-item> - <el-form-item label="备注"> - <el-input v-model="form.name" :rows="5" type="textarea"></el-input> + <el-form-item label="文件链接"> + <SingleImageUpload></SingleImageUpload> </el-form-item> - </el-form> - <span slot="footer" class="dialog-footer"> - <el-button type="primary" @click="dialogVisible = false">确 定</el-button> - <el-button @click="dialogVisible = false">取 消</el-button> - </span> -</el-dialog> - </div> + <el-form-item label="备注" prop="remark"> + <el-input v-model="form.remark" :rows="5" type="textarea"></el-input> + </el-form-item> + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button type="primary" class="btns" @click="addemergencyPlan()">确 定</el-button> + <el-button @click="dialogVisible = false">取 消</el-button> + </span> + </el-dialog> + </div> </template> <script> - export default{ - data(){ - return{ - dialogVisible: false, - form: { - name: '', +import SingleImageUpload from "@/components/Upload/singleImage.vue"; +import { + emergencyPlanList, + emergencyPlanAdd, + emergencyPlanMod, + emergencyPlanDel, +} from "@/api/emergencyplan.js"; +export default { + components: { SingleImageUpload }, + data() { + return { + dialogVisible: false, + title: "", + pageSize: 10, + recordTotal: 0, + currentPage: 1, + form: { + name: "", + fileType: 0, + fileList: [{ fileName: "", fileUrl: "" }], + remark: "", + }, + listQuery: { + pageIndex: 1, + pageSize: 10, + filter: { + name: "", }, - tableData: [{ - date: '2016-05-02', - name: '王小虎', - province: '上海', - city: '普陀区', - address: '上海市普陀区金沙江路 1518 弄', - zip: 200333 - }, { - date: '2016-05-04', - name: '王小虎', - province: '上海', - city: '普陀区', - address: '上海市普陀区金沙江路 1517 弄', - zip: 200333 - }, { - date: '2016-05-01', - name: '王小虎', - province: '上海', - city: '普陀区', - address: '上海市普陀区金沙江路 1519 弄', - zip: 200333 - }, { - date: '2016-05-03', - name: '王小虎', - province: '上海', - city: '普陀区', - address: '上海市普陀区金沙江路 1516 弄', - zip: 200333 - }] + }, + list: [], + rules: { + name: [ + { required: true, message: "预案名称不能为空", trigger: "change" }, + ], + remark: [ + { required: true, message: "责任人不能为空", trigger: "blur" }, + ], + }, + }; + }, + created() { + this.emergencyPlan(); + }, + methods: { + async emergencyPlan() { + var res = await emergencyPlanList(this.listQuery); + console.log(res); + if (res.data.code === "200") { + this.list = res.data.result.records; + this.recordTotal = res.data.result.total + this.pageSize=res.data.result.size; + this.currentPage = res.data.result.current + } + }, + emergencyPlanC(value, type) { + this.dialogVisible = true; + this.$nextTick(() => { + this.$refs["form"].clearValidate(); + }); + if (type === "新增") { + this.title = "新增"; + this.form = { + name: "", + fileType: "0", + fileList: [{ fileName: "", fileUrl: "" }], + remark: "", + }; + } else { + this.title = "编辑"; + this.form = value; + } + }, + addemergencyPlan() { + this.$refs["form"].validate((valid) => { + if (valid) { + if (this.title === "新增") { + emergencyPlanAdd(this.form).then((res) => { + if (res.data.code === "200") { + this.dialogVisible = false; + this.emergencyPlan(); + this.$notify({ + type: "success", + duration: 2000, + message: "新增成功", + title: "成功", + }); + } else { + this.$message({ + type: "warning", + message: res.data.message, + }); + } + }); + } + else { + emergencyPlanMod(this.form).then((res) => { + if (res.data.code === "200") { + this.dialogVisible = false; + this.emergencyPlan(); + this.$notify({ + type: "success", + duration: 2000, + message: "编辑成功", + title: "成功", + }); + } else { + this.$message({ + type: "warning", + message: res.data.message, + }); } + }); } - } + } + }); + }, + deleteById(val) { + emergencyPlanDel({ id: val }).then(() => { + this.emergencyPlan(); + this.$notify({ + title: "成功", + message: "删除成功", + type: "success", + duration: 2000, + }); + }); + }, + find() { + this.emergencyPlan(); + }, + handleSizeChange(val){ + this.listQuery.pageSize = val + this.emergencyPlan(); + }, + handleCurrentChange(val){ + this.listQuery.pageIndex = val + this.emergencyPlan(); + }, + }, +}; </script> <style scoped> - +.btns{ + background-color: #034EA2; + border: 1px solid #034EA2; +} </style> \ No newline at end of file -- Gitblit v1.9.2