klp-oa/klp-ui/src/views/wms/purchasePlan/panels/clac.vue

<template>
  <div class="purchase-plan-transfer">
    <!-- 全局loading遮罩 -->
    <div v-if="globalLoading" class="global-loading-overlay">
      <el-loading-spinner></el-loading-spinner>
      <p>正在加载推荐数据...</p>
    </div>

    <!-- 采购单信息区 -->
    <el-card class="section-card" shadow="never">
      <div slot="header" class="section-title">采购单信息</div>
      <el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 0;" v-loading="formLoading" element-loading-text="正在加载主数据...">
        <el-form-item label="计划编号" prop="planCode">
          <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="负责人" prop="owner">
          <el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
        </el-form-item>
      </el-form>
    </el-card>

    <div class="transfer-content">
      <!-- 原料区（待筛选） -->
      <el-card class="section-card left-table" shadow="never">
        <div slot="header" class="section-title">原料区（待筛选）</div>
        <div class="filter-bar">
          <el-input
            v-model="rawMaterialNameFilter"
            placeholder="请输入原材料名称"
            size="small"
            style="width: 200px; margin-bottom: 10px;"
            @keyup.enter.native="handleRawMaterialFilter"
            clearable
          />
          <el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
        </div>
        <el-table
          :data="rawMaterialList"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          ref="leftTable"
          border
          :loading="rawMaterialLoading"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="rawMaterialName" label="原材料名称" />
          <el-table-column prop="rawMaterialCode" label="原材料编码" />
          <el-table-column prop="unit" label="单位" />
        </el-table>
        <el-pagination
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          @current-change="handlePageChange"
          layout="total, prev, pager, next"
        />
      </el-card>
      <!-- 中间操作按钮 -->
      <div class="transfer-actions">
        <el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
        <el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
      </div>
      <!-- 采购单明细区 -->
      <el-card class="section-card right-table" shadow="never">
        <div slot="header" class="section-title">采购单明细</div>
        <el-table
          :data="purchaseList"
          @selection-change="handleRightSelectionChange"
          style="width: 100%"
          ref="rightTable"
          border
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="rawMaterialName" label="原材料名称" />
          <el-table-column prop="rawMaterialCode" label="原材料编码" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="quantity" label="计划采购数">
            <template #default="scope">
              <el-input-number v-model="scope.row.quantity" :min="0" size="small" />
            </template>
          </el-table-column>
          <el-table-column prop="owner" label="负责人">
            <template #default="scope">
              <el-input v-model="scope.row.owner" size="small" />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注">
            <template #default="scope">
              <el-input v-model="scope.row.remark" size="small" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
      <el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || rawMaterialLoading || formLoading">
        {{ submitLoading ? '提交中...' : '确认' }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
import { listRawMaterial } from '@/api/wms/rawMaterial'
import { updateOrder } from '@/api/wms/order'

const EOrderStatus = {
  NEW: 0,
  PRODUCTIONING: 1,
  FINISH: 2,
  CANCEL: 3
}

export default {
  name: 'PurchasePlanClac',
  props: {
    orderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      // 原材料表格相关
      rawMaterialList: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      rawMaterialLoading: false,
      leftSelected: [],
      rightSelected: [],
      rawMaterialNameFilter: '',
      // 采购列表
      purchaseList: [],
      // 细化的loading状态
      globalLoading: false, // 全局loading
      formLoading: false,   // 表单loading
      submitLoading: false, // 提交loading
      mainForm: {
         planCode: '',
         owner: '',
         remark: ''
       },
      mainFormRules: {
        planCode: [
          { required: true, message: '请输入计划编号', trigger: 'blur' }
        ],
        owner: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    orderId: {
      immediate: true,
      handler(newVal) {
        this.loadData(newVal)
      }
    }
  },
  mounted() {
    this.fetchRawMaterials();
  },
  methods: {
    // 推荐采购计划主数据
    loadData(orderId) {
      this.globalLoading = true;
      this.formLoading = true;
      if (!orderId) {
        this.purchaseList = [];
        this.clearAllLoading();
        return;
      }
      recommendPurchasePlan(orderId).then(res => {
        this.purchaseList = res.data.detailList || [];
        this.mainForm = res.data;
      }).finally(() => {
        this.clearAllLoading();
      })
    },
    clearAllLoading() {
      this.globalLoading = false;
      this.formLoading = false;
    },
    // 原材料分页查询
    fetchRawMaterials() {
      this.rawMaterialLoading = true;
      listRawMaterial({ pageNum: this.pageNum, pageSize: this.pageSize, rawMaterialName: this.rawMaterialNameFilter }).then(res => {
        // 过滤掉已在采购列表中的原材料
        const purchaseIds = this.purchaseList.map(item => item.rawMaterialId);
        this.rawMaterialList = (res.rows || []).filter(item => !purchaseIds.includes(item.rawMaterialId));
        this.total = res.total || 0;
        this.rawMaterialLoading = false;
      }).catch(() => {
        this.rawMaterialLoading = false;
      });
    },
    handlePageChange(page) {
      this.pageNum = page;
      this.fetchRawMaterials();
    },
    handleSelectionChange(selection) {
      this.leftSelected = selection;
    },
    handleRightSelectionChange(selection) {
      this.rightSelected = selection;
    },
    handleRawMaterialFilter() {
      this.pageNum = 1;
      this.fetchRawMaterials();
    },
    addToPurchase() {
      // 去重添加
      const ids = this.purchaseList.map(item => item.rawMaterialId);
      const newItems = this.leftSelected.filter(item => !ids.includes(item.rawMaterialId)).map(item => ({
        ...item,
        quantity: 0,
        owner: '',
        remark: ''
      }));
      this.purchaseList = this.purchaseList.concat(newItems);
      this.$refs.leftTable.clearSelection();
      this.fetchRawMaterials();
    },
    removeFromPurchase() {
      const removeIds = this.rightSelected.map(item => item.rawMaterialId);
      this.purchaseList = this.purchaseList.filter(item => !removeIds.includes(item.rawMaterialId));
      this.$refs.rightTable.clearSelection();
      this.fetchRawMaterials();
    },
    confirm() {
      this.submitLoading = true;
      // 校验主数据表单
      this.$refs.mainFormRef.validate(async(valid) => {
        if (!valid) {
          this.$message.error('请完整填写主数据信息');
          this.submitLoading = false;
          return;
        }
        // 校验采购列表数据（除remark外都不能为空）
        const filtered = this.purchaseList.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
        const invalid = filtered.some(row => {
          return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
        });
        if (invalid) {
          this.$message.error('请完整填写所有必填项');
          this.submitLoading = false;
          return;
        }
        // 合并主数据和明细数据
        const submitData = {
          ...this.mainForm,
          orderId: this.orderId,
          detailList: filtered
        };
        await createPurchasePlan(submitData);
        await updateOrder({
          orderId: this.orderId,
          orderStatus: EOrderStatus.PRODUCTIONING
        })
        this.$emit('confirm', submitData);
        this.submitLoading = false;
      });
    }
  }
}
</script>

<style scoped>
.purchase-plan-transfer {
  display: flex;
  flex-direction: column;
}
.section-card {
  margin-bottom: 20px;
}
.section-title {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}
.transfer-content {
  display: flex;
  align-items: flex-start;
}
.left-table {
  width: 30%;
}
.right-table {
  width: 60%;
}
.transfer-actions {
  width: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.transfer-actions .el-button {
  margin: 10px 0;
}
.global-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  border-radius: 4px;
}
.global-loading-overlay p {
  margin-top: 10px;
  color: #409EFF;
  font-size: 14px;
}
.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>