klp-oa/klp-ui/src/views/wms/move/components/tranferItemTable.vue

<template>
  <el-table :data="tableData" style="width: 100%" border v-loading="confirmLoading">
    <el-table-column prop="coilId" label="钢卷号">
      <template slot-scope="scope">
        <CoilNo :coil-no="scope.row.coil.enterCoilNo" :coil="scope.row.coil" />
      </template>
    </el-table-column>
    <el-table-column prop="coilId" label="当前钢卷号">
      <template slot-scope="scope">
        <current-coil-no :current-coil-no="scope.row.coil.currentCoilNo" />
      </template>
    </el-table-column>
    <el-table-column prop="materialTypeBefore" label="调拨前类型" width="100">
      <template slot-scope="scope">
        {{ scope.row.materialTypeBefore == '1' ? '原料' : '产品' }}
      </template>
    </el-table-column>
    <el-table-column prop="itemIdBefore" label="调拨前物料" width="260">
      <template slot-scope="scope">
        <ProductInfo v-if="scope.row.materialTypeBefore == '2'" :product="scope.row.oBefore" />
        <RawMaterialInfo v-else-if="scope.row.materialTypeBefore == '1'" :material="scope.row.oBefore" />
      </template>
    </el-table-column>
    <el-table-column prop="warehouseNameBefore" label="调拨前库区" width="180" />

    <el-table-column prop="materialTypeAfter" label="调拨后类型" width="100">
      <template slot-scope="scope">
        <el-select v-if="!scope.row.isConfirmed && canEdit" v-model="scope.row.materialTypeAfter"
          @change="handleMaterialChange(scope.row)" placeholder="请选择">
          <el-option label="原料" :value="1" />
          <el-option label="产品" :value="2" />
        </el-select>
        <div v-else>
          {{ scope.row.materialTypeAfter == '1' ? '原料' : '产品' }}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="itemIdAfter" v-loading="materialLoading" label="调拨后物料" width="260">
      <template slot-scope="scope">
        <div v-loading="materialLoading" v-if="!scope.row.isConfirmed && canEdit">
          <RawMaterialSelect v-model="scope.row.itemIdAfter" v-if="scope.row.materialTypeAfter == '1'" />
          <ProductSelect v-model="scope.row.itemIdAfter" v-else-if="scope.row.materialTypeAfter == '2'" />
        </div>
        <div v-else>
          <ProductInfo v-if="scope.row.materialTypeAfter == '2'" :product="scope.row.oAfter" />
          <RawMaterialInfo v-else-if="scope.row.materialTypeAfter == '1'" :material="scope.row.oAfter" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="warehouseIdAfter" label="调拨后库区" width="200">
      <template slot-scope="scope">
        <el-select v-if="!scope.row.isConfirmed && canEdit" v-model="scope.row.warehouseIdAfter"
          @change="handleWarehouseChange(scope.row)" placeholder="请选择">
          <el-option v-for="item in warehouseList" :disabled="!item.isEnabled" :key="item.warehouseId"
            :label="item.warehouseName" :value="item.warehouseId" />
        </el-select>
        <div v-else>
          {{ scope.row.warehouseNameAfter }}
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="isTransferred" label="生效状态" width="200">
      <template slot-scope="scope">
        <el-tag :type="scope.row.isTransferred == '1' ? 'success' : 'info'">
          {{ scope.row.isTransferred == '1' ? '已生效' : '未生效' }}
        </el-tag>
      </template>
    </el-table-column>

    <el-table-column type="action" label="操作" width="180" v-if="canEdit">
      <template slot-scope="scope">
        <div v-if="orderStatus == 0">
          <!-- <el-button icon="el-icon-check" size="mini" v-if="!scope.row.isConfirmed" @click="handleUpdate(scope.row)"
            :loading="buttonLoading">保存</el-button> -->
          <el-button icon="el-icon-close" size="mini" @click="handleCancel(scope.row)"
            :loading="buttonLoading">删除</el-button>
        </div>
        <div v-else>
          <!-- <el-button icon="el-icon-check" size="mini" v-if="!scope.row.isConfirmed" @click="handleConfirm(scope.row)"
            :loading="buttonLoading" :disabled="orderStatus != '2'">执行</el-button> -->
          <!-- <el-button icon="el-icon-close" size="mini" @click="handleCancel(scope.row)"
            :loading="buttonLoading" :disabled="orderStatus !== '2'">取消</el-button> -->
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {
  matchOrCreateMaterial, confirmTransferOrderItem, cancelTransferOrderItem,
  updateTransferOrderItem, matchOrCreateByCoils, batchUpdateTransferOrderItem
} from '@/api/wms/transferOrderItem'
import ProductSelect from "@/components/KLPService/ProductSelect";
import RawMaterialSelect from "@/components/KLPService/RawMaterialSelect";
import { listWarehouse } from '@/api/wms/warehouse';
import CoilNo from "@/components/KLPService/Renderer/CoilNo";
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    canEdit: {
      type: Boolean,
      default: false
    },
    orderStatus: {
      type: String,
      default: ''
    },
    batchEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    // WarehouseSelect,
    ProductSelect,
    RawMaterialSelect,
    CoilNo,
    ProductInfo,
    RawMaterialInfo
  },
  data() {
    return {
      tableData: [],
      materialLoading: false,
      warehouseList: [],
      buttonLoading: false,
      confirmLoading: false,
      // loading: false,
    }
  },
  mounted() {
    this.getWarehouseList()
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 预处理数据
          this.tableData = newVal.map(item => {
            const isEmpty = this.isEmpty(item);
            if (isEmpty) {
              return {
                ...item,
                oBefore: {
                  manufacturer: item.manufacturerBefore,
                  specification: item.specificationBefore,
                  material: item.materialBefore,
                  itemName: item.materialNameBefore,
                  surfaceTreatmentDesc: item.surfaceTreatmentBefore,
                  zincLayer: item.zincLayerBefore
                },
                oAfter: {
                  manufacturer: item.manufacturerAfter,
                  specification: item.specificationAfter,
                  material: item.materialAfter,
                  itemName: item.materialNameAfter,
                  surfaceTreatmentDesc: item.surfaceTreatmentAfter,
                  zincLayer: item.zincLayerAfter
                },
                isConfirmed: this.isConfirmed(item)
              }
            } else {
              return {
                ...item,
                oBefore: {
                  manufacturer: item.manufacturerBefore,
                  specification: item.specificationBefore,
                  material: item.materialBefore,
                  itemName: item.materialNameBefore,
                  surfaceTreatmentDesc: item.surfaceTreatmentBefore,
                  zincLayer: item.zincLayerBefore
                },
                // 将三个after字段设置为与before相同
                itemIdAfter: item.itemIdBefore,
                warehouseIdAfter: item.warehouseIdBefore,
                materialTypeAfter: item.materialTypeBefore,
                isConfirmed: this.isConfirmed(item)
              }
            }
          });
        }
      },
      immediate: true
    }
  },
  methods: {
    // 获取库区列表
    getWarehouseList() {
      listWarehouse().then(res => {
        this.warehouseList = res.data
      })
    },
    // 是否是已调拨状态
    isConfirmed(item) {
      // 只有三个after字段有值，才认为是已调拨状态
      // return item && item.itemIdAfter && item.warehouseIdAfter && item.materialTypeAfter
      return item.isTransferred == 1
    },
    // isEmpty 是否为空
    isEmpty(item) {
      return item && item.itemIdAfter && item.warehouseIdAfter && item.materialTypeAfter
    },
    handleUpdate(row) {
      updateTransferOrderItem(row).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
        // 刷新数据
        this.$emit('refreshData')
      })
    },
    // 确认调拨
    handleConfirm(item) {
      this.buttonLoading = true
      confirmTransferOrderItem(item).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '确认调拨成功',
            type: 'success'
          })
          // 刷新数据
          this.$emit('refreshData')
        }
      }).finally(() => {
        this.buttonLoading = false
      })
    },
    handleConfirmAll() {
      const unconfirmedItems = this.tableData.filter(item => !item.isConfirmed && !item.isTransferred);
      if (unconfirmedItems.length === 0) {
        this.$message({ message: '没有可执行的调拨项', type: 'info' });
        return;
      }

      this.buttonLoading = true;
      const promises = unconfirmedItems.map(item => confirmTransferOrderItem(item));
      this.confirmLoading = true;
      return Promise.all(promises).then(results => {
        const successCount = results.filter(res => res.code === 200).length;
        if (successCount > 0) {
          this.$message({
            message: `成功执行 ${successCount} 项调拨`,
            type: 'success'
          });
          this.$emit('refreshData');
        }
      }).catch(error => {
        this.$message({
          message: '执行调拨时发生错误',
          type: 'error'
        });
      }).finally(() => {
        this.buttonLoading = false;
        this.confirmLoading = false;
      });
    },
    // 取消调拨
    handleCancel(item) {
      this.$confirm('确认取消调拨吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.buttonLoading = true
        cancelTransferOrderItem(item.orderItemId).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '取消调拨成功',
              type: 'success'
            })
            // 刷新数据
            this.$emit('refreshData')
          }
        }).finally(() => {
          this.buttonLoading = false
        })
      })

    },
    handleMaterialChange(row) {
      // 如果修改后是产品，说明切换前是原料, 修改前的物料类型
      const itemType = row.materialTypeAfter == '1' ? 'product' : 'raw_material'
      // 修改后的物料类型
      const itemTypeAfter = row.materialTypeAfter == '1' ? 'raw_material' : 'product'
      this.materialLoading = true
      if (this.batchEdit) {
        this.confirmLoading = true
        matchOrCreateByCoils(this.tableData.map(item => {
          return {
            coilId: item.coilId,
            itemTypeAfter: itemTypeAfter
          }
        })).then(res => {
          batchUpdateTransferOrderItem(this.tableData.map(item => {
            return {
              orderItemId: item.orderItemId,
              materialTypeAfter: row.materialTypeAfter,
              itemIdAfter: res.data[item.coilId]
            }
          })).then(_ => {
            this.materialLoading = false
            for (let item of this.tableData) {
              item.materialTypeAfter = row.materialTypeAfter
              item.itemIdAfter = res.data[item.coilId]
            }
            this.confirmLoading = false
            this.$message({
              message: '批量更新成功',
              type: 'success'
            })
          })

        })
      } else {
        matchOrCreateMaterial({
          itemType,
          itemId: row.itemIdAfter
        }).then(res => {
          row.itemIdAfter = res.data
          updateTransferOrderItem(row)
          this.materialLoading = false
        }).catch(() => {
          this.materialLoading = false
        })
      }
    },
    handleWarehouseChange(row) {
      if (this.batchEdit) {
        this.confirmLoading = true
        batchUpdateTransferOrderItem(this.tableData.map(item => {
          return {
            orderItemId: item.orderItemId,
            warehouseIdAfter: row.warehouseIdAfter
          }
        })).then(_ => {
          this.materialLoading = false
          for (let item of this.tableData) {
            item.warehouseIdAfter = row.warehouseIdAfter
          }
          this.confirmLoading = false
          this.$message({
            message: '批量更新成功',
            type: 'success'
          })
        })
        // for (let item of this.tableData) {
        //   item.warehouseIdAfter = row.warehouseIdAfter
        //   updateTransferOrderItem(item)
        // }
      } else {
        updateTransferOrderItem(row)
      }
    }
  }
}
</script>