查询功能前端发送请求的准备工作

src/components/index.vue

@@ -39,7 +39,7 @@
               <input class="ais-SearchBox-input" type="text"
                      v-model="articleSearch"
                      placeholder="请输入药品B名称" maxlength="32">
-              <div class="ais-SearchBox-submit" @click="selectArticle()">
+              <div class="ais-SearchBox-submit" @click="handleQuery()">
                 <svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
                   <path
                     d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z"
@@ -91,7 +91,7 @@
 <!--              </div>-->
               <template>
                 <div class="pagination-wrap">
-                  <el-table :data="tableData">
+                  <el-table :data="table1List">
                     <el-table-column prop="drugA" label="药品A"></el-table-column>
                     <el-table-column prop="drugB" label="药品B"></el-table-column>
                     <el-table-column prop="interaction" label="相互作用效果"></el-table-column>
@@ -121,6 +121,8 @@
   </div>
 </template>
 <script>
+  import {listTable1} from "@/utils/table1";
+
   const loader = () => import( "./common/loader");
   const zombie = () => import( "./common/zombie");
   const printer = () => import( "./common/printer");
@@ -158,12 +160,20 @@
           "category": ""
         },
         articles: [],
-        tableData: [
+        table1List: [
           { drugA: "丁螺环酮", drugB: "CYP3A4抑制药", interaction: '服用红霉素、咪唑类抗真菌药等CYP3A4抑制药后，再用本品可使其峰浓度升高，AUC增大' },
           { drugA: "丁螺环酮", drugB: "乙醇和其他中枢抑制药", interaction: '丁螺环酮的代谢加快，使其抗焦虑作用降低' },
           { drugA: "丁螺环酮", drugB: "伊曲康唑", interaction: '可使中枢抑制作用增强' },
           { drugA: "丁螺环酮", drugB: "利福平", interaction: '伊曲康唑通过抑制CYP3A4而减少丁螺环酮的首过效应, 增加其生物利用度' }
-        ]
+        ],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          drug1: null,
+          drug2: null,
+          reaction: null
+        },
       };
     },
 
@@ -178,6 +188,20 @@
     },
 
     methods: {
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 查询药品作用管理列表 */
+      getList() {
+        this.loading = true;
+        listTable1(this.queryParams).then(response => {
+          this.table1List = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
       async selectSort(sort) {
         this.pagination = {
           current: 1,

src/utils/table1.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询药品作用管理列表
+export function listTable1(query) {
+  return request({
+    url: '/system/table1/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询药品作用管理详细
+export function getTable1(id) {
+  return request({
+    url: '/system/table1/' + id,
+    method: 'get'
+  })
+}
+
+// // 新增药品作用管理
+// export function addTable1(data) {
+//   return request({
+//     url: '/system/table1',
+//     method: 'post',
+//     data: data
+//   })
+// }
+//
+// // 修改药品作用管理
+// export function updateTable1(data) {
+//   return request({
+//     url: '/system/table1',
+//     method: 'put',
+//     data: data
+//   })
+// }
+//
+// // 删除药品作用管理
+// export function delTable1(id) {
+//   return request({
+//     url: '/system/table1/' + id,
+//     method: 'delete'
+//   })
+// }