associateModal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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.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" id="product-category-edit-modal-save" style="margin-left: 15px;" @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 { bindRelation } from '@/api/dealerRelation'
  40. import queryChild from './queryChild.vue'
  41. export default {
  42. name: 'RelationshipBindingModal',
  43. mixins: [commonMixin],
  44. components: { queryChild },
  45. props: {
  46. openModal: { // 弹框显示状态
  47. type: Boolean,
  48. default: false
  49. },
  50. tabInd: {
  51. type: [Number, String],
  52. default: ''
  53. },
  54. nowData: {
  55. type: Object,
  56. default: null
  57. }
  58. },
  59. data () {
  60. return {
  61. isShow: this.openModal, // 是否打开弹框
  62. spinning: false,
  63. form: {},
  64. rules: {},
  65. formItemLayout: {
  66. labelCol: { span: 6 },
  67. wrapperCol: { span: 16 }
  68. },
  69. dealerLevelList: [],
  70. subDealerSn: '',
  71. isRelation: '' // 是否已被关联过
  72. }
  73. },
  74. methods: {
  75. handleDisassociate (val, parentDealerSn) {
  76. this.subDealerSn = val.key
  77. this.isRelation = parentDealerSn
  78. },
  79. // 保存
  80. handleSave () {
  81. const _this = this
  82. _this.$refs.ruleForm.validate(valid => {
  83. if (valid) {
  84. if (_this.subDealerSn == '') {
  85. this.$message.info('请选择下级')
  86. return
  87. }
  88. const formData = {
  89. subDealerSn: _this.subDealerSn,
  90. parentDealerSn: _this.nowData && _this.nowData.dealerSn ? _this.nowData.dealerSn : undefined
  91. }
  92. if (_this.isRelation) {
  93. _this.$confirm({
  94. title: '提示',
  95. content: '确认要解除原有绑定关系,建立新的绑定关系吗?',
  96. centered: true,
  97. closable: true,
  98. onOk () {
  99. _this.handleBind(formData)
  100. }
  101. })
  102. } else {
  103. _this.handleBind(formData)
  104. }
  105. } else {
  106. return false
  107. }
  108. })
  109. },
  110. handleBind (formData) {
  111. const _this = this
  112. _this.spinning = true
  113. bindRelation(formData).then(res => {
  114. if (res.status == 200) {
  115. _this.$message.success(res.message)
  116. _this.$emit('ok', formData.parentDealerSn)
  117. _this.isShow = false
  118. _this.spinning = false
  119. } else {
  120. _this.spinning = false
  121. }
  122. })
  123. },
  124. filterOption (input, option) {
  125. return (
  126. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  127. )
  128. }
  129. },
  130. watch: {
  131. // 父页面传过来的弹框状态
  132. openModal (newValue, oldValue) {
  133. this.isShow = newValue
  134. },
  135. // 重定义的弹框状态
  136. isShow (newValue, oldValue) {
  137. if (!newValue) {
  138. this.$emit('close')
  139. this.$refs.ruleForm.resetFields()
  140. this.$refs.queryChid.resetForm()
  141. this.subDealerSn = []
  142. } else {
  143. this.dealerLevelList = [this.tabInd == '1' ? 'CITY' : 'SPECIAL']
  144. }
  145. },
  146. tabInd (newValue, oldValue) {
  147. if (this.isShow && newValue) {
  148. this.dealerLevelList = [newValue == '1' ? 'CITY' : 'SPECIAL']
  149. }
  150. }
  151. }
  152. }
  153. </script>
  154. <style lang="less">
  155. .relationshipBinding-modal{
  156. .ant-modal-body {
  157. padding: 40px 40px 24px;
  158. }
  159. .search-opt{
  160. padding: 0;
  161. margin: 0;
  162. list-style: none;
  163. li{
  164. padding: 5px 15px;
  165. }
  166. }
  167. .btn-cont {
  168. text-align: center;
  169. margin: 35px 0 10px;
  170. }
  171. }
  172. </style>