123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- <template>
- <u-mask class="productModal" :show="isShow" :mask-click-able="false">
- <view class="product-con">
- <view class="product-main">
- <view class="list-item-tit">
- <view class="item-tit ellipsis-one" :style="{borderColor: $config('primaryColor')}">{{infoData && infoData.productName}}</view>
- </view>
- <view class="list-item-con flex align_center justify_between">
- <view class="pimgs">
- <u-image :src="infoData && infoData.productMainImage?infoData.productMainImage:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image>
- </view>
- <view class="flex_1">
- <view>产品编码:{{infoData && infoData.productCode || '--'}}</view>
- <view class="padding_3">原厂编码:{{infoData && infoData.productOrigCode || '--'}}</view>
- <view v-if="infoData && (infoData.warehouseName || infoData.warehouseLocationName)">仓库仓位:{{infoData && infoData.warehouseName}} > {{infoData && infoData.warehouseLocationName}}</view>
- </view>
- </view>
- <u-form class="form-content" :model="form" :error-type="['toast']" ref="uForm" label-width="180">
- <u-form-item label="销售单价" required prop="price">
- <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;" />元
- </u-form-item>
- <u-form-item label="销售数量" required prop="qty">
- <view style="text-align: right;width: 100%;">
- <u-number-box class="form-item" input-height="60" v-model="form.qty" :min="1" :max="999999" @change="numChange"></u-number-box>
- </view>
- </u-form-item>
- </u-form>
- </view>
- <view class="product-footer">
- <view class="button-cancel" @click="isShow=false">取消</view>
- <view class="button-confirm" @click="handleConfirm">确定</view>
- </view>
- </view>
- </u-mask>
- </template>
- <script>
- import { numberToFixed } from '@/libs/tools'
- export default {
- props: {
- openModal: { // 弹框显示状态
- type: Boolean,
- default: false
- },
- infoData: {
- tyoe: Object,
- default: ()=>{
- return null
- }
- },
- },
- data() {
- return {
- isShow: this.openModal, // 是否打开弹框
- theme: '',
- form: {
- price: null,
- qty: 1,
- },
- rules: {
- price: [ { required: true, type: 'number', message: '请输入销售单价', trigger: ['change','blur'] } ],
- qty: [ { required: true, type: 'number', message: '请输入销售数量', trigger: 'blur' } ]
- },
- }
- },
- mounted() {
- this.$refs.uForm.setRules(this.rules)
- this.theme = getApp({ allowDefault: true }).globalData.theme
- },
- methods: {
- // 确认
- handleConfirm(){
- console.log(this.form)
- this.$refs.uForm.validate(valid => {
- if (valid) {
- console.log('验证通过')
- this.$emit('confirm', this.form)
- } else {
- console.log('验证失败')
- }
- })
- },
- // 小数点后两位
- numberToFixed: function (key, num, max) {
- let val = this.form[key]
- let ret = numberToFixed(val, num, max)
- this.$nextTick(() => {
- this.form[key] = ret
- })
- },
- numChange(val){
- if (val.value < 1){
- this.$nextTick(() => {
- this.form.qty = 0
- })
- } else if (val.value > 999999){
- this.$nextTick(() => {
- this.form.qty = 999999
- })
- }else{
- this.form.qty = Number(val.value)
- }
- },
- },
- watch: {
- // 父页面传过来的弹框状态
- openModal (newValue, oldValue) {
- this.isShow = newValue
- },
- // 重定义的弹框状态
- isShow (newValue, oldValue) {
- if (!newValue) {
- this.$emit('close')
- }else{
- this.form.price = this.infoData && this.infoData.price || null
- this.form.qty = this.infoData && this.infoData.qty || 1
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .productModal{
- width: 100%;
- height: 100%;
- .text-c{
- text-align: center;
- }
- .padding_3{
- padding: 6upx 0;
- }
- .product-con{
- width: 78%;
- margin: 45% auto 0;
- background-color: #fff;
- border-radius: 24upx;
- .product-main{
- padding: 20upx 30upx 0;
- .list-item-tit{
- padding-bottom: 12upx;
- border-bottom: 1px solid #e4e7ed;
- .item-tit{
- font-weight: bold;
- color: rgb(48, 49, 51);
- font-size: 28upx;
- padding-left: 10upx;
- border-left: 6upx solid #000;
- line-height: 1;
- }
- }
- .list-item-con{
- padding: 14upx 0 16upx;
- font-size: 26upx;
- .pimgs{
- margin-right: 16upx;
- }
- }
- .form-content{
- border-top: 1px dashed #e4e7ed;
- .form-item{
- text-align: right;
- }
- }
- }
- .product-footer{
- font-size: 30upx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- text-align: center;
- border-top: 1upx solid #E5E5E5;
- .button-cancel{
- color: #999;
- border-right: 1upx solid #E5E5E5;
- flex-grow: 1;
- padding: 20upx 0;
- }
- .button-confirm{
- color: #2A86F4;
- flex-grow: 1;
- padding: 20upx 0;
- }
- }
- }
- }
- </style>
|