kd-aiot-frontend-wt/src/views/bpm/outgoingManagement/outbound.vue

<template>
  <div>
    <el-card shadow="never">
      <header-title title="基本信息"></header-title>
      <el-form :model="formData" ref="formName" label-width="110px" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出库场景" prop="bizType">
              <!-- <el-select
                filterable
                placeholder="请选择"
                v-model="formData.bizType"
                clearable
                @change="handleBizSceneChange"
                :disabled="!!(productList && productList.length)"
              >
                <el-option
                  v-for="item in outputSceneState"
                  :key="item.code"
                  :value="item.code"
                  :label="item.label"
                ></el-option>
              </el-select> -->
              <el-select filterable disabled placeholder="请选择" v-model="formData.bizType" clearable
                @change="handleBizSceneChange">
                <el-option v-for="item in outputSceneState" :key="item.code" :value="item.code"
                  :label="item.label"></el-option>
              </el-select> </el-form-item></el-col>
          <el-col :span="6">
            <el-form-item label="单据来源" prop="documentSource">
              <el-input placeholder="请选择" disabled v-model="formData.sourceBizNo"
                @click.native="openDocumentSourceDialog">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库物品类型" prop="extInfo.assetType">
              <el-select style="width: 100%" multiple disabled v-model="formData.extInfo.assetType" placeholder="请选择">
                <el-option v-for="item in goodsLists" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
              <!-- <el-select
                style="width: 100%"
                multiple
                :disabled="!!(productList && productList.length)"
                v-model="formData.extInfo.assetType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in goodsLists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库登记人">
              <el-input placeholder="登记人" disabled v-model="formData.extInfo.createUserName"
                clearable /></el-form-item></el-col>
          <el-col :span="6">
            <el-form-item :label="this.bizType == 10 ? '申请人部门' : '领料人部门'" prop="extInfo.verifyDeptCode">
              <selectTree ref="tree" class="form-ipt" size="medium" style="width: 100%" clearable
                :value="formData.extInfo.verifyDeptCode" :options="treeList" :props="{
                  value: 'id',
                  label: 'name',
                  children: 'children'
                }" @getValue="auditorDeptClick" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="this.bizType == 10 ? '申请人' : '领料人'" prop="fromId">
              <el-select v-model="formData.fromId" filterable placeholder="请选择">
                <el-option v-for="item in llrLsit" :key="item.id" :label="item.name" :value="item.id"
                  @click.native="userSlected(item)">
                </el-option>
              </el-select> </el-form-item></el-col>
          <!-- <el-col :span="6">
            <el-form-item label="领料人联系方式" prop="fromUserPhone">
              <el-input
                placeholder="请输入"
                disabled
                v-model="formData.extInfo.fromUserPhone"
                clearable /></el-form-item
          ></el-col> -->
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" placeholder="请详细说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button style="margin-bottom: 20px; float: right; margin-right: 20px" type="primary"
          @click="addStock">添加</el-button>
      </div>
      <div class="material">
        <div>
          <header-title title="物品清单"></header-title>
          <div class="mt10 form-table">
            <el-table ref="productListTable" :data="productList" tooltip-effect="dark" :max-height="300"
              :header-cell-style="rowClass" border>
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="编码" prop="categoryCode" align="center"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="名称" align="center" prop="categoryName"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column v-if="clientEnvironmentId == 4" label="级别" prop="level" align="center">
              </el-table-column>
              <el-table-column label="型号" align="center" prop="categoryModel"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="规格" align="center" prop="specification"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="牌号" align="center" prop="brandNum"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column v-for="(item, index) in newColumns" :label="item.label" :align="item.align"
                :prop="item.prop" :show-overflow-tooltip="item.showOverflowTooltip"></el-table-column>
              <el-table-column label="批次号" prop="batchNo" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="包装数量" prop="packingQuantity" width="80"></el-table-column>
              <el-table-column label="单位" prop="packingUnit"></el-table-column>
              <el-table-column label="计量数量" prop="measureQuantity" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="计量单位" prop="measureUnit"></el-table-column>
              <el-table-column label="重量" prop="weight" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="重量单位" prop="weightUnit" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="单价" prop="price" align="center">
                <template slot-scope="{ row }">
                  <template>
                    {{ row.price ? row.price : '-' + '元' }}/{{
                      row.measureUnit
                    }}
                  </template>
                </template>
              </el-table-column>

              <el-table-column label="金额" align="center" prop="totalMoney" :show-overflow-tooltip="true">
                <template slot-scope="{ row, $index }">
                  {{ row.totalMoney ? row.totalMoney : 0 }}
                </template>
              </el-table-column>
              <el-table-column v-if="clientEnvironmentId == 4" label="采购原因" align="center" prop="purpose"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="仓库" prop="warehouseName" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="supplierName" label="供应商" min-width="200"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="supplierCode" label="供应商代号" min-width="200"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="操作" width="120" align="center">
                <template slot="header" slot-scope="scope"> 操作 </template>
                <template slot-scope="{ row, $index }">
                  <el-link type="danger" @click="deleteProductList(row, $index)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <header-title class="mt20" title="包装清单"></header-title>
          <div class="mt10 form-table">
            <el-table ref="showPackingListTable" :data="showPackingList" tooltip-effect="dark" :max-height="300"
              :row-class-name="tableRowClassName" :header-cell-style="rowClass" border
              v-el-table-infinite-scroll="pickingHandleScroll">
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="编码" prop="categoryCode" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="名称" prop="categoryName" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="批次号" prop="batchNo" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="发货条码" prop="barcodes" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="包装编码" prop="packageNo" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="包装数量" prop="packingQuantity" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="单位" prop="packingUnit" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="计量数量" prop="measureQuantity" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="计量单位" prop="measureUnit" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="物料代号" prop="materielDesignation" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="客户代号" prop="clientCode" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="刻码" prop="engrave" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="重量" prop="weight" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="重量单位" prop="weightUnit" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="质检结果" prop="result" :show-overflow-tooltip="true">
                <template slot-scope="{ row }">
                  <span>{{ qualityResults[row.result] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="质检状态" prop="status" :show-overflow-tooltip="true">
                <template slot-scope="{ row }">
                  <span>{{ qualityStatus[row.status] }}</span>
                </template>
              </el-table-column>
              <el-table-column label="生产日期" prop="productionDate" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="采购日期" prop="purchaseDate" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="supplierName" label="供应商" min-width="200"
                :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="supplierCode" label="供应商代号" min-width="200"
                :show-overflow-tooltip="true"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="mt20">
          <header-title class="mt20" title="物料明细"></header-title>
          <el-table ref="multipleTable" :data="showMaterialList" tooltip-effect="dark" :max-height="300"
            :row-class-name="tableRowClassName" :header-cell-style="rowClass" border style="width: 100%" stripe
            height="300px" v-el-table-infinite-scroll="materielHandleScroll">
            <el-table-column label="序号" type="index" width="50">
            </el-table-column>
            <el-table-column label="编码" prop="categoryCode" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="名称" prop="categoryName" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="批次号" prop="batchNo"></el-table-column>
            <el-table-column label="物料编码" prop="materialCode" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="发货条码" prop="barcodes" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="计量数量" prop="minPackingQuantity"></el-table-column>
            <el-table-column label="计量单位" prop="measureUnit"></el-table-column>
            <el-table-column label="物料代号" prop="materielDesignation">
            </el-table-column>
            <el-table-column label="客户代号" prop="clientCode">
            </el-table-column>
            <el-table-column label="刻码" prop="engrave"> </el-table-column>
            <el-table-column width="100" label="重量" prop="weight">
            </el-table-column>
            <el-table-column label="重量单位" prop="weightUnit">
            </el-table-column>
            <el-table-column label="质检结果" prop="result" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityResults[row.result] }}</span>
              </template>
            </el-table-column>
            <el-table-column label="质检状态" prop="status" width="120">
              <template slot-scope="{ row }">
                <span>{{ qualityStatus[row.status] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <AssetsDialog ref="assetsDialogRef" :treeIds="formData.extInfo?.assetType" @detailData="detailData"
      :productLists="this.productList" />
  </div>
</template>

<script>
import storageApi from '@/api/warehouseManagement/index.js';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import warehouseDefinition from '@/api/warehouseManagement/warehouseDefinition';
import { getTreeByGroup } from '@/api/classifyManage';
import {
  outputSceneState,
  qualityResults,
  qualityStatus
} from '@/utils/dict/index';

import selectTree from '@/components/selectTree';
import AssetsDialog from './components/AssetsDialog.vue';
import { deepClone } from '@/components/FormGenerator/utils/index';
import { mapGetters } from 'vuex';


export default {
  components: {
    selectTree,
    AssetsDialog
  },
  props: {
    form: { type: Object, default: {} },
    bizType: { type: Number, default: 1 },
    sourceBizNo: { type: String, default: '' },
    type: { type: String, default: '正常出库' },
    detailList: { type: Array, default: () => [] },
    saleProductList: { type: Array, default: () => [] },
    extractedList: { type: Array, default: () => [] },
    wwType: { type: Number, default: null }
  },
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
  data() {
    return {
      newColumns: [], // 动态表头
      goodsLists: [], // 商品列表
      productList: [], // 产品列表
      showPackingList: [], // 展示的包装列表
      packingList: [], // 包装列表
      showMaterialList: [], // 展示物料列表
      materialList: [], // 物料列表
      extInfo: {}, // 扩展信息
      pageSize: 20,
      pickingPageNum: 1,
      materielPageNum: 1,
      dimension: '3',
      outputSceneState,
      qualityStatus, // 质检状态
      qualityResults, // 质检结果 
      treeList: [],
      formData: {
        extInfo: {
          assetType: [], //物品类型id
          assetTypeName: '', //物品类型名称
          deptCode: '', //部门code
          deptName: '', //部门名称
          verifyDeptCode: '', //审核部门编码
          verifyDeptName: '', //审核部门名称
          deliveryName: '', //送货人名称
          fromUserPhone: '', //送货人电话
          sourceBizNo: '', //销售订单
          urgent: '', //紧急状态
          supplierId: '', //供应商ID
          supplierName: '', //供应商名称
          createUserName: '', //创建人名字
          contentImage: [] //图片数组
        },
        fromId: '', //领料人
        fromUser: '', //送货人
        bizType: '', //物品类型
        verifyId: '', //审核人Id
        verifyName: '', //审核人名称
        createUserId: '',
        remark: ''
      },
      rules: {
        bizType: {
          required: true,
          message: '请选择出库场景',
          trigger: 'change'
        },
        'extInfo[verifyDeptCode]': {
          required: true,
          message: '请选择领料人部门',
          trigger: ['change', 'blur']
        },
        fromId: {
          required: true,
          message: '请选择',
          trigger: 'change'
        }
      },
      llrLsit: []
    };
  },
  computed: {
    ...mapGetters(['user']),
    clientEnvironmentId() {
      return this.$store.state.user.info.clientEnvironmentId;
    }
  },
  async created() {

    this.getFieldModel();
    this.getListItems();
    this.initDeptData().then(() => {
      this.initFormData();
    });
  },
  methods: {
    // 获取动态表头
    getFieldModel() {
      storageApi.fieldModel({ fieldModel: 't_main_category' }).then((res) => {
        let newRes = res.map((m) => {
          return {
            prop: 'extField.' + m.prop,
            label: m.label,
            align: 'center',
            showOverflowTooltip: true
          };
        });
        this.newColumns = [...newRes];
      });
    },
    userSlected(data) {
      this.formData.fromId = data.id;
      this.formData.fromUser = data.name;
      this.formData.fromUserPhone = data.phone;
    },
    openDocumentSourceDialog() {
      console.log('打开单据来源弹窗');
    },
    clearDocumentSource() {
      console.log('清空');
    },
    pickingHandleScroll() {
      console.log('---------pickingHandleScroll------------');
      if (this.showPackingList.length < this.packingList.length) {
        if (this.packingList.length > this.pageSize) {
          this.pickingPageNum += 1;
        }
        this.pickingFetchData();
      }
    },
    pickingFetchData() {
      const start = (this.pickingPageNum - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.showPackingList = this.showPackingList.concat(
        this.packingList.slice(start, end)
      );
    },
    materielHandleScroll() {
      console.log('---------materielHandleScroll------------');
      if (this.showMaterialList.length < this.materialList.length) {
        if (this.materialList.length > this.pageSize) {
          this.materielPageNum += 1;
        }
        this.materielFetchData();
      }
    },
    materielFetchData() {
      const start = (this.materielPageNum - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.showMaterialList = this.showMaterialList.concat(
        this.materialList.slice(start, end)
      );
      console.log(this.showMaterialList);
    },
    // 获取物品列表
    async getListItems() {
      const { data } = await getTreeByGroup({});
      this.goodsLists = data;
    },
    // 打开单据来源弹窗
    openDocumentSourceDialog() {
      console.log('打开单据来源弹窗');
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row);
      if (row.result == 1) {
        return 'warning-row';
      } else {
        return '';
      }
    },
    detailData(data, dimension) {
      this.dimension = dimension;

      const mergedData = [...(this.formData.outInDetailList || []), ...data];
      this.formData.outInDetailList = mergedData;

      this.productList = data.map((productItem) => {
        return {
          ...productItem,
          outInDetailRecordRequestList:
            productItem.outInDetailRecordRequestList.map((packingItem) => {
              return {
                ...packingItem,
                workOrderId: this.type === '自选领用出库' ? this.form.detailList[0].workOrderId : '',
                pickOrderId: this.type === '自选领用出库' ? this.form.detailList[0].pickOrderId : '',
                taskId: this.type === '自选领用出库' ? this.form.detailList[0].taskId : '',
                categoryName: productItem.categoryName,
                categoryCode: productItem.categoryCode,
                supplierCode: productItem.supplierCode,
                supplierName: productItem.supplierName,
                materialDetailList: packingItem.materialDetailList.map(
                  (materialItem) => {
                    return {
                      ...materialItem,
                      categoryName: productItem.categoryName,
                      categoryCode: productItem.categoryCode,
                      supplierCode: productItem.supplierCode,
                      supplierName: productItem.supplierName,
                    };
                  }
                )
              };
            })
        };
      });


      const newProducts = mergedData.map((productItem) => ({
        ...productItem,
        outInDetailRecordRequestList: productItem.outInDetailRecordRequestList.map((packingItem) => ({
          ...packingItem,
          categoryName: productItem.categoryName,
          categoryCode: productItem.categoryCode,
          supplierCode: productItem.supplierCode,
          supplierName: productItem.supplierName,
          workOrderId: this.type === '自选领用出库' ? this.form.detailList[0].workOrderId : '',
          pickOrderId: this.type === '自选领用出库' ? this.form.detailList[0].pickOrderId : '',
          taskId: this.type === '自选领用出库' ? this.form.detailList[0].taskId : '',
          materialDetailList: packingItem.materialDetailList.map((materialItem) => ({
            ...materialItem,
            categoryName: productItem.categoryName,
            categoryCode: productItem.categoryCode,
            supplierCode: productItem.supplierCode,
            supplierName: productItem.supplierName,
          }))
        }))
      }));

      // 去重合并产品列表和新产品列表
      const uniqueProducts = [...new Map([...this.productList, ...newProducts]
        .map(item => [item.id, item])).values()];
      this.productList = uniqueProducts;
      // 排序
      this.productList.sort((a, b) => a.categoryCode - b.categoryCode);

      // 获取包装维度数据
      const arr = [];
      for (const key in this.productList) {
        for (const k in this.productList[key].outInDetailRecordRequestList) {
          arr.push({
            ...this.productList[key].outInDetailRecordRequestList[k]
          });
        }
      }
      this.packingList = arr;

      const newPacking = [];
      newProducts.forEach(item => {
        newPacking.push(...item.outInDetailRecordRequestList);
      });
      //去重
      const newPackingList = [...new Map([...this.packingList, ...newPacking]
        .map(item => [item.id, item])).values()];
      this.packingList = newPackingList

      this.packingList.sort((a, b) => a.categoryCode - b.categoryCode);

      // 获取物料维度数据
      let iArr = [];
      arr.forEach((item) => {
        item.materialDetailList.forEach((ele) => {
          iArr.push({ ...ele });
        });
      });
      this.materialList = iArr;

      const newMaterial = [];
      newPacking.forEach(item => {
        newMaterial.push(...item.materialDetailList);
      });
      this.materialList = [...this.materialList, ...newMaterial];
      // 触发分页更新
      this.pickingPageNum = 1;
      this.materielPageNum = 1;
      this.pickingFetchData();
      this.materielFetchData();

      this.formData.outInDetailList = this.productList;

      console.log(this.productList, 'this.productList')
      console.log(this.packingList, 'this.packingList')

    },
    async getReturnStorage() {
      return new Promise((resolve) => {
        console.log(this.formData);
        this.$refs.formName.validate(async (valid) => {
          if (!this.productList?.length) {
            return this.$message.error('请添加出库明细！');
          }
          let obj = deepClone({ ...this.formData, type: 2 });

          obj.extInfo.sourceBizNo = obj.sourceBizNo;
          obj.fromType = obj.type;
          // 处理物品类型assetType
          obj.extInfo.assetType = obj.extInfo?.assetType.join(',');
          // 处理仓库id
          let warehouseId = [];
          let warehouseName = [];
          let warehouseIds = this.productList
            .map((item) => item.warehouseId)
            .flat();
          let warehouseNames = this.productList
            .map((item) => item.warehouseName)
            .flat();
          warehouseIds.forEach((item, index) => {
            if (!warehouseId.includes(item)) {
              warehouseId.push(item);
              warehouseName.push(warehouseNames[index]);
            }
          });
          obj.warehouseIds = warehouseId;
          obj.warehouseNames = warehouseName;
          console.log('2222', obj);
          let isPass = false;
          // 1按数量计费 2按重量计费
          if (this.form.pricingWay == 2) {
            if (this.materialList.length > 0) {
              // 判断物料
              isPass = this.materialCodeReqList.every(
                (item) => item.weight > 0
              );
            } else {
              // 判断包装重量是否全部大于0
              isPass = this.packingList.every((item) => item.weight > 0);
            }
          } else {
            isPass = true;
          }
          if (isPass) {
            resolve(obj);
          } else {
            this.$message.error('委外发货重量不能为空');
          }
        });
      });
    },

    onClear() {
      this.formData.sourceBizNo = '';
      this.warehousingMaterialList = [];
      this.$refs.trees.valueTitle = '';
      this.formData.clientName = '';
      this.formData.clientUser = '';
      this.formData.clientPhone = '';
      this.$forceUpdate();
    },

    rowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        return {
          display: 'none',
          background: '#EEEEEE'
        };
      }
      return { background: '#0000' };
    },
    // 部门点击事件
    async auditorDeptClick(data) {
      console.log(data);
      this.formData.extInfo.verifyDeptCode = data?.id;
      this.formData.extInfo.verifyDeptName = data?.name;
      this.formData.verifyId = '';
      this.formData.verifyName = '';
      this.$refs.formName.validateField('verifyDeptName');
      if (data) {
        this.getStaffList(data);
      }
    },

    getStaffList(data) {
      return new Promise(async (resolve) => {
        let res = await warehouseDefinition.getUserPage({
          groupId: data.id,
          size: 9999,
          page: 1
        });
        this.llrLsit = res.list;
        resolve();
      });
    },
    // 初始化用户信息
    async initFormData() {
      console.log(this.form, 'ddddddddddddddddddddddddddddd123form');
      // const res = await warehouseDefinition.tree();
      // let obj = res.find(
      //   (item) =>
      //     item.id ===
      //     this.user.info.deptIds[this.user.info.deptIds.length - 1]
      // );
      // if (!obj) return;
      // this.formData.extInfo.deptCode = obj.id;
      // this.formData.extInfo.deptName = obj.name;
      // this.formData.extInfo.createUserName = this.user.info.name;
      // this.formData.createUserId = this.user.info.userId;

      this.formData.extInfo.assetType = Array.from(
        new Set(this.form.categoryLevelTopId.split(','))
      );

      //委外出库
      if (this.bizType == 7 && this.form.productList) {
        const categoryids = this.form.productList.map(p => p.categoryLevelTopId)
        console.log(categoryids, '委外出库的物品id')
        this.formData.extInfo.assetType = categoryids
      }

      // 出库类型
      this.formData.bizType = this.bizType;
      // 添加单据来源
      this.formData.sourceBizNo = this.sourceBizNo || this.form?.code;
      // 将出库状态改成出库状态 2出库 1入库
      this.formData.type = 2;
      // 入库登记人
      this.formData.extInfo.createUserId = this.$store.state.user.info.userId;
      this.formData.extInfo.createUserName = this.$store.state.user.info.name;
      this.formData.createUserId = this.$store.state.user.info.userId;

      await this.initDeptData(); // 确保部门树加载
      if (this.form.makerId) {
        warehouseDefinition.getGroupById(this.form.makerId).then((res) => {
          console.log(res, 'makerId')
          this.$set(this.formData.extInfo, 'verifyDeptCode', res.groupId);
          this.$set(this.formData.extInfo, 'verifyDeptName', res.groupName);

        });
      }

      // 生产相关逻辑
      console.log(this.detailList, 'this.detailList')
      console.log(this.saleProductList, 'this.saleProductList')
      console.log(this.productList, 'this.productList')


      if (this.detailList?.length > 0) {
        // 获取领料人列表

        if (this.form.executorDeptId) {
          this.getStaffList({ id: this.form.executorDeptId }).then(() => {
            // 获取领料人和领料部门
            this.formData.fromId = this.form.executorId;
            this.formData.fromUser = this.form.executorName;
            this.formData.extInfo.verifyDeptCode = this.form.executorDeptId;
            this.formData.extInfo.verifyDeptName = this.form.executorDeptName;
          });
        } else {
          this.formData.fromId = this.form.createUserId;
          warehouseDefinition.getGroupById(this.form.createUserId).then((res) => {
            console.log(res, 'form没有executorDeptId有createUserId')
            this.$set(this.formData, 'fromUser', res.name);
            this.$set(this.formData.extInfo, 'verifyDeptCode', res.groupId);
            this.$set(this.formData.extInfo, 'verifyDeptName', res.groupName);
          });
        }
        let pData = {
          type: '1',
          builders: this.detailList.map((item) => {
            return {
              categoryId: item.instanceId || item.categoryId || item.productId,
              num: item.demandQuantity || item.measurementCount
            };
          })
        };
        let pData2 = {
          type: this.wwType,
          taskIds: this.extractedList.map((item) => item.taskId),
          workOrderIds: this.extractedList.map((item) => item.workOrderId)
        };
        let pData3 = {//销售退货处理 外协出库
          type: 3,
          outInIds: this.form?.returnInReceiptId?.split(','),
          packageNos: this.detailList.map(item => item.packageNo)
        }

        storageApi
          .getHierarchyFifo(this.wwType == 3 ? pData2 : this.bizType == 6 ? pData3 : pData)
          .then((data) => {
            this.detailData(data, this.dimension);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // 销售相关逻辑
      if (this.saleProductList?.length > 0) {
        // 获取领料人列表
        this.getStaffList({ id: this.form.deptId }).then(() => {
          // 获取领料人和领料部门
          this.formData.fromId = this.form.makerId;
          this.formData.fromUser = this.form.makerName;
          this.formData.extInfo.verifyDeptCode = this.form.deptId;
          this.formData.extInfo.verifyDeptName = this.form.deptName;
        });
        let pData = {
          type: '1',
          builders: this.saleProductList.map((item) => {
            return {
              categoryId: item.productId,
              num: item.totalCount,
            };
          })
        };
        let pData2 = {
          type: this.wwType,
          taskIds: this.extractedList.map((item) => item.taskId),
          workOrderIds: this.extractedList.map((item) => item.workOrderId)
        };
        storageApi
          .getHierarchyFifo(this.wwType == 3 ? pData2 : pData)
          .then((data) => {
            this.detailData(data, this.dimension);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      if (this.form.productList?.length > 0) {
        this.getStaffList({ id: this.form.deptId }).then(() => {
          this.formData.fromId = this.form.makerId;
          this.formData.fromUser = this.form.makerName;
          this.formData.extInfo.verifyDeptCode = this.form.deptId;
          this.formData.extInfo.verifyDeptName = this.form.deptName;
        });
        let pData = {
          type: '1',
          builders: this.form.productList.map((item) => {
            return {
              categoryId: item.productId,
              num: item.totalCount,
              price: item.totalPrice,
              unitPrice: item.singlePrice,
              weight: (item.singleWeight * item.totalCount) || 0,
              batchNo: item.batchNo || '',
              taskId: item.taskId || '',
            };
          })
        };
        let pData2 = {
          type: 3,
          taskIds: this.form.productList.map((item) => item.taskId),
          workOrderIds: [this.form.sourceId]
        };

        storageApi
          .getHierarchyFifo(this.form.sourceId ? pData2 : pData)
          .then((data) => {
            this.detailData(data, this.dimension);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },

    // 初始化部门数据
    initDeptData() {
      return new Promise(async (resolve) => {
        const res = await warehouseDefinition.tree();
        this.treeList = this.$util.toTreeData({
          data: res,
          idField: 'id',
          parentIdField: 'parentId'
        });
        this.$nextTick(() => {
          resolve();
        });
      });
    },
    addStock() {
      console.log(this.formData.extInfo.assetType);
      if (
        !(
          this.formData.extInfo.assetType &&
          this.formData.extInfo.assetType.length > 0
        )
      )
        return this.$message.error('请选择出库产品类型');
      if (!this.formData.bizType && this.formData.bizType !== 0)
        return this.$message.error('请选择出库场景');

      this.$refs.assetsDialogRef.open(this.productList);
    },
    handleBizSceneChange() {
      if (this.formData.extInfo.assetType == 7) {
        this.formData.extInfo.sourceBizNo = '';
      }
      this.formData.sourceBizNo = '';
    },
    deleteProductList(row, index) {
      // 1. 获取当前物料的所有包装列表
      const targetPackages = row.outInDetailRecordRequestList || []
      const packageIds = new Set(targetPackages.map(p => p.id))

      console.log('targetPackages', targetPackages)
      console.log('packageIds包装的id', packageIds)


      // 从packingList中移除相关包装
      this.packingList = this.packingList.filter(p =>
        !packageIds.has(p.id) &&
        p.categoryCode !== row.categoryCode
      )
      console.log('包装列表', this.packingList)

      // 从materialList中移除关联物料
      const materialIds = new Set()
      targetPackages.forEach(packageItem => {
        packageItem.materialDetailList.forEach(material => {
          materialIds.add(material.id)
        })
      })
      this.materialList = this.materialList.filter(m =>
        !materialIds.has(m.id) &&
        m.categoryCode !== row.categoryCode
      )

      this.productList.splice(index, 1)

      // this.$nextTick(() => {
      //   this.$refs.productListTable?.doLayout()
      //   this.$refs.showPackingListTable?.doLayout()
      //   this.$refs.multipleTable?.doLayout()
      // })

    }
  },
  watch: {
    packingList: {
      handler(newVal) {
        console.log('包装列表', newVal);
        console.log('当前包装列表加载页数2', this.pickingPageNum);
        this.showPackingList = newVal.slice(
          0,
          this.pageSize * (this.pickingPageNum > 0 ? this.pickingPageNum : 1)
        );
      },
      deep: true
    },
    materialList: {
      handler(newVal) {
        console.log('物料列表', newVal);
        console.log('当前物料列表加载页数', this.materielPageNum);
        this.showMaterialList = newVal.slice(
          0,
          this.pageSize *
          (this.materielPageNum > 0 ? this.materielPageNum : 1)
        );
      },
      deep: true
    },
    detailList: {
      handler(newVal) {
        if (newVal.length) {
          this.initFormData();
        }
      },
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  display: flex;
  flex-wrap: wrap;
}

::v-deep.form-table {
  .el-form-item {
    margin-bottom: 0;
  }

  .el-input__inner {
    padding: 0 10px;
  }
}

.p20 {
  padding: 20px;
}

.el-select,
.el-date-editor {
  width: 100%;
}

.el-form-item {
  margin-bottom: 22px;
}

.material {
  margin-top: 20px;

  .flex {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;

    .red {
      color: #ff4949;
    }
  }
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.center {
  text-align: center;
}
</style>