From f245868fb050f8a9da5e98570c7a583acb9f34c1 Mon Sep 17 00:00:00 2001
From: lion <120344285@qq.com>
Date: Mon, 21 Jul 2025 10:36:58 +0800
Subject: [PATCH] =?UTF-8?q?lr=20=E4=B8=8B=E6=8B=89=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/resource/components/addLr.vue | 276 ++++++++++++++----------
 1 file changed, 159 insertions(+), 117 deletions(-)

diff --git a/src/views/resource/components/addLr.vue b/src/views/resource/components/addLr.vue
index 699c100..5736451 100644
--- a/src/views/resource/components/addLr.vue
+++ b/src/views/resource/components/addLr.vue
@@ -47,30 +47,32 @@
             <el-input placeholder="Please Input" style="width:100%" v-model="form.source"></el-input>
           </div>
         </div>
-      </template>
-      <template v-slot:is_top>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label" style="font-weight: bold">
-            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Top：
-          </div>
-          <div class="xy-table-item-content">
-            <el-select style="width:100%" v-model="form.is_top" placeholder="Please Select">
-              <el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value" :value="item.id"></el-option>
-            </el-select>
-          </div>
-        </div>
       </template>
-      <template v-slot:is_visible>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label" style="font-weight: bold">
-            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Visible：
-          </div>
-          <div class="xy-table-item-content">
-            <el-select style="width:100%" v-model="form.is_visible" placeholder="Please Select">
-              <el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value" :value="item.id"></el-option>
-            </el-select>
-          </div>
-        </div>
+      <template v-slot:is_top>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label" style="font-weight: bold">
+            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Top：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select style="width:100%" v-model="form.is_top" placeholder="Please Select">
+              <el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value"
+                :value="item.id"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:is_visible>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label" style="font-weight: bold">
+            <span style="color: red;font-weight: bold;padding-right: 4px;"></span>Visible：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select style="width:100%" v-model="form.is_visible" placeholder="Please Select">
+              <el-option v-for="item in [{id: 1,value: 'Yes'}, {id: 0,value: 'No'}]" :key="item.id" :label="item.value"
+                :value="item.id"></el-option>
+            </el-select>
+          </div>
+        </div>
       </template>
       <template v-slot:date>
         <div class="xy-table-item">
@@ -101,10 +103,11 @@
           </div>
           <div class="xy-table-item-content">
             <el-upload :action="action" class='upload-demo' :limit="1" :file-list="filesList" ref="pictureUpload"
-              :auto-upload="true" :data="uploadOther"  :on-progress="handleProgress" :on-success="handlesuccess" :on-remove="handleRemove">
+              :auto-upload="true" :data="uploadOther" :on-progress="handleProgress" :on-success="handlesuccess"
+              :on-remove="handleRemove">
               <el-button size="small" type="primary">upload</el-button>
-            </el-upload>
-            <el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
+            </el-upload>
+            <el-progress v-if="showProgress" :percentage="uploadProgress"></el-progress>
 
           </div>
         </div>
@@ -116,12 +119,25 @@
             <span style="color: red;font-weight: bold;padding-right: 4px;"></span>PN：
           </div>
           <div class="xy-table-item-content">
-            <el-select v-loadmore="loadMore" style="width:100%" filterable v-model="form.product_numbers" multiple collapse-tags
-              placeholder="Please Select">
+            <el-select :remote-method="remoteMethod" v-loadmore="loadMore"
+              style="width:100%" v-model="form.product_numbers" multiple
+
+              placeholder="Please Select">
+              <div style="display: flex;align-items: center;padding:10px">
+                <el-input size="small" v-model="number_keyword" placeholder="Please Input Part Number"></el-input>
+                <el-button size="small" style="margin-left:10px" @click="remoteMethod" type="primary">搜索</el-button>
+                <el-button size="small" style="margin-left:10px" @click="clearMethod" type="info">清空</el-button>
+              </div>
               <el-option v-for="item in productList" :key="item.id" :label="item.number" :value="item.id">
               </el-option>
-              <div v-if="productPage>lastPage" style="text-align: center;">There is no more data</div>
-              <div v-else style="text-align: center;">Loading More</div>
+              <div v-if="loading" style="text-align: center;">
+                Loading....
+              </div>
+              <div v-else>
+                <div v-if="productPage>=lastPage" style="text-align: center;">There is no more data</div>
+                <div v-else style="text-align: center;">Loading More</div>
+              </div>
+
             </el-select>
           </div>
         </div>
@@ -195,11 +211,13 @@
     data() {
       return {
         table_name: 'literature_references',
+        loading: false,
         isShow: false,
         id: '',
-        type: 'add',
-        productPage:1,
-        lastPage:0,
+        type: 'add',
+        productPage: 1,
+        lastPage: 0,
+        number_keyword:'',
         productList: [],
         categoryList: [],
         applicationList: [],
@@ -207,18 +225,18 @@
         uploadOther: {
           token: ""
         },
-        action: `${process.env.VUE_APP_UPLOAD_API}`,
-        showProgress:false,
-        uploadProgress:0,
+        action: `${process.env.VUE_APP_UPLOAD_API}`,
+        showProgress: false,
+        uploadProgress: 0,
         filesList: [],
         form: {
           category_ids: [],
           application_ids: [],
           year: "",
           title: "",
-          source: '',
-          is_top:0,
-          is_visible:1,
+          source: '',
+          is_top: 0,
+          is_visible: 1,
           date: '',
           link: '',
           files: [],
@@ -249,22 +267,22 @@
       this.getApplicationList()
       // this.getAppSpecial()
     },
-    methods: {
-      handleRemove(file, fileList) {
-        this.filesList = fileList
-      },
-      handlesuccess(response, file, fileList) {
-        if (response && response.hasOwnProperty('errcode')) {
-          this.$Message.warning(response.errmsg || '')
-          this.filesList = []
-          return
-        }
-        this.filesList = fileList
-      },
-      handleProgress(event, file, fileList) {
-        this.showProgress = true;
-        this.uploadProgress = event.percent;
-        console.log("uploadProgress",this.showProgress,uploadProgress,event)
+    methods: {
+      handleRemove(file, fileList) {
+        this.filesList = fileList
+      },
+      handlesuccess(response, file, fileList) {
+        if (response && response.hasOwnProperty('errcode')) {
+          this.$Message.warning(response.errmsg || '')
+          this.filesList = []
+          return
+        }
+        this.filesList = fileList
+      },
+      handleProgress(event, file, fileList) {
+        this.showProgress = true;
+        this.uploadProgress = event.percent;
+        console.log("uploadProgress", this.showProgress, uploadProgress, event)
       },
 
       async getApplicationList() {
@@ -295,31 +313,54 @@
         })
         this.appSpecialList = res.data
       },
+      changeItem(e){
+        console.log("e",e)
+      },
+      remoteMethod(query) {
 
-      async getProductList() {
+          this.productPage =1
+          this.productList = []
+          this.getProductList(query)
+      },
+      clearMethod(){
+        this.productPage =1
+        this.number_keyword = ''
+        this.productList = []
+        if (this.form.product_numbers_details && this.form.product_numbers_details.length > 0) {
+          this.productList.unshift(...this.form.product_numbers_details)
+        }
+        this.getProductList()
+      },
+      async getProductList(query) {
+        this.loading = true;
         const res = await getProduct({
           page_size: 100,
-          page: this.productPage
-        })
-        this.lastPage = res.last_page
-        if(this.type==='editor'){
-          const uniqueB = res.data.filter(itemB =>
-              !this.form.product_numbers_details.some(itemC => itemC.id === itemB.id)
-            );
-            this.productList.push(...uniqueB)
-        }else{
-          this.productList.push(...res.data)
-        }
-
+          page: this.productPage,
+          filter: [{
+            key: 'number',
+            op: 'like',
+            value: this.number_keyword?this.number_keyword:''
+          }]
+        })
+        this.lastPage = res.last_page
+        if (this.type === 'editor') {
+          const uniqueB = res.data.filter(itemB =>
+            !this.form.product_numbers_details.some(itemC => itemC.id === itemB.id)
+          );
+          this.productList.push(...uniqueB)
+        } else {
+          this.productList.push(...res.data)
+        }
+        this.loading = false
 
-      },
-      loadMore() {
-        // 这里写入要触发的方法
-        this.productPage += 1;
-        if(this.productPage>this.lastPage){
-          return
-        }
-        this.getProductList();
+      },
+      loadMore() {
+        // 这里写入要触发的方法
+        this.productPage += 1;
+        if (this.productPage > this.lastPage) {
+          return
+        }
+        this.getProductList();
       },
 
       submit() {
@@ -328,19 +369,19 @@
           this.form.id = this.id
         } else {
           this.form.id = ''
-        }
-        let _files = []
-        if (this.filesList.length > 0) {
-          for (var h of this.filesList) {
-            if (h.response) {
-              _files.push(h.response.id)
-            } else {
-              _files.push(h.id)
-            }
-          }
-          this.form.files = _files
-        } else {
-          this.form.files = []
+        }
+        let _files = []
+        if (this.filesList.length > 0) {
+          for (var h of this.filesList) {
+            if (h.response) {
+              _files.push(h.response.id)
+            } else {
+              _files.push(h.id)
+            }
+          }
+          this.form.files = _files
+        } else {
+          this.form.files = []
         }
         console.log("this.form", this.form)
         // return
@@ -365,27 +406,27 @@
         }).then(res => {
           this.form = this.base.requestToForm(res, this.form)
           this.form.date = res.date ? res.date : this.$moment().format('YYYY-MM-DD HH:mm:ss')
-
-          this.form.is_visible = res.is_visible ? res.is_visible : 0
+
+          this.form.is_visible = res.is_visible ? res.is_visible : 0
           this.form.is_top = res.is_top ? res.is_top : 0
           this.form.category_ids = res.category_ids ? res.category_ids : []
           this.form.product_numbers = res.product_numbers ? res.product_numbers : []
           this.form.separation_mode = res.separation_mode ? res.separation_mode : []
           this.form.broad_sample_type = res.broad_sample_type ? res.broad_sample_type : []
-          this.form.specific_sample = res.specific_sample ? res.specific_sample : []
-          if(res.product_numbers_details && res.product_numbers_details.length>0){
-            this.productList.unshift(...res.product_numbers_details)
-          }
-
-          if (res.files_details && res.files_details.length > 0) {
-            this.filesList = []
-            res.files_details.map(item => {
-              this.filesList.push({
-                name: item.original_name,
-                id: item.id,
-                url: item.url
-              })
-            })
+          this.form.specific_sample = res.specific_sample ? res.specific_sample : []
+          if (res.product_numbers_details && res.product_numbers_details.length > 0) {
+            this.productList.unshift(...res.product_numbers_details)
+          }
+
+          if (res.files_details && res.files_details.length > 0) {
+            this.filesList = []
+            res.files_details.map(item => {
+              this.filesList.push({
+                name: item.original_name,
+                id: item.id,
+                url: item.url
+              })
+            })
           }
         })
       }
@@ -394,30 +435,30 @@
       isShow(newVal) {
         if (newVal) {
           if (this.type === 'editor') {
-            this.getDetail()
+            this.getDetail()
             this.getProductList()
           } else {
-            this.form.date = this.$moment().format('YYYY-MM-DD HH:mm:ss')
+            this.form.date = this.$moment().format('YYYY-MM-DD HH:mm:ss')
             this.getProductList()
           }
 
         } else {
-          this.id = ''
-          this.filesList = []
-          this.showProgress = false;
-          this.uploadProgress = 0;
-          this.productList = []
+          this.id = ''
+          this.filesList = []
+          this.showProgress = false;
+          this.uploadProgress = 0;
+          this.productList = []
           this.productPage = 1
           this.form = {
             category_ids: [],
             application_ids: [],
             year: "",
             title: "",
-            source: '',
-            is_top:0,
-            is_visible:1,
+            source: '',
+            is_top: 0,
+            is_visible: 1,
             date: '',
-            link: '',
+            link: '',
             files: [],
             product_numbers: [],
             separation_mode: [],
@@ -433,7 +474,8 @@
 </script>
 
 <style scoped lang="scss">
-  ::v-deep .files{
+  ::v-deep .files,
+  ::v-deep .product_numbers{
     flex-basis: 100%;
   }
 </style>