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-date-picker
                v-model="formData.storageTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              >
              </el-date-picker></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="客户名称">
              <span>{{ formData.clientName }}</span>
            </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"
          v-if="isEdit"
          >添加</el-button
        >
      </div>
      <div class="material">
        <div>
          <header-title title="出库物品清单"></header-title>
          <div class="mt10 form-table">
            <ele-pro-table
            ref="table"
            :columns="columns"
            :datasource="productList"
            height="200"
            full-height="calc(100vh - 116px)"
            tool-class="ele-toolbar-form"
            @columns-change="handleColumnChange"
            :cache-key="cacheKeyUrl"
          >
              <!-- 单价列 -->
              <template v-if="isPrice == 1" v-slot:price="{ row }">
                {{ row.price ? row.price : ' ' + '元' }}/{{ row.measureUnit }}
              </template>
              <!-- 金额列 -->
              <template v-if="isPrice == 1" v-slot:totalMoney="{ row }">
                {{ row.totalMoney ? row.totalMoney : 0 }}
              </template>
              <!-- 操作列 -->
              <template v-if="isEdit" v-slot:action="{ row, $index }">
                <el-link type="danger" @click="deleteProductList(row, $index)">删除</el-link>
              </template>
            </ele-pro-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="modelKey" width="200">
              </el-table-column>
              <el-table-column label="颜色" prop="colorKey" width="200">
              </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';
  import { parameterGetByCode } from '@/api/main/index.js';
  import tableColumnsMixin from '@/mixins/tableColumnsMixin';

  export default {
    mixins: [tableColumnsMixin],
    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 },
      isEdit: { type: Boolean, default: true } //是否可编辑
    },
    directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll
    },
    data() {
      return {
        cacheKeyUrl: 'wt-outbound-table',
        newColumns: [], // 动态表头
        goodsLists: [], // 商品列表
        productList: [], // 产品列表
        showPackingList: [], // 展示的包装列表
        packingList: [], // 包装列表
        showMaterialList: [], // 展示物料列表
        materialList: [], // 物料列表
        extInfo: {}, // 扩展信息
        pageSize: 20,
        pickingPageNum: 1,
        materielPageNum: 1,
        dimension: '3',
        outputSceneState,
        qualityStatus, // 质检状态
        qualityResults, // 质检结果
        treeList: [],
        formData: {
          storageTime: '',
          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: [],
        isPrice: 1
      };
    },
    computed: {
      ...mapGetters(['user']),
      clientEnvironmentId() {
        return this.$store.state.user.info.clientEnvironmentId;
      },
      // 出库物品清单表格列配置
      columns() {
        const columns = [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            label: '编码',
            prop: 'categoryCode',
            align: 'center',
            width: 150,
            showOverflowTooltip: true
          },
          {
            label: '名称',
            prop: 'categoryName',
            align: 'center',
            width: 150,
            showOverflowTooltip: true
          }
        ];
        
        // 级别 - 仅 clientEnvironmentId == 4 时显示
        if (this.clientEnvironmentId == 4) {
          columns.push({
            label: '级别',
            prop: 'level',
            align: 'center'
          });
        }
        
        // 型号、规格、牌号
        columns.push(
          {
            label: '型号',
            prop: 'categoryModel',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '规格',
            prop: 'specification',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '牌号',
            prop: 'brandNum',
            align: 'center',
            showOverflowTooltip: true
          }
        );
        
        // 动态列
        this.newColumns.forEach(item => {
          columns.push({
            label: item.label,
            prop: item.prop,
            width: 120,
            align: item.align,
            showOverflowTooltip: item.showOverflowTooltip
          });
        });
        
        // 批次号
        columns.push({
          label: '批次号',
          prop: 'batchNo',
          align: 'center',
          showOverflowTooltip: true
        });
        
        // 包装数量、单位
        columns.push(
          {
            label: '包装数量',
            prop: 'packingQuantity',
            width: 80
          },
          {
            label: '单位',
            prop: 'packingUnit'
          }
        );
        
        // 计量数量、计量单位
        columns.push(
          {
            label: '计量数量',
            prop: 'measureQuantity',
            showOverflowTooltip: true
          },
          {
            label: '计量单位',
            prop: 'measureUnit'
          }
        );
        
        // 重量、重量单位
        columns.push(
          {
            label: '重量',
            prop: 'weight',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '重量单位',
            prop: 'weightUnit',
            align: 'center',
            showOverflowTooltip: true
          }
        );
        
        // 机型、颜色、锁定数量、库存
        columns.push(
          {
            label: '机型',
            prop: 'modelKey',
            width: 150
          },
          {
            label: '颜色',
            prop: 'colorKey',
            width: 150
          },
          {
            label: '锁定数量',
            prop: 'lockQuantity',
            width: 100
          },
          {
            label: '库存',
            prop: 'stockNum',
            align: 'center',
            showOverflowTooltip: true
          }
        );
        
        // 单价 - 条件显示
        if (this.isPrice == 1) {
          columns.push({
            label: '单价',
            prop: 'price',
            align: 'center',
            slot: 'price'
          });
        }
        
        // 金额 - 条件显示
        if (this.isPrice == 1) {
          columns.push({
            label: '金额',
            prop: 'totalMoney',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'totalMoney'
          });
        }
        
        // 采购原因 - 仅 clientEnvironmentId == 4 时显示
        if (this.clientEnvironmentId == 4) {
          columns.push({
            label: '采购原因',
            prop: 'purpose',
            align: 'center',
            showOverflowTooltip: true
          });
        }
        
        // 仓库、供应商、供应商代号
        columns.push(
          {
            label: '仓库',
            prop: 'warehouseName',
            width: 150,
            showOverflowTooltip: true
          },
          {
            label: '供应商',
            prop: 'supplierName',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            label: '供应商代号',
            prop: 'supplierCode',
            minWidth: 150,
            showOverflowTooltip: true
          }
        );
        
        // 操作列 - 仅在可编辑时显示
        if (this.isEdit) {
          columns.push({
            label: '操作',
            width: 120,
            align: 'center',
            slot: 'action',
            fixed: 'right'
          });
        }
        
        return columns;
      }
    },
    async created() {
      //仓库出入库是否显示金额（0：不显示 1：显示）
      parameterGetByCode({
        code: 'wms_price'
      }).then((res) => {
        this.isPrice = res.value;
      });
      this.getFieldModel();
      this.getListItems();
      this.initDeptData().then(() => {
        this.initFormData();
        this.getNowFormatDate();
      });
    },
    methods: {
      // 获取当前时间函数
      getNowDate() {
        let date = new Date(),
          obj = {
            year: date.getFullYear(), //获取当前月份(0-11,0代表1月)
            month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
            strDate: date.getDate(), // 获取当前日(1-31)
            hour: date.getHours(), //获取当前小时(0 ~ 23)
            minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
            second: date.getSeconds() //获取当前秒数(0 ~ 59)
          };
        Object.keys(obj).forEach((key) => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`;
        });
        return obj;
      },
      // 赋值入库时间
      getNowFormatDate() {
        const obj = this.getNowDate();
        const defaultTime = '00:00:00';
        const currentTime = `${obj.hour}:${obj.minute}:${obj.second}`;

        this.formData.storageTime = `${obj.year}-${obj.month}-${obj.strDate} ${currentTime}`;
      },

      // 获取动态表头
      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);
        // 结果 0=默认，1=合格，2=不合格
        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,
            suspendBatchNo: productItem.batchNo || '',
            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,
          suspendBatchNo: productItem.batchNo || '',
          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;
        console.log('111111111111111');
        console.log(this.productList);
        // 排序
        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');
        console.log('11111111111111111111');

        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
                );
              });
          }
          console.log(this.saleProductList, 'this.saleProductList33333');
          let pData = {
            type: '1',
            deliveryNo: this.formData.sourceBizNo,
            builders: this.detailList.map((item) => {
              return {
                categoryId:
                  item.categoryId || item.instanceId || item.productId,
                num: item.demandQuantity || item.measurementCount,
                warehouseId: this.bizType == 11 ? item.warehouseId : '',
                batchNo: item.batchNo || ''
              };
            })
          };
          let pData2 = {
            type: this.wwType,
            deliveryNo: this.formData.sourceBizNo,
            taskIds: this.extractedList.map((item) => item.taskId),
            workOrderIds: this.extractedList.map((item) => item.workOrderId),
            
          };
          let pData3 = {
            //销售退货处理 外协出库
            type: 3,
            deliveryNo: this.formData.sourceBizNo,
            outInIds: this.form?.returnInReceiptId?.split(','),
            packageNos: this.detailList.map((item) => item.packageNo)
          };
          let pData4 = {
            //受托退货
            type: 3,
            deliveryNo: this.formData.sourceBizNo,
            ids: this.detailList.map((item) => item.packageId)?.toString()
          };
          let api = this.bizType == 8 ? 'getHierarchyList' : 'getHierarchyFifo';

          storageApi[api](
            this.wwType == 3
              ? pData2
              : this.bizType == 6
              ? pData3
              : this.bizType == 8
              ? pData4
              : pData
          )
            .then((data) => {
              this.detailData(data, this.dimension);
            })
            .catch((err) => {
              console.log(err);
            });
          return;
        }
        // 销售相关逻辑
        if (this.saleProductList?.length > 0) {
          this.formData.clientName = this.form.contactName;
          this.formData.clientCode = this.form.contactCode;
          // 获取领料人列表
          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;
          });
          console.log(this.saleProductList, 'this.saleProductList11111');
          let pData = {
            type: '1',
            deliveryNo: this.formData.sourceBizNo,
            builders: this.saleProductList.map((item) => {
              return {
                categoryId: item.productId || item.categoryId,
                num: item.totalCount,
                // 处理销售发货时物品清单和出库清单仓库不一致的问题
                warehouseId: this.bizType == 3 ? item.warehouseId : '',
                colorKey: item.colorKey || '',
                batchNo: item.batchNo || '',
                categoryModel: item.modelType || ''
              };
            })
          };
          let pData2 = {
            type: this.wwType,
            deliveryNo: this.formData.sourceBizNo,
            taskIds: this.extractedList.map((item) => item.taskId),
            workOrderIds: this.extractedList.map((item) => item.workOrderId)
          };
          console.log('111~~~~~~~~', pData)
          storageApi
            .getHierarchyFifo(this.wwType == 3 ? pData2 : pData)
            .then((data) => {
              this.detailData(data, this.dimension);
            })
            .catch((err) => {
              console.log(err);
            });
          return;
        }
        //采购委外
        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;
          });
          console.log(this.saleProductList, 'this.saleProductList22222');
          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);
            });
        }
        // 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>