bindProductModal.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <a-modal
  3. centered
  4. class="shelfSet-bindProduct-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="modalTit"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. :width="600">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="shelfSet-bindProduct-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol">
  19. <a-form-model-item label="货架名称">{{ nowData&&nowData.shelfName || '--' }}</a-form-model-item>
  20. <a-form-model-item label="货位号">{{ nowData&&nowData.shelfPlaceCode || '--' }}</a-form-model-item>
  21. <a-form-model-item :label="type == 'replace' ? '原绑定产品':'绑定产品'" v-if="type != 'bind'">
  22. {{ productInfo&&productInfo.productCode }}
  23. <p style="margin: 0;">{{ productInfo&&productInfo.productName || '--' }}</p>
  24. </a-form-model-item>
  25. <a-form-model-item :label="type!='bind'?'新绑定产品':'绑定产品'" prop="productSn" v-if="type!='edit'">
  26. <productJqList ref="productJqList" :params="{customerSn:nowData&&nowData.customerSn}" @change="productJqChange"></productJqList>
  27. <span v-if="form.productSn">{{ productName || '--' }}</span>
  28. </a-form-model-item>
  29. <a-form-model-item label="车主价" prop="price">
  30. <a-input-number
  31. id="shelfSet-bindProduct-price"
  32. v-model="form.price"
  33. :precision="2"
  34. :min="0"
  35. :max="999999"
  36. placeholder="请输入车主价(最多允许两位小数)"
  37. style="width: 80%;display: inline-block;" /> 元
  38. </a-form-model-item>
  39. <a-form-model-item label="结算价" prop="cost">
  40. <a-input-number
  41. id="shelfSet-bindProduct-cost"
  42. v-model="form.cost"
  43. :precision="2"
  44. :min="0"
  45. :max="999999"
  46. placeholder="请输入结算价(最多允许两位小数)"
  47. style="width: 80%;display: inline-block;" /> 元
  48. </a-form-model-item>
  49. <a-form-model-item label="最大库容" prop="maxQty">
  50. <a-input-number
  51. id="shelfSet-bindProduct-maxQty"
  52. v-model="form.maxQty"
  53. :precision="0"
  54. :min="0"
  55. :max="999999"
  56. placeholder="请输入最大库容(正整数或0)"
  57. suffix="元"
  58. style="width: 100%;display: inline-block;" />
  59. </a-form-model-item>
  60. </a-form-model>
  61. <div class="btn-cont">
  62. <a-button type="primary" id="shelfSet-bindProduct-modal-save" @click="handleSave">保存</a-button>
  63. <a-button id="shelfSet-bindProduct-modal-back" @click="isShow=false" style="margin-left: 15px;">取消</a-button>
  64. </div>
  65. </a-spin>
  66. </a-modal>
  67. </template>
  68. <script>
  69. import { commonMixin } from '@/utils/mixin'
  70. import { VSelect } from '@/components'
  71. import productJqList from '@/views/common/productJqList.vue'
  72. import { shelfProductSave, shelfProductDetail } from '@/api/shelf'
  73. export default {
  74. name: 'ShelfSetBasicInfoModal',
  75. components: { VSelect, productJqList },
  76. mixins: [commonMixin],
  77. props: {
  78. openModal: { // 弹框显示状态
  79. type: Boolean,
  80. default: false
  81. },
  82. type: {
  83. type: String,
  84. default: ''
  85. },
  86. nowData: {
  87. type: Object,
  88. default: () => {
  89. return {}
  90. }
  91. }
  92. },
  93. data () {
  94. return {
  95. spinning: false,
  96. isShow: this.openModal, // 是否打开弹框
  97. formItemLayout: {
  98. labelCol: { span: 4 },
  99. wrapperCol: { span: 18 }
  100. },
  101. form: {
  102. productSn: undefined,
  103. productCode: undefined,
  104. price: '',
  105. cost: '',
  106. maxQty: ''
  107. },
  108. rules: {
  109. productSn: [{ required: true, message: '请选择绑定产品', trigger: 'change' }],
  110. price: [{ required: true, message: '请输入销售价', trigger: 'change' }],
  111. cost: [{ required: true, message: '请输入结算价', trigger: 'change' }],
  112. maxQty: [{ required: true, message: '请输入最大库容', trigger: 'change' }]
  113. },
  114. productName: '',
  115. productInfo: null
  116. }
  117. },
  118. computed: {
  119. modalTit () {
  120. let title = ''
  121. if (this.type == 'edit') {
  122. title = '修改信息'
  123. } else if (this.type == 'bind') {
  124. title = '绑定产品'
  125. } else if (this.type == 'replace') {
  126. title = '更换产品'
  127. }
  128. return title
  129. }
  130. },
  131. methods: {
  132. // 产品 change
  133. productJqChange (obj) {
  134. this.form.productSn = obj.key || undefined
  135. this.form.productCode = obj && obj.row && obj.row.code || ''
  136. this.form.price = obj && obj.row && obj.row.price || ''
  137. this.form.cost = obj && obj.row && obj.row.cost || ''
  138. this.form.oldPrice = obj && obj.row && obj.row.price || ''
  139. this.form.oldCost = obj && obj.row && obj.row.cost || ''
  140. this.productName = obj && obj.row && obj.row.name || ''
  141. this.$refs.ruleForm.validate()
  142. },
  143. // 保存
  144. handleSave () {
  145. const _this = this
  146. this.$refs.ruleForm.validate(valid => {
  147. if (valid) {
  148. const form = JSON.parse(JSON.stringify(_this.form))
  149. form.shelfSn = _this.nowData && _this.nowData.shelfSn
  150. form.shelfPlaceSn = _this.nowData && _this.nowData.shelfPlaceSn
  151. if (this.type != 'bind') { // 修改信息、更换产品
  152. form.shelfProductSn = _this.nowData && _this.nowData.shelfProductApiEntity && _this.nowData.shelfProductApiEntity.shelfProductSn
  153. }
  154. if (this.type == 'replace') { // 更换产品
  155. form.updateProductFlag = 1
  156. }
  157. _this.spinning = true
  158. shelfProductSave(form).then(res => {
  159. if (res.status == 200) {
  160. _this.$message.success(res.message)
  161. _this.isShow = false
  162. _this.$emit('ok', res.data)
  163. _this.spinning = false
  164. } else {
  165. _this.spinning = false
  166. }
  167. })
  168. } else {
  169. console.log('error submit!!')
  170. return false
  171. }
  172. })
  173. },
  174. // 获取产品信息
  175. getProductInfo () {
  176. shelfProductDetail({ shelfPlaceSn: this.nowData && this.nowData.shelfPlaceSn }).then(res => {
  177. if (res.status == 200 && res.data) {
  178. this.productInfo = res.data
  179. if (this.type == 'edit') {
  180. this.form.productSn = res.data.productSn
  181. this.form.productCode = res.data.productCode
  182. }
  183. this.form.price = res.data.price
  184. this.form.cost = res.data.cost
  185. this.form.maxQty = res.data.maxQty
  186. this.form.oldPrice = res.data.price
  187. this.form.oldCost = res.data.cost
  188. this.form.oldMaxQty = res.data.maxQty
  189. } else {
  190. this.productInfo = null
  191. this.$refs.ruleForm.resetFields()
  192. }
  193. })
  194. },
  195. resetData () {
  196. this.productName = ''
  197. this.productInfo = null
  198. this.form.productSn = undefined
  199. this.form.productCode = undefined
  200. this.form.price = ''
  201. this.form.cost = ''
  202. this.form.maxQty = ''
  203. if (this.$refs.productJqList) {
  204. this.$refs.productJqList.resetForm()
  205. }
  206. if (this.$refs.ruleForm) {
  207. this.$refs.ruleForm.resetFields(['productSn'])
  208. }
  209. }
  210. },
  211. watch: {
  212. // 父页面传过来的弹框状态
  213. openModal (newValue, oldValue) {
  214. this.isShow = newValue
  215. },
  216. // 重定义的弹框状态
  217. isShow (newValue, oldValue) {
  218. if (!newValue) {
  219. this.resetData()
  220. this.$emit('close')
  221. } else {
  222. if (this.type != 'bind') { // 修改信息、更换产品
  223. this.getProductInfo()
  224. }
  225. }
  226. }
  227. }
  228. }
  229. </script>
  230. <style lang="less">
  231. .shelfSet-bindProduct-modal {
  232. .ant-modal-body {
  233. padding: 40px 40px 24px;
  234. }
  235. .ant-form-item{
  236. margin-bottom: 15px;
  237. }
  238. .btn-cont {
  239. text-align: center;
  240. margin: 35px 0 10px;
  241. }
  242. }
  243. </style>