完成药品管理功能

src/components/admin/drugReaction.vue

@@ -43,6 +43,24 @@
         </div>
       </el-dialog>
 
+      <el-dialog title="编辑药品作用" :visible.sync="editVisible">
+        <el-form :model="changeUser" :rules="editRules" ref="editForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="药品A名称" prop="drug1">
+            <el-input v-model="changeUser.drug1"></el-input>
+          </el-form-item>
+          <el-form-item label="药品B名称" prop="drug2">
+            <el-input v-model="changeUser.drug2"></el-input>
+          </el-form-item>
+          <el-form-item label="相互作用效果" prop="reaction">
+            <el-input v-model="changeUser.reaction"></el-input>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="editVisible = false">取 消</el-button>
+          <el-button type="primary" @click="submitEditForm('editForm')">提 交</el-button>
+        </div>
+      </el-dialog>
+
       <div class="pagination">
         <el-pagination
           @size-change="handleSizeChange"
@@ -64,6 +82,7 @@
 <script>
 
 import {addTable1, listTable1, listTotal} from "../../utils/table1";
+import axios from "axios";
 
 export default {
   data() {
@@ -77,11 +96,6 @@ export default {
         userType: null
       },
       users: [],
-      changeUser: {
-        id: null,
-        userType: null
-      },
-      editVisible: false,
       table1List: [
       ],
 
@@ -110,6 +124,24 @@ export default {
         reaction: [
           { required: true, message: "请输入相互作用效果", trigger: "blur" }
         ]
+      },
+      editVisible: false,
+      changeUser: {
+        id: null,
+        drug1: null,
+        drug2: null,
+        reaction: null
+      },
+      editRules: {
+        drug1: [
+          { required: true, message: "请输入药品A名称", trigger: "blur" }
+        ],
+        drug2: [
+          { required: true, message: "请输入药品B名称", trigger: "blur" }
+        ],
+        reaction: [
+          { required: true, message: "请输入相互作用效果", trigger: "blur" }
+        ]
       }
     }
   },
@@ -194,20 +226,55 @@ export default {
       });
     },
 
-    // 编辑药品作用
+    //编辑药品作用
     handleEdit(row) {
       this.changeUser.id = row.id;
-      this.changeUser.userType = row.userType;
+      this.changeUser.drug1 = row.drug1;
+      this.changeUser.drug2 = row.drug2;
+      this.changeUser.reaction = row.reaction;
       this.editVisible = true;
     },
+
+    submitEditForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          axios.put(`/system/table1/`, this.changeUser)
+            .then(() => {
+              this.editVisible = false; // 关闭对话框
+              this.getList(); // 刷新列表
+              this.getTotal(); // 刷新总数
+              this.$message({
+                message: "编辑成功",
+                type: "success"
+              });
+            })
+            .catch(error => {
+              this.$message.error("编辑失败：" + error.message);
+            });
+        } else {
+          return false;
+        }
+      });
+    },
     // 删除药品作用
     handleDelete(row) {
-      this.confirm("此操作将永久删除该药品作用, 是否继续?", "提示", {
+      this.$confirm("此操作将永久删除该药品作用, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-// TODO：调用删除接口
+        axios.delete(`/system/table1/${row.id}`)
+          .then(() => {
+            this.getList();
+            this.getTotal();
+            this.$message({
+              message: "删除成功",
+              type: "success"
+            });
+          })
+          .catch(error => {
+            this.$message.error("删除失败：" + error.message);
+          });
       }).catch(() => {});
     }
   }