addGoodsClassModal.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div>
  3. <!-- 新增编辑商品分类弹窗 -->
  4. <a-modal
  5. v-model="isShow"
  6. @cancle="isShow=false"
  7. :footer="null"
  8. width="60%"
  9. :centered="true"
  10. :title="titleText">
  11. <a-form id="components-form-demo-validate-other" :form="form" ref="form" v-bind="formItemLayout" @submit="handleSubmit">
  12. <a-form-item label="商品分类名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  13. <a-input
  14. id="addGoodsClassModal-name"
  15. :maxLength="30"
  16. v-decorator="['formData.name', { initialValue: formData.name,getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入供应商名称(最多30个字符)!' }] }]"
  17. placeholder="请输入商品名称(最多30个字符)"
  18. allowClear />
  19. </a-form-item>
  20. <a-form-item label="商城主页显示数量" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  21. <a-input-number
  22. id="addGoodsClassModal-popularizeGoodsLimit"
  23. class="inpNumber"
  24. :min="0"
  25. :max="999999"
  26. v-decorator="[ 'formData.popularizeGoodsLimit', { initialValue: formData.popularizeGoodsLimit, rules: [{ required: true, message: '请输入商城主页显示数量(0~999999)' }] } ]"
  27. placeholder="请输入商城主页显示数量(0~999999)"
  28. allowClear />
  29. </a-form-item>
  30. <a-form-item label="订单起购金额" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  31. <a-input-number
  32. id="addGoodsClassModal-goldLimit"
  33. class="inpNumber"
  34. :min="0"
  35. :max="999999"
  36. :precision="2"
  37. v-decorator="[ 'formData.goldLimit', { initialValue: formData.goldLimit, rules: [{ required: true, message: '请输入订单起购金额(0~999999)' }] } ]"
  38. placeholder="请输入订单起购金额(0~999999)"
  39. allowClear />
  40. <span class="inp-unit">乐豆</span>
  41. </a-form-item>
  42. <a-form-item label="备注" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
  43. <a-textarea
  44. :maxLength="500"
  45. v-decorator="['formData.remarks', { initialValue: formData.remarks, rules: [{ required: false, message: '请输入备注内容(最多500个字符)!' }] }]"
  46. id="addGoodsClassModal-remarks"
  47. placeholder="请输入备注内容(最多500个字符)"
  48. allowClear />
  49. </a-form-item>
  50. <a-form-item :wrapper-col="{ span: 12, offset: 6}" style="text-align: center;">
  51. <a-button type="primary" html-type="submit" id="bannerSetting-submit" style="margin-right: 15px">保存</a-button>
  52. <a-button @click="isShow=false" style="margin-left: 15px" id="bannerSetting-close">取消</a-button>
  53. </a-form-item>
  54. </a-form>
  55. </a-modal>
  56. </div>
  57. </template>
  58. <script>
  59. import {
  60. VSelect
  61. } from '@/components'
  62. import {
  63. goodsClassDetails,
  64. saveGoodsClass
  65. } from '@/api/shopSetting.js'
  66. export default {
  67. name: 'AddGoodsClassModal',
  68. components: {
  69. VSelect
  70. },
  71. props: {
  72. openGoodClassModal: {
  73. type: Boolean,
  74. default: false
  75. },
  76. itemId: {
  77. type: String,
  78. default: ''
  79. },
  80. itemData: {
  81. type: Object,
  82. default: function () {
  83. return {}
  84. }
  85. }
  86. },
  87. data () {
  88. return {
  89. formItemLayout: {
  90. labelCol: {
  91. span: 6
  92. },
  93. wrapperCol: {
  94. span: 14
  95. }
  96. },
  97. isShow: this.openGoodClassModal,
  98. titleText: '新增',
  99. formLayout: 'horizontal',
  100. form: this.$form.createForm(this, { name: 'addGoodsClassModal' }),
  101. formData: {
  102. name: '', // 分类名称
  103. goldLimit: '', // 限制金额
  104. remarks: '', // 备注
  105. popularizeGoodsLimit: ''
  106. }
  107. }
  108. },
  109. methods: {
  110. // 查看详情
  111. getPageInfo () {
  112. const _this = this
  113. goodsClassDetails({
  114. id: _this.itemId
  115. }).then(res => {
  116. if (res.status == 200) {
  117. this.form.setFieldsValue({ 'formData': res.data })
  118. }
  119. })
  120. },
  121. // 点击保存;
  122. handleSubmit (e) {
  123. e.preventDefault()
  124. const _this = this
  125. this.form.validateFields((err, values) => {
  126. if (!err) {
  127. const formData = Object.assign({}, this.itemData, this.formData, values.formData)
  128. formData.id = _this.itemId
  129. saveGoodsClass(formData).then(res => {
  130. console.log(res, 'rrrrrrrrr')
  131. if (res.status == 200) {
  132. _this.$message.success(res.message)
  133. _this.$emit('refresh')
  134. setTimeout(function () {
  135. _this.isShow = false
  136. }, 300)
  137. }
  138. })
  139. }
  140. })
  141. }
  142. },
  143. watch: {
  144. openGoodClassModal (newValue, oldValue) {
  145. this.isShow = newValue
  146. console.log(this.isShow)
  147. },
  148. isShow (val) {
  149. if (!val) {
  150. this.$emit('close')
  151. } else {
  152. this.form.resetFields()
  153. }
  154. },
  155. itemId (newValue, oldValue) {
  156. console.log(newValue, '----------id')
  157. if (newValue && this.isShow) {
  158. this.titleText = '编辑'
  159. this.getPageInfo(newValue)
  160. } else {
  161. this.titleText = '新增'
  162. }
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="less">
  168. .inpNumber {
  169. width: 100%
  170. }
  171. </style>