wms-vue/src/views/modules/haianWarehouse/warehouse/wcsCallBackSearch54.vue

<template>
  <div class="mod-config">
    <!-- 查询表单 - rqrq -->
    <el-form :inline="true" label-position="top" style="margin-top: 1px; margin-left: 0px;">
      <el-form-item label="栈板ID">
        <el-input v-model="queryData.palletId" style="width: 120px" placeholder="栈板ID" clearable></el-input>
      </el-form-item>

      <el-form-item label="任务号">
        <el-input v-model="queryData.taskNo" style="width: 120px" placeholder="任务号" clearable></el-input>
      </el-form-item>

      <el-form-item label="事务类型">
        <!-- 海安回调查询仅认新中文：入货架（原入库）/出货架（原出库）/到达出库口（原取货通知）/离开入库口（原取走栈板）/到达异常位（原异常位处理）/到达手工分拣区 - rqrq -->
        <el-select v-model="queryData.transTypeDesc" placeholder="请选择" style="width: 160px" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option label="入货架" value="入货架"></el-option>
          <el-option label="出货架" value="出货架"></el-option>
          <el-option label="到达出库口" value="到达出库口"></el-option>
          <el-option label="离开入库口" value="离开入库口"></el-option>
          <el-option label="到达异常位" value="到达异常位"></el-option>
          <el-option label="到达手工分拣区" value="到达手工分拣区"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="处理状态">
        <el-select v-model="queryData.status" placeholder="请选择" style="width: 120px" clearable>
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间从">
        <el-date-picker
          v-model="queryData.startDate"
          type="date"
          style="width: 120px"
          placeholder="开始日期"
          value-format="yyyy-MM-dd"
          clearable>
        </el-date-picker>
      </el-form-item>

      <el-form-item label="创建时间至">
        <el-date-picker
          v-model="queryData.endDate"
          type="date"
          style="width: 120px"
          placeholder="结束日期"
          value-format="yyyy-MM-dd"
          clearable>
        </el-date-picker>
      </el-form-item>

      <el-form-item label=" ">
        <el-button type="primary" @click="getDataList()">{{ $t('warehouse.common.search') }}</el-button>
        <el-button @click="resetQuery()">{{ $t('warehouse.common.reset') }}</el-button>
        <!-- 导出按钮 - rqrq -->
        <download-excel
          :fields="fields()"
          :data="exportData"
          type="xls"
          :name="exportName"
          :header="exportHeader"
          :footer="exportFooter"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          :worksheet="$t('warehouse.common.exportWorksheet')"
          class="el-button el-button--primary el-button--medium">
          {{ $t('warehouse.common.download') }}
        </download-excel>
      </el-form-item>
    </el-form>

    <!-- 数据表格 - rqrq -->
    <el-table
      :data="dataList"
      :height="height"
      border
      highlight-current-row
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        v-for="(item,index) in columnList" :key="index"
        :sortable="item.columnSortable"
        :prop="item.columnProp"
        :header-align="item.headerAlign"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align"
        :fixed="item.fixed==''?false:item.fixed"
        :min-width="item.columnWidth"
        :label="item.columnLabel">
        <template slot-scope="scope">
          <span v-if="item.columnProp === 'status'">
            <el-tag :type="getStatusType(scope.row.status)" size="small">{{ scope.row.status }}</el-tag>
          </span>
          <span v-else-if="item.columnProp === 'transTypeDesc'">
            <!-- 入货架（原入库）用绿色，其余类型用橙色 - rqrq -->
            <el-tag :type="scope.row.transTypeDesc === '入货架' ? 'success' : 'warning'" size="small">
              {{ scope.row.transTypeDesc }}
            </el-tag>
          </span>
          <span v-else>{{ scope.row[item.columnProp] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 - rqrq -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100, 1000]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import {
  haiAnGetWcsCallbackTaskList,
  haiAnGetTaskStatusOptions,
  haiAnGetUserAuthorizedSites
} from '@/api/haianWarehouse/wcsCallbackTask.js'

export default {
  name: 'wcsCallBackSearch54',
  data() {
    // 查询默认绑定当前登录工厂，满足site只从前端显式传入约束 - rqrq
    const defaultSite = this.$store.state.user.site
    return {
      queryData: {
        site: defaultSite,
        palletId: '',
        taskNo: '',
        transTypeDesc: '',
        status: '',
        startDate: '',
        endDate: '',
        page: 1,
        limit: 20
      },
      height: 450,
      statusOptions: [
        { label: '已录入', value: '已录入' },
        { label: '处理中', value: '处理中' },
        { label: '已完成', value: '已完成' },
        { label: '处理失败', value: '处理失败' }
      ],
      siteOptions: [],
      columnList: [
        { columnProp: 'site', headerAlign: 'center', align: 'center', columnLabel: '工厂编码', columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'palletId', headerAlign: 'center', align: 'center', columnLabel: '栈板ID', columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'taskNo', headerAlign: 'center', align: 'center', columnLabel: '任务号', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'itemNo', headerAlign: 'center', align: 'center', columnLabel: '明细行号', columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'transTypeDesc', headerAlign: 'center', align: 'center', columnLabel: '事务类型', columnWidth: 140, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'toWarehouseId', headerAlign: 'center', align: 'center', columnLabel: '目标仓库', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'toLocationId', headerAlign: 'center', align: 'center', columnLabel: '目标库位', columnWidth: 120, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'toStation', headerAlign: 'center', align: 'center', columnLabel: '目标站点', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'status', headerAlign: 'center', align: 'center', columnLabel: '处理状态', columnWidth: 100, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'retryCount', headerAlign: 'center', align: 'center', columnLabel: '重试次数', columnWidth: 80, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'createdTime', headerAlign: 'center', align: 'center', columnLabel: '创建时间', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'processStartTime', headerAlign: 'center', align: 'center', columnLabel: '处理开始时间', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'processEndTime', headerAlign: 'center', align: 'center', columnLabel: '处理完成时间', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'errorMsg', headerAlign: 'center', align: 'left', columnLabel: '错误信息', columnWidth: 200, columnSortable: false, showOverflowTooltip: true, fixed: '' },
        { columnProp: 'remark', headerAlign: 'center', align: 'left', columnLabel: '备注', columnWidth: 150, columnSortable: false, showOverflowTooltip: true, fixed: '' }
      ],
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      exportData: [],
      exportName: '海安WCS回调任务' + this.dayjs().format('YYYYMMDDHHmmss'),
      exportHeader: ['海安WCS回调任务'],
      exportFooter: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 220
    })
  },
  activated() {
    this.getDataList()
    this.getSiteOptions()
    this.getTaskStatusOptions()
  },
  methods: {
    // 查询列表 - rqrq
    getDataList() {
      this.dataListLoading = true
      this.queryData.page = this.pageIndex
      this.queryData.limit = this.pageSize
      haiAnGetWcsCallbackTaskList(this.queryData).then(({ data }) => {
        this.dataListLoading = false
        if (data && data.code === 0) {
          this.dataList = data.page.list || []
          this.totalPage = data.page.totalCount || 0
        } else {
          this.dataList = []
          this.totalPage = 0
          this.$alert(data.msg || this.$t('warehouse.message.queryFailed'), this.$t('warehouse.common.error'), { confirmButtonText: this.$t('warehouse.common.confirm') })
        }
      }).catch(() => {
        this.dataListLoading = false
        this.$alert(this.$t('warehouse.message.queryFailed'), this.$t('warehouse.common.error'), { confirmButtonText: this.$t('warehouse.common.confirm') })
      })
    },

    // 读取状态选项，保持后端字典与前端一致 - rqrq
    getTaskStatusOptions() {
      haiAnGetTaskStatusOptions().then(({ data }) => {
        if (data && data.code === 0) {
          this.statusOptions = data.options || this.statusOptions
        }
      })
    },

    // 获取当前用户授权工厂（保留原页面能力） - rqrq
    getSiteOptions() {
      const params = { userName: this.$store.state.user.name }
      haiAnGetUserAuthorizedSites(params).then(({ data }) => {
        if (data && data.code === 0) {
          this.siteOptions = data.data || []
        }
      })
    },

    // 重置查询 - rqrq
    resetQuery() {
      this.queryData = {
        // 重置后保持当前工厂，不允许把site清空导致后端拒绝或跨厂查询 - rqrq
        site: this.$store.state.user.site,
        palletId: '',
        taskNo: '',
        transTypeDesc: '',
        status: '',
        startDate: '',
        endDate: '',
        page: 1,
        limit: 20
      }
      this.pageIndex = 1
      this.getDataList()
    },

    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },

    // 状态标签色 - rqrq
    getStatusType(status) {
      const statusMap = { 已录入: 'info', 处理中: 'warning', 已完成: 'success', 处理失败: 'danger' }
      return statusMap[status] || 'info'
    },

    // 导出相关 - rqrq
    async createExportData() {
      const queryParams = { ...this.queryData, page: 1, limit: 999999 }
      const { data } = await haiAnGetWcsCallbackTaskList(queryParams)
      if (data && data.code === 0) {
        return data.page.list || []
      }
      return []
    },
    startDownload() {},
    finishDownload() {},
    fields() {
      let json = '{'
      this.columnList.forEach((item, index) => {
        if (index === this.columnList.length - 1) {
          json += '"' + item.columnLabel + '":"' + item.columnProp + '"'
        } else {
          json += '"' + item.columnLabel + '":"' + item.columnProp + '",'
        }
      })
      json += '}'
      return eval('(' + json + ')')
    }
  }
}
</script>

<style scoped>
.mod-config {
  padding: 10px;
}
</style>