addCategoryModal.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <a-modal
  3. centered
  4. class="add-category-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="pageType==='add'?'新增类目':pageType==='addChild'?'新增子类目':'编辑'"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="700">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="add-category-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="父类名称" v-if="pageType==='addChild'&&parentData&&parentData.categorySn">
  21. {{ parentData&&parentData.categoryName ||'--' }}
  22. </a-form-model-item>
  23. <a-form-model-item label="上传图标" prop="iconUrl">
  24. <Upload
  25. class="upload"
  26. id="add-category-iconUrl"
  27. v-model.trim="form.iconUrl"
  28. ref="imageSet"
  29. :fileSize="10"
  30. :maxNums="1"
  31. @change="changeImage"
  32. listType="picture-card"></Upload>
  33. </a-form-model-item>
  34. <a-form-model-item label="类目名称" prop="categoryName">
  35. <a-input
  36. id="add-category-name"
  37. :maxLength="5"
  38. v-model.trim="form.categoryName"
  39. placeholder="请输入类目名称(最多5个字符)"
  40. allowClear/>
  41. </a-form-model-item>
  42. <a-form-model-item label="易码通优先级" prop="sort">
  43. <a-input-number
  44. style="width:100%;"
  45. id="add-category-sort"
  46. v-model.trim="form.sort"
  47. :min="0"
  48. :precision="0"
  49. :max="99999999"
  50. placeholder="请输入正整数,数字越大优先级越低"
  51. allowClear />
  52. </a-form-model-item>
  53. </a-form-model>
  54. <div class="btn-cont">
  55. <a-button id="add-category-modal-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  56. <a-button type="primary" id="add-category-modal-save" @click="handleSave">保存</a-button>
  57. </div>
  58. </a-spin>
  59. </a-modal>
  60. </template>
  61. <script>
  62. import { commonMixin } from '@/utils/mixin'
  63. // 组件
  64. import { Upload } from '@/components'
  65. // 接口
  66. import { saveShopCategory, shopCategoryDetail } from '@/api/shopCategory'
  67. export default {
  68. name: 'AddCategoryModal',
  69. mixins: [commonMixin],
  70. components: { Upload },
  71. props: {
  72. openModal: {// 弹框显示状态
  73. type: Boolean,
  74. default: false
  75. },
  76. parentData: {
  77. type: Object,
  78. default: () => {
  79. return {}
  80. }
  81. },
  82. pageType: {
  83. type: String,
  84. default: ''
  85. }
  86. },
  87. data () {
  88. return {
  89. spinning: false,
  90. isShow: this.openModal, // 是否打开弹框
  91. // 设置表单label布局
  92. formItemLayout: {
  93. labelCol: { span: 4 },
  94. wrapperCol: { span: 18 }
  95. },
  96. // 添加参数
  97. form: {
  98. parentSn: undefined,
  99. categoryName: '', // 类目名称
  100. sort: undefined, // 优先级
  101. iconUrl: '' // 上传图标
  102. },
  103. // 必填项验证
  104. rules: {
  105. iconUrl: [{ required: true, message: '请选择上传图标', trigger: 'change' }],
  106. categoryName: [{ required: true, message: '请输入类目名称', trigger: 'blur' }],
  107. sort: [{ required: true, message: '请输入优先级', trigger: 'blur' }]
  108. }
  109. }
  110. },
  111. methods: {
  112. // 图片上传
  113. changeImage (file) {
  114. this.form.iconUrl = file
  115. if (file) {
  116. this.$nextTick(() => {
  117. this.$refs.ruleForm.clearValidate('iconUrl')
  118. })
  119. }
  120. },
  121. // 保存
  122. handleSave () {
  123. const _this = this
  124. // 处理表单校验
  125. this.$refs.ruleForm.validate(valid => {
  126. if (valid) {
  127. _this.spinning = true
  128. if (_this.parentData && _this.parentData.categorySn && _this.pageType === 'addChild') {
  129. _this.form.parentSn = _this.parentData.categorySn
  130. }
  131. saveShopCategory(_this.form).then(res => {
  132. if (res.status == 200) {
  133. _this.$message.success(res.message)
  134. setTimeout(() => {
  135. _this.$emit('ok')
  136. _this.isShow = false
  137. _this.spinning = false
  138. }, 1000)
  139. } else {
  140. _this.spinning = false
  141. }
  142. })
  143. } else {
  144. console.log('error submit!!')
  145. return false
  146. }
  147. })
  148. },
  149. // 重置
  150. resetAddForm () {
  151. this.form.categorySn = undefined
  152. this.form.parentSn = undefined
  153. this.form.categoryName = ''
  154. this.form.sort = undefined
  155. this.form.iconUrl = ''
  156. this.$refs.imageSet.setFileList('')
  157. this.$refs.ruleForm.resetFields()
  158. },
  159. // 获取详情数据
  160. getDetailData (ajaxData) {
  161. this.spinning = true
  162. shopCategoryDetail(ajaxData).then(res => {
  163. if (res.status == 200) {
  164. this.form = res.data
  165. this.$refs.imageSet.setFileList(res.data.iconUrl)
  166. }
  167. this.spinning = false
  168. })
  169. }
  170. },
  171. watch: {
  172. // 父页面传过来的弹框状态
  173. openModal (newValue, oldValue) {
  174. this.isShow = newValue
  175. },
  176. // 重定义的弹框状态
  177. isShow (newValue, oldValue) {
  178. if (!newValue) {
  179. this.$emit('close')
  180. this.resetAddForm()
  181. } else {
  182. this.form = {}
  183. }
  184. }
  185. }
  186. }
  187. </script>
  188. <style lang="less">
  189. .add-category-modal {
  190. .ant-modal-body {
  191. padding: 40px 40px 24px;
  192. }
  193. .btn-cont {
  194. text-align: center;
  195. margin: 35px 0 10px;
  196. }
  197. .ant-radio + span{
  198. line-height: 40px;
  199. }
  200. }
  201. </style>