客户下拉框

src/api/sampleTracking/sampleTracking.js

@@ -14,6 +14,7 @@ export const batchSyncProjectPartTracking = data => createAPI('/sampleTracking/p
 export const batchSyncProofTracking = data => createAPI('/sampleTracking/proofTracking/batchSync', 'POST', data)
 
 export const searchProofTracking = data => createAPI('/sampleTracking/proofTracking/search', 'POST', data)
+export const queryProofTrackingCustomerOptions = data => createAPI('/sampleTracking/proofTracking/customerOptions', 'POST', data)
 export const exportProofTracking = data => createAPI('/sampleTracking/proofTracking/export', 'POST', data, 'download')
 export const oneKeyCreateProofTracking = data => createAPI('/sampleTracking/proofTracking/oneKeyCreate', 'POST', data)
 export const oneKeyUpdateProofTracking = data => createAPI('/sampleTracking/proofTracking/oneKeyUpdate', 'POST', data)

src/views/modules/sampleTracking/projectProofTracking.vue

@@ -28,8 +28,26 @@
           <el-option v-for="item in dryWetTypeList" :key="`searchDryWet_${item}`" :label="item" :value="item" />
         </el-select>
       </el-form-item>
-      <el-form-item label="客户编码">
-        <el-input v-model="searchData.customerNo" clearable placeholder="请输入客户编码" style="width: 120px" />
+      <el-form-item label="客户名称">
+        <el-select
+          v-model="searchData.customerNo"
+          filterable
+          clearable
+          remote
+          reserve-keyword
+          placeholder="请输入客户名称"
+          style="width: 120px"
+          :remote-method="handleSearchCustomerRemote"
+          :loading="searchCustomerOptionLoading"
+          @visible-change="handleSearchCustomerVisibleChange"
+        >
+          <el-option
+            v-for="item in searchCustomerOptions"
+            :key="`searchCustomer_${item.customerNo}`"
+            :label="getSearchCustomerOptionLabel(item)"
+            :value="item.customerNo"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="打样单号">
         <el-input v-model="searchData.proofingNo" clearable placeholder="请输入打样单号" style="width: 150px" />
@@ -1039,6 +1057,7 @@ import {
   searchProjectInfoTracking,
   searchProjectPartTracking,
   searchProofTracking,
+  queryProofTrackingCustomerOptions,
   batchSyncProofTracking,
   batchSyncProjectPartTracking,
   updateProofTrackingComments,
@@ -1384,6 +1403,10 @@ export default {
         proofSyncFlag: '',
         proofingStatus: ''
       },
+      searchCustomerOptions: [],
+      searchCustomerOptionLoading: false,
+      searchCustomerQueryToken: 0,
+      searchCustomerOptionInitialized: false,
       trackingColumnList: cloneDefaultTrackingColumns(),
       hasUserTrackingColumnConfig: false,
       processColumns: cloneDefaultProcessColumns(),
@@ -2358,8 +2381,76 @@ export default {
     getSelectedSearchBuNo () {
       return this.normalizeBuNo(this.searchData.buNo, this.searchData.site)
     },
+    getSearchCustomerOptionLabel (item) {
+      const customerNo = item && !this.isBlankValue(item.customerNo)
+        ? String(item.customerNo).trim()
+        : ''
+      const customerDesc = item && !this.isBlankValue(item.customerDesc)
+        ? String(item.customerDesc).trim()
+        : ''
+      if (!customerNo) {
+        return customerDesc
+      }
+      return customerDesc
+    },
+    resetSearchCustomerOptions () {
+      // 查询 BU 变化后，客户下拉需重置，避免沿用旧 BU 缓存导致筛选项不准确。
+      this.searchCustomerQueryToken += 1
+      this.searchCustomerOptionLoading = false
+      this.searchCustomerOptionInitialized = false
+      this.searchCustomerOptions = []
+    },
+    handleSearchCustomerVisibleChange (visible) {
+      if (!visible || this.searchCustomerOptionInitialized) {
+        return
+      }
+      this.querySearchCustomerOptions('')
+    },
+    handleSearchCustomerRemote (keyword) {
+      this.querySearchCustomerOptions(keyword)
+    },
+    querySearchCustomerOptions (keyword) {
+      const normalizedKeyword = this.isBlankValue(keyword) ? '' : String(keyword).trim()
+      const queryToken = this.searchCustomerQueryToken + 1
+      this.searchCustomerQueryToken = queryToken
+      this.searchCustomerOptionLoading = true
+      return queryProofTrackingCustomerOptions({
+        site: this.$store.state.user.site,
+        userName: this.$store.state.user.name,
+        buNo: this.getSelectedSearchBuNo(),
+        customerNo: normalizedKeyword
+      }).then(({ data }) => {
+        if (queryToken !== this.searchCustomerQueryToken) {
+          return []
+        }
+        if (!(data && data.code === 0)) {
+          throw new Error((data && data.msg) || '查询客户下拉异常')
+        }
+        const rows = Array.isArray(data.rows) ? data.rows : []
+        const normalizedRows = rows.map(item => ({
+          customerNo: this.isBlankValue(item && item.customerNo) ? '' : String(item.customerNo).trim(),
+          customerDesc: this.isBlankValue(item && item.customerDesc) ? '' : String(item.customerDesc).trim()
+        })).filter(item => !!item.customerNo)
+        this.searchCustomerOptions = normalizedRows
+        if (!normalizedKeyword) {
+          this.searchCustomerOptionInitialized = true
+        }
+        return normalizedRows
+      }).catch((e) => {
+        if (queryToken === this.searchCustomerQueryToken) {
+          this.searchCustomerOptions = []
+          this.$message.error((e && e.message) || '查询客户下拉异常')
+        }
+        return []
+      }).finally(() => {
+        if (queryToken === this.searchCustomerQueryToken) {
+          this.searchCustomerOptionLoading = false
+        }
+      })
+    },
     handleSearchBuChange () {
       this.ensureSearchBuNoSelected()
+      this.resetSearchCustomerOptions()
       // BU筛选变化后立即重新查询，并回到第一页。
       this.queryProcessColumns().then(() => {
         this.getDataList('Y')