bindProductModal.vue 8.2 KB

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