From 059f15ac990c8d5113c7e35278ffa411b90406ea Mon Sep 17 00:00:00 2001
From: zhangdi <1104545947@qq.com>
Date: Tue, 31 Mar 2026 19:35:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E8=89=BA=E4=BB=BB=E5=8A=A1=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/jh-select/index.vue            | 296 ++++++++++++++++++
 src/views/logisticsManagement/siteBasic.vue   |   3 +-
 .../components/addTestDialog.vue              |  58 +++-
 3 files changed, 342 insertions(+), 15 deletions(-)
 create mode 100644 src/components/jh-select/index.vue

diff --git a/src/components/jh-select/index.vue b/src/components/jh-select/index.vue
new file mode 100644
index 0000000..8f59e39
--- /dev/null
+++ b/src/components/jh-select/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <el-select
+    ref="selectRef"
+    v-model="localValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    filterable
+    clearable
+    :filter-method="handleSearch"
+    @visible-change="handleVisibleChange"
+    @clear="handleClear"
+    @change="handleChange"
+    class="paged-select"
+    :teleported="false"
+    :popper-options="{
+      modifiers: [{ name: 'eventListeners', options: { scroll: false, resize: false } }],
+    }"
+  >
+    <el-option
+      v-for="item in optionList"
+      :key="item[valueKey]"
+      :label="item[labelKey]"
+      :value="item[valueKey]"
+    />
+    <el-option v-if="loading && hasMore" label="加载中..." disabled />
+    <el-option v-if="!hasMore && optionList.length" label="没有更多了~" disabled />
+  </el-select>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'DynamicPagedSelect',
+  props: {
+    value: [String, Number],
+    apiUrl: { type: String, required: true },
+    apiMethod: { type: String, default: 'get' },
+    params: { type: Object, default: () => ({}) },
+    listKey: { type: String, required: true },
+    totalKey: { type: String, required: true },
+    labelKey: { type: String, required: true },
+    valueKey: { type: String, required: true },
+    searchKey: { type: String, default: 'keyword' },
+    pageSize: { type: Number, default: 10 },
+    placeholder: String,
+    disabled: Boolean,
+    debounceTime: { type: Number, default: 500 },
+    echoApi: { type: String, default: '' },
+    echoMethod: { type: String, default: 'get' },
+  },
+  data() {
+    return {
+      localValue: this.value,
+      optionList: [],
+      pageNum: 1,
+      loading: false,
+      hasMore: true,
+      searchText: '',
+      scrollEl: null,
+      dropdownVisible: false,
+      bindTimer: null,
+      total: 0,
+    };
+  },
+  watch: {
+    value(val) {
+      this.localValue = val;
+      this.initEcho();
+    },
+    localValue(val) {
+      this.$emit('input', val);
+    },
+    optionList() {
+      if (this.dropdownVisible && this.optionList.length > 0) {
+        this.$nextTick(() => {
+          this.bindScroll();
+        });
+      }
+    },
+  },
+  mounted() {
+    this.debounceSearch = this.debounce(this.fetchData, this.debounceTime);
+    this.initEcho();
+  },
+  beforeUnmount() {
+    this.cleanup();
+  },
+  methods: {
+    debounce(func, wait) {
+      let timeout = null;
+      return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(this, args), wait);
+      };
+    },
+
+    cleanup() {
+      if (this.scrollEl) {
+        this.scrollEl.removeEventListener('scroll', this.handleScroll);
+        this.scrollEl = null;
+      }
+      if (this.bindTimer) {
+        clearTimeout(this.bindTimer);
+        this.bindTimer = null;
+      }
+    },
+
+    findScrollContainer() {
+      const selectRef = this.$refs.selectRef;
+      if (!selectRef) return null;
+
+      const popper = selectRef.popperRef?.$el || selectRef.popperRef;
+      if (!popper) return null;
+
+      const wrap = popper.querySelector('.el-scrollbar__wrap');
+      if (wrap) return wrap;
+
+      const altWrap = popper.querySelector('.el-select-dropdown__wrap');
+      return altWrap || null;
+    },
+
+    bindScroll() {
+      this.cleanup();
+
+      const tryBind = (attempt = 1) => {
+        if (!this.dropdownVisible) return;
+
+        const scrollEl = this.findScrollContainer();
+        if (scrollEl) {
+          this.scrollEl = scrollEl;
+          scrollEl.addEventListener('scroll', this.handleScroll, { passive: true });
+        } else if (attempt < 5) {
+          this.bindTimer = setTimeout(() => tryBind(attempt + 1), 100 * attempt);
+        }
+      };
+
+      tryBind();
+    },
+
+    handleScroll(e) {
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      const threshold = scrollHeight - clientHeight - 10;
+
+      if (this.loading || !this.hasMore) return;
+
+      if (scrollTop >= threshold) {
+        this.loadMore();
+      }
+    },
+
+    handleVisibleChange(visible) {
+      this.dropdownVisible = visible;
+
+      if (visible) {
+        this.reset();
+        this.fetchData().then(() => {
+          this.bindScroll();
+        });
+      } else {
+        this.cleanup();
+      }
+    },
+
+    handleSearch(val) {
+      this.searchText = val;
+      this.reset();
+      this.debounceSearch();
+    },
+
+    loadMore() {
+      if (this.loading || !this.hasMore) return;
+      this.pageNum++;
+      this.fetchData();
+    },
+
+    handleClear() {
+      this.localValue = '';
+      this.reset();
+      this.$emit('clear');
+    },
+
+    // 关键修改：选中后返回完整 item
+    handleChange(val) {
+      console.log('选中值:', val);
+      
+      // 从当前列表查找
+      let selectedItem = this.optionList.find(item => item[this.valueKey] === val);
+      console.log('从列表找到:', selectedItem);
+      
+      // 如果没找到且有回显接口，通过接口获取
+      if (!selectedItem && this.echoApi) {
+        console.log('列表未找到，通过接口获取');
+        this.getEchoData(val).then(item => {
+          console.log('接口返回:', item);
+          this.$emit('change', val, item);
+        });
+      } else {
+        // 确保发射事件
+        this.$nextTick(() => {
+          this.$emit('change', val, selectedItem);
+        });
+      }
+    },
+
+    // 新增：通过接口获取完整数据
+    async getEchoData(val) {
+      try {
+        const params = { [this.valueKey]: val };
+        let res;
+        if (this.echoMethod.toLowerCase() === 'post') {
+          res = await axios.post(this.echoApi, params);
+        } else {
+          res = await axios.get(this.echoApi, { params });
+        }
+        return res.data.data || {};
+      } catch (e) {
+        console.error('获取选中项详情失败', e);
+        return null;
+      }
+    },
+
+    async initEcho() {
+      const val = this.localValue;
+      if (!val || !this.echoApi) return;
+      const has = this.optionList.some(item => item[this.valueKey] === val);
+      if (has) return;
+      
+      const info = await this.getEchoData(val);
+      if (info[this.labelKey] && info[this.valueKey]) {
+        const exist = this.optionList.some(i => i[this.valueKey] === info[this.valueKey]);
+        if (!exist) this.optionList.unshift(info);
+      }
+    },
+
+    async fetchData() {
+      this.loading = true;
+      try {
+        const sendData = {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          [this.searchKey]: this.searchText,
+          ...this.params,
+        };
+        let res;
+        if (this.apiMethod.toLowerCase() === 'post') {
+          res = await axios.post(this.apiUrl, sendData);
+        } else {
+          res = await axios.get(this.apiUrl, { params: sendData });
+        }
+        const data = res.data.data || {};
+        const list = data[this.listKey] || [];
+        const total = data[this.totalKey] || 0;
+
+        this.total = total;
+
+        if (this.pageNum === 1) {
+          this.optionList = list;
+        } else {
+          this.optionList = this.optionList.concat(list);
+        }
+
+        this.hasMore = this.optionList.length < total;
+
+        this.$nextTick(() => {
+          this.bindScroll();
+        });
+      } catch (e) {
+        console.error('请求失败', e);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.pageNum = 1;
+      this.optionList = [];
+      this.hasMore = true;
+      this.total = 0;
+      this.cleanup();
+    },
+  },
+};
+</script>
+<style>
+.paged-select.el-select-dropdown.el-popper {
+  height: 200px !important;
+  overflow: hidden !important;
+}
+
+.paged-select.el-select-dropdown .el-scrollbar__wrap {
+  height: 200px !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/logisticsManagement/siteBasic.vue b/src/views/logisticsManagement/siteBasic.vue
index 886c6f1..7c6e299 100644
--- a/src/views/logisticsManagement/siteBasic.vue
+++ b/src/views/logisticsManagement/siteBasic.vue
@@ -316,7 +316,7 @@ export default {
     searchChange(params, done) {
       this.query = params;
       this.page.currentPage = 1;
-      this.onLoad(this.page, params);
+      this.onLoad(this.page, this.query);
       done();
     },
     selectionChange(list) {
@@ -348,6 +348,7 @@ export default {
 
     onLoad(page, params = {}) {
       this.loading = true;
+      this.data = [];
       getStationList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(
         res => {
           this.data = res.data.data.records;
diff --git a/src/views/processManagement/components/addTestDialog.vue b/src/views/processManagement/components/addTestDialog.vue
index 2d1aaa8..9b0bc8f 100644
--- a/src/views/processManagement/components/addTestDialog.vue
+++ b/src/views/processManagement/components/addTestDialog.vue
@@ -10,7 +10,7 @@
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="零件号:" prop="partId">
-            <el-select
+            <!-- <el-select
               v-model="ruleForm.partId"
               placeholder="请输入"
               @change="partChange"
@@ -23,7 +23,21 @@
                 :label="item.partCode"
                 :value="item.id"
               />
-            </el-select>
+            </el-select> -->
+            <jhSelect
+              v-model="ruleForm.partId"
+              placeholder="请搜索选择"
+              api-url="/blade-desk/dsPart/listNew"
+              api-method="get"
+              list-key="records"
+              total-key="total"
+              label-key="partCode"
+              value-key="id"
+              search-key="partCode"
+              :debounce-time="500"
+              @clear="handleClear"
+              @change="partChange"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -71,6 +85,7 @@
 <script>
 import { getPartList, getVersion, saveTask } from '@/api/processManagement/taskProcessing';
 import { getRoleUserList } from '@/api/processManagement/taskDispatch';
+import jhSelect from '@/components/jh-select/index.vue';
 export default {
   props: {
     showDialog: {
@@ -78,6 +93,7 @@ export default {
       default: false,
     },
   },
+  components: { jhSelect },
   data() {
     return {
       partList: [],
@@ -94,6 +110,7 @@ export default {
       getPartOptions: [], //零件号
       versionOptions: [], //版本号
       craftManOptions: [], //工艺员
+      selectedPart: {}, //获取选中的零件信息
     };
   },
   mounted() {
@@ -104,8 +121,7 @@ export default {
   methods: {
     getRoleUserList() {
       getRoleUserList({ current: 1, size: 99999 }).then(res => {
-        this.craftManOptions = res.data.data
-;
+        this.craftManOptions = res.data.data;
       });
     },
     getPartList() {
@@ -113,7 +129,9 @@ export default {
         this.getPartOptions = response.data.data;
       });
     },
-    partChange() {
+    partChange(value, item) {
+      this.selectedPart = item;
+      console.log(value, item, 999999);
       getVersion({ partId: this.ruleForm.partId }).then(res => {
         this.versionOptions = res.data.data;
       });
@@ -122,15 +140,17 @@ export default {
       this.$refs.ruleFormRef.validate(valid => {
         if (valid) {
           // 获取零件code
-          let part = this.getPartOptions.find(item => item.id === this.ruleForm.partId);
-          console.log(8888, part);
+          // let part = this.getPartOptions.find(item => item.id === this.ruleForm.partId);
+          // console.log(8888, part);
           // this.ruleForm.partCode = part.partCode;
-          saveTask({ ...this.ruleForm, partCode: part.partCode, partName: part.partName }).then(
-            res => {
-              this.$message.success('新增成功');
-              this.closeDialog();
-            }
-          );
+          saveTask({
+            ...this.ruleForm,
+            partCode: this.selectedPart.partCode,
+            partName: this.selectedPart.partName,
+          }).then(res => {
+            this.$message.success('新增成功');
+            this.closeDialog();
+          });
         }
       });
     },
@@ -141,4 +161,14 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.el-select-dropdown) {
+  height: 200px !important;
+  overflow: hidden !important;
+}
+:deep(.el-select-dropdown .el-scrollbar__wrap) {
+  height: 300px !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+}
+</style>