wms-vue/src/views/modules/purchase/inspectionResults.vue

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top">
      <el-form-item label="工厂编码">
        <el-input style="width: 120px;" v-model="queryHeaderData.site"></el-input>
      </el-form-item>
      <el-form-item label="接收单号">
        <el-input style="width: 120px;" v-model="queryHeaderData.receiptNo"></el-input>
      </el-form-item>
      <el-form-item label="物料编码">
        <el-input style="width: 120px;" v-model="queryHeaderData.partNo"></el-input>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input style="width: 120px;" v-model="queryHeaderData.batchNo"></el-input>
      </el-form-item>
      <el-form-item label="供应商编码">
        <el-input style="width: 120px;" v-model="queryHeaderData.supplierId"></el-input>
      </el-form-item>
      <el-form-item label="开始日期">
        <el-date-picker
          v-model="queryHeaderData.startDate"
          type="date"
          placeholder="选择日期"
          style="width: 120px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker
          v-model="queryHeaderData.endDate"
          type="date"
          placeholder="选择日期"
          style="width: 120px;">
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button @click="getDataList('Y')" type="primary">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button @click="syncIfsRecords" type="success" :loading="syncLoading">同步IFS检验记录</el-button>
      </el-form-item>
    </el-form>

    <!-- 同步结果提示 -->
    <el-alert
      v-if="syncMessage"
      :title="syncMessage"
      :type="syncMessageType"
      :closable="true"
      @close="syncMessage = ''"
      style="margin-bottom: 20px;">
    </el-alert>

    <!-- 数据表格 -->
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="site"
        header-align="center"
        align="center"
        label="工厂编码">
      </el-table-column>
      <el-table-column
        prop="receiptNo"
        header-align="center"
        align="center"
        label="接收单号">
      </el-table-column>
      <el-table-column
        prop="receiveDate"
        header-align="center"
        align="center"
        label="接收日期">
      </el-table-column>
      <el-table-column
        prop="partNo"
        header-align="center"
        align="center"
        label="物料编码">
      </el-table-column>
      <el-table-column
        prop="batchNo"
        header-align="center"
        align="center"
        label="批次号">
      </el-table-column>
      <el-table-column
        prop="qtyApproved"
        header-align="center"
        align="center"
        label="合格数量">
      </el-table-column>
      <el-table-column
        prop="inspectionTime"
        header-align="center"
        align="center"
        label="检验时间">
      </el-table-column>
      <el-table-column
        prop="inspector"
        header-align="center"
        align="center"
        label="检验员">
      </el-table-column>
      <el-table-column
        prop="inspectionRemark"
        header-align="center"
        align="center"
        label="检验备注"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="supplierId"
        header-align="center"
        align="center"
        label="供应商编码">
      </el-table-column>
      <el-table-column
        prop="receiver"
        header-align="center"
        align="center"
        label="接收人">
      </el-table-column>
      <el-table-column
        prop="warehouseId"
        header-align="center"
        align="center"
        label="仓库">
      </el-table-column>
    </el-table>

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

    <!-- 同步确认对话框 -->
    <el-dialog
      title="同步IFS检验记录"
      :visible.sync="syncDialogVisible"
      width="400px"
      :close-on-click-modal="false">
      <div>
        <p>确认要从IFS系统同步最新的检验结果吗？</p>
        <p style="color: #909399; font-size: 12px;">此操作将更新本地的检验记录数据。</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="syncDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSync" :loading="syncLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getInspectedReceiptList, syncIfsInspectionRecords } from '@/api/purchase/purchaseManage'

export default {
  data () {
    return {
      favorite: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      queryHeaderData: {
        site: '',
        receiptNo: '',
        partNo: '',
        batchNo: '',
        supplierId: '',
        startDate: '',
        endDate: ''
      },
      syncDialogVisible: false,
      syncLoading: false,
      syncMessage: '',
      syncMessageType: 'success'
    }
  },
  activated () {
    this.getDataList()
  },
  methods: {
    favoriteFunction () {
      this.favorite = !this.favorite
    },
    // 获取数据列表
    getDataList (flag) {
      if (flag === 'Y') {
        this.pageIndex = 1
      }
      this.dataListLoading = true
      const params = {
        page: this.pageIndex,
        size: this.pageSize,
        ...this.queryHeaderData
      }
      getInspectedReceiptList(params).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 同步IFS记录
    syncIfsRecords () {
      if (!this.queryHeaderData.site) {
        this.$message.warning('请先选择工厂编码')
        return
      }
      this.syncDialogVisible = true
    },
    // 确认同步
    confirmSync () {
      this.syncLoading = true
      this.syncDialogVisible = false

      const params = {
        site: this.queryHeaderData.site
      }

      syncIfsInspectionRecords(params).then(({data}) => {
        this.syncLoading = false
        if (data && data.code === 0) {
          this.syncMessage = data.msg || '同步成功'
          this.syncMessageType = 'success'
          this.getDataList() // 刷新列表
        } else {
          this.syncMessage = data.msg || '同步失败'
          this.syncMessageType = 'error'
        }

        // 5秒后自动隐藏消息
        setTimeout(() => {
          this.syncMessage = ''
        }, 5000)
      }).catch(() => {
        this.syncLoading = false
        this.syncMessage = '同步过程中发生错误'
        this.syncMessageType = 'error'

        setTimeout(() => {
          this.syncMessage = ''
        }, 5000)
      })
    },
    // 重置查询
    resetQuery () {
      this.queryHeaderData = {
        site: '',
        receiptNo: '',
        partNo: '',
        batchNo: '',
        supplierId: '',
        startDate: '',
        endDate: ''
      }
      this.getDataList('Y')
    }
  }
}
</script>

<style scoped>

</style>