aiot-app/pages/warehouse/inventory/components/screen.vue

<template>
  <view>
    <u-popup :show="show" closeOnClickOverlay mode="right" @close="closePopup">
      <view class="main">
        <view class="title-t1" @click="closePopup"> 返回 </view>
        <view class="title-t2"> 列表维度 </view>
        <listOption
          label="name"
          value="type"
          :list="option.dimension"
          v-model="form.dimension"
        ></listOption>
        <view class="title-t2"> 资产类型 </view>
        <listOption
          label="name"
          value="type"
          :list="option.code"
          v-model="form.code"
        ></listOption>
        <view class="title-t2"> 所属仓库 </view>
        <listOption_line
          label="name"
          value="id"
          :list="option.warehouseId"
          v-model="form.warehouseId"
        ></listOption_line>
      </view>
      <view class="flex-buttom">
        <view class="s1 item" @click="reset"> 重置 </view>
        <view class="s2 item" @click="submit"> 筛选 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import listOption from './listOption'
import listOption_line from './listOption_line'
import { post, get } from '@/utils/api.js'
export default {
  components: {
    listOption,
    listOption_line
  },
  props: ['dimension', 'code', 'warehouseId'],
  data () {
    return {
      infoData: '',
      show: false,
      form: {
        // 列表维度
        dimension: 1,
        /* 资产类型 */
        code: '',
        /* 所属仓库 */
        warehouseId: ''
      },
      option: {
        dimension: [
          {
            name: '物品维度',
            type: 1
          },
          {
            name: '批次维度',
            type: 2
          }
        ],
        code: [],
        warehouseId: []
      }
    }
  },
  created () {
    this.getwarehouseList()
    this.getClassify()
  },
  methods: {
    open () {
      this.show = true
      for (let key of Object.keys(this.form)) {
        this.form[key] = this[key]
      }
    },
    closePopup () {
      this.show = false
    },
    reset () {
      this.form.code = this.option.code[0].type
      this.form.warehouseId = ''
    },
    submit () {
      this.$emit('succeed', this.form)
      this.closePopup()
    },
    //获取仓库
    getwarehouseList () {
      post(this.apiUrl + '/warehouseGoodsshelves/select/warehouseList').then(
        res => {
          if (res.success) {
            this.option.warehouseId = res.data
              .filter(i => !i.isDelete && !!i.status)
              .map(n => {
                return {
                  name: n.name,
                  id: n.id
                }
              })
          }
        }
      )
    },
    // 获取资产类型
    getClassify () {
      get(this.apiUrl + '/classify/getClassify?id=0').then(res => {
        if (res.success) {
          this.option.code = res.data.map(n => {
            return {
              name: n.name,
              type: n.type
            }
          })

          this.form.code = this.option.code[0].type
          this.submit()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 600rpx;
  position: relative;
  padding-bottom: 80rpx;
}
.title-t1 {
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx;
}
.title-t2 {
  font-size: 28rpx;
  font-weight: bold;
  padding: 20rpx 30rpx;
}
.flex-buttom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background-color: #fff;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.0901960784313725);
  .item {
    flex: 1;
    height: 80rpx;
    color: #157a2c;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &.s2 {
      background-color: #157a2c;
      color: #fff;
    }
  }
}
</style>