chooseBrandModal.vue 8.1 KB

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