editModal.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <a-modal
  3. centered
  4. class="bindEdit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="设置绑定"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="800">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 表单 -->
  13. <div>
  14. <a-form-model
  15. id="bindEdit-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="选择中心店" prop="orgSn">
  23. <orgList ref="orgList" :disabled="itemSn?itemSn:''" @change="orgChange" />
  24. </a-form-model-item>
  25. <a-form-model-item label="选择配送店" prop="childSnList">
  26. <orgMultipleList ref="orgMultipleList" :disabled="itemSn?itemSn:form.orgSn" :params="{ sn: form.orgSn }" @change="orgMultipleChange" />
  27. </a-form-model-item>
  28. </a-form-model>
  29. <div class="btn-cont">
  30. <a-button type="primary" id="bindEdit-modal-save" @click="handleSave">保存</a-button>
  31. <a-button id="bindEdit-modal-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
  32. </div>
  33. </div>
  34. </a-spin>
  35. </a-modal>
  36. </template>
  37. <script>
  38. import { STable } from '@/components'
  39. import orgList from './orgList.vue'
  40. import orgMultipleList from './orgMultipleList.vue'
  41. import { jxsorgRelationSave, jxsorgRelationDetail } from '@/api/jxsorg'
  42. export default {
  43. name: 'BindEditModal',
  44. components: { STable, orgList, orgMultipleList },
  45. props: {
  46. openModal: { // 弹框显示状态
  47. type: Boolean,
  48. default: false
  49. },
  50. itemSn: {
  51. type: [Number, String],
  52. default: ''
  53. },
  54. nowData: {
  55. type: Object,
  56. default: null
  57. }
  58. },
  59. data () {
  60. return {
  61. spinning: false,
  62. isShow: this.openModal, // 是否打开弹框
  63. formItemLayout: {
  64. labelCol: { span: 6 },
  65. wrapperCol: { span: 16 }
  66. },
  67. form: {
  68. orgSn: undefined,
  69. childSnList: undefined
  70. },
  71. rules: {
  72. orgSn: [ { required: true, message: '请选择中心店', trigger: 'change' } ],
  73. childSnList: [ { required: true, message: '请选择配送店', trigger: 'change' } ]
  74. }
  75. }
  76. },
  77. methods: {
  78. // 详情
  79. getDetail () {
  80. const _this = this
  81. jxsorgRelationDetail({ sn: this.itemSn }).then(res => {
  82. if (res.status == 200) {
  83. _this.form.orgSn = res.data.orgSn || undefined
  84. _this.$refs.orgList.fetchUser(res.data.orgName)
  85. _this.$refs.orgList.dealerName = { key: res.data.orgSn }
  86. const childSnList = []
  87. const childSnListStr = []
  88. if (res.data.childList) {
  89. res.data.childList.map(item => {
  90. childSnList.push({ key: item.sn })
  91. childSnListStr.push(item.sn)
  92. })
  93. }
  94. _this.form.childSnList = childSnListStr.length == 0 ? undefined : childSnListStr
  95. _this.$refs.orgMultipleList.setData(childSnList, res.data.childList || [])
  96. _this.$refs.orgMultipleList.dealerName = childSnList
  97. }
  98. })
  99. },
  100. // 保存
  101. handleSave () {
  102. const _this = this
  103. this.$refs.ruleForm.validate(valid => {
  104. if (valid) {
  105. _this.spinning = true
  106. jxsorgRelationSave(_this.form).then(res => {
  107. if (res.status == 200) {
  108. _this.$message.success(res.message)
  109. _this.$emit('ok')
  110. setTimeout(function () {
  111. _this.isShow = false
  112. _this.spinning = false
  113. }, 300)
  114. } else {
  115. _this.spinning = false
  116. }
  117. })
  118. } else {
  119. console.log('error submit!!')
  120. return false
  121. }
  122. })
  123. },
  124. // 中心店 change
  125. orgChange (obj) {
  126. this.form.orgSn = obj.key || undefined
  127. },
  128. // 配送店 change
  129. orgMultipleChange (obj) {
  130. const _this = this
  131. this.form.childSnList = []
  132. obj.map(item => {
  133. _this.form.childSnList.push(item.key || undefined)
  134. })
  135. }
  136. },
  137. watch: {
  138. // 父页面传过来的弹框状态
  139. openModal (newValue, oldValue) {
  140. this.isShow = newValue
  141. },
  142. // 重定义的弹框状态
  143. isShow (newValue, oldValue) {
  144. if (!newValue) {
  145. this.$emit('close')
  146. this.$refs.ruleForm.resetFields()
  147. this.form.childSnList = undefined
  148. this.$refs.orgList.resetForm()
  149. this.$refs.orgMultipleList.resetForm()
  150. }
  151. },
  152. itemSn (newValue, oldValue) {
  153. if (this.isShow && newValue) {
  154. this.getDetail()
  155. }
  156. }
  157. }
  158. }
  159. </script>
  160. <style lang="less">
  161. .bindEdit-modal{
  162. .ant-modal-body {
  163. padding: 40px 40px 24px;
  164. }
  165. .btn-cont {
  166. text-align: center;
  167. margin: 35px 0 10px;
  168. }
  169. }
  170. </style>