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

<template>
  <div>
    <q-table class="my-sticky-header-table" :style="{
      height: container_height,
      width: $q.screen.width
    }" :data="table_list" row-key="id" :separator="separator" :loading="loading" :columns="columns"
      :pagination.sync="pagination" @request="onRequest" bordered hide-pagination>
      <template v-slot:top>
        <q-btn unelevated label="展开搜索" icon="list" @click="open('right')" />
      </template>
      <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-td key="warehouseName" :props="props">{{ props.row.warehouseName }}</q-td>
          <q-td key="areaName" :props="props">{{ props.row.areaName == null ? 'N/A' : props.row.areaName }}</q-td>
          <q-td key="binName" :props="props">{{ props.row.binName == null ? 'N/A' : props.row.binName }}</q-td>
          <q-td key="qualityStatus" :props="props">
            <dict-tag :options="qualityStatusMap" :value="props.row.qualityStatus" />
          </q-td>
          <q-td key="createUser" :props="props">{{ props.row.createUser }}</q-td>
          <q-td key="createAt" :props="props">{{ props.row.createAt }}</q-td>
          <q-td key="updateUser" :props="props">{{ props.row.updateUser }}</q-td>
          <q-td key="updateAt" :props="props">{{ props.row.updateAt }}</q-td>
        </q-tr>
      </template>
    </q-table>

    <div class="row justify-center q-mt-md">
      <q-pagination v-model="pagination.page" color="grey-8" :max="pagesNumber" @click="clickPage()" />
    </div>


    <q-dialog v-model="dialog" :position="position">
      <q-card :style="{
        height: ($q.screen.height) + 'px',
        width: ($q.screen.width - 100) + 'px'
      }" style="margin-top:20px">
        <q-card-section>
          <div>
            <q-input class="q-pa-xs" outlined rounded dense color="primary" v-model="iPage.records[0].materialsCode"
              placeholder="请输入物料编码" />
            <q-input class="q-pa-xs" outlined rounded dense color="primary" v-model="iPage.records[0].materialsName"
              placeholder="请输入物料名称" />
          </div>
          <div class="q-pa-xs">
            <q-select dense outlined use-input rounded v-model="iPage.records[0].warehouseName" :options="warehouseList"
              @filter="filterWarehouse" option-label="warehouseName" option-value="warehouseName" emit-value map-options
              label="所属工厂" />
          </div>
          <div class="q-pa-xs">
            <q-btn class="q-ma-xs" label="查询" icon="search" @click="getPage()" />
            <q-btn class="q-ma-xs" label="刷新" icon="refresh" @click="reFresh()" />
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>
<router-view />

<script>
import { getdictauth, getauth, getfile, postauth } from 'boot/axios_request';
import { date, exportFile, LocalStorage } from 'quasar';

export default {
  name: 'Pagestocklist',
  data() {
    return {
      dialog: false,
      position: 'top',
      container_height: (this.$q.screen.height - 100) + '' + 'px',
      authin: '0',
      pathname: 'stockMaterials/',
      separator: 'cell',
      loading: false,
      height: '',
      columns: [
        { name: 'materialsCode', 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' },
        { name: 'warehouseName', label: '所属工厂', field: 'warehouseName', align: 'center' },
        { name: 'areaName', label: '所属库区', field: 'areaName', align: 'center' },
        { name: 'binName', label: '所属库位', field: 'binName', align: 'center' },
        { name: 'qualityStatus', label: '质检状态', field: 'qualityStatus', align: 'center' },
        { name: 'createUser', label: '入库人', field: 'createUser', align: 'center' },
        { name: 'createAt', label: '入库时间', field: 'createAt', align: 'center' },
        { name: 'updateUser', label: '更新人', field: 'updateUser', align: 'center' },
        { name: 'updateAt', label: '更新时间', field: 'updateAt', align: 'center' },
      ],
      filter: '',
      pagination: {
        sortBy: 'desc',
        descending: false,
        page: 1,
        rowsPerPage: 50,
        rowsNumber: 0
      },
      iPage: {
        size: 30,
        current: 1,
        total: 10,
        records: [{
          materialsCode: '',
          materialsName: '',
          warehouseName: '',
          areaName: '',
          binName: '',
          stockStatus: 4,
          searchBeginTime: '',
          searchEndTime: '',
          stockId: ''
        }],
      },
      table_list: [],
      recordUnitMap: {},
      packUnitMap: {},
      asnStatusList: {},
      qualityStatusMap: {},
      viewForm: false,
      stock: '',
      bar_code: '',
      areaList: [],
      binList: [],
      warehouseList: [],
      printObj: {
        id: 'printMe',
        popTitle: this.$t('inbound.asn')
      },
    }
  },
  methods: {
    clickPage() {
      this.iPage.current = this.pagination.page
      this.getPage()
    },
    open(position) {
      this.position = position
      this.dialog = true
    },
    getPage() {
      this.loading = true
      postauth('stockMaterialsView/list/', this.iPage)
        .then(res => {
          this.pagination.page = res.data.current
          this.pagination.rowsPerPage = res.data.size
          this.pagination.rowsNumber = res.data.total
          this.table_list = res.data.records

        })
        .catch(err => {
          this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          });
        });
      this.loading = false
    },
    filterArea(val, update, abort) {
      update(() => {
        postauth('area/list/', { areaName: val }).then(res => {
          this.areaList = res.data
        })
      })
    },
    filterBin(val, update, abort) {
      update(() => {
        postauth('binset/list/', { binName: val }).then(res => {
          this.binList = res.data
        })
      })
    },
    filterWarehouse(val, update, abort) {
      update(() => {
        postauth('warehouse/list/', { warehouseName: val }).then(res => {
          this.warehouseList = res.data
        })
      })
    },
    onRequest(props) {
      const { page, rowsPerPage } = props.pagination
      this.iPage.current = page
      this.iPage.size = rowsPerPage
      this.getPage();

    },
    reFresh() {
      this.iPage.records = [{
        materialsCode: '',
        materialsName: '',
        warehouseId: '',
        areaId: '',
        binId: '',
        stockStatus: '',
        searchBeginTime: '',
        searchEndTime: '',
        stockId: ''
      }]
      this.getPage();
    }
  },
  created() {
    var stockId = LocalStorage.getItem("stockId");
    if (stockId != '' || stockId != null) {
      this.iPage.records[0].stockId = stockId
      localStorage.removeItem("stockId");
    }
    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
    })
    getdictauth('quality_status', {}).then(res => {
      this.qualityStatusMap = res.data
    })
    postauth('area/list/', {}).then(res => {
      this.areaList = res.data
    })
    postauth('binset/list/', {}).then(res => {
      this.binList = res.data
    })
    postauth('warehouse/list/', {}).then(res => {
      this.warehouseList = res.data
    })
  },
  mounted() {
    if (this.$q.platform.is.electron) {
      this.height = String(this.$q.screen.height - 290) + 'px';
    } else {
      this.height = this.$q.screen.height - 370 + '' + 'px';
    }
    this.onRequest({
      pagination: this.pagination,
    })
  },
  updated() { },
  destroyed() { },
  computed: {
    pagesNumber() {
      return Math.ceil(this.pagination.rowsNumber / this.pagination.rowsPerPage)
    }
  }
};
</script>