chooseBrandModal.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseBrand-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品品牌"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <div class="chooseBrand-con">
  12. <div>
  13. <a-checkbox :checked="checkAll" :disabled="disabledList.length>0" @change="onCheckAllChange">全选</a-checkbox>
  14. <span v-if="pageType==='1'">
  15. <a-checkbox :checked="checkOwn" :disabled="disabledList.length>0" @change="onCheckOwnChange">自主品牌</a-checkbox>
  16. <a-checkbox :checked="checkAgent" :disabled="disabledList.length>0" @change="onCheckAgentChange">代理品牌</a-checkbox>
  17. </span>
  18. </div>
  19. <a-divider />
  20. <a-checkbox-group v-model="checkedList" @change="onChange" style="width: 100%;">
  21. <a-row style="height: 400px;overflow-y: scroll;">
  22. <a-col :span="6" v-for="item in brandList" :key="item.brandSn">
  23. <a-checkbox :value="item.brandSn" :disabled="item.isDisabled">
  24. {{ item.brandName }}
  25. </a-checkbox>
  26. </a-col>
  27. </a-row>
  28. </a-checkbox-group>
  29. <!-- 按钮 -->
  30. <div class="btn-con">
  31. <a-button
  32. type="primary"
  33. id="chooseBrand-submit"
  34. size="large"
  35. class="button-primary"
  36. @click="handleSave"
  37. style="padding: 0 60px;">保存</a-button>
  38. <a-button
  39. id="chooseBrand-cancel"
  40. size="large"
  41. class="button-cancel"
  42. @click="isShow=false"
  43. style="padding: 0 60px;margin-left: 15px;">取消</a-button>
  44. </div>
  45. </div>
  46. </a-modal>
  47. </template>
  48. <script>
  49. import { productBrandQuery } from '@/api/productBrand'
  50. export default {
  51. name: 'ChooseBrandModal',
  52. props: {
  53. openModal: { // 弹框显示状态
  54. type: Boolean,
  55. default: false
  56. },
  57. chooseData: {
  58. type: Array,
  59. default: () => {
  60. return []
  61. }
  62. },
  63. pageType: { // 弹框显示状态
  64. type: [String, Number],
  65. default: ''
  66. }
  67. },
  68. data () {
  69. return {
  70. isShow: this.openModal, // 是否打开弹框
  71. checkAll: false, // 全选
  72. checkOwn: false, // 自主品牌
  73. checkAgent: false, // 代理品牌
  74. checkedList: [], // 选中项
  75. checkedRowList: [], // 选中项
  76. brandList: [], // 品牌数据
  77. brandOwnList: [],
  78. brandAgentList: [],
  79. disabledList: []
  80. }
  81. },
  82. methods: {
  83. // 保存
  84. handleSave () {
  85. const _this = this
  86. if (this.checkedList.length < 1) {
  87. this.$message.warning('请在列表勾选后再进行操作!')
  88. return
  89. }
  90. this.checkedRowList = []
  91. _this.brandList.map(item => {
  92. if (_this.checkedList.indexOf(item.brandSn) != -1) {
  93. _this.checkedRowList.push(item)
  94. }
  95. })
  96. this.$emit('ok', this.checkedRowList)
  97. this.isShow = false
  98. },
  99. // change
  100. onChange (checkedList) {
  101. const _this = this
  102. this.checkAll = checkedList.length === this.brandList.length
  103. this.brandList.map(item => {
  104. if (_this.checkedList.indexOf(item.brandSn) != -1) {
  105. _this.checkedRowList.push(item)
  106. }
  107. })
  108. if (this.pageType == '1') {
  109. const newCheckList = []
  110. this.brandList.forEach(con => {
  111. if (checkedList.includes(con.brandSn)) {
  112. newCheckList.push(con)
  113. }
  114. })
  115. const obj = _this.handleArr(newCheckList)
  116. this.checkOwn = obj.ownList.length === this.brandOwnList.length
  117. this.checkAgent = obj.agentList.length === this.brandAgentList.length
  118. }
  119. },
  120. // 全选
  121. onCheckAllChange (e) {
  122. const _this = this
  123. this.checkAll = e.target.checked
  124. this.checkOwn = e.target.checked
  125. this.checkAgent = e.target.checked
  126. if (e.target.checked) {
  127. this.checkedList = []
  128. this.checkedRowList = []
  129. this.brandList.map(item => {
  130. _this.checkedList.push(item.brandSn)
  131. _this.checkedRowList.push(item)
  132. })
  133. } else {
  134. this.checkedList = []
  135. this.checkedRowList = []
  136. }
  137. },
  138. onCheckOwnChange (e) {
  139. const _this = this
  140. this.checkOwn = e.target.checked
  141. if (e.target.checked) {
  142. this.checkedList = []
  143. this.checkedRowList = []
  144. this.brandList.map(item => {
  145. if (item.brandType == 1) {
  146. _this.checkedList.push(item.brandSn)
  147. _this.checkedRowList.push(item)
  148. }
  149. })
  150. } else {
  151. const noArr = this.getDifferData(this.checkedList, this.brandOwnList)
  152. _this.checkedList = noArr
  153. }
  154. _this.onChange(_this.checkedList)
  155. },
  156. getDifferData (list1, list2) {
  157. list2.forEach(item => {
  158. const pos = list1.indexOf(item.brandSn)
  159. if (pos != -1) {
  160. list1.splice(pos, 1)
  161. }
  162. })
  163. return list1
  164. },
  165. onCheckAgentChange (e) {
  166. const _this = this
  167. this.checkAgent = e.target.checked
  168. if (e.target.checked) {
  169. this.checkedList = []
  170. this.checkedRowList = []
  171. this.brandList.map(item => {
  172. if (item.brandType == 2) {
  173. _this.checkedList.push(item.brandSn)
  174. _this.checkedRowList.push(item)
  175. }
  176. })
  177. } else {
  178. const noArr = this.getDifferData(this.checkedList, this.brandAgentList)
  179. _this.checkedList = noArr
  180. }
  181. _this.onChange(_this.checkedList)
  182. },
  183. // 获取品牌数据
  184. getBrandList () {
  185. productBrandQuery({}).then(res => {
  186. if (res.status == 200) {
  187. const obj = this.handleArr(res.data)
  188. this.brandList = res.data
  189. this.brandOwnList = obj.ownList
  190. this.brandAgentList = obj.agentList
  191. } else {
  192. this.brandList = []
  193. }
  194. })
  195. },
  196. handleArr (list) {
  197. const ownList = []
  198. const agentList = []
  199. list.forEach(item => {
  200. if (item.brandType == 1) {
  201. ownList.push(item)
  202. } else {
  203. agentList.push(item)
  204. }
  205. })
  206. return { ownList, agentList }
  207. },
  208. // 禁用
  209. handleDisabled (list) {
  210. this.disabledList = list
  211. this.brandList.map(item => {
  212. if (list.includes(item.brandSn)) {
  213. item.isDisabled = true
  214. } else {
  215. item.isDisabled = false
  216. }
  217. })
  218. }
  219. },
  220. watch: {
  221. // 父页面传过来的弹框状态
  222. openModal (newValue, oldValue) {
  223. this.isShow = newValue
  224. },
  225. // 重定义的弹框状态
  226. isShow (newValue, oldValue) {
  227. if (!newValue) {
  228. this.$emit('close')
  229. this.checkAll = false
  230. this.checkOwn = false
  231. this.checkAgent = false
  232. } else {
  233. const _this = this
  234. this.checkedRowList = this.chooseData
  235. this.checkedList = []
  236. this.chooseData.map(item => {
  237. _this.checkedList.push(item.goodsSn)
  238. })
  239. if (this.brandList.length == 0) {
  240. this.getBrandList()
  241. }
  242. }
  243. }
  244. }
  245. }
  246. </script>
  247. <style lang="less" scoped>
  248. .chooseBrand-modal{
  249. .chooseBrand-con{
  250. .btn-con{
  251. text-align: center;
  252. margin: 30px 0 20px;
  253. .button-cancel{
  254. font-size: 12px;
  255. }
  256. }
  257. }
  258. }
  259. </style>