Browse Source

Merge branch 'develop_cuxiao' of http://git.chelingzhu.com/jianguan-web/jg-ocs-html into develop_cuxiao

lilei 1 year ago
parent
commit
48dccb2a1c
1 changed files with 125 additions and 90 deletions
  1. 125 90
      src/views/common/chooseBrandModal.vue

+ 125 - 90
src/views/common/chooseBrandModal.vue

@@ -12,20 +12,18 @@
       <div>
         <a-checkbox :checked="checkAll" :disabled="disabledList.length>0" @change="onCheckAllChange">全选</a-checkbox>
         <span v-if="pageType==='1'">
-          <a-checkbox :checked="checkOwn" :disabled="disabledList.length>0" @change="onCheckOwnChange">自主品牌</a-checkbox>
-          <a-checkbox :checked="checkAgent" :disabled="disabledList.length>0" @change="onCheckAgentChange">代理品牌</a-checkbox>
+          <a-checkbox :checked="checkOwn" @change="onCheckOwnChange">自主品牌</a-checkbox>
+          <a-checkbox :checked="checkAgent" @change="onCheckAgentChange">代理品牌</a-checkbox>
         </span>
       </div>
       <a-divider />
-      <a-checkbox-group v-model="checkedList" @change="onChange" style="width: 100%;">
-        <a-row style="height: 400px;overflow-y: scroll;">
-          <a-col :span="6" v-for="item in brandList" :key="item.brandSn">
-            <a-checkbox :value="item.brandSn" :disabled="item.isDisabled">
-              {{ item.brandName }}
-            </a-checkbox>
-          </a-col>
-        </a-row>
-      </a-checkbox-group>
+      <a-row style="height: 400px;overflow-y: scroll;">
+        <a-col :span="6" v-for="(item,index) in brandList" :key="item.brandSn">
+          <a-checkbox :checked="item.checked" :disabled="item.isDisabled" @change="e=>onChange(e,index)">
+            {{ item.brandName }}
+          </a-checkbox>
+        </a-col>
+      </a-row>
       <!-- 按钮 -->
       <div class="btn-con">
         <a-button
@@ -84,128 +82,161 @@ export default {
     // 保存
     handleSave () {
       const _this = this
-      if (this.checkedList.length < 1) {
-        this.$message.warning('请在列表勾选后再进行操作!')
-        return
-      }
       this.checkedRowList = []
       _this.brandList.map(item => {
-        if (_this.checkedList.indexOf(item.brandSn) != -1) {
+        if (item.checked) {
           _this.checkedRowList.push(item)
         }
       })
+      if (this.checkedRowList.length < 1) {
+        this.$message.warning('请在列表勾选后再进行操作!')
+        return
+      }
       this.$emit('ok', this.checkedRowList)
       this.isShow = false
     },
     // change
-    onChange (checkedList) {
-      const _this = this
-      this.checkAll = checkedList.length === this.brandList.length
-      this.brandList.map(item => {
-        if (_this.checkedList.indexOf(item.brandSn) != -1) {
-          _this.checkedRowList.push(item)
+    onChange (e, pos) {
+      this.brandList[pos].checked = e.target.checked
+      // 全选
+      const isCheckAllFlag = this.brandList.every(item => item.checked)
+      if (isCheckAllFlag) {
+        this.checkAll = true
+      } else {
+        this.checkAll = false
+      }
+      // 自主
+      const isCheckOwnFlag = this.brandList.every(item => {
+        if (item.brandType == 1) {
+          return item.checked
         }
       })
-      if (this.pageType == '1') {
-        const newCheckList = []
-        this.brandList.forEach(con => {
-          if (checkedList.includes(con.brandSn)) {
-            newCheckList.push(con)
-          }
-        })
-        const obj = _this.handleArr(newCheckList)
-        this.checkOwn = obj.ownList.length === this.brandOwnList.length
-        this.checkAgent = obj.agentList.length === this.brandAgentList.length
+      if (isCheckOwnFlag) {
+        this.checkOwn = true
+      } else {
+        this.checkOwn = false
+      }
+      // 代理
+      const isCheckAgentFlag = this.brandList.every(item => {
+        if (item.brandType == 2) {
+          return item.checked
+        }
+      })
+      if (isCheckAgentFlag) {
+        this.checkAgent = true
+      } else {
+        this.checkAgent = false
       }
+      this.$forceUpdate()
     },
     // 全选
     onCheckAllChange (e) {
       const _this = this
       this.checkAll = e.target.checked
-      this.checkOwn = e.target.checked
-      this.checkAgent = e.target.checked
+      this.checkOwn = false
+      this.checkAgent = false
       if (e.target.checked) {
-        this.checkedList = []
-        this.checkedRowList = []
-        this.brandList.map(item => {
-          _this.checkedList.push(item.brandSn)
-          _this.checkedRowList.push(item)
+        this.brandList.forEach(item => {
+          item.checked = true
         })
       } else {
-        this.checkedList = []
-        this.checkedRowList = []
+        this.brandList.map(con => {
+          con.checked = false
+        })
       }
     },
     onCheckOwnChange (e) {
       const _this = this
+      this.checkAll = false
       this.checkOwn = e.target.checked
+      this.checkAgent = false
+      const disArr = _this.chooseData.map(item => item.goodsSn)
       if (e.target.checked) {
-        this.checkedList = []
-        this.checkedRowList = []
-        this.brandList.map(item => {
+        this.brandList.forEach(item => {
+          item.checked = false
           if (item.brandType == 1) {
-            _this.checkedList.push(item.brandSn)
-            _this.checkedRowList.push(item)
+            item.checked = true
+          }
+          if (this.disabledList && this.disabledList.length > 0) {
+            if (this.disabledList.includes(item.brandSn)) {
+              item.checked = false
+            }
+          }
+          if (this.chooseData && this.chooseData.length > 0) {
+            if (disArr.includes(item.brandSn)) {
+              item.checked = true
+            }
           }
         })
       } else {
-        const noArr = this.getDifferData(this.checkedList, this.brandOwnList)
-        _this.checkedList = noArr
+        this.brandList.forEach(con => {
+          if (con.brandType == 1) {
+            con.checked = false
+          }
+          if (this.disabledList && this.disabledList.length > 0) {
+            if (this.disabledList.includes(con.brandSn)) {
+              con.checked = false
+            }
+          }
+          if (this.chooseData && this.chooseData.length > 0) {
+            if (disArr.includes(con.brandSn)) {
+              con.checked = true
+            }
+          }
+        })
       }
-      _this.onChange(_this.checkedList)
-    },
-    getDifferData (list1, list2) {
-      list2.forEach(item => {
-        const pos = list1.indexOf(item.brandSn)
-        if (pos != -1) {
-          list1.splice(pos, 1)
-        }
-      })
-      return list1
     },
     onCheckAgentChange (e) {
       const _this = this
+      this.checkAll = false
+      this.checkOwn = false
       this.checkAgent = e.target.checked
+      const disArr = _this.chooseData.map(item => item.goodsSn)
       if (e.target.checked) {
-        this.checkedList = []
-        this.checkedRowList = []
-        this.brandList.map(item => {
+        this.brandList.forEach(item => {
+          item.checked = false
           if (item.brandType == 2) {
-            _this.checkedList.push(item.brandSn)
-            _this.checkedRowList.push(item)
+            item.checked = true
+          }
+          if (this.disabledList && this.disabledList.length > 0) {
+            if (this.disabledList.includes(item.brandSn)) {
+              item.checked = false
+            }
+          }
+          if (this.chooseData && this.chooseData.length > 0) {
+            if (disArr.includes(item.brandSn)) {
+              item.checked = true
+            }
           }
         })
       } else {
-        const noArr = this.getDifferData(this.checkedList, this.brandAgentList)
-        _this.checkedList = noArr
+        this.brandList.forEach(con => {
+          if (con.brandType == 2) {
+            con.checked = false
+          }
+          if (this.disabledList && this.disabledList.length > 0) {
+            if (this.disabledList.includes(con.brandSn)) {
+              con.checked = false
+            }
+          }
+          if (this.chooseData && this.chooseData.length > 0) {
+            if (disArr.includes(con.brandSn)) {
+              con.checked = true
+            }
+          }
+        })
       }
-      _this.onChange(_this.checkedList)
     },
     // 获取品牌数据
     getBrandList () {
       productBrandQuery({}).then(res => {
         if (res.status == 200) {
-          const obj = this.handleArr(res.data)
           this.brandList = res.data
-          this.brandOwnList = obj.ownList
-          this.brandAgentList = obj.agentList
         } else {
           this.brandList = []
         }
       })
     },
-    handleArr (list) {
-      const ownList = []
-      const agentList = []
-      list.forEach(item => {
-        if (item.brandType == 1) {
-          ownList.push(item)
-        } else {
-          agentList.push(item)
-        }
-      })
-      return { ownList, agentList }
-    },
     // 禁用
     handleDisabled (list) {
       this.disabledList = list
@@ -216,11 +247,6 @@ export default {
           item.isDisabled = false
         }
       })
-      // this.$forceUpdate()
-    },
-    // 获取品牌长度
-    getAllBrandLength () {
-      return this.brandList.length
     }
   },
   watch: {
@@ -235,12 +261,21 @@ export default {
         this.checkAll = false
         this.checkOwn = false
         this.checkAgent = false
+        this.brandList.map(item => {
+          item.checked = false
+        })
       } else {
         const _this = this
-        this.checkedRowList = this.chooseData
-        this.checkedList = []
-        this.chooseData.map(item => {
-          _this.checkedList.push(item.goodsSn)
+        const checkedList = []
+        _this.chooseData.map(item => {
+          checkedList.push(item.goodsSn)
+        })
+        this.brandList.map(item => {
+          if (checkedList.includes(item.brandSn)) {
+            item.checked = true
+          } else {
+            item.checked = false
+          }
         })
         if (this.brandList.length == 0) {
           this.getBrandList()