修改页面

jsowell-ui/src/views/pile/basic/index.vue

@@ -39,13 +39,29 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" icon="el-icon-refresh-right" size="mini" @click="handleQuery">刷新</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-refresh-right"
+          size="mini"
+          @click="handleQuery"
+          >刷新</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['pile:basic:batchAdd']">批量新增</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['pile:basic:batchAdd']"
+          >批量新增</el-button
+        >
       </el-col>
       <!--<el-col :span="1.5">
         <el-button
@@ -122,7 +138,12 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="sim卡号" align="center" prop="iccid" width="220px"/>
+      <el-table-column
+        label="sim卡号"
+        align="center"
+        prop="iccid"
+        width="220px"
+      />
       <el-table-column label="sim卡商" align="center" prop="simSupplier">
         <template slot-scope="scope">
           <dict-tag
@@ -197,7 +218,11 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="站点" prop="stationId">
-              <el-select v-model="form.stationId" filterable placeholder="请选择站点">
+              <el-select
+                v-model="form.stationId"
+                filterable
+                placeholder="请选择站点"
+              >
                 <el-option
                   v-for="item in stationList"
                   :key="item.id"
@@ -243,7 +268,14 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="产品型号" prop="modelId">
-              <el-select v-model="form.modelId" placeholder="请选择产品型号" filterable clearable>
+              <el-select
+                filterable
+                remote
+                v-model="form.modelId"
+                placeholder="请选择产品型号"
+                v-selectLoadMore="selectLoadMore"
+              >
+                <!-- :remote-method="remoteMethod" -->
                 <el-option
                   v-for="item in modelList"
                   :key="item.modelName"
@@ -329,6 +361,13 @@ export default {
   dicts: ["pile_status", "software_protocol", "sim_supplier", "connector_type"],
   data() {
     return {
+      modelTotal: 0,
+      loadMoreFlag: true,
+      searchModelParam: {
+        modelName: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
       // 定时器
       timer: null,
       // 遮罩层
@@ -403,10 +442,30 @@ export default {
   },
   created() {
     this.getList();
-
-    this.getModelList();
   },
   methods: {
+    selectLoadMore() {
+      console.log("触底了 ", this.searchModelParam.pageSize);
+      if (this.loadMoreFlag === false) {
+        return;
+      }
+      this.searchModelParam.pageSize = this.searchModelParam.pageSize + 10;
+      // console.log("触底了执行查询", this.searchModelParam);
+      this.getModelList();
+    },
+
+    // 远程搜索
+    remoteMethod(val) {
+      // console.log("输入了", val);
+      this.loading = true;
+      this.searchModelParam.modelName = val;
+      this.searchModelParam.pageNum = 1;
+      this.modelList = [];
+      setTimeout(() => {
+        this.loading = false;
+        this.getModelList();
+      }, 500);
+    },
     changeSelectMerchant(value) {
       // 清空内容
       this.createPile.stationId = "";
@@ -422,8 +481,11 @@ export default {
       });
     },
     getModelList() {
-      listModel().then((response) => {
+      listModel(this.searchModelParam).then((response) => {
+        // console.log("response", response);
+        this.modelTotal = response.total;
         this.modelList = response.rows;
+        this.loadMoreFlag = this.searchModelParam.pageSize <= this.modelTotal;
         console.log("this.modelList", this.modelList);
       });
     },
@@ -476,7 +538,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.queryParams = {
-        pageNum: 1
+        pageNum: 1,
       };
       // this.resetForm("queryForm");
       this.handleQuery();
@@ -493,6 +555,7 @@ export default {
       this.getMerchantList();
       this.title = "批量添加设备";
       this.open = true;
+      this.getModelList();
     },
     /** 修改按钮操作 */
     handleUpdate(row) {