CVDEMCSUI/src-cordova/mobile/demo/warehouse.vue

<template>
  <q-card class="shadow-11" :style="{ height: container_height }">
    <div class="q-gutter-y-md" style="width: 100%;">

      <div style="margin-top:20px;">
        <q-select dense outlined use-input v-model="warehouseId" :options="warehouseList" @filter="filterWarehouse"
          option-label="warehouseName" option-value="id" emit-value map-options label="请选择工厂" />
      </div>
      <div style="margin-top:10px;">
        <q-select dense outlined use-input v-model="areaId" :options="areaList" @filter="filterArea" @input="changeBin()"
          option-label="areaName" option-value="id" emit-value map-options label="请选择库区" />
      </div>
      <div>
        <template>
          <div class="q-pa-md q-gutter-sm float-left" v-for="(item, index) in binList" :key="index">
            <div v-if="item.emptyLabel == 1">
              <span class="vertical-top" @click="seeDetail(item.id, item.binName, item.binPropertyName)">
                <q-btn style="font-size:10px" text-color="grey-9" color="grey-3" :label="item.binName" />
              </span>
            </div>

            <div v-if="item.emptyLabel == 0">
              <span class="vertical-top" @click="seeDetail(item.id, item.binName, item.binPropertyName)">
                <q-btn style="font-size:10px" color="grey-5" :label="item.binName" />
              </span>
            </div>

          </div>
        </template>
      </div>
      <q-dialog v-model="seeDialog">
        <q-card class="shadow-24" style="max-width:100%">
          <q-bar class="bg-light-blue-10 text-white rounded-borders" style="height: 50px">
            <div>{{ binName + " " + binPropertyName }}</div>
            <q-space />
            <q-btn dense flat icon="close" @click="cancel()">
              <q-tooltip content-class="bg-amber text-black shadow-4">{{ '关闭' }}</q-tooltip>
            </q-btn>
          </q-bar>
          <q-card-section>
            <q-table :style="{
              height: container_height,
              width: $q.screen.width
            }" flat :data="materialList" row-key="id" :separator="separator" :pagination.sync="pagination"
              :loading="loading" :filter="filter" :columns="columns" hide-bottom bordered>
              <template v-slot:body="props">
                <q-tr :props="props">
                  <q-td key="materialsCode" :props="props">{{ props.row.materialsCode }}</q-td>
                  <q-td key="materialsName" :props="props">{{ props.row.materialsName }}</q-td>
                  <q-td key="specsName" :props="props">{{ props.row.specsName }}</q-td>
                  <q-td key="materialsDesc" :props="props">{{ props.row.materialsDesc }}</q-td>
                  <!-- <q-td key="stockStatus" :props="props">
                <dict-tag :options="asnStatusList" :value="props.row.stockStatus"/>
              </q-td> -->
                  <q-td key="packUnit" :props="props">
                    <dict-tag :options="packUnitMap" :value="props.row.packUnit" />
                  </q-td>
                  <q-td key="recordQty" :props="props">{{ props.row.recordQty }}</q-td>
                  <q-td key="recordUnit" :props="props">
                    <dict-tag :options="recordUnitMap" :value="props.row.recordUnit" />
                  </q-td>
                  <q-td key="containerType" :props="props">{{ props.row.containerType == null ? 'N/A' :
                    props.row.containerType }}</q-td>
                  <q-td key="containerId" :props="props">{{ props.row.containerId == null ? 'N/A' :
                    props.row.containerId }}</q-td>
                </q-tr>
              </template>
            </q-table>
          </q-card-section>
        </q-card>
      </q-dialog>
    </div>
  </q-card>
</template>
<router-view />

<script>
import { postauth, getauth, getdictauth } from 'boot/axios_request.js'

export default {
  name: 'PageIndexMobile',
  data() {
    return {
      container_height: (this.$q.screen.height - 50) + '' + 'px',
      pathname: 'binset/',
      tab: '',
      height: '',
      binName: '',
      binPropertyName: '',
      binList: [],
      materialList: [],
      warehouseList: [],
      areaList: [],
      pagination: {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 10,
        rowsNumber: 10
      },
      warehouseId: '',
      areaId: '',
      separator: 'cell',
      loading: false,
      filter: '',
      columns: [
        { name: 'materialsCode', required: true, label: '物料编码', align: 'center', field: 'materialsCode' },
        { name: 'materialsName', label: '物料名称', field: 'materialsName', align: 'center' },
        { name: 'specsName', label: '规格型号', field: 'materialsSpecs', align: 'center' },
        { name: 'materialsDesc', label: '物料描述', field: 'materialsDesc', align: 'center' },
        // { name: 'stockStatus', label: '库存状态', field: 'stockStatus', align: 'center' },
        { name: 'packUnit', label: '包装单位', field: 'packUnitName', align: 'center' },
        { name: 'recordQty', label: '记账数量', field: 'recordQty', align: 'center' },
        { name: 'recordUnit', label: '记账单位', field: 'recordUnit', align: 'center' },
        { name: 'containerType', label: '容器类型', field: 'containerType', align: 'center' },
        { name: 'containerId', label: '容器编号', field: 'containerId', align: 'center' }
      ],
      color: 'primary',
      seeDialog: false
    };
  },
  methods: {
    changeBin() {
      this.getList()
    },
    getList() {
      postauth('binset/list/', { areaId: this.areaId }).then(res => {
        this.binList = res.data
      })
    },
    seeDetail(id, binName, binPropertyName) {
      var _this = this
      postauth('stockMaterialsView/list-all/', { binId: id, stockStatus: 4 }).then(res => {
        this.materialList = res.data
        this.binName = binName
        this.binPropertyName = binPropertyName
      })

      _this.seeDialog = !_this.seeDialog
    },
    cancel() {
      var _this = this
      _this.seeDialog = !_this.seeDialog
    },
    filterWarehouse(val, update, abort) {
      update(() => {
        postauth('warehouse/list/', { warehouseName: val }).then(res => {
          this.warehouseList = res.data
        })
      })
    },
    filterArea(val, update, abort) {
      var _this = this
      update(() => {
        if (_this.warehouseId == '' || _this.warehouseId == null) {
          this.$q.notify({
            message: '请先选择工厂',
            position: 'top',
            icon: 'close',
            color: 'negative'
          })
        } else {
          postauth('area/list/', { warehouseId: _this.warehouseId, areaName: val }).then(res => {
            this.areaList = res.data
          })
        }
      })
    },
  },
  created() {
    var _this = this
    getauth('materialsunit/getUnitList/1/', {}).then(res => {
      _this.packUnitMap = res.data
    })
    getauth('materialsunit/getUnitList/2/', {}).then(res => {
      _this.recordUnitMap = res.data
    })
    getdictauth('asn_status', {}).then(res => {
      _this.asnStatusList = res.data
    })
    postauth('warehouse/list/', {}).then(res => {
      _this.warehouseList = res.data
      _this.warehouseId = res.data[0].id
    })
    postauth('area/list/', { warehouseId: _this.warehouseId }).then(res => {
      _this.areaList = res.data
      _this.areaId = res.data[0].id
      _this.getList()
    })
  },
  mounted() {
    if (this.$q.platform.is.electron) {
      this.height = String(this.$q.screen.height - 270) + 'px';
    } else {
      this.height = this.$q.screen.height - 370 + '' + 'px';
    }
  },
  updated() { },
  destroyed() { }
};
</script>