From 5c06e8d272b06f2c17bda89b163ac49ebdeac6bf Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期二, 14 十一月 2023 19:24:53 +0800
Subject: [PATCH] 修改上家规则列表

---
 src/views/warehouseManage/listingRules/index.vue |  177 +++++++++++++------------
 src/components/makepager/CommonFormTableView.vue |  211 ++++++++++++++++++++++++++++-
 2 files changed, 291 insertions(+), 97 deletions(-)

diff --git a/src/components/makepager/CommonFormTableView.vue b/src/components/makepager/CommonFormTableView.vue
index 9b8d311..e193fcd 100644
--- a/src/components/makepager/CommonFormTableView.vue
+++ b/src/components/makepager/CommonFormTableView.vue
@@ -161,8 +161,36 @@
                     <el-option
                       v-for="(item, index) in selLocationOptions"
                       :key="index"
-                      :label="item.name"
-                      :value="{ value: item.id, label: item.name }"
+                      :label="item.jointName"
+                      :value="{ value: item.id, label: item.jointName}"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+              </el-form-item>
+              <!-- 瀛愪綅缃� -->
+              <el-form-item v-else-if="item.sonLocation" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
+                <div class="custom-name">
+                  <span v-if="scope.row.isEdit || scope.row.editable">{{
+                    scope.row[item.prop]?.label ?? scope.row[item.prop]
+                  }}</span>
+                  <el-select
+                    v-else
+                    v-model="scope.row[item.prop]"
+                    placeholder="璇烽�夋嫨"
+                    size="mini"
+                    style="width: 80%"
+                    @change="
+                      (val) => {
+                        selSonLocationClick(val, item.prop)
+                      }
+                    "
+                  >
+                    <el-option
+                      v-for="(item, index) in selSonLocationOptions"
+                      :key="index"
+                      :label="item.jointName"
+                      :value="{ value: item.id, label: item.jointName}"
                     >
                     </el-option>
                   </el-select>
@@ -203,13 +231,15 @@
               <!-- 浜у搧 -->
               <el-form-item v-else-if="item.product" label=" " :prop="'tableData.' + scope.$index + '.' + item.prop">
                 <div class="custom-name">
-                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row[item.prop] }}</span>
-                  <el-select
+                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row.productName}}</span>
+                  <!-- <el-select
                     v-else
                     v-model="scope.row[item.prop]"
                     placeholder="璇烽�夋嫨"
                     size="mini"
                     style="width: 80%"
+                    clearable
+                    @clear="setValueNull(scope.row[item.prop])"
                     @change="
                       (val) => {
                         selProductClick(val)
@@ -230,18 +260,31 @@
                       }"
                     >
                     </el-option>
-                  </el-select>
+                  </el-select> -->
+                  <el-autocomplete
+                    v-else
+                    style="width: 100%"
+                    v-model="scope.row.productName"
+                    :fetch-suggestions="
+                      (queryString, callback) => {
+                        querySearchAsync(queryString, callback, 'product')
+                      }
+                    "
+                    value-key="name"
+                    @select="handleSelectClient('product', $event)"
+                  ></el-autocomplete>
                 </div>
               </el-form-item>
-              <!-- 浜у搧绫诲瀷 -->
+              <!-- 浜у搧绫诲埆 -->
               <el-form-item
                 v-else-if="item.productType"
                 label=" "
                 :prop="'tableData.' + scope.$index + '.' + item.prop"
               >
                 <div class="custom-name">
-                  <span v-if="scope.row.isEdit || scope.row.editable">{{ scope.row[item.prop] }}</span>
-                  <el-select
+                  <span v-if="scope.row.isEdit || scope.row.editable">{{scope.row.productCategory }}</span>
+                  
+                  <!-- <el-select
                     v-else
                     v-model="scope.row[item.prop]"
                     placeholder="璇烽�夋嫨"
@@ -263,7 +306,20 @@
                       }"
                     >
                     </el-option>
-                  </el-select>
+                  </el-select> -->
+                  <el-autocomplete
+                    v-else
+                    style="width: 100%"
+                    v-model="scope.row.productCategory"
+                    @focus="productTypeFocus"
+                    :fetch-suggestions="
+                      (queryString, callback) => {
+                        querySearchAsync(queryString, callback, 'productType')
+                      }
+                    "
+                    value-key="name"
+                    @select="handleSelectClient('productType', $event)"
+                  ></el-autocomplete>
                 </div>
               </el-form-item>
               <!-- 鐢ㄦ埛 -->
@@ -408,12 +464,14 @@
         { id: 2, name: "鎵�" }
       ],
       selLocationOptions: [], // 浣嶇疆
+      selSonLocationOptions:[], //瀛愪綅缃�
       companyOptions: [], // 鍏徃
       selRouteOptions: [{ id: 1, name: "鍒堕��" }], // 璺嚎
       locacionName: "",
       locacionId: 0,
       productName: "",
-      productId: ""
+      productId: "",
+      initialPosition:""
     }
   },
   created() {
@@ -453,6 +511,55 @@
         }
       })
     },
+    async handleSelectClient(value, item) {
+      if (value === "product") {
+        if(item.categoryId===0||item.categoryName===""){
+          this.productTypeNameOptions =[]
+          this.tableList.tableData[this.tableList.rowClickIndex].productCategory=''
+        }else{
+          await getProductCategoryList({
+            categoryId: item.categoryId,
+            keyWord: item.categoryName,
+            page: 1,
+            pageSize: 15
+          }).then((res) => {
+            if (res.code === 200) {
+              const list = res.data ? res.data : []
+              this.productTypeNameOptions = list
+              this.tableList.tableData[this.tableList.rowClickIndex].productCategory=list[0].name
+            }
+          })
+        }
+      }else if(value==="productType"){
+        console.log("浜у搧绫诲瀷閫変腑")
+      }
+      this.$emit("selProductClick",value,item)
+    },
+    querySearchAsync(queryString, cb, value) {
+      let restaurants=''
+      if(value==="product"){
+         restaurants = this.productNameOptions
+      }else if(value==="productType"){
+         restaurants = this.productTypeNameOptions
+      }
+      var results = queryString ? restaurants.filter(this.createStateFilter(queryString, value)) : restaurants
+      cb(results)
+      if(results.length===0){
+        this.productTypeNameOptions=[]
+      }
+      console.log(results,"results",value)
+      this.$emit("querySearchData",queryString,results,value)
+    },
+    createStateFilter(queryString) {
+      return (state) => {
+          return state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+      }
+    },
+    // 娓呴櫎閫変腑浜у搧
+    setValueNull(val) {
+      console.log(val,"鐪嬬湅val")
+    },
+
     // 搴撳瓨璋冩暣鑾峰彇浣嶇疆鍜屼骇鍝�
     async getRuleList() {
       await getRuleList({
@@ -463,6 +570,7 @@
         if (res.code === 200) {
           const list = res.data ? res.data : []
           this.selLocationOptions = list.locationList
+          this.selSonLocationOptions=list.locationList
           this.productNameOptions = list.productList
         }
       })
@@ -485,18 +593,44 @@
     // 浣嶇疆
     async getLocationList() {
       await getLocationList({
-        keyword: "",
+        // keyword: "",
+        jointName: this.initialPosition ? this.initialPosition : null,
+        productId: this.queryProductId ? this.queryProductId : null,
+        productCategoryId: this.categoryId ? this.categoryId : null,
         page: 1,
         pageSize: 100
       }).then((res) => {
+        console.log(res,"newlocal")
         if (res.code === 200) {
           const list = res.data ? res.data : []
           this.selLocationOptions = list
+          this.selSonLocationOptions=list
+            console.log(list,"999")
           if (this.isReorder) {
             this.locacionName = list[0]?.name
             this.locacionId = list[0]?.id
             this.$emit("selLocationClick", list[0], "locacionName")
           }
+        }
+      })
+    },
+    // 璁剧疆瀛愪綅缃�
+    async setLocationList(jointName){
+      await getLocationList({
+        // keyword: "",
+        jointName: jointName,
+        page: 1,
+        pageSize: 100
+      }).then((res) => {
+        console.log(res,"newlocal")
+        if (res.code === 200) {
+          const list = res.data ? res.data : []
+          this.selSonLocationOptions=list
+          // if (this.isReorder) {
+          //   this.locacionName = list[0]?.name
+          //   this.locacionId = list[0]?.id
+          //   this.$emit("selLocationClick", list[0], "locacionName")
+          // }
         }
       })
     },
@@ -549,11 +683,12 @@
           if (res.code === 200) {
             const list = res.data ? res.data : []
             this.selLocationOptions = list.locationList
+            this.selSonLocationOptions=list.locationList
           }
         })
       }
       console.log(this.tableList.tableData)
-      this.$emit("selProductClick", item)
+      // this.$emit("selProductClick", item)
     },
     // 閫夋嫨浜у搧绫诲瀷
     selProductTypeClick(item) {
@@ -566,10 +701,43 @@
       if (this.isinventory) {
         this.getProductCategoryList()
       }
-      this.$emit("selProductTypeClick", item)
+      // this.$emit("selProductTypeClick", item)
+    },
+    // 浜у搧绫诲瀷鑾峰彇鐒︾偣
+    productTypeFocus(){
+      getProductCategoryList({
+        categoryId: 0,
+        keyWord:"",
+        page: 1,
+        pageSize: 15
+      }).then((res) => {
+        if (res.code === 200) {
+          const list = res.data ? res.data : []
+          this.productTypeNameOptions = list
+        }
+      })
     },
     // 閫夋嫨浣嶇疆
     selLocationClick(item, prop, row) {
+      console.log(item,prop,row,"璧峰浣嶇疆")
+      if(prop==="areaName"){
+        // this.initialPosition=item.label
+        getLocationList({
+          jointName: item.label,
+          page: 1,
+          pageSize: 100
+        }).then((res) => {
+          if (res.code === 200) {
+            const list = res.data ? res.data : []
+            this.selSonLocationOptions=list
+            if (this.isReorder) {
+              this.locacionName = list[0]?.name
+              this.locacionId = list[0]?.id
+              this.$emit("selLocationClick", list[0], "locacionName")
+            }
+          }
+        })
+      }
       if (this.isReorder) {
         if (this.productId !== 0) {
           this.getAmountAndPrediction(row, "location", item)
@@ -588,6 +756,10 @@
         })
       }
       this.$emit("selLocationClick", item, prop)
+    },
+    // 閫夋嫨瀛愪綅缃�
+    selSonLocationClick(item){
+      this.$emit("selSonLocationClick",item)
     },
     // 鑾峰彇鍦ㄥ簱涓庨娴嬫暟閲�
     getAmountAndPrediction(item, val, ite) {
@@ -739,10 +911,20 @@
         font-size: 13px;
         cursor: pointer;
       }
+      
     }
   }
 }
 ::v-deep {
+  .el-autocomplete{
+      height:28px;
+    .el-input{
+      height:28px ;
+      .el-input__inner{
+        height: 28px;
+      }
+    }
+  }
   .el-form-item__label {
     display: none;
   }
@@ -780,4 +962,7 @@
   height: 35px;
   text-align: center;
 }
+::v-deep .el-table__body-wrapper{
+  height: unset !important;
+}
 </style>
diff --git a/src/views/warehouseManage/listingRules/index.vue b/src/views/warehouseManage/listingRules/index.vue
index de53dd3..6d60a38 100644
--- a/src/views/warehouseManage/listingRules/index.vue
+++ b/src/views/warehouseManage/listingRules/index.vue
@@ -17,14 +17,19 @@
     <div class="list-view">
       <div class="table">
         <CommonFormTableView
+          ref="tableRef"
           :islistingrules="true"
           :product-table-list="tableList"
           @inputContent="inputContent"
           @tableRowClick="tableRowClick"
           @selLocationClick="selLocationClick"
+          @selSonLocationClick="selSonLocationClick"
+          @querySearchData="querySearchData"
           @selProductClick="selProductClick"
-          @selProductTypeClick="selProductTypeClick"
         >
+        <!-- 
+          @selProductTypeClick="selProductTypeClick"
+         -->
           <template slot="tableButton">
             <el-table-column label="鎿嶄綔" width="90" align="center">
               <template slot-scope="scope">
@@ -63,28 +68,6 @@
       addTitle: "鏂板缓",
       showDiscard: false,
       tableList: {},
-      tableData: [
-        {
-          location: "HC/閿�鍞尯",
-          productName: "澶忓鐪熶笣鍚婂甫瑁�",
-          amount: "0.00",
-          unit: "浠�",
-          count: "0.00",
-          date: "2023-12-31",
-          user: "绠$悊鍛�",
-          isSet: true,
-          isEdit: true
-        },
-        {
-          location: "HM/閿�鍞尯",
-          productName: "澶忓鐪熶笣鍚婂甫瑁�",
-          productCategory: "",
-          subLocation: "A鍖�",
-          companyName: "璐濇�濈",
-          isSet: true,
-          isEdit: true
-        }
-      ],
       searchOptions: [],
       countId: 0,
       isNoProduct: true, // 娣诲姞鏄庣粏琛屾椂鏄惁鏈変骇鍝佹湭閫夋嫨
@@ -98,7 +81,9 @@
       RuleType: 0,
       queryProductId: null,
       categoryId: null,
-      searchTaskMap: []
+      searchTaskMap: [],
+      isCreate:false,
+      thatRow:{},
     }
   },
   created() {
@@ -129,9 +114,10 @@
           { label: "褰撲骇鍝佸埌杈�", prop: "areaName", location: true },
           { label: "浜у搧", prop: "productName", product: true },
           { label: "浜у搧绫诲埆", prop: "productCategory", productType: true },
-          { label: "瀛樺偍鍒板瓙浣嶇疆", prop: "subLocation", location: true }
+          { label: "瀛樺偍鍒板瓙浣嶇疆", prop: "subLocation", sonLocation: true }
           // { label: "鍏徃", prop: "companyName", company: true }
-        ]
+        ],
+        rowClickIndex:-1
       }
     },
     // 璇锋眰鏁版嵁
@@ -146,7 +132,7 @@
           const list = res.data.map((item) => {
             return {
               ...item,
-              areaName: { label: item.area.jointName, value: item.area.id },
+              areaName: { label: item.location.jointName, value: item.location.id },
               subLocation: { label: item.location.jointName, value: item.location.id },
               productName: item.product.name,
               productCategory: item.productCategory.name,
@@ -171,6 +157,7 @@
     },
     // 鏂板
     addProductClick() {
+      this.isCreate=true
       this.tableList.tableColumn[1].product = true
       this.tableList.tableColumn[2].productType = true
       console.log(this.tableData)
@@ -190,6 +177,7 @@
           subLocation: "",
           productName: "",
           companyName: "",
+          productCategory:"",
           isSet: true,
           isEdit: false,
           isOrder: true
@@ -201,7 +189,7 @@
       } else {
         if (this.areaId === 0) {
           this.$message.error("璇烽�夋嫨褰撳墠浜у搧鍒拌揪浣嶇疆")
-        } else if (this.productId === 0 && this.productCategoryId === "") {
+        } else if (this.productId === 0 && this.productCategoryId === 0) {
           this.$message.error("璇烽�夋嫨浜у搧鎴栦骇鍝佺被鍒�")
         } else if (this.subLocationId === 0) {
           this.$message.error("璇烽�夋嫨瀛樺偍鍒板瓙浣嶇疆")
@@ -224,14 +212,15 @@
             id: this.currentRowId,
             areaId: this.areaId,
             locationId: this.subLocationId,
-            productCategoryId: this.productCategoryId || "",
-            productId: this.productId || ""
+            productCategoryId: this.productCategoryId,
+            productId: this.productId 
           }).then((res) => {
             console.log(res)
             if (res.code === 200) {
               this.getData()
               let tipStr = this.currentRowId === 0 ? "娣诲姞鎴愬姛" : "淇敼鎴愬姛"
               this.$message.success(tipStr)
+              this.isCreate=false
             }
           })
         }
@@ -250,15 +239,10 @@
     },
     // 鍙栨秷
     discardBtnClick() {
+      this.getData()
+      this.isCreate=false
       this.tableList.tableColumn[1].product = true
       this.tableList.tableColumn[2].productType = true
-      if (this.isRowClick) {
-        this.tableData.map((item) => {
-          item.isEdit = true
-        })
-      } else {
-        this.tableData.splice(0, 1)
-      }
       this.addTitle = "鏂板缓"
       this.showDiscard = false
     },
@@ -295,40 +279,55 @@
     },
     // 琛岀偣鍑�
     tableRowClick(row, rowIndex) {
+      this.thatRow=row
+      this.tableList.rowClickIndex=rowIndex
       this.rowIndex = rowIndex
       this.isSel()
       if (!this.isNoProduct && this.currentRowId === 0) {
         this.$message.error("璇峰畬鎴愬綋鍓嶆柊寤烘垨鍙栨秷鏂板缓")
-      } else {
-        this.tableList.tableColumn[2].productType = true
-        this.currentRowId = row.id
+      }else {
+        this.currentRowId = row.id||0
         this.addTitle = "淇濆瓨"
         this.showDiscard = true
         this.isRowClick = true
         if (!this.isNoProduct) {
           this.tableData.splice(this.tableData.length - 1, 1)
+            this.tableData.map((item, index) => {
+            if (index === rowIndex) {
+              item.isEdit = false
+              item.isOrder = true
+            } else {
+              item.isEdit = true
+            }
+          })
+          this.areaId = row.areaId
+          this.subLocationId = row.locationId
+          this.productCategoryId = row.productCategoryId
+          this.productId = row.productId
         }
-        this.tableData.map((item, index) => {
-          if (index === rowIndex) {
-            item.isEdit = false
-            item.isOrder = true
-          } else {
-            item.isEdit = true
-          }
-        })
-        this.areaId = row.areaId
-        this.subLocationId = row.locationId
-        this.productCategoryId = row.productCategoryId
-        this.productId = row.productId
-        if (
-          this.tableList.tableData[rowIndex].productName === "" ||
-          this.tableList.tableData[rowIndex].productName === " "
-        ) {
-          this.tableList.tableColumn[1].product = false
-          this.tableList.tableColumn[2].productType = true
-        } else {
+      }
+    },
+    querySearchData(queryString,results,value){
+      if(this.isCreate){
+        if(queryString===''){
           this.tableList.tableColumn[1].product = true
-          this.tableList.tableColumn[2].productType = false
+          this.tableList.tableColumn[2].productType = true
+        }else{
+          if(value==="product"){          
+            this.tableList.tableColumn[2].productType = false
+            if(results.length!==0){
+              this.productId=results[0].id
+            }else{
+              this.productId=0
+            }
+          }else if(value==="productType"){
+            this.tableList.tableColumn[1].product = false
+            if(results.length!==0){
+              this.productCategoryId=results[0].id
+            }else{
+              this.productCategoryId=0
+            }
+          }
         }
       }
     },
@@ -355,33 +354,29 @@
       this.editConfig.visible = true
       this.editConfig.title = "鏂板缓"
     },
-    // 閫夋嫨浣嶇疆鏂规硶
+    // 閫夋嫨璧峰浣嶇疆鏂规硶
     selLocationClick(item, prop) {
-      console.log(item, prop)
       if (prop === "areaName") {
         this.areaId = item.value
       } else if (prop === "subLocation") {
         this.subLocationId = item.value
       }
     },
-    // 閫変腑浜у搧鏂规硶
-    selProductClick(item) {
-      console.log(item, "浜у搧")
-      this.RuleType = 1
-      this.tableList.tableColumn[2].productType = false
-      this.productId = item.value
-      this.productCategoryId = item.categoryId
+    // 閫夋嫨瀛愪綅缃柟娉�
+    selSonLocationClick(item) {
+      this.subLocationId = item.value
     },
-    // 閫変腑浜у搧绫诲瀷鏂规硶
-    selProductTypeClick(item) {
-      this.RuleType = 2
-      if (this.currentRowId === 0) {
-        this.productCategoryId = item.value
-      } else {
+    // 閫変腑浜у搧鏂规硶
+    selProductClick(value,item){
+      if(value==="product"){
+        this.RuleType = 1
+        this.tableList.tableColumn[2].productType = false
+        this.productId=item.id
+        this.productCategoryId=item.categoryId
+      }else if(value==="productType"){
+        this.productCategoryId=item.id
+        this.RuleType = 2
         this.tableList.tableColumn[1].product = false
-        this.tableList.tableData[this.rowIndex].productName = " "
-        this.productId = ""
-        this.productCategoryId = this.tableList.tableData[this.rowIndex].productCategoryId
       }
     },
     // 鍒犻櫎
@@ -403,13 +398,27 @@
   },
   watch: {
     rowIndex(newVal) {
-      if (this.tableList.tableData[newVal].productName === " ") {
-        this.tableList.tableColumn[1].product = false
-        this.tableList.tableColumn[2].productType = true
-      } else {
-        this.tableList.tableColumn[1].product = true
-        this.tableList.tableColumn[2].productType = false
+      if(this.isCreate){
+        if(newVal===0){
+          this.tableList.tableColumn[1].product = true
+          this.tableList.tableColumn[2].productType = true
+        }else{
+          this.$message.error("璇峰畬鎴愬綋鍓嶆柊寤烘垨鍙栨秷鏂板缓")
+          this.tableList.tableColumn[1].product = false
+          this.tableList.tableColumn[2].productType = false
+        }
+      }else{
+        if (
+          this.tableList.tableData[newVal].productName === ""
+        ) {
+          this.tableList.tableColumn[1].product = false
+          this.tableList.tableColumn[2].productType = true
+        } else {
+          this.tableList.tableColumn[1].product = true
+          this.tableList.tableColumn[2].productType = false
+        }
       }
+      this.$refs.tableRef.getProductCategoryList()
     }
   }
 }

--
Gitblit v1.8.0