巡检点(项目自检):列表渲染以及模糊查询

src/assets/js/api/insect.js

@@ -5,9 +5,13 @@
 import { get,post } from '../http'
 
 
-// 删除巡检点
-export const deletePointApi = data => get('/xmgl/checkingPoint/delete', data); 
-// 新建巡检点
-export const addPointApi = data => post('/xmgl/checkingPoint/add', data); 
-// 查询巡检点列表
-export const getPointListApi = data => post('/xmgl/checkingPoint/selectPage', data); 
+// 巡检点模块
+export const deletePointApi = data => get('/xmgl/checkingPoint/delete', data); // 删除巡检点
+export const addPointApi = data => post('/xmgl/checkingPoint/add', data); // 新建巡检点
+export const getPointListApi = data => post('/xmgl/checkingPoint/selectPage', data); // 查询巡检点列表
+
+// 巡检记录模块
+export const getCheckPointApi = data => post('/xmgl/checkingPointInfo/selectPage', data); // 查询巡检点记录列表
+
+
+

src/views/projectFront/inspecPoint/inspection.vue

@@ -20,6 +20,7 @@
                 <el-image style="margin-right: 8px;width: 80px; height: 80px;cursor: pointer;border-radius: 4px"
                    fit="cover"
                   :src="$store.state.FILEURL + row.qrCode"
+                  :preview-src-list="[$store.state.FILEURL + row.qrCode]"
                  />
           </template>
         </el-table-column>
@@ -33,7 +34,7 @@
             <div class="tableBtns">
               <div class="operationText">
                 <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
-                <a class="download" target="_blank" :href="$store.state.FILEURL + scope.row.qrCode">下载</a>
+                <a download="preview" class="download" target="_blank" :href="$store.state.FILEURL + scope.row.qrCode">下载</a>
               </div>
               <div @click="toDelete(scope.row)" class="operationText">
                 <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
@@ -94,7 +95,7 @@
             <el-button
               type="primary"
               icon="el-icon-circle-check"
-              @click.once="addCardFn"
+              @click="addCardFn"
               size="medium"
             >生成二维码</el-button>
           </div>
@@ -110,7 +111,7 @@ import {
   addPointApi,
   deletePointApi
 } from "@/assets/js/api/insect.js";
-import QRCode from "qrcodejs2";
+// import QRCode from "qrcodejs2";
 export default {
   data() {
     return {
@@ -164,6 +165,7 @@ export default {
       getPointListApi(data).then(res => {
         console.log("----巡检点列表", res);
        this.tableData = res.result.records
+       this.total = res.result.total
       });
     },
     // 刷新
@@ -246,24 +248,6 @@ export default {
 
       this.$refs["cardForm"].validate(valid => {
         if (valid) {
-          document.getElementById("qrCode").innerHTML = "";
-          console.log("QRCode", QRCode);
-          let QRCodeData = new QRCode(this.$refs.qrCodeDiv, {
-            text: JSON.stringify(data),
-            width: 150,
-            height: 150,
-            colorDark: "#333333", //二维码颜色
-            colorLight: "#ffffff", //二维码背景色
-            correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
-          });
-          console.log("QRCodeData", QRCodeData);
-          setTimeout(() => {
-            let img = QRCodeData._el.innerHTML;
-            let baseurl = img
-              .split("=")[5].split('"')[1]
-            console.log("baseurl", baseurl);
-            data.qrCode = baseurl;
-            data.createDate = this.selectNowDate();
             addPointApi(data).then(res => {
               console.log("新增", res);
               if (res.code == 200) {
@@ -271,7 +255,32 @@ export default {
                 this.getPointList()
               }
             });
-          }, 500);
+        //   document.getElementById("qrCode").innerHTML = "";
+        //   console.log("QRCode", QRCode);
+        //   let QRCodeData = new QRCode(this.$refs.qrCodeDiv, {
+        //     text: JSON.stringify(data),
+        //     width: 150,
+        //     height: 150,
+        //     colorDark: "#333333", //二维码颜色
+        //     colorLight: "#ffffff", //二维码背景色
+        //     correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
+        //   });
+        //   console.log("QRCodeData", QRCodeData);
+        //   setTimeout(() => {
+        //     let img = QRCodeData._el.innerHTML;
+        //     let baseurl = img
+        //       .split("=")[5].split('"')[1]
+        //     console.log("baseurl", baseurl);
+        //     data.qrCode = baseurl;
+        //     data.createDate = this.selectNowDate();
+        //     addPointApi(data).then(res => {
+        //       console.log("新增", res);
+        //       if (res.code == 200) {
+        //         this.cardDialog = false;
+        //         this.getPointList()
+        //       }
+        //     });
+        //   }, 500);
         }
       });
     }

src/views/projectFront/inspecPoint/selfInspect.vue

@@ -1,18 +1,12 @@
 <template>
   <div class="fullHeight">
     <div class="searchBox whiteBlock">
-      <el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
-        <el-form-item
-          label="巡检点"
-          prop="beaconMinor"
-        >
-          <el-input
-            v-model="searchForm.workerName"
+        <el-input
+            v-model="queryStr"
             :placeholder="$t('message.personnelPosition.please_enter')"
-            clearable
+            :clearable = "true"
+            @change="inptValue"
           ></el-input>
-        </el-form-item>
-        <el-form-item>
           <el-button
             type="primary"
             plain
@@ -23,15 +17,13 @@
             plain
             @click="toRefresh"
           >{{$t('message.personnelPosition.beaconManage.refresh')}}</el-button>
-        </el-form-item>
-      </el-form>
     </div>
     <div class="table_wrap whiteBlock">
       <el-table class="tables" :data="tableData">
-        <el-table-column prop="beaconMinor" label="巡检点" align="center"></el-table-column>
+        <el-table-column prop="checkingPointName" label="巡检点" align="center"></el-table-column>
         <el-table-column prop="position" label="巡检位置" align="center"></el-table-column>
-        <el-table-column prop="beaconMinor" label="巡检人" align="center"></el-table-column>
-        <el-table-column prop="beaconMinor" label="巡检时间" align="center"></el-table-column>
+        <el-table-column prop="checkingPointUserName" label="巡检人" align="center"></el-table-column>
+        <el-table-column prop="createDate" label="巡检时间" align="center"></el-table-column>
       </el-table>
       <el-pagination
         class="pagerBox"
@@ -49,18 +41,22 @@
 </template>
 
 <script>
+import {
+getCheckPointApi
+} from "@/assets/js/api/insect.js";
 export default {
   data() {
     return {
-      searchForm: {
-        workerName: ""
-      },
-      tableData: [{ beaconMinor: "111" }],
+      queryStr: '',
+      tableData: [],
       total: 0,
       pageNo: 1,
       pageSize: 10
     };
   },
+  mounted(){
+    this.getPointList()
+  },
   methods: {
     //查看条数
     handleSizeChange(val) {
@@ -72,13 +68,34 @@ export default {
       this.pageNo = val;
       this.getPointList();
     },
+    inptValue(val){
+        console.log('输入的内容',val)
+    },
     // 查询
-    getPointList() {},
+    getPointList() {
+      let data = new FormData();//new出来的对象
+      data.append("queryStr",this.queryStr);
+      data.append("projectSn",this.$store.state.projectSn);
+      data.append("pageNo",this.pageNo);
+      data.append("pageSize",this.pageSize);
+        getCheckPointApi(data).then((res)=>{
+            console.log('res111111111',res)
+            this.tableData = res.result.records
+            this.total = res.result.total
+        })
+    },
     // 刷新
-    toRefresh() {}
+    toRefresh() {
+        this.getPointList()
+        this.queryStr = ''
+    }
   }
 };
 </script>
 
-<style>
+<style lang="less" scoped>
+::v-deep .el-input {
+    width:400px;
+    margin-right: 15px;
+}
 </style>