小程序

Mr.Zhang

2023-09-06 a89fe32c353040bbb95d7519cf7bafc4b5934f10

 minipro_standard/pages_adjust/pages/newOutbound/newOutbound.vue

@@ -1,19 +1,380 @@
<template>
   <view>
		
   <view class="rework">
      <view class="rework_list">
         <view class="rework_list_item" @click="typeShow = true">
            <text>单据类型<text style="color: #DE5243;">*</text></text>
            <view class="rework_list_item_right">
               <text :class="form.typeName ? 'black' : ''">{{form.typeName ? form.typeName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#999999"></u-icon>
            </view>
         </view>
         <view class="rework_list_item" @click="warehouseShow = true">
            <text>出库仓库<text style="color: #DE5243;">*</text></text>
            <view class="rework_list_item_right">
               <text :class="form.warehouseName ? 'black' : ''">{{form.warehouseName ? form.warehouseName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#999999"></u-icon>
            </view>
         </view>
      </view>
      <view class="rework_qd">
         <view class="rework_qd_title">
            <view class="rework_qd_title_left">
               <view class="x"></view>
               <!-- ${list.length} -->
               <text>{{`出库物料清单`}}</text>
            </view>
            <!-- <view class="rework_qd_title_right" @click="openMs">
               <image src="@/static/gongdan_ic_shoudong@2x.png" mode="widthFix" />
               <text>增加出库</text>
            </view> -->
         </view>
         <van-swipe-cell v-for="(item, index) in list" :key="index">
            <view class="rework_qd_item">
               <image class="rework_qd_item_dele" @click="dele(index)" src="@/static/chuku_ic_delete@2x.png" mode="widthFix" />
               <view class="rework_qd_item_wl">
                  <text>{{ item.materialName }} | {{ item.materialCode }}</text>
               </view>
               <view class="rework_qd_item_cate">
                  <text class="green" v-if="item.qualityType === '0'">合格</text>
                  <text class="yellow" v-if="item.qualityType === '1'">不良</text>
                  <text class="red" v-if="item.qualityType === '2'">报废</text>
                  <text>&nbsp;|&nbsp;{{ item.procedureName || '-' }}&nbsp;|&nbsp;</text>
                  <text>{{ item.batch || '-' }}</text>
               </view>
               <view class="rework_qd_item_hw">
                  <text>出库货位：{{ item.locationName }}</text>
                  <view class="rework_qd_item_hw_right">
                     <text>数量：</text>
                     <u--input :customStyle="{width: '180rpx'}" placeholder="0" border="surround" type="number" v-model="item.num" @input="changeNum(item)"></u--input>
                     <text>{{ item.unitName }}</text>
                  </view>
               </view>
            </view>
         </van-swipe-cell>
      </view>
      <view class="rework_zw"></view>
      <view class="rework_footer">
         <button class="rework_footer_add" @click="openMs">选择物料</button>
         <button class="rework_footer_submit" @click="onConfirm">提交</button>
      </view>
      <!-- 选择仓库 -->
      <Warehouse :show="warehouseShow" @close="close" @value="getValue" />
      <!-- 选择物料 -->
      <SelectMultipleMaterial ref="SelectMultipleMaterial" />
      <!-- 单据类型 -->
      <u-picker :show="typeShow" :columns="columns" @cancel="typeShow = false" @confirm="onConfirm1" keyName="name"></u-picker>
   </view>
</template>

<script>
   import Warehouse from '../../components/Warehouse.vue'
   import SelectMultipleMaterial from '@/components/SelectMultipleMaterial.vue'
   export default {
      components: { Warehouse, SelectMultipleMaterial },
      data() {
         return {
				
            form: {
               warehouseName: '',
               warehouseId: '',
               type: '',
               typeName: ''
            },
            columns: [
               [
                  { name: '销售出库', id: 18 },
                  { name: '库存调整', id: 28 },
                  { name: '仓库报废', id: 21 }
               ]
            ],
            typeShow: false,
            warehouseShow: false,
            list: []
         };
      },
      methods: {
         changeNum(obj) {
            if (obj.num < 0) {
               obj.num = ''
               return uni.showToast({ title: '出库物料数量必须大于0', icon: 'none', duration: 2000 });
            }
            if (obj.num > obj.total) {
               obj.num = ''
               return uni.showToast({ title: '出库物料数量不能大于库存数！', icon: 'none', duration: 2000 });
            }
         },
         // 选择仓库回调
         getValue(item) {
            this.form.warehouseName = item.name
            this.form.warehouseId = item.id || 1
            this.list = []
            this.warehouseShow = false
         },
         // 单据类型确认
         onConfirm1(value) {
            this.form.typeName = value.value[0].name
            this.form.type = value.value[0].id
            this.typeShow = false
         },
         // 关闭仓库选择弹框
         close() {
            this.warehouseShow = false
         },
         // 删除
         dele(index) {
            if (this.list.length === 1) {
               uni.showToast({ title: '至少保留一条物流清单信息！', icon: 'none', duration: 2000 });
               return
            }
            this.list.splice(index, 1)
         },
         // 打开选择物料
         openMs() {
            if (!this.form.warehouseId) return uni.showToast({ title: '请先选择出库仓库', icon: 'none', duration: 2000 });
            this.$refs.SelectMultipleMaterial.open({})
         },
         // 获取当天年月日
         getDay() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            return `${year}-${month <= 9 ? `0${month}` : month}-${day <= 9 ? `0${day}` : day}`
         },
         // 提交
         onConfirm() {
            if (!this.form.type) return uni.showToast({ title: '请选择单据类型', icon: 'none', duration: 2000 });
            if (!this.form.warehouseId) return uni.showToast({ title: '请选择出库仓库', icon: 'none', duration: 2000 });
            if (this.list.length === 0) return uni.showToast({ title: '至少选择一条出库物料', icon: 'none', duration: 2000 });
            for (let i = 0; i < this.list.length; i++) {
               if (!this.list[i].num || this.list[i].num == '' || this.list[i].num <= 0) {
                  return uni.showToast({ title: `第${i + 1}个出库物料数量必须大于0`, icon: 'none', duration: 2000 });
               }
               if (this.list[i].num > this.list[i].total) {
                  return uni.showToast({ title: `第${i + 1}个物料数量不能大于库存量！`, icon: 'none', duration: 2000 });
               }
            }
            createForStandard({
               billType: this.form.type,
               planDate: this.getDay(),
               origin: 0,
               type: 0,
               warehouseId: this.form.warehouseId,
               woutBoundDetailBeans: this.list
            }).then(res => {
               if (res.code === 200) {
                  uni.showToast({ title: '出库成功', icon: 'none', duration: 2000 });
                  setTimeout(() => {
                     uni.navigateBack({ delta: 1 });
                  }, 2000)
               }
            })
         }
      }
   }
</script>

<style lang="scss">

</style>
<style lang="scss" scoped>
   .rework {
      width: 100%;
      .rework_list {
         display: flex;
         flex-direction: column;
         background: white;
         padding: 0 30rpx;
         box-sizing: border-box;
         .rework_list_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 98rpx;
            border-bottom: 1rpx solid #E5E5E5;
            &:last-child {
               border: none;
            }
            text {
               font-size: 30rpx;
               font-weight: 400;
               color: #222222;
               flex-shrink: 0;
               b {
                  font-size: 30rpx;
                  color: red;
                  margin-right: 5rpx;
               }
            }
            .rework_list_item_right {
               display: flex;
               align-items: center;
               text {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #999999;
               }
               .black {
                  color: black !important;
               }
               input {
                  width: 230rpx;
                  font-size: 28rpx;
                  border: none;
               }
               input::-webkit-input-placeholder { /* WebKit browsers */
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #B2B2B2;
               }
            }
         }
      }
      .rework_qd {
         margin-top: 40rpx;
         .rework_qd_title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30rpx 30rpx 30rpx;
            .rework_qd_title_left {
               display: flex;
               align-items: center;
               text {
                  font-size: 32rpx;
                  font-weight: 500;
                  color: #222222;
               }
               .x {
                  width: 8rpx;
                  height: 30rpx;
                  background: #4275FC;
                  border-radius: 2rpx;
                  margin-right: 12rpx;
               }
            }
            .rework_qd_title_right {
               display: flex;
               align-items: center;
               image {
                  width: 28rpx;
                  height: 28rpx;
                  margin-right: 12rpx;
               }
               text {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #4275FC;
               }
            }
         }
         .rework_qd_item {
            background: #ffffff;
            padding: 30rpx;
            display: flex;
            flex-direction: column;
            margin-bottom: 30rpx;
            position: relative;
            .rework_qd_item_dele {
               position: absolute;
               right: 0;
               top: 0;
               width: 48rpx;
               height: 48rpx;
            }
            .rework_qd_item_wl {
               text {
                  font-size: 30rpx;
                  font-family: PingFangSC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #222222;
               }
            }
            .rework_qd_item_cate {
               margin-top: 18rpx;
               text {
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
               }
            }
            .rework_qd_item_hw {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               margin-top: 24rpx;
               text {
                  font-size: 26rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #333333;
               }
               .rework_qd_item_hw_right {
                  display: flex;
                  align-items: center;
                  text {
                     font-size: 26rpx;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #666666;
                  }
                  input {
                     width: 180rpx;
                     height: 60rpx;
                     font-size: 28rpx;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #333333;
                     background: #FFFFFF;
                     border-radius: 8rpx;
                     border: 1rpx solid #CCCCCC;
                     margin: 0 20rpx;
                     padding: 0 30rpx;
                     box-sizing: border-box;
                     text-align: right;
                  }
               }
            }
         }
      }
      .rework_zw {
         height: 168rpx;
      }
      .rework_footer {
         width: calc(100% - 60rpx);
         position: fixed;
         bottom: 0;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 0 30rpx 68rpx 30rpx;
         .rework_footer_add {
            flex: 1;
            height: 88rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: $nav-color;
            background: #FFFFFF;
            box-shadow: 0 0 12rpx 0 rgba(0,0,0,0.0800);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
         }
         .rework_footer_submit {
            flex: 1;
            height: 88rpx;
            font-size: 30rpx;
            font-weight: 500;
            color: #ffffff;
            background: $nav-color;
            box-shadow: 0 0 12rpx 0 rgba(0,0,0,0.0800);
            border-radius: 8rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            margin-left: 22rpx;
         }
      }
   }
</style>