basicInfoModal.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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="checkType">
  21. <a-radio-group v-model="form.checkType" @change="checkTypeChange">
  22. <a-radio v-for="(item,index) in checkTypeList" :key="index" :value="item.code">{{ item.dispName }}</a-radio>
  23. </a-radio-group>
  24. </a-form-model-item>
  25. <a-form-model-item label="是否区分仓库" prop="warehouseFlag" v-if="form.checkType=='SELECT'">
  26. <a-radio-group v-model="form.warehouseFlag" @change="warehouseFlagChange">
  27. <a-radio v-for="(item,index) in warehouseFlagList" :key="index" :value="item.code">{{ item.dispName }}</a-radio>
  28. </a-radio-group>
  29. </a-form-model-item>
  30. <a-form-model-item label="盘点仓库" prop="warehouseSnList" v-if="form.checkType=='SELECT' && form.warehouseFlag=='1'">
  31. <a-checkbox-group v-model="form.warehouseSnList">
  32. <a-checkbox v-for="(item,index) in warehouseList" :key="index" :value="item.warehouseSn">{{ item.name }}</a-checkbox>
  33. </a-checkbox-group>
  34. </a-form-model-item>
  35. </a-form-model>
  36. <div class="btn-cont">
  37. <a-button type="primary" id="chainTransferOut-basicInfo-modal-save" @click="handleSave">保存</a-button>
  38. <a-button id="chainTransferOut-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  39. </div>
  40. </a-spin>
  41. </a-modal>
  42. </template>
  43. <script>
  44. import { commonMixin } from '@/utils/mixin'
  45. import { VSelect } from '@/components'
  46. import { checkWarehouseSave, checkWarehouseWarehouse } from '@/api/checkWarehouse'
  47. export default {
  48. name: 'ChainTransferOutBasicInfoModal',
  49. components: { VSelect },
  50. mixins: [commonMixin],
  51. props: {
  52. openModal: {
  53. // 弹框显示状态
  54. type: Boolean,
  55. default: false
  56. }
  57. },
  58. data () {
  59. return {
  60. spinning: false,
  61. isShow: this.openModal, // 是否打开弹框
  62. formItemLayout: {
  63. labelCol: { span: 4 },
  64. wrapperCol: { span: 20 }
  65. },
  66. form: {
  67. checkType: 'ALL',
  68. warehouseFlag: '0',
  69. warehouseSnList: undefined
  70. },
  71. rules: {
  72. checkType: [{ required: true, message: '请选择盘点类型', trigger: 'change' }],
  73. warehouseFlag: [{ required: true, message: '请选择是否区分仓库', trigger: 'change' }],
  74. warehouseSnList: [{ required: true, message: '请选择盘点仓库', trigger: 'change' }]
  75. },
  76. checkTypeList: [
  77. { dispName: '全盘', code: 'ALL' },
  78. { dispName: '自选盘点', code: 'SELECT' }
  79. ],
  80. warehouseFlagList: [
  81. { dispName: '不区分仓库', code: '0' },
  82. { dispName: '区分仓库', code: '1' }
  83. ],
  84. warehouseList: []
  85. }
  86. },
  87. methods: {
  88. // 保存
  89. handleSave () {
  90. const _this = this
  91. this.$refs.ruleForm.validate(valid => {
  92. if (valid) {
  93. const form = JSON.parse(JSON.stringify(_this.form))
  94. if (form.checkType == 'ALL') {
  95. delete form.warehouseFlag
  96. }
  97. if (form.warehouseSnList) {
  98. form.warehouseSnList = form.warehouseSnList.join(',')
  99. }
  100. _this.spinning = true
  101. checkWarehouseSave(form).then(res => {
  102. if (res.status == 200) {
  103. _this.$message.success(res.message)
  104. setTimeout(() => {
  105. _this.isShow = false
  106. _this.$emit('ok', res.data)
  107. _this.spinning = false
  108. }, 1000)
  109. } else {
  110. _this.spinning = false
  111. }
  112. })
  113. } else {
  114. console.log('error submit!!')
  115. return false
  116. }
  117. })
  118. },
  119. checkTypeChange (e) {
  120. this.form.warehouseFlag = '0'
  121. this.form.warehouseSnList = undefined
  122. },
  123. warehouseFlagChange (e) {
  124. this.form.warehouseSnList = undefined
  125. },
  126. // 获取仓库列表
  127. getWarehouseList () {
  128. checkWarehouseWarehouse({}).then(res => {
  129. if (res.status == 200) {
  130. this.warehouseList = res.data || []
  131. } else {
  132. this.warehouseList = []
  133. }
  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. } else {
  148. this.getWarehouseList()
  149. }
  150. }
  151. }
  152. }
  153. </script>
  154. <style lang="less">
  155. .chainTransferOut-basicInfo-modal {
  156. .btn-cont {
  157. text-align: center;
  158. margin: 35px 0 10px;
  159. }
  160. }
  161. </style>