addHWModal.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. wrapClassName="addHWModal-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. :title="textTitle"
  9. v-model="isshow"
  10. @cancle="isshow=false"
  11. :width="500">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="addHWModal-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. >
  19. <a-row :gutter="20">
  20. <a-col :span="24">
  21. <a-form-model-item label="货位号" prop="shelfPlaceCode" :label-col="{span: 5}" :wrapper-col="{span: 18}">
  22. <a-input id="addHWModal-shelfPlaceCode" v-model.trim="form.shelfPlaceCode" allowClear placeholder="请输入货位号"/>
  23. </a-form-model-item>
  24. </a-col>
  25. </a-row>
  26. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  27. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }" id="addHWModal-handleSubmit">保存</a-button>
  28. <a-button :style="{ marginLeft: '8px' }" @click="isshow=false" id="addHWModal-close">取消</a-button>
  29. </a-form-model-item>
  30. </a-form-model>
  31. </a-spin>
  32. </a-modal>
  33. </div>
  34. </template>
  35. <script>
  36. import { saveHw, shelfHWDetail } from '@/api/shelf.js'
  37. export default {
  38. name: 'AddHWModal',
  39. props: {
  40. openHWModal: {
  41. type: Boolean,
  42. default: false
  43. },
  44. shelfSn: {
  45. type: [String, Number],
  46. default: ''
  47. },
  48. shelfPlaceSn: {
  49. type: [String, Number],
  50. default: ''
  51. }
  52. },
  53. data () {
  54. return {
  55. spinning: false,
  56. isshow: this.openHWModal,
  57. textTitle: '新增货位',
  58. roleList: [],
  59. pageInfo: null,
  60. form: {
  61. shelfPlaceCode: '' // 货位号
  62. },
  63. rules: {
  64. shelfPlaceCode: [ { required: true, message: '请输入货位号', trigger: 'blur' }]
  65. }
  66. }
  67. },
  68. methods: {
  69. // 过滤空格
  70. filterEmpty () {
  71. let str = this.form.name
  72. str = str.replace(/\ +/g, '')
  73. str = str.replace(/[ ]/g, '')
  74. str = str.replace(/[\r\n]/g, '')
  75. this.form.name = str
  76. },
  77. // 查询货位详情
  78. getShelfHWDetail () {
  79. this.spinning = true
  80. shelfHWDetail({ shelfPlaceSn: this.shelfPlaceSn }).then(res => {
  81. if (res.status == 200) {
  82. this.form = Object.assign({}, res.data)
  83. }
  84. this.spinning = false
  85. })
  86. },
  87. // 保存提交
  88. handleSubmit () {
  89. const _this = this
  90. this.$refs.ruleForm.validate(valid => {
  91. if (valid) {
  92. const params = JSON.parse(JSON.stringify(_this.form))
  93. params.shelfSn = _this.shelfSn ? _this.shelfSn : null
  94. console.log(params.id, params.shelfSn, '------------编辑新增')
  95. _this.spinning = true
  96. saveHw(params).then(res => {
  97. if (res.status == 200) {
  98. _this.$message.success(res.message)
  99. _this.$emit('refresh')
  100. setTimeout(function () {
  101. _this.isshow = false
  102. _this.spinning = false
  103. }, 300)
  104. } else {
  105. _this.spinning = false
  106. }
  107. })
  108. } else {
  109. console.log('error submit!!')
  110. return false
  111. }
  112. })
  113. }
  114. },
  115. watch: {
  116. openHWModal (newValue, oldValue) {
  117. console.log(newValue, 'newValue')
  118. this.isshow = newValue
  119. },
  120. isshow (newValue, oldValue) {
  121. if (!newValue) {
  122. this.$refs.ruleForm.resetFields()
  123. this.form = {}
  124. this.textTitle = '新增货位'
  125. this.$emit('close')
  126. }
  127. },
  128. shelfPlaceSn: {
  129. handler (newValue, oldValue) {
  130. if (this.isshow && newValue) {
  131. if (this.shelfPlaceSn) { // 编辑
  132. this.textTitle = '编辑货位'
  133. this.getShelfHWDetail()
  134. }
  135. }
  136. },
  137. deep: true
  138. }
  139. }
  140. }
  141. </script>
  142. <style lang="less">
  143. </style>