addGoodsShelve.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. <template>
  2. <div>
  3. <a-modal
  4. centered
  5. wrapClassName="addGoodsShelve-modal"
  6. :footer="null"
  7. :maskClosable="false"
  8. :title="titleText"
  9. v-model="isshow"
  10. @cancle="isshow=false"
  11. :width="800">
  12. <a-spin :spinning="spinning" tip="Loading...">
  13. <a-form-model
  14. id="addGoodsShelve-form"
  15. ref="ruleForm"
  16. :model="form"
  17. :rules="rules"
  18. :label-col="formItemLayout.labelCol"
  19. :wrapper-col="formItemLayout.wrapperCol"
  20. >
  21. <a-row :gutter="24">
  22. <a-col :span="12">
  23. <a-form-model-item label="配件经销商" prop="dealerSn">
  24. <dealerList ref="dealerList" @change="dealerChange" v-if="!nowData?true:false" id="addGoodsShelve-dealerChange"></dealerList>
  25. <span v-else>{{ form.dealerName }}</span>
  26. </a-form-model-item>
  27. </a-col>
  28. <a-col :span="12">
  29. <a-form-model-item label="汽车修理厂" prop="storeSn">
  30. <storeList ref="storeList" @change="storeChange" v-if="!nowData?true:false" id="addGoodsShelve-storeChange"></storeList>
  31. <span v-else>{{ form.storeName }}</span>
  32. </a-form-model-item>
  33. </a-col>
  34. </a-row>
  35. <a-row :gutter="20">
  36. <a-col :span="24">
  37. <a-form-model-item label="货架名称" prop="shelfName" :label-col="{span: 3}" :wrapper-col="{span: 20}">
  38. <a-input id="addGoodsShelve-shelfName" v-model.trim="form.shelfName" :maxLength="30" allowClear placeholder="请输入货架名称(最多30个字符)"/>
  39. </a-form-model-item>
  40. </a-col>
  41. </a-row>
  42. <a-row :gutter="24">
  43. <!-- 状态 -->
  44. <a-col :span="12">
  45. <a-form-model-item label="货架归属" prop="ownerType">
  46. <a-radio-group name="radioGroup" v-model="form.ownerType" @change="changeRadio" id="addGoodsShelve-changeRadio">
  47. <a-radio :value="1">平台</a-radio>
  48. <a-radio :value="0">自有</a-radio>
  49. </a-radio-group>
  50. </a-form-model-item>
  51. </a-col>
  52. </a-row>
  53. <a-row :gutter="24" v-if="form.ownerType===0">
  54. <a-col :span="24">
  55. <a-form-model-item label="货架图片" prop="images" help="说明:请上传清晰、完整的图片,支持jpg/jpeg/png格式,不超过500KB(最多5张)。" :label-col="{span:3}" :wrapper-col="{span:20}">
  56. <Upload
  57. class="upload"
  58. id="addGoodsShelve-images"
  59. v-model="form.images"
  60. :fileSize="500/1024"
  61. ref="images"
  62. @change="changeImage"
  63. :maxNums="5"
  64. listType="picture-card" ></Upload>
  65. </a-form-model-item>
  66. </a-col>
  67. </a-row>
  68. <a-row :gutter="24">
  69. <a-col :span="24">
  70. <a-form-model-item label="备注" prop="remarks" :label-col="{span: 3}" :wrapper-col="{span: 20}">
  71. <a-textarea id="addGoodsShelve-remarks" v-model.trim="form.remarks" :maxLength="500" allowClear placeholder="请输入备注(最多500个字符)"/>
  72. </a-form-model-item>
  73. </a-col>
  74. </a-row>
  75. <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
  76. <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }" id="addGoodsShelve-handleSubmit">保存</a-button>
  77. <a-button :style="{ marginLeft: '8px' }" @click="isshow=false" id="addGoodsShelve-close">取消</a-button>
  78. </a-form-model-item>
  79. </a-form-model>
  80. </a-spin>
  81. </a-modal>
  82. </div>
  83. </template>
  84. <script>
  85. import { STable, VSelect, Upload } from '@/components'
  86. import { saveShelf, shelfDetail } from '@/api/shelf.js'
  87. import dealerList from '@/views/common/dealerList.vue'
  88. import storeList from '@/views/common/storeList.vue'
  89. export default {
  90. name: 'AddGoodsShelve',
  91. components: { STable, VSelect, Upload, dealerList, storeList },
  92. props: {
  93. visible: {
  94. type: Boolean,
  95. default: false
  96. },
  97. nowData: {
  98. type: Object,
  99. default: function () {
  100. return {}
  101. }
  102. }
  103. },
  104. data () {
  105. return {
  106. spinning: false,
  107. titleText: '新增数字货架',
  108. isshow: this.visible,
  109. roleList: [],
  110. pageInfo: null,
  111. formItemLayout: {
  112. labelCol: { span: 6 },
  113. wrapperCol: { span: 16 }
  114. },
  115. form: {
  116. dealerSn: undefined, // 经销商sn
  117. ownerType: 1, // 平台
  118. storeSn: undefined, // 汽车修理厂sn
  119. shelfName: '', // 货架名称
  120. images: '', // 图片
  121. remarks: ''// 备注
  122. },
  123. rules: {
  124. shelfName: [ { required: true, message: '请输入用户名称', trigger: 'blur' }, { pattern: '^[^<|>]{1,30}$', message: '请输入不含<或>的字符,最多30个字符' } ],
  125. dealerSn: [ { required: true, message: '请选择配件经销商', trigger: 'change' } ],
  126. ownerType: [ { required: true, message: '请选择货架归属', trigger: 'change' } ],
  127. storeSn: [ { required: true, message: '请选择汽车修理厂', trigger: 'change' } ],
  128. images: [{ required: true, message: '请上传品牌图片', trigger: 'change' } ]
  129. }
  130. }
  131. },
  132. methods: {
  133. // 经销商 change
  134. dealerChange (obj) {
  135. this.form.dealerSn = obj.key || undefined
  136. },
  137. // 汽车修理厂 change
  138. storeChange (obj) {
  139. this.form.storeSn = obj.key || undefined
  140. },
  141. // 产品图片上传
  142. changeImage (file) {
  143. this.form.images = file
  144. },
  145. // 改变货架归属
  146. changeRadio (e) {
  147. this.form.ownerType = e.target.value
  148. console.log(e.target.value, '=========')
  149. },
  150. // 查询货架详情
  151. getShelfDetail () {
  152. this.spinning = true
  153. shelfDetail({ shelfSn: this.nowData.shelfSn }).then(res => {
  154. if (res.status == 200) {
  155. this.form = Object.assign({}, res.data)
  156. this.form.ownerType = Number(this.form.ownerType)
  157. if (this.form.ownerType == 0) {
  158. this.$nextTick(() => {
  159. this.$refs.images.setFileList(this.form.images)
  160. })
  161. }
  162. } else {
  163. this.form = {}
  164. this.$refs.images.setFileList('')
  165. }
  166. this.spinning = false
  167. })
  168. },
  169. // 保存提交
  170. handleSubmit () {
  171. const _this = this
  172. this.$refs.ruleForm.validate(valid => {
  173. if (valid) {
  174. const params = JSON.parse(JSON.stringify(_this.form))
  175. if (params.images == '') {
  176. delete params.images
  177. }
  178. if (_this.nowData && _this.nowData.id) {
  179. params.id = _this.nowData.id
  180. }
  181. _this.spinning = true
  182. saveShelf(params).then(res => {
  183. if (res.status == 200) {
  184. _this.$message.success(res.message)
  185. _this.$emit('refresh')
  186. setTimeout(function () {
  187. _this.isshow = false
  188. }, 300)
  189. }
  190. _this.spinning = false
  191. })
  192. } else {
  193. console.log('error submit!!')
  194. return false
  195. }
  196. })
  197. }
  198. },
  199. watch: {
  200. visible (newValue, oldValue) {
  201. this.isshow = newValue
  202. },
  203. isshow (newValue, oldValue) {
  204. if (!newValue) {
  205. this.form = {}
  206. this.form.ownerType = 1
  207. if (!this.nowData) {
  208. this.$refs.storeList.resetForm()
  209. this.$refs.dealerList.resetForm()
  210. }
  211. this.$refs.ruleForm.resetFields()
  212. this.titleText = '新增数字货架'
  213. this.$emit('close')
  214. } else {
  215. if (this.nowData && this.nowData.id) { // 编辑
  216. console.log(this.nowData.id, 'this.nowData.id')
  217. this.titleText = '编辑数字货架'
  218. this.getShelfDetail()
  219. }
  220. }
  221. }
  222. }
  223. }
  224. </script>
  225. <style lang="less">
  226. </style>