addGoodsClassModal.vue 5.5 KB

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