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