mobile/src/components/low-code/DEVICE_IN_TABLE.vue

<template>
  <view class="device-in-table">
    <view class="head flex justify-between items-center">
      <view class="title">设备入库时间</view>
    </view>
    <u-input v-model="inOutTime" type="select" :border="true" placeholder="请选择入库时间" @click="show = true" />

    <u-calendar v-model="show" mode="date" @change="change"></u-calendar>
    <view class="head flex justify-between items-center m-t-24rpx">
      <view class="title">设备入库登记</view>
      <u-button type="primary" plain @click="open" size="mini">新增</u-button>
    </view>

    <u-popup v-model="showPopup" mode="bottom" :mask-close-able="false" :closeable="true" :border-radius="28">
      <view class="form-box">
        <view class="f-item">
          <view class="label">
            <text class="red">*</text>
            <text class="text">设备编号</text>
            <u-input v-model="deviceStr" type="select" :border="true" placeholder="请选择设备" @click="showSelect1 = true" />

            <u-select v-model="showSelect1" :list="deviceList" @confirm="confirm"></u-select>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import { deviceCanIn } from '@/api/sop'
  export default {
    name: 'DEVICEINTABLE',
    computed: {
      deviceStr() {
        return this.deviceList.find((item) => item.value == this.deviceItemInfo.deviceNo)?.label || ''
      }
    },
    data() {
      return {
        inOutTime: '',
        list: [],
        show: false,
        showPopup: false,
        showSelect1: false,
        deviceList: [],
        deviceItemInfo: {
          deviceNo: '', //设备编号
          deviceModel: '',
          supplierName: '', //供应商
          deviceStatus: '', //运行状态
          scanCount: '', //总扫描量
          location: '', //当前所在地
          address: '', //发往地
          basePhotoPath: '' //拍照
        }
      }
    },
    mounted() {
      deviceCanIn().then((res) => {
        res = [
          {
            deviceNo: 1,
            deviceModel: '周大福',
            supplierName: '似懂非懂',
            deviceStatus: 'NORMAL',
            scanCount: 20,
            location: '武汉',
            address: '北京',
            basePhotoPath: ''
          }
        ]
        this.deviceList = res.map((item) => {
          item.value = item.deviceNo
          item.label = item.deviceModel
          return item
        })
      })
    },
    methods: {
      open() {
        this.showPopup = true
      },
      add() {
        // this.list.push({
        //   deviceNo: '', //设备编号
        //   supplierName: '', //供应商
        //   deviceStatus: '', //运行状态
        //   scanCount: '', //总扫描量
        //   location: '', //当前所在地
        //   address: '', //发往地
        //   basePhotoPath: '' //拍照
        // })
      },
      change(obj) {
        this.inOutTime = obj.result
      },
      confirm(arr) {
        this.deviceItemInfo.deviceNo = arr[0].value
      }
    }
  }
</script>

<style lang="scss" scoped>
  .device-in-table {
    .form-box {
      padding: 24rpx;
      padding-top: 80rpx;
    }
    .head {
      .title {
        color: #595959;
        font-size: 28rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>