mergeCustomerModal.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <template>
  2. <div v-if="isShow">
  3. <a-modal
  4. centered
  5. class="merge-customer-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. v-drag
  9. title="合并"
  10. v-model="isShow"
  11. @cancle="isShow=false"
  12. width="35%">
  13. <a-form-model
  14. id="bulkPartsTypeEdit-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-form-model-item label="主体客户:">
  22. <div>{{ mainCustomerName }}</div>
  23. </a-form-model-item>
  24. <a-form-model-item label="被合并的客户名称:" prop="customerSnSource">
  25. <custList ref="custList" dealerDisabled @change="custChange" placeholder="输入客户名称搜索"></custList>
  26. </a-form-model-item>
  27. </a-form-model>
  28. <div class="btn-cont">
  29. <a-button id="modal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  30. <a-button type="primary" id="modal-save" @click="handleSave">确定</a-button>
  31. </div>
  32. </a-modal>
  33. </div>
  34. </template>
  35. <script>
  36. import { commonMixin } from '@/utils/mixin'
  37. import { custMerge } from '@/api/customer'
  38. import custList from '@/views/common/custList.vue'
  39. export default {
  40. name: 'SalesRecordModal',
  41. components: { custList },
  42. mixins: [commonMixin],
  43. props: {
  44. openModal: { // 弹框显示状态
  45. type: Boolean,
  46. default: false
  47. },
  48. params: {
  49. type: Object,
  50. default () {
  51. return {}
  52. }
  53. }
  54. },
  55. data () {
  56. return {
  57. isShow: this.openModal, // 是否打开弹框
  58. formItemLayout: {
  59. labelCol: { span: 6 },
  60. wrapperCol: { span: 16 }
  61. },
  62. form: {
  63. customerSnTarget: '', // 主体客户sn
  64. customerSnSource: '' // 被合并客户sn
  65. },
  66. mainCustomerName: '', // 主体客户名称
  67. rules: {
  68. customerSnSource: [
  69. { required: true, message: '输入客户名称搜索', trigger: 'blur' }
  70. ]
  71. }
  72. }
  73. },
  74. methods: {
  75. // 客户 change
  76. custChange (obj, row) {
  77. if (row) {
  78. this.form.customerSnSource = row && row.customerSn || undefined
  79. } else {
  80. this.form.customerSnSource = undefined
  81. }
  82. },
  83. handleSave () {
  84. const _this = this
  85. this.$refs.ruleForm.validate(valid => {
  86. if (valid) {
  87. _this.confirmedSubmit()
  88. } else {
  89. console.log('error submit!!')
  90. return false
  91. }
  92. })
  93. },
  94. confirmedSubmit () {
  95. const _this = this
  96. this.$confirm({
  97. title: '提示',
  98. content: '确定要合并吗?合并后数据不可恢复。',
  99. okText: '确定',
  100. okType: 'danger',
  101. cancelText: '取消',
  102. onOk () {
  103. custMerge(_this.form).then(res => {
  104. if (res.status == 200) {
  105. _this.$message.info(res.message)
  106. _this.$emit('close', true)
  107. }
  108. })
  109. },
  110. onCancel () {
  111. console.log('Cancel')
  112. }
  113. })
  114. }
  115. },
  116. watch: {
  117. // 父页面传过来的弹框状态
  118. openModal (newValue, oldValue) {
  119. this.isShow = newValue
  120. },
  121. // 重定义的弹框状态
  122. isShow (newValue, oldValue) {
  123. if (!newValue) {
  124. this.$emit('close')
  125. this.form.customerSnSource = undefined
  126. this.form.customerSnTarget = undefined
  127. this.mainCustomerName = undefined
  128. this.$refs.custList.setData(undefined)
  129. } else {
  130. this.mainCustomerName = this.params.customerName
  131. this.form.customerSnTarget = this.params.customerSn
  132. }
  133. }
  134. }
  135. }
  136. </script>
  137. <style lang="less">
  138. .merge-customer-modal{
  139. .ant-modal-body {
  140. padding: 20px;
  141. }
  142. .btn-cont {
  143. text-align: center;
  144. margin: 35px 0 10px;
  145. }
  146. }
  147. </style>