productModal.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <u-mask class="productModal" :show="isShow" :mask-click-able="false">
  3. <view class="product-con">
  4. <view class="product-main">
  5. <view class="list-item-tit">
  6. <view class="item-tit ellipsis-one" :style="{borderColor: $config('primaryColor')}">{{infoData && infoData.productName}}</view>
  7. </view>
  8. <view class="list-item-con flex align_center justify_between">
  9. <view class="pimgs">
  10. <u-image :src="infoData && infoData.productMainImage?infoData.productMainImage:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
  11. </view>
  12. <view class="flex_1">
  13. <view>产品编码:{{infoData && infoData.productCode || '--'}}</view>
  14. <view class="padding_3">原厂编码:{{infoData && infoData.productOrigCode || '--'}}</view>
  15. <view v-if="infoData && (infoData.warehouseName || infoData.warehouseLocationName)">仓库仓位:{{infoData && infoData.warehouseName}} > {{infoData && infoData.warehouseLocationName}}</view>
  16. </view>
  17. </view>
  18. <u-form class="form-content" :model="form" :error-type="['toast']" ref="uForm" label-width="180">
  19. <u-form-item label="销售单价" required prop="price">
  20. <u-input class="form-item" v-model="form.price" @input="numberToFixed('price',2,999999)" placeholder="请输入销售单价" :clearable="false" type="digit" input-align="right" style="margin-right: 8upx;" />元
  21. </u-form-item>
  22. <u-form-item label="销售数量" required prop="qty">
  23. <view style="text-align: right;width: 100%;">
  24. <u-number-box class="form-item" input-height="60" v-model="form.qty" :min="1" :max="999999" @change="numChange"></u-number-box>
  25. </view>
  26. </u-form-item>
  27. </u-form>
  28. </view>
  29. <view class="product-footer">
  30. <view class="button-cancel" @click="isShow=false">取消</view>
  31. <view class="button-confirm" @click="handleConfirm">确定</view>
  32. </view>
  33. </view>
  34. </u-mask>
  35. </template>
  36. <script>
  37. import { numberToFixed } from '@/libs/tools'
  38. export default {
  39. props: {
  40. openModal: { // 弹框显示状态
  41. type: Boolean,
  42. default: false
  43. },
  44. infoData: {
  45. tyoe: Object,
  46. default: ()=>{
  47. return null
  48. }
  49. },
  50. },
  51. data() {
  52. return {
  53. isShow: this.openModal, // 是否打开弹框
  54. theme: '',
  55. form: {
  56. price: null,
  57. qty: 1,
  58. },
  59. rules: {
  60. price: [ { required: true, type: 'number', message: '请输入销售单价', trigger: ['change','blur'] } ],
  61. qty: [ { required: true, type: 'number', message: '请输入销售数量', trigger: 'blur' } ]
  62. },
  63. }
  64. },
  65. mounted() {
  66. this.$refs.uForm.setRules(this.rules)
  67. this.theme = getApp({ allowDefault: true }).globalData.theme
  68. },
  69. methods: {
  70. // 确认
  71. handleConfirm(){
  72. console.log(this.form)
  73. this.$refs.uForm.validate(valid => {
  74. if (valid) {
  75. console.log('验证通过')
  76. this.$emit('confirm', this.form)
  77. } else {
  78. console.log('验证失败')
  79. }
  80. })
  81. },
  82. // 小数点后两位
  83. numberToFixed: function (key, num, max) {
  84. let val = this.form[key]
  85. let ret = numberToFixed(val, num, max)
  86. this.$nextTick(() => {
  87. this.form[key] = ret
  88. })
  89. },
  90. numChange(val){
  91. if (val.value < 1){
  92. this.$nextTick(() => {
  93. this.form.qty = 0
  94. })
  95. } else if (val.value > 999999){
  96. this.$nextTick(() => {
  97. this.form.qty = 999999
  98. })
  99. }else{
  100. this.form.qty = Number(val.value)
  101. }
  102. },
  103. },
  104. watch: {
  105. // 父页面传过来的弹框状态
  106. openModal (newValue, oldValue) {
  107. this.isShow = newValue
  108. },
  109. // 重定义的弹框状态
  110. isShow (newValue, oldValue) {
  111. if (!newValue) {
  112. this.$emit('close')
  113. }else{
  114. this.form.price = this.infoData && this.infoData.price || null
  115. this.form.qty = this.infoData && this.infoData.qty || 1
  116. }
  117. }
  118. }
  119. }
  120. </script>
  121. <style lang="scss" scoped>
  122. .productModal{
  123. width: 100%;
  124. height: 100%;
  125. .text-c{
  126. text-align: center;
  127. }
  128. .padding_3{
  129. padding: 6upx 0;
  130. }
  131. .product-con{
  132. width: 78%;
  133. margin: 45% auto 0;
  134. background-color: #fff;
  135. border-radius: 24upx;
  136. .product-main{
  137. padding: 20upx 30upx 0;
  138. .list-item-tit{
  139. padding-bottom: 12upx;
  140. border-bottom: 1px solid #e4e7ed;
  141. .item-tit{
  142. font-weight: bold;
  143. color: rgb(48, 49, 51);
  144. font-size: 28upx;
  145. padding-left: 10upx;
  146. border-left: 6upx solid #000;
  147. line-height: 1;
  148. }
  149. }
  150. .list-item-con{
  151. padding: 14upx 0 16upx;
  152. font-size: 26upx;
  153. .pimgs{
  154. margin-right: 16upx;
  155. }
  156. }
  157. .form-content{
  158. border-top: 1px dashed #e4e7ed;
  159. .form-item{
  160. text-align: right;
  161. }
  162. }
  163. }
  164. .product-footer{
  165. font-size: 30upx;
  166. display: flex;
  167. justify-content: space-between;
  168. align-items: center;
  169. text-align: center;
  170. border-top: 1upx solid #E5E5E5;
  171. .button-cancel{
  172. color: #999;
  173. border-right: 1upx solid #E5E5E5;
  174. flex-grow: 1;
  175. padding: 20upx 0;
  176. }
  177. .button-confirm{
  178. color: #2A86F4;
  179. flex-grow: 1;
  180. padding: 20upx 0;
  181. }
  182. }
  183. }
  184. }
  185. </style>