ReportCycleCountList.vue 6.94 KB
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="库位编码">
              <a-input placeholder="请输入库位编码" v-model="queryParam.locationCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料编码">
              <a-input placeholder="请输入物料编码" v-model="queryParam.materialCode"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料名称">
              <a-input placeholder="请输入物料名称" v-model="queryParam.materialName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料规格">
              <a-input placeholder="请输入物料规格" v-model="queryParam.materialSpec"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料单位">
              <a-input placeholder="请输入物料单位" v-model="queryParam.materialUnit"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="盘点人">
              <a-input placeholder="请输入盘点人" v-model="queryParam.stocktakingAc"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="12" :lg="14" :md="16" :sm="24">
            <a-form-item label="盘点日期">
              <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择开始时间"
                      class="query-group-cust" v-model="queryParam.completedAtBegin"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择结束时间"
                      class="query-group-cust" v-model="queryParam.completedAtEnd"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button id="search" type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="zoneCode" slot-scope="zoneCode">
          <a-tag :key="zoneCode" color="blue">
            {{ solutionZoneCode(zoneCode) }}
          </a-tag>
        </span>
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
      </a-table>
    </div>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getMaterialTypeList, getZoneList} from '@/api/api'

export default {
  name: 'ReportInventoryClassificationList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      description: '库存分类报表页面',
      zoneList: [],
      zoneOptions: [],
      materialTypeList: [],
      firstLoad: 0,
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '库存位置',
          align: "center",
          dataIndex: 'locationCode'
        },
        {
          title: '物料编码',
          align: "center",
          dataIndex: 'materialCode'
        },
        {
          title: '物料名称',
          align: "center",
          dataIndex: 'materialName'
        },
        {
          title: '物料规格',
          align: "center",
          dataIndex: 'materialSpec'
        },
        {
          title: '物料单位',
          align: "center",
          dataIndex: 'materialUnit'
        },
        {
          title: '库存数量',
          align: "center",
          dataIndex: 'systemQty'
        },
        {
          title: '实际数量',
          align: "center",
          dataIndex: 'countedQty'
        },
        {
          title: '差异数量',
          align: "center",
          dataIndex: 'gapQty'
        },
        {
          title: '盘点日期',
          align: "center",
          dataIndex: 'completedAt'
        },
        {
          title: '盘点人',
          align: "center",
          dataIndex: 'stocktakingAc'
        }
      ],
      url: {
        list: "/report/listCycleCount",
      },
    }
  },
  created() {
    this.loadFrom();
  },
  mounted() {
    if (this.firstLoad === 0) {
      this.firstLoad = 1;
      return;
    }
    //页面没加载完,此时methods里的方法找不到,使用定时器模拟点击
    let timeSearch = setInterval(() => {
      let eleSearch = document.getElementById("search");
      if (eleSearch != null) {
        //调用成功,清除定时器
        clearInterval(timeSearch)
        eleSearch.click();
      }
    }, 200)
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    loadFrom() {
      getMaterialTypeList().then((res) => {
        if (res.success) {
          this.materialTypeList = res.result
        }
      });
      getZoneList().then((res) => {
        if (res.success) {
          this.zoneList = res.result
          //延迟半秒执行,避免组件未加载完,数据已经加载完
          setTimeout(() => {
            //slice可以在数组的任何位置进行删除/添加操作
            this.zoneOptions.splice(0, 1);
            for (const element of res.result) {
              this.zoneOptions.push({value: element.code, text: element.name})
            }
          }, 500)
        }
      });
    },
    solutionZoneCode(value) {
      let actions = []
      Object.keys(this.zoneList).some(key => {
        if (this.zoneList[key].code === '' + value) {
          actions.push(this.zoneList[key].name)
          return true
        }
      })
      return actions.join('')
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>