mergeCustomerModal.vue 3.9 KB

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