aiot-app/pages/warehouse/inventoryAllocation/components/search.vue

<template>
  <view>
    <u-popup :show="show" closeOnClickOverlay mode="right" @close="closePopup">
      <view class="popupBox">
        <view class="popupCent">
          <view class="tit">筛选</view>
          <view class="itemBox">
            <view class="tit">创建时间</view>
            <uni-datetime-picker
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              class="datetimeBox"
              v-model="popupInfo.range"
              type="daterange"
              :clear-icon="true"
              @maskClick="maskClick"
            />
          </view>
          <view class="itemBox" v-show="typeIndex == 1">
            <view class="tit">单据名称</view>
            <view class="putBox"
              ><input v-model="popupInfo.name" placeholder="请输入单据名称"
            /></view>
          </view>
          <view class="itemBox">
            <view class="tit">单据编码</view>
            <view class="putBox"
              ><input v-model="popupInfo.code" placeholder="请输入单据编码"
            /></view>
          </view>
          <view class="itemBox" v-show="typeIndex == 0">
            <view class="tit">台账类型</view>
            <view class="putBox"
              ><input v-model="popupInfo.type" placeholder="请输入台账类型"
            /></view>
          </view>
        </view>
        <view class="footerBtn" @click="getFilter">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getDate } from '@/utils/utils.js'
export default {
  name: 'getsearch',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    typeIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      typeList: [
        {
          id: 1,
          name: '物料台账'
        },
        {
          id: 2,
          name: '设备台账'
        }
      ],
      popupInfo: {
        range: ['', ''], //日期范围
        code: '', //单号
        type: ''
      }
    }
  },
  onShow () {},

  methods: {
    //验证
    getFilter () {
      /*
				//必填验证
				if(!this.popupInfo.code){
					uni.showToast({
						icon:"none",
						title: '请输入单据编码'
					});
				    return;	
				}
			   */
      this.$emit('closePopup')
      this.$emit('getPopupInfo', this.popupInfo)
    },
    //关闭窗口
    closePopup () {
      this.$emit('closePopup')
    },
    //时间点击
    maskClick (e) {
      console.log('maskClick事件:', e)
    }
  }
}
</script>

<style lang="scss" scoped>
/*右弹层*/
.popupBox {
  width: calc(100vw - 20vw);
  position: relative;

  .popupCent {
    padding: 20rpx 40rpx 120rpx 40rpx;
    height: calc(100vh - 100rpx);
    overflow-y: auto;
  }

  .tit {
    font-weight: bold;
  }

  .itemBox {
    margin: 40rpx 0;

    .tit {
      font-size: 28rpx;
    }

    .datetimeBox {
      margin-top: 20rpx;
    }

    /deep/ .uni-date-x--border {
      border: none !important;

      .uni-date-range {
        background: #f2f2f2 !important;
        border-radius: 60rpx;
      }
    }

    .putBox {
      margin-top: 20rpx;

      input {
        height: 74rpx;
        line-height: 74rpx;
        border-radius: 60rpx;
        background: #f2f2f2 !important;
        padding: 0 40rpx;
        font-size: 28rpx;
      }
    }

    .tagsBox {
      margin-top: 20rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      view {
        width: 30%;
        height: 60rpx;
        line-height: 60rpx;
        margin-bottom: 20rpx;
        background: #f2f2f2;
        text-align: center;
        border-radius: 60rpx;
        font-size: 28rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      view.on {
        background: $u-success-dark;
        color: #fff;
      }

      view.col2 {
        width: 47.5% !important;
      }
    }
  }

  .footerBtn {
    position: absolute;
    bottom: 40rpx;
    left: 0;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background: $u-success-dark;
  }
}
</style>