associateModal.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <a-modal
  3. centered
  4. class="relationshipBinding-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="编辑"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="800">
  11. <!-- 表单 -->
  12. <div>
  13. <a-spin :spinning="spinning" tip="Loading...">
  14. <a-form-model
  15. id="relationshipBinding-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol"
  21. >
  22. <a-form-model-item label="经销商名称" v-if="nowData">
  23. {{ nowData.subDealer.dealerName }}
  24. </a-form-model-item>
  25. <a-form-model-item label="差价归属">
  26. <queryChild ref="queryChid" :dealerLevelList="dealerLevelList" @change="handleDisassociate"></queryChild>
  27. </a-form-model-item>
  28. </a-form-model>
  29. <div class="btn-cont">
  30. <a-button id="product-category-edit-modal-back" @click="isShow = false" >取消</a-button>
  31. <a-button type="primary" style="margin-left: 15px;" id="product-category-edit-modal-save" @click="handleSave">确定</a-button>
  32. </div>
  33. </a-spin>
  34. </div>
  35. </a-modal>
  36. </template>
  37. <script>
  38. import { commonMixin } from '@/utils/mixin'
  39. import { updateRebate } from '@/api/dealerRelation'
  40. import queryChild from './queryChild.vue'
  41. export default {
  42. name: 'AssociateModal',
  43. mixins: [commonMixin],
  44. components: { queryChild },
  45. props: {
  46. openModal: { // 弹框显示状态
  47. type: Boolean,
  48. default: false
  49. },
  50. nowData: {
  51. type: Object,
  52. default: null
  53. }
  54. },
  55. data () {
  56. return {
  57. isShow: this.openModal, // 是否打开弹框
  58. spinning: false,
  59. form: {},
  60. rules: {},
  61. formItemLayout: {
  62. labelCol: { span: 6 },
  63. wrapperCol: { span: 16 }
  64. },
  65. dealerLevelList: ['CITY', 'PROVINCE'],
  66. rebateDealerSn: ''
  67. }
  68. },
  69. methods: {
  70. handleDisassociate (val) {
  71. console.log('选中', val)
  72. this.rebateDealerSn = val ? val.key : ''
  73. },
  74. // 保存
  75. handleSave () {
  76. const _this = this
  77. _this.$refs.ruleForm.validate(valid => {
  78. if (valid) {
  79. const formData = {
  80. rebateDealerSn: _this.rebateDealerSn,
  81. dealerSn: _this.nowData && _this.nowData.subDealer.dealerSn ? _this.nowData.subDealer.dealerSn : undefined
  82. }
  83. _this.spinning = true
  84. updateRebate(formData).then(res => {
  85. if (res.status == 200) {
  86. _this.$message.success(res.message)
  87. _this.$emit('ok', formData.dealerSn)
  88. _this.isShow = false
  89. _this.spinning = false
  90. } else {
  91. _this.spinning = false
  92. }
  93. })
  94. } else {
  95. return false
  96. }
  97. })
  98. },
  99. filterOption (input, option) {
  100. return (
  101. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  102. )
  103. }
  104. },
  105. watch: {
  106. // 父页面传过来的弹框状态
  107. openModal (newValue, oldValue) {
  108. this.isShow = newValue
  109. },
  110. // 重定义的弹框状态
  111. isShow (newValue, oldValue) {
  112. if (!newValue) {
  113. this.$emit('close')
  114. this.$refs.ruleForm.resetFields()
  115. this.$refs.queryChid.resetForm()
  116. this.rebateDealerSn = ''
  117. }else{
  118. this.$nextTick(()=>{
  119. this.rebateDealerSn = this.nowData && this.nowData.rebateDealer && this.nowData.rebateDealer.dealerSn ? this.nowData.rebateDealer.dealerSn : ''
  120. const dealerName = this.nowData && this.nowData.rebateDealer && this.nowData.rebateDealer.dealerName ? this.nowData.rebateDealer.dealerName : ''
  121. this.$refs.queryChid.setVal(this.rebateDealerSn, dealerName)
  122. })
  123. }
  124. }
  125. }
  126. }
  127. </script>
  128. <style lang="less">
  129. .relationshipBinding-modal{
  130. .ant-modal-body {
  131. padding: 40px 40px 24px;
  132. }
  133. .search-opt{
  134. padding: 0;
  135. margin: 0;
  136. list-style: none;
  137. li{
  138. padding: 5px 15px;
  139. }
  140. }
  141. .btn-cont {
  142. text-align: center;
  143. margin: 35px 0 10px;
  144. }
  145. }
  146. </style>