StoreBindModal.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <template>
  2. <div>
  3. <a-modal
  4. class="modalBox"
  5. title="新增绑定"
  6. v-model="isshow"
  7. @cancle="cancel"
  8. :footer="null"
  9. :width="600"
  10. :centered="true">
  11. <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="{span:5}" :wrapperCol="{span:15}">
  12. <a-form-model-item required label="选择供应商" prop="supplierName">
  13. <a-select
  14. id="storeBindModal-supplierName"
  15. show-search
  16. allowClear
  17. placeholder="请输入供应商名称精确搜索"
  18. :show-arrow="false"
  19. :filter-option="false"
  20. option-filter-prop="children"
  21. @search="handleSupplierSearch"
  22. v-model="form.supplierName">
  23. <a-select-option v-for="item in supplierList" :key="item.supplierSn" :value="item.supplierSn">
  24. {{ item.name }}
  25. </a-select-option>
  26. </a-select>
  27. </a-form-model-item>
  28. <a-form-model-item label="选择关联客户" prop="storeName">
  29. <a-select
  30. id="storeBindModal-storeName"
  31. show-search
  32. allowClear
  33. placeholder="请输入客户名称精确搜索"
  34. :show-arrow="false"
  35. :filter-option="false"
  36. optionLabelProp="value"
  37. @search="storeSearchRequest"
  38. @change="storeChange"
  39. v-model="form.storeName">
  40. <a-select-option :disabled="item.bindFlag=='BIND'" v-for="item in storeList" :key="item.name" :value="item.name">
  41. {{ item.name }}
  42. <span style="float: right;">{{ item.bindFlag=='BIND'?'已绑定':'未绑定' }}</span>
  43. </a-select-option>
  44. </a-select>
  45. </a-form-model-item>
  46. <a-form-model-item label="门店地址" prop="storeAddress">
  47. <span>{{ form.storeAddress }}</span>
  48. </a-form-model-item>
  49. <a-form-model-item class="submit-cont" :wrapper-col="{ span: 14, offset: 9 }">
  50. <a-button type="primary" id="storeBindModal-submit" @click="submitForm('ruleForm')">
  51. 提交
  52. </a-button>
  53. <a-button id="storeBindModal-cancle" style="margin-left: 10px" @click="cancel">
  54. 取消
  55. </a-button>
  56. </a-form-model-item>
  57. </a-form-model>
  58. </a-modal>
  59. </div>
  60. </template>
  61. <script>
  62. import {
  63. supplierStoreBind,
  64. storeQueryAll
  65. } from '@/api/storeManagement.js'
  66. import { supplierQueryAll } from '@/api/supplierManagement.js'
  67. export default {
  68. props: {
  69. openStoreBindModal: {
  70. type: Boolean,
  71. default: false
  72. }
  73. },
  74. data () {
  75. return {
  76. isshow: this.openStoreBindModal,
  77. supplierList: [], // 供应商列表
  78. storeList: [], // 门店列表
  79. form: {
  80. supplierName: undefined, // 供应商名称
  81. storeName: undefined, // 门店名称
  82. storeAddress: '' // 门店地址
  83. },
  84. rules: {
  85. supplierName: [{
  86. required: true,
  87. message: '请选择供应商',
  88. trigger: ['change', 'blur']
  89. }],
  90. storeName: [{
  91. required: true,
  92. message: '请选择关联客户',
  93. trigger: ['change', 'blur']
  94. }]
  95. }
  96. }
  97. },
  98. computed: {},
  99. methods: {
  100. // 门店搜索查询
  101. storeSearchRequest (val) {
  102. if (val) {
  103. storeQueryAll({
  104. name: val
  105. }).then(res => {
  106. this.storeList = res.data || []
  107. })
  108. } else {
  109. this.storeList = []
  110. }
  111. },
  112. // 供应商搜索查询
  113. handleSupplierSearch (val) {
  114. if (val) {
  115. supplierQueryAll({
  116. name: val
  117. }).then(res => {
  118. this.supplierList = res.data || []
  119. })
  120. } else {
  121. this.supplierList = []
  122. }
  123. },
  124. // 关联客户选择修改
  125. storeChange (val) {
  126. console.log(val, 'vvvvvvv')
  127. if (val) {
  128. const has = this.storeList.find(item => item.name == val)
  129. this.form.storeAddress = has ? has.addrProvinceName + has.addrCityName + has.addrDistrictName + has.addrDetail
  130. : ''
  131. }
  132. },
  133. // 提交
  134. submitForm (formName) {
  135. this.$refs[formName].validate(valid => {
  136. if (valid) {
  137. const params = {
  138. supplierSn: this.form.supplierName,
  139. storeSn: this.storeList.find(item => item.name == this.form.storeName).storeSn
  140. }
  141. supplierStoreBind(params).then(res => {
  142. if (res.status == 200) {
  143. this.$message.success(res.message)
  144. this.$emit('refresh')
  145. setTimeout(() => {
  146. this.cancel()
  147. }, 300)
  148. }
  149. })
  150. } else {
  151. console.log('error submit!!')
  152. return false
  153. }
  154. })
  155. },
  156. // 关闭弹窗
  157. cancel () {
  158. this.$refs['ruleForm'].resetFields()
  159. this.$emit('close')
  160. }
  161. },
  162. watch: {
  163. openStoreBindModal (newValue, oldValue) {
  164. this.isshow = newValue
  165. },
  166. isshow (val) {
  167. if (!val) {
  168. this.$emit('close')
  169. } else {
  170. setTimeout(() => {
  171. this.$refs['ruleForm'].resetFields()
  172. }, 100)
  173. }
  174. },
  175. settleId (newValue, oldValue) {
  176. if (newValue && this.isshow) {
  177. this.$refs.table.refresh(newValue)
  178. }
  179. }
  180. }
  181. }
  182. </script>
  183. <style scoped="scoped">
  184. .submit-cont {
  185. padding-top: 50px;
  186. }
  187. </style>