basicInfoModal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. <template>
  2. <a-modal
  3. centered
  4. class="chainTransferOut-basicInfo-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. <a-form-model
  13. id="chainTransferOut-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-form-model-item label="调出产品类型" prop="allocationType">
  21. <v-select
  22. v-model="form.allocationType"
  23. ref="allocationType"
  24. id="chainTransferOut-basicInfo-allocationType"
  25. code="ALLOCATION_LINKAGE_PRODUCT_TYPE"
  26. placeholder="请选择调出产品类型"
  27. allowClear
  28. ></v-select>
  29. </a-form-model-item>
  30. <a-form-model-item label="调往对象" prop="putTenantSn">
  31. <a-select
  32. placeholder="请选择调往对象"
  33. allowClear
  34. v-model="form.putTenantSn"
  35. :showSearch="true"
  36. option-filter-prop="children"
  37. :filter-option="filterOption">
  38. <a-select-option v-for="item in putTenantSnData" :key="item.sn" :value="item.sn">{{ item.name }}</a-select-option>
  39. </a-select>
  40. </a-form-model-item>
  41. <a-form-model-item label="备注" prop="remark">
  42. <a-textarea id="chainTransferOut-basicInfo-remark" :maxLength="500" v-model="form.remark" placeholder="请输入备注(最多500个字符)" allowClear />
  43. </a-form-model-item>
  44. </a-form-model>
  45. <div class="btn-cont">
  46. <a-button type="primary" id="chainTransferOut-basicInfo-modal-save" @click="handleSave">保存</a-button>
  47. <a-button id="chainTransferOut-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  48. </div>
  49. </a-spin>
  50. </a-modal>
  51. </template>
  52. <script>
  53. import { VSelect } from '@/components'
  54. import { getTenantList, allocLinkageOutSave } from '@/api/allocLinkageOut'
  55. export default {
  56. name: 'ChainTransferOutBasicInfoModal',
  57. components: { VSelect },
  58. props: {
  59. openModal: {
  60. // 弹框显示状态
  61. type: Boolean,
  62. default: false
  63. }
  64. },
  65. data () {
  66. return {
  67. spinning: false,
  68. isShow: this.openModal, // 是否打开弹框
  69. formItemLayout: {
  70. labelCol: { span: 4 },
  71. wrapperCol: { span: 18 }
  72. },
  73. form: {
  74. allocationType: '', // 调出产品类型
  75. putTenantSn: undefined, // 调往对象
  76. remark: ''
  77. },
  78. rules: {
  79. allocationType: [{ required: true, message: '请选择调出产品类型', trigger: 'change' }],
  80. putTenantSn: [{ required: true, message: '请选择调往对象', trigger: 'change' }]
  81. },
  82. putTenantSnData: [] // 调往对象 下拉数据
  83. }
  84. },
  85. methods: {
  86. // 保存
  87. handleSave () {
  88. const _this = this
  89. this.$refs.ruleForm.validate(valid => {
  90. if (valid) {
  91. const form = JSON.parse(JSON.stringify(_this.form))
  92. _this.spinning = true
  93. allocLinkageOutSave(form).then(res => {
  94. if (res.status == 200) {
  95. _this.$message.success(res.message)
  96. setTimeout(() => {
  97. _this.isShow = false
  98. _this.$emit('ok', res.data)
  99. _this.spinning = false
  100. }, 1000)
  101. } else {
  102. _this.spinning = false
  103. }
  104. })
  105. } else {
  106. console.log('error submit!!')
  107. return false
  108. }
  109. })
  110. },
  111. filterOption (input, option) {
  112. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  113. },
  114. // 调往对象
  115. getPutTenantList () {
  116. getTenantList({}).then(res => {
  117. if (res.status == 200) {
  118. this.putTenantSnData = res.data
  119. } else {
  120. this.putTenantSnData = []
  121. }
  122. })
  123. }
  124. },
  125. watch: {
  126. // 父页面传过来的弹框状态
  127. openModal (newValue, oldValue) {
  128. this.isShow = newValue
  129. },
  130. // 重定义的弹框状态
  131. isShow (newValue, oldValue) {
  132. if (!newValue) {
  133. this.$emit('close')
  134. this.$refs.ruleForm.resetFields()
  135. } else {
  136. this.getPutTenantList()
  137. }
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="less">
  143. .chainTransferOut-basicInfo-modal {
  144. .ant-modal-body {
  145. padding: 40px 40px 24px;
  146. }
  147. .btn-cont {
  148. text-align: center;
  149. margin: 35px 0 10px;
  150. }
  151. }
  152. </style>