setModal.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. wrapClassName="setModal-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="setModal-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. >
  19. <div style="margin-bottom: 10px;text-align: center;">
  20. <strong>近30天下单额</strong>
  21. </div>
  22. <a-form-model-item label="LV1" prop="lv1" :label-col="{span: 4}" :wrapper-col="{span: 18}">
  23. <a-input-number style="width:80%;" v-model.trim="form.lv1" :precision="2" allowClear placeholder="请输入LV1下单额"/>
  24. 元以下
  25. </a-form-model-item>
  26. <a-form-model-item label="LV2" prop="lv2" :label-col="{span: 4}" :wrapper-col="{span: 18}">
  27. <a-input-group style="width: 90%;" compact>
  28. <a-input style="width: 43%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv1"/>
  29. <a-input
  30. style=" width: 12%; pointer-events: none; backgroundColor: #fff"
  31. placeholder="至"
  32. disabled
  33. />
  34. <a-input-number
  35. :precision="2"
  36. :min="form.lv1"
  37. style="width: 43%; text-align: center"
  38. v-model.trim="form.lv2"
  39. allowClear
  40. placeholder="请输入LV2下单额"/>
  41. </a-input-group>
  42. </a-form-model-item>
  43. <a-form-model-item label="LV3" prop="lv3" :label-col="{span: 4}" :wrapper-col="{span: 18}">
  44. <a-input-group style="width: 90%;" compact>
  45. <a-input style=" width: 43%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv2"/>
  46. <a-input
  47. style=" width: 12%; pointer-events: none; backgroundColor: #fff"
  48. placeholder="至"
  49. disabled
  50. />
  51. <a-input-number
  52. :precision="2"
  53. :min="form.lv2"
  54. style=" width: 43%; text-align: center"
  55. v-model.trim="form.lv3"
  56. allowClear
  57. placeholder="请输入LV3下单额"/>
  58. </a-input-group>
  59. </a-form-model-item>
  60. <a-form-model-item label="LV4" prop="lv4" :label-col="{span: 4}" :wrapper-col="{span: 18}">
  61. <a-input-group style="width: 90%;" compact>
  62. <a-input style=" width: 43%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv3"/>
  63. <a-input
  64. style=" width: 12%; pointer-events: none; backgroundColor: #fff"
  65. placeholder="至"
  66. disabled
  67. />
  68. <a-input-number
  69. :precision="2"
  70. :min="form.lv3"
  71. style=" width: 43%; text-align: center"
  72. v-model.trim="form.lv4"
  73. allowClear
  74. placeholder="请输入LV4下单额"/>
  75. </a-input-group>
  76. </a-form-model-item>
  77. <a-form-model-item label="LV5" :label-col="{span: 4}" :wrapper-col="{span: 18}">
  78. <a-input style="width: 80%; text-align: center;pointer-events: none; backgroundColor: #f8f8f8;color:#666;" disabled v-model.trim="form.lv4"/>
  79. 元以上
  80. </a-form-model-item>
  81. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  82. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }" id="setModal-handleSubmit">保存</a-button>
  83. <a-button :style="{ marginLeft: '8px' }" @click="isshow=false" id="setModal-close">取消</a-button>
  84. </a-form-model-item>
  85. </a-form-model>
  86. </a-spin>
  87. </a-modal>
  88. </div>
  89. </template>
  90. <script>
  91. import { saveHw, shelfHWDetail } from '@/api/shelf.js'
  92. export default {
  93. name: 'AddHWModal',
  94. props: {
  95. openModal: {
  96. type: Boolean,
  97. default: false
  98. },
  99. shelfSn: {
  100. type: [String, Number],
  101. default: ''
  102. },
  103. nowData: {
  104. type: Object,
  105. default: function () {
  106. return {}
  107. }
  108. }
  109. },
  110. data () {
  111. return {
  112. spinning: false,
  113. isshow: this.openModal,
  114. textTitle: '参数设置',
  115. roleList: [],
  116. pageInfo: null,
  117. form: {
  118. lv1: '',
  119. lv2: '',
  120. lv3: '',
  121. lv4: ''
  122. },
  123. rules: {
  124. lv1: [{ required: true, message: '请输入LV1下单金额', trigger: 'blur' }],
  125. lv2: [{ required: true, message: '请输入LV2下单金额', trigger: 'blur' }],
  126. lv3: [{ required: true, message: '请输入LV3下单金额', trigger: 'blur' }],
  127. lv4: [{ required: true, message: '请输入LV4下单金额', trigger: 'blur' }]
  128. }
  129. }
  130. },
  131. methods: {
  132. // 查询货位详情
  133. getShelfHWDetail () {
  134. this.spinning = true
  135. shelfHWDetail({ shelfPlaceSn: this.nowData.shelfPlaceSn }).then(res => {
  136. if (res.status == 200) {
  137. this.form = Object.assign({}, res.data)
  138. }
  139. this.spinning = false
  140. })
  141. },
  142. // 保存提交
  143. handleSubmit () {
  144. const _this = this
  145. this.$refs.ruleForm.validate(valid => {
  146. if (valid) {
  147. const params = JSON.parse(JSON.stringify(_this.form))
  148. params.shelfSn = _this.shelfSn ? _this.shelfSn : null
  149. console.log(params.id, params.shelfSn, '------------编辑新增')
  150. _this.spinning = true
  151. saveHw(params).then(res => {
  152. if (res.status == 200) {
  153. _this.$message.success(res.message)
  154. _this.$emit('refresh')
  155. setTimeout(function () {
  156. _this.isshow = false
  157. _this.spinning = false
  158. }, 300)
  159. } else {
  160. _this.spinning = false
  161. }
  162. })
  163. } else {
  164. console.log('error submit!!')
  165. return false
  166. }
  167. })
  168. }
  169. },
  170. watch: {
  171. openModal (newValue, oldValue) {
  172. this.isshow = newValue
  173. },
  174. isshow (newValue, oldValue) {
  175. if (!newValue) {
  176. this.$refs.ruleForm.resetFields()
  177. this.form = {}
  178. this.$emit('close')
  179. } else {
  180. if (this.nowData && this.nowData.id) { // 编辑
  181. this.getShelfHWDetail()
  182. }
  183. }
  184. }
  185. }
  186. }
  187. </script>
  188. <style lang="less">
  189. </style>