wms / wms4_hefeijingke · Files

<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="8" :lg="8" :md="12" :sm="24">
            <a-form-item label="类型">
              <a-select v-model="queryParam.type" placeholder="请选择类型" allow-clear>
                <a-select-option value="入库">入库</a-select-option>
                <a-select-option value="出库">出库</a-select-option>
                <a-select-option value="出库入库">出库入库</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="16" :lg="16" :md="24" :sm="24">
            <a-form-item label="任务完成日期">
              <j-date :show-date="true" date-format="YYYY-MM-DD" placeholder="请选择开始日期"
                      class="query-group-cust" v-model="queryParam.startDate"></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.endDate"></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 -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="handleExportXls('任务统计')" icon="download">导出</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:true}"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="type" slot-scope="type">
          <a-tag :key="type" :color="getTypeColor(type)">
            {{ type }}
          </a-tag>
        </span>

        <span slot="inventoryStatus" slot-scope="text, record">
          <a-tag :key="text" :color="getInventoryStatusColor(text)">
            {{ getInventoryStatusText(text) }}
          </a-tag>
        </span>

      </a-table>
    </div>
  </a-card>
</template>

<script>

import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getAction, downFile} from '@/api/manage'
import '@/assets/less/TableExpand.less'

export default {
  name: "TaskStatisticsList",
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      description: '任务统计页面',
      // 表头
      columns: [
        {
          title: '详情ID',
          align: "center",
          dataIndex: 'id',
          width: 100,
        },
        {
          title: '类型',
          align: "center",
          dataIndex: 'type',
          width: 100,
          scopedSlots: {customRender: 'type'},
        },
        {
          title: '托盘号',
          align: "center",
          dataIndex: 'containerCode',
          width: 150,
        },
        {
          title: '物料号',
          align: "center",
          dataIndex: 'materialCode',
          width: 150,
        },
        {
          title: '数量',
          align: "center",
          dataIndex: 'qty',
          width: 100,
        },
        {
          title: '起点',
          align: "center",
          dataIndex: 'fromPortCode',
          width: 120,
        },
        {
          title: '起始库位',
          align: "center",
          dataIndex: 'fromLocationCode',
          width: 150,
        },
        {
          title: '目标点',
          align: "center",
          dataIndex: 'toPortCode',
          width: 120,
        },
        {
          title: '目标库位',
          align: "center",
          dataIndex: 'toLocationCode',
          width: 150,
        },
        {
          title: '任务完成日期',
          align: "center",
          dataIndex: 'updateTime',
          width: 180,
        },
        {
          title: '品质',
          align: "center",
          dataIndex: 'inventoryStatus',
          width: 100,
          scopedSlots: {customRender: 'inventoryStatus'},
        },
      ],
      url: {
        list: "/task/taskStatistics/list",
        exportXlsUrl: "/task/taskStatistics/exportXls",
      },
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      queryParam: {
        type: undefined,
        startDate: undefined,
        endDate: undefined
      }
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {
    // 验证日期范围
    validateDateRange() {
      if (!this.queryParam.startDate) {
        this.$message.warning('请选择开始日期');
        return false;
      }
      if (!this.queryParam.endDate) {
        this.$message.warning('请选择结束日期');
        return false;
      }
      return true;
    },
    // 重写查询方法，添加日期验证
    searchQuery() {
      if (!this.validateDateRange()) {
        return;
      }
      this.loadData(1);
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams(); // 查询条件
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      })
    },
    // 重写导出方法，添加日期验证
    handleExportXls(fileName) {
      if (!this.validateDateRange()) {
        return;
      }
      if (!fileName || typeof fileName != "string") {
        fileName = "导出文件";
      }
      let param = {...this.queryParam};
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(",");
      }
      console.log("导出参数", param);
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败");
          return;
        }
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(new Blob([data], {type: 'application/vnd.ms-excel'}), fileName + '.xls');
        } else {
          let url = window.URL.createObjectURL(new Blob([data], {type: 'application/vnd.ms-excel'}));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName + '.xls');
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      });
    },
    getTypeColor(type) {
      const colors = {
        '入库': 'blue',
        '出库': 'orange',
        '出库入库': 'purple',
        default: 'grey'
      };
      return colors[type] || colors.default;
    },
    getInventoryStatusColor(status) {
      const colors = {
        'ok': 'green',
        'ng': 'red',
        'hold': 'orange',
        default: 'grey'
      };
      return colors[status] || colors.default;
    },
    getInventoryStatusText(status) {
      const statusMap = {
        'ok': '合格',
        'ng': '不合格',
        'hold': '待检',
      };
      return statusMap[status] || status || '未知';
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>