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

<template>
  <div class="mod-config">
    <el-form :inline="true" label-position="top">
      <el-form-item :label="$t('purchase.cancelReceipt.orderNo')">
        <el-input style="width: 120px;" v-model="queryHeaderData.orderNo" @keyup.enter.native="getDataList('Y')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('purchase.cancelReceipt.partNo')">
        <el-input style="width: 120px;" v-model="queryHeaderData.partNo" @keyup.enter.native="getDataList('Y')"></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 20px;">
        <el-button @click="getDataList('Y')" type="primary">{{ $t('purchase.common.search') }}</el-button>
        <el-button @click="resetQuery">{{ $t('purchase.common.reset') }}</el-button>
      </el-form-item>
    </el-form>

     <!-- 数据表格 -->
    <el-table
      :data="dataList"
      border  :height="height"
      v-loading="dataListLoading || cancelLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%; margin-bottom: 20px;">
       <el-table-column
         prop="sourceRef1"
         header-align="center"
         align="center"
         :label="$t('purchase.cancelReceipt.receiptNo')"
         width="140">
       </el-table-column>
      <el-table-column
        prop="sourcePartNo"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.partNo')"
        width="150">
      </el-table-column>
      <el-table-column
        prop="lotBatchNo"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.batchNo')"
        width="120">
      </el-table-column>
      <el-table-column
        prop="description"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.partDesc')"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="qtyArrived"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.qtyArrived')"
        width="110">
      </el-table-column>
      <el-table-column
        prop="arrivalDate"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.arrivalDate')"
        width="110">
      </el-table-column>
      <el-table-column
        prop="sender"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.supplierId')"
        width="120">
      </el-table-column>
      <el-table-column
        prop="senderName"
        header-align="center"
        align="center"
        :label="$t('purchase.cancelReceipt.supplierName')"
        min-width="120">
      </el-table-column>
       <el-table-column
         prop="receiver"
         header-align="center"
         align="center"
         :label="$t('purchase.cancelReceipt.receiver')"
         width="100">
       </el-table-column>
      <el-table-column
        prop="state"
        header-align="center"
        align="center"
        :label="$t('purchase.common.status')"
        width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 'Received'" type="success">{{ $t('purchase.status.received') }}</span>
          <span v-else-if="scope.row.state === 'Cancelled'" type="danger">{{ $t('purchase.status.cancelled') }}</span>
          <span v-else-if="scope.row.state === 'Arrived'" type="warning">{{ $t('purchase.status.arrived') }}</span>
          <span v-else type="info">{{ scope.row.state }}</span>
        </template>
      </el-table-column>
       <el-table-column
         fixed="left"
         header-align="center"
         align="center"
         width="80"
         :label="$t('purchase.common.operation')">
         <template slot-scope="scope">
           <a @click="cancelSingleReceipt(scope.row)" type="text" size="small" :disabled="scope.row.state !== 'Received'">{{ $t('purchase.common.cancel') }}</a>
         </template>
       </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="$t('purchase.cancelReceipt.dialogTitle')"
      :visible.sync="cancelDialogVisible"
      width="500px"
      :close-on-click-modal="false">
      <el-form :model="cancelForm" :rules="cancelRules" ref="cancelForm" label-width="100px">
        <el-form-item :label="$t('purchase.cancelReceipt.cancelReason')" prop="cancelReason">
          <el-input
            :placeholder="$t('purchase.cancelReceipt.cancelReasonPlaceholder')"
            v-model="cancelForm.cancelReason">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="margin-top: 80px">
        <el-button @click="cancelDialogVisible = false">{{ $t('purchase.common.cancel') }}</el-button>
        <el-button type="primary" @click="confirmCancel" :loading="cancelLoading">{{ $t('purchase.common.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCancelableReceiptList, cancelReceipt } from '@/api/purchase/purchaseManage'
import { filterRowsByAuthorizedSubSite, getAuthorizedSubSiteCodeList } from '@/utils/subSiteAuth'

const getCurrentSiteLike = () => {
  const site = localStorage.getItem('site') || ''
  return site ? `${site}%` : ''
}

export default {
  data () {
    return {
      height: 200,
      favorite: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      queryHeaderData: {
        site: getCurrentSiteLike(),
        orderNo: '',
        partNo: '',
        batchNo: '',
        supplierId: '',
        startDate: '',
        endDate: ''
      },
      cancelDialogVisible: false,
      cancelLoading: false,
      cancelForm: {
        cancelReason: ''
      },
      cancelRules: {
        cancelReason: [
          { required: true, message: this.$t('purchase.cancelReceipt.cancelReasonRequired'), trigger: 'blur' }
        ]
      },
      currentCancelRecords: [],
      // 行级 loading：记录当前正在取消的收货记录key（contract + receiptSequence）
      cancelingRecordKeys: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = (window.innerHeight - 350);
    })
  },
  activated () {
    this.getDataList()
  },
  methods: {
    favoriteFunction () {
      this.favorite = !this.favorite
    },
    // 获取数据列表
    getDataList (flag) {
      if (flag === 'Y') {
        this.pageIndex = 1
      }
      if (!this.queryHeaderData.orderNo) {
        this.$message.warning(this.$t('purchase.cancelReceipt.orderNoRequiredForQuery'))
        return
      }
      this.dataListLoading = true
      const siteLike = getCurrentSiteLike()
      const params = {
        page: this.pageIndex,
        size: this.pageSize,
        ...this.queryHeaderData,
        site: siteLike
      }
      getCancelableReceiptList(params).then(({data}) => {
        if (data && data.code === 0) {
          const sourceRows = (data.page && Array.isArray(data.page.list)) ? data.page.list : []
          const authorizedSubSiteCodeList = getAuthorizedSubSiteCodeList(this.$store.state.user.subSiteCodeList)
          // 后端当前按site前缀查询，前端按授权子site做二次过滤，避免展示未授权数据
          this.dataList = filterRowsByAuthorizedSubSite(sourceRows, authorizedSubSiteCodeList, ['contract'])
          this.totalPage = (data.page && data.page.totalCount) ? data.page.totalCount : 0
        } 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
    },
    getCancelRecordKey (record) {
      return `${record.contract || ''}__${record.receiptSequence || ''}`
    },
    isRecordCanceling (record) {
      return this.cancelingRecordKeys.includes(this.getCancelRecordKey(record))
    },
    // 取消单个接收记录
    cancelSingleReceipt (row) {
      if (this.cancelLoading) {
        return
      }
      const receiptNo = row.receiptNo || row.sourceRef1 || ''
      // 显示确认提示
      this.$confirm(this.$t('purchase.cancelReceipt.confirmSingle', { receiptNo }), this.$t('purchase.cancelReceipt.confirmTitle'), {
        confirmButtonText: this.$t('purchase.common.confirm'),
        cancelButtonText: this.$t('purchase.common.cancel'),
        type: 'warning'
      }).then(() => {
        this.currentCancelRecords = [row]
        this.cancelForm.cancelReason = ' '
        //this.cancelDialogVisible = true
        this.confirmCancel()
      }).catch(() => {
        // 用户取消操作
      })
    },
    // 批量取消接收记录
    cancelSelectedReceipts () {
      if (this.cancelLoading) {
        return
      }
      if (this.dataListSelections.length === 0) {
        this.$message.warning(this.$t('purchase.cancelReceipt.selectRecordsFirst'))
        return
      }

      // 显示确认提示
      this.$confirm(this.$t('purchase.cancelReceipt.confirmBatch', { count: this.dataListSelections.length }), this.$t('purchase.cancelReceipt.confirmTitle'), {
        confirmButtonText: this.$t('purchase.common.confirm'),
        cancelButtonText: this.$t('purchase.common.cancel'),
        type: 'warning'
      }).then(() => {
        this.currentCancelRecords = this.dataListSelections
        this.cancelForm.cancelReason = ' '
        //this.cancelDialogVisible = true
        this.confirmCancel()
      }).catch(() => {
        // 用户取消操作
      })
    },
     // 确认取消
     confirmCancel () {
       this.cancelLoading = true
       const cancelRecords = [...this.currentCancelRecords]
       this.cancelingRecordKeys = cancelRecords.map(record => this.getCancelRecordKey(record))
       const promises = cancelRecords.map(record => {
         return cancelReceipt({
           receiptSequence: record.receiptSequence,
           site: record.contract,
           cancelReason: this.cancelForm.cancelReason
         })
       })

       Promise.all(promises).then(results => {
         let successCount = 0
         let errorMessages = []

         results.forEach((result, index) => {
           if (result.data && result.data.code === 0) {
             successCount++
           } else {
             const record = cancelRecords[index]
            errorMessages.push(this.$t('purchase.cancelReceipt.cancelItemFailed', {
              receiptNo: record.receiptNo || record.sourceRef1 || '',
              reason: result.data.msg || this.$t('purchase.cancelReceipt.cancelFailed')
            }))
           }
         })

         if (successCount > 0) {
          this.$message.success(this.$t('purchase.cancelReceipt.cancelSuccessCount', { count: successCount }))
           this.getDataList()
         }

         if (errorMessages.length > 0) {
          this.$message.error(this.$t('purchase.cancelReceipt.partialCancelFailed', { details: errorMessages.join('\n') }))
         }

         this.cancelDialogVisible = false
       }).catch(() => {
        this.$message.error(this.$t('purchase.cancelReceipt.cancelOperationFailed'))
       }).finally(() => {
         this.cancelLoading = false
         this.cancelingRecordKeys = []
       })
    },
    // 重置查询
    resetQuery () {
      this.queryHeaderData = {
        site: getCurrentSiteLike(),
        orderNo: '',
        partNo: '',
        batchNo: '',
        supplierId: '',
        startDate: '',
        endDate: ''
      }
      this.getDataList('Y')
    }
  }
}
</script>

<style scoped>

</style>