addShelfHw.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="form-body">
  4. <u-form :model="form" label-width="180rpx" :error-type="['toast']" ref="uForm">
  5. <u-form-item label="货位号" required prop="shelfPlaceCode">
  6. <u-input focus v-model="form.shelfPlaceCode" :maxlength="30" placeholder="请输入货位号(最多30个字符)"/>
  7. </u-form-item>
  8. <u-form-item label="绑定产品" v-show="type=='add'">
  9. <view style="flex-grow: 1;" v-if="productEntity&&productEntity.code" @click="toBindProduct">
  10. {{productEntity&&productEntity.code}}
  11. </view>
  12. <view style="flex-grow: 1;color: #c3c9ce;" @click="toBindProduct" v-else>
  13. 请输入产品编码搜索
  14. </view>
  15. <u-icon name="arrow-right" color="#999" @click="toBindProduct"></u-icon>
  16. </u-form-item>
  17. <u-form-item label="" v-show="productEntity">
  18. <view class="flex align_center">
  19. <view class="pimgs">
  20. <u-image :src="productEntity&&productEntity.productMsg?productEntity.productMsg:`../../static/${$config('themePath')}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  21. </view>
  22. <view class="pinfo flex_1">
  23. <view class="pname">
  24. {{productEntity&&productEntity.name}}
  25. </view>
  26. <view class="ptxt">
  27. <text class="pcode" @click="clearBind">解除绑定</text>
  28. </view>
  29. </view>
  30. </view>
  31. </u-form-item>
  32. <u-form-item label="销售价(元)" v-if="productEntity" required prop="price">
  33. <u-input clearable type="number" :min="0" @input="numberToFixed('price',2,999999)" v-model="form.price" placeholder="请输入销售价,最多两位小数"/>
  34. </u-form-item>
  35. <u-form-item label="结算价(元)" v-if="productEntity" required prop="cost">
  36. <u-input clearable type="number" :min="0" @input="numberToFixed('cost',2,999999)" v-model="form.cost" placeholder="请输入结算价,最多两位小数"/>
  37. </u-form-item>
  38. <u-form-item label="最大库容(件)" v-if="productEntity" required prop="maxQty">
  39. <u-number-box :min="0" :max="999999" positive-integer v-model="form.maxQty" color="#000" bg-color="#fff" size="30" :input-height="70" :input-width="150"></u-number-box>
  40. </u-form-item>
  41. </u-form>
  42. </view>
  43. <view class="footer-btn">
  44. <u-button class="newbtn" :loading='loading' @click="formSubmit" type='primary' shape="circle" size="medium">保存</u-button>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. import { clzConfirm, numberToFixed } from '@/libs/tools';
  50. import { addPlaceAndProduct } from '@/api/shelf'
  51. export default {
  52. data() {
  53. return {
  54. form: {
  55. shelfPlaceCode: '', // 货位号
  56. productSn: undefined,
  57. productCode: undefined,
  58. price: '', // 销售价
  59. cost: '', //结算价
  60. maxQty: 1, // 最大库容
  61. },
  62. rules: {
  63. shelfPlaceCode:[
  64. { required: true, message: '请输入货位号', trigger: 'change' },
  65. {
  66. pattern: /^[a-zA-Z]{1}(?![a-zA-Z]+$)[a-zA-Z0-9]{1,29}$/g,
  67. message: '必需包含字母或数字,且首字符不能是数字'
  68. }
  69. ],
  70. price: [{ required: true,type:'number', message: '请输入销售价', trigger: 'change' }],
  71. cost: [{ required: true,type:'number', message: '请输入结算价', trigger: 'change' }],
  72. maxQty: [{ required: true,type:'number', message: '请输入最大库容', trigger: 'change' }],
  73. },
  74. productEntity: null,
  75. customerSn: null,
  76. shelfSn: null,
  77. loading: false,
  78. type:""
  79. }
  80. },
  81. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  82. onReady() {
  83. this.$refs.uForm.setRules(this.rules);
  84. },
  85. onLoad(opts) {
  86. const _this = this
  87. this.nowData = JSON.parse(decodeURIComponent(opts.detailData));
  88. this.customerSn = this.nowData.customerSn
  89. this.shelfSn = this.nowData.shelfSn
  90. this.type = opts.type
  91. this.form.shelfPlaceCode = opts.shelfPlaceCode||''
  92. // 选在产品
  93. uni.$on('addProductToHw',function(data){
  94. console.log(data)
  95. _this.productEntity = data
  96. _this.form.price = Number(data.price)
  97. _this.form.cost = Number(data.cost)
  98. _this.form.productCode = data.code
  99. _this.form.productSn = data.productSn
  100. })
  101. if(this.type == 'edit'){
  102. uni.setNavigationBarTitle({
  103. title: "编辑货位号"
  104. })
  105. }
  106. },
  107. onUnload(){
  108. if(this.type == 'add'){
  109. uni.$off("addProductToHw")
  110. }
  111. },
  112. methods: {
  113. // 小数点后两位
  114. numberToFixed: function (key, num, max) {
  115. let val = this.form[key]
  116. let ret = numberToFixed(val, num, max)
  117. this.$nextTick(() => {
  118. this.form[key] = ret < 0 ? 0 : ret
  119. })
  120. },
  121. // 解除绑定
  122. clearBind(){
  123. this.productEntity = null
  124. this.form.price = ''
  125. this.form.cost = ''
  126. this.form.productCode = undefined
  127. this.form.productSn = undefined
  128. this.form.maxQty = 1
  129. },
  130. // 表单提交
  131. formSubmit(){
  132. const _this = this
  133. this.$refs.uForm.validate(valid => {
  134. if (valid) {
  135. const params = {}
  136. const form = JSON.parse(JSON.stringify(_this.form))
  137. params.shelfSn = _this.nowData && _this.nowData.shelfSn
  138. params.shelfPlaceCode = form.shelfPlaceCode
  139. if (this.type == 'edit') {
  140. params.id = this.nowData.id
  141. }
  142. // 绑定了产品
  143. if (form.productSn) {
  144. params.shelfProductApiEntity = {
  145. productSn: form.productSn,
  146. productCode: form.productCode,
  147. price: form.price,
  148. cost: form.cost,
  149. maxQty: form.maxQty
  150. }
  151. }
  152. // 开始提交数据
  153. _this.loading = true
  154. addPlaceAndProduct(params).then(res => {
  155. if (res.status == 200) {
  156. uni.$emit("updateHw")
  157. uni.$emit("updateHwNo",params.shelfPlaceCode)
  158. uni.navigateBack()
  159. }
  160. _this.loading = false
  161. })
  162. } else {
  163. console.log('验证失败');
  164. }
  165. });
  166. },
  167. toBindProduct(){
  168. uni.navigateTo({
  169. url: "/pages/shelfSetting/bindProduct?customerSn="+this.customerSn+"&shelfSn="+this.shelfSn
  170. })
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="less">
  176. .content{
  177. height: 100vh;
  178. width: 100%;
  179. .form-body{
  180. flex-grow: 1;
  181. > view{
  182. background-color: #fff;
  183. padding: 0 1.5rem;
  184. }
  185. .pimgs{
  186. padding:0.1rem;
  187. background:#f8f8f8;
  188. border-radius:0.3rem;
  189. }
  190. .pinfo{
  191. line-height:normal;
  192. padding-left: 20rpx;
  193. color: #666;
  194. .ptxt{
  195. padding-top:10rpx;
  196. }
  197. .pcode{
  198. color:red;
  199. }
  200. .pname{
  201. font-weight: bold;
  202. }
  203. }
  204. }
  205. .footer-btn{
  206. padding: 0.5rem 2rem;
  207. .newbtn{
  208. width: 100%;
  209. background-color: rgb(51, 95, 182);
  210. color: #fff;
  211. }
  212. }
  213. }
  214. </style>