ezhizao_dms_vue/src/views/business/firstOutsource/form.vue

<!-- 首序外协 -->
<template>
  <el-drawer title="首序外协信息" :with-header="false" v-model="visible" direction="rtl" size="100%">
    <div class="form-container column-container">
      <div class="form-btns-container">
        <span class="title-label">
          <el-icon>
            <Document />
          </el-icon>
          <span>外协单信息</span>
        </span>

        <el-button v-show="editStatus && form.isSubmit == 1" type="primary" icon="Download" @click="handleExport"
          v-hasPermi="['business:outsource:export']">导出</el-button>
        <el-button v-show="editStatus && form.isSubmit == 1" type="warning" icon="Download" @click="handlePrint"
          v-hasPermi="['business:outsource:export']">
          打印
        </el-button>
        <el-button v-if="editStatus" type="primary" icon="Finished" @click="handleSubmit">保存</el-button>
        <el-button v-if="editStatus && form.isSubmit == 1" type="info" icon="Calendar"
          @click="handleViewRecords">历史记录</el-button>
        <div class="close-btn" @click="cancel">
          <i class="fa fa-times" aria-hidden="true" />
          <!-- <span>关闭</span> -->
        </div>
      </div>
      <el-form ref="formRef" class="master-container" :model="form" v-loading="loading" :rules="rules"
        label-width="120px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="单据号" prop="formCode">
              <el-input v-if="editStatus" v-model="form.formCode" disabled placeholder="系统自动生成" />
              <span v-else>{{ form.formCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="表单日期" prop="formDate">
              <el-date-picker v-if="editStatus && hasReturnReceiptDetailFlag" clearable v-model="form.formDate"
                type="date" value-format="YYYY-MM-DD" placeholder="请选择表单日期" style="width: 100%">
              </el-date-picker>
              <span v-else>{{ parseTime(form.formDate, "{y}-{m}-{d}") }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="外协商名称" prop="supplierName">
              <el-input v-if="editStatus && form.isSubmit == 0 && hasReturnReceiptDetailFlag"
                v-model="form.supplierName" readonly placeholder="请输入外协商名称">
                <template #append>
                  <el-button icon="Search" @click="handleShowDialogSuppliers" />
                </template>
              </el-input>
              <span v-else>{{ form.supplierName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="false">
            <el-form-item label="运费单价" prop="freightPrice">
              <el-input-number v-if="editStatus && hasReturnReceiptDetailFlag" v-model="form.freightPrice" :min="0"
                :precision="2" controls-position="right" />
              <span v-else>{{ form.freightPrice }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="false">
            <el-form-item label="运费总价" prop="freightAmount">
              <el-input-number v-if="editStatus && hasReturnReceiptDetailFlag" v-model="form.freightAmount" :min="0"
                :precision="2" controls-position="right" />
              <span v-else>{{ form.freightAmount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送货方式" prop="deliveryMethod">
              <el-select v-if="editStatus && hasReturnReceiptDetailFlag" v-model="form.deliveryMethod" placeholder="请选择"
                @change="handleChangeDeliveryMethod">
                <el-option v-for=" dict  in  deliveryMethod " :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
              <span v-else>{{ selectText(form.deliveryMethod, deliveryMethod) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="带箱方式" prop="packagingMethod">
              <el-select v-if="editStatus && hasReturnReceiptDetailFlag" v-model="form.packagingMethod"
                placeholder="请选择" @change="handleChangePackagingMethod">
                <el-option v-for=" dict  in  packagingMethod " :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
              <span v-else>{{ selectText(form.packagingMethod, packagingMethod) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算方式" prop="settlementType">
              <el-select v-if="editStatus && hasReturnReceiptDetailFlag" v-model="form.settlementType"
                placeholder="请选择">
                <el-option v-for=" dict  in  settlementType " :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
              <span v-else>{{ selectText(form.settlementType, settlementType) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <el-input v-if="editStatus" v-model.trim="form.remark" placeholder="请输入备注" />
              <span v-else>{{ form.remark }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总箱数" prop="remark">
              <span>{{ totalCarriersNum }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 渲染数据区 -->
      <div class="form-details-btns-container">
        <el-button v-show="editStatus" type="primary" icon="Plus" @click="handleShowDialogProducts"
          v-hasPermi="['business:outsource:add']">
          添加外协产品明细
        </el-button>
        <el-button v-show="editStatus" type="primary" icon="Plus" @click="handleChoiceFurnaceNoInfo()">
          批量选择炉号
        </el-button>
      </div>
      <div class="el-table-container">
        <div class="el-table-inner-container">
          <el-table v-loading="loading" :data="form.details" size="small" border height="100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="48" />
            <el-table-column label="行号" type="index" align="center" width="48" />
            <el-table-column label="批次号" align="center" prop="lotCode" width="104" />
            <el-table-column label="产品描述" align="center" prop="productDescription" width="320" />
            <el-table-column label="产品数" align="center" width="160" prop="productNum">
            </el-table-column>
            <el-table-column label="箱数" align="center" prop="carrierNum" width="100">
              <template #default="scope">
                <el-input-number v-if="editStatus && scope.row.hasReturnReceiptDetailFlag" :min="0"
                  v-model="scope.row.carrierNum" :controls="false" placeholder="箱数" @blur="handleCarrierNumChange" />
                <span v-else>{{ scope.row.carrierNum }}</span>
              </template>
            </el-table-column>
            <el-table-column label="炉号" align="center" prop="" width="150">
              <template #default="scope">
                <el-button link type="primary" icon="Refresh" v-if="editStatus"
                  @click="handleChoiceFurnaceNoInfo(scope.row)">
                  {{ scope.row.furnaceNoInfo != null ? scope.row.furnaceNoInfo.furnaceNumber : '选择炉号' }}
                </el-button>
                <span v-else>{{ scope.row.furnaceNoInfo.furnaceNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="外协工序" align="center" prop="processNames" width="320">
              <template #default="scope">
                <el-input v-if="editStatus && scope.row.hasReturnReceiptDetailFlag" v-model="scope.row.processNames"
                  readonly placeholder="请选择工序">
                  <template #append>
                    <el-button icon="Search" @click="handleShowDialogProcesses(scope.row)" />
                  </template>
                </el-input>
                <span v-else>{{ scope.row.processNames }}</span>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark">
              <template #default="scope">
                <el-input v-if="editStatus && scope.row.hasReturnReceiptDetailFlag" v-model="scope.row.remark"
                  placeholder="备注" />
                <span v-else>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="editStatus" label="操作" align="center" class-name="small-padding fixed-width"
              width="64">
              <template #default="scope">
                <el-button circle type="danger" v-if="scope.row.hasReturnReceiptDetailFlag" icon="Delete"
                  @click="handleDelete(scope.$index)" v-hasPermi="['business:outsource:remove']" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 外协商选择 -->
    <dialog-suppliers ref="dialogSuppliersRef" :single-selected="handleSingleSelectedSupplier" />
    <!-- 投产单选择 -->
    <dialog-products ref="dialogProductsRef" :supplier-id="form.supplierId"
      :multiple-selected="handleMultipleSelectedProducts" />

    <!-- 工序选择 -->
    <dialog-processes ref="dialogProcessesRef" :multiple-selected="handleMultipleSelectedProcesses" />
    <!-- 新箱号选择 -->
    <DialogFurnaceNoInfo ref="dialogFurnaceNoInfoRef" :singleSelected="handleSingleSelectFurnaceNoInfo" />
    <!-- 历史记录弹窗 -->
    <dialog-outsourced-records ref="dialogOutsourcedRecordsRef" />
    <!-- 收回明细带回 -->
    <!-- <form-details-recycling ref="formDetailsRecyclingRef" :singleSelected="handleSingleSelectedRecycling"/> -->
  </el-drawer>
</template>
<script setup>
import {
  getOrder,
  getFirstOrder,
  saveOrder,
  carrierForOutsource,
  submitOrder,
  exportOutsource,
  printOutsource,
  submitDetails,
  submitDetailsOnFirst,
  getLotByProductionPlanSub
} from "@/api/business/outsourcedOrder";
import DialogFurnaceNoInfo from "./DialogFurnaceNoInfo";
import dialogSuppliers from "./DialogSuppliers";
import dialogProducts from "./DialogProducts";
import dialogProcesses from "./DialogProcesses";
import dialogOutsourcedRecords from "./DialogOutsourcedRecords"
// import FormDetailsRecycling from "./detailsRecyclingForm";
const { proxy } = getCurrentInstance();
/** 父组件传参 */
const props = defineProps({
  getList: {
    type: Function,
    default: () => { },
  },
  deliveryMethod: {
    type: Array,
    default: [],
  },
  settlementType: {
    type: Array,
    default: [],
  },
  packagingMethod: {
    type: Array,
    default: [],
  },
});
const { getList, deliveryMethod, packagingMethod, settlementType } =
  toRefs(props);
/** 字典数组区 */
/** 表单抽屉 页变量 */

const loading = ref(false);
const multiple = ref(true);
const visible = ref(false);
const editStatus = ref(true);
const hasReturnReceiptDetailFlag = ref(true);
const totalCarriersNum = ref(0);
const detailInfo = ref({});
const loadingCarrier = ref(false);
const carriers = ref([]);
const webHost = import.meta.env.VITE_APP_BASE_API;
const form = ref({});
const selections = ref([])
// const formatDetails = ref([])
const currentDetail = ref({});
const dialogFurnaceNoInfoRef = ref(null)
const rules = {
  supplierName: [
    { required: true, message: "外协商名称不能为空", trigger: "change" },
  ],
};

/***********************  方法区  ****************************/
/** 导出按钮操作 */
function handleExport() {
  exportOutsource({ id: form.value.id });
}

/** 打印按钮操作 */
function handlePrint() {
  printOutsource({ id: form.value.id });
}

/** 打开抽屉 */
function open(row) {
  reset();
  totalCarriersNum.value = 0
  visible.value = true;
  if (row) {
    console.log(row)
    detailInfo.value = row
    form.value.id = row.id;
    getForm();
  } else {
    editStatus.value = true;
    hasReturnReceiptDetailFlag.value = true
  }
}
/** 查询表单信息  */
function getForm() {
  loading.value = true;
  getFirstOrder(form.value.id).then((response) => {
    form.value = response.data;
    //如果发出单明细里收回单，主表除了备注之外不能编辑
    form.value.details.forEach((item) => {
      item.hasReturnReceiptDetailFlag = true
      if (item.returnReceiptDetailList && item.returnReceiptDetailList.length > 0) {
        hasReturnReceiptDetailFlag.value = false
      }
      if (item.returnReceiptDetailList && item.returnReceiptDetailList.length > 0 && item.returnReceiptDetailList[0].status == 1) {
        item.hasReturnReceiptDetailFlag = false
      }
    });
    form.value.details.forEach((item) => {
      item.editStatus = false;
      totalCarriersNum.value += item.carrierNum == null ? 0 : item.carrierNum;
    });

    editStatus.value = form.value.isSubmit == 1;
    if (!detailInfo.value.flag) {
      editStatus.value = false
      console.log(editStatus.value)
    }
    console.log(hasReturnReceiptDetailFlag.value)
    loading.value = false;
  });
}
//改变带箱方式
function handleChangePackagingMethod() {
  totalCarriersNum.value = 0
  if (!editStatus) {
    if (form.value.packagingMethod == 1 && form.value.details.length > 0) {
      form.value.details.forEach(item => { item.newCarriers = []; item.carrierIds = []; item.carriers = carriers.value })
    } if (form.value.packagingMethod == 0 && form.value.details.length > 0) {
      form.value.details.forEach(item => {
        item.carriers = carriers.value;
        item.newCarriers = [];
        item.carrierIds = [];
        item.newCarriers.push(...item.originalCarrierList.map(v => ({ id: v.carrierId, code: v.carrierCode })));
        item.carriers.push(...item.originalCarrierList.map((v) => ({ value: v.carrierId, label: v.carrierCode })));
        item.carrierIds = item.originalCarrierList.map(info => { return info.carrierId })
      })
    }
  } else {
    form.value.details.forEach(item => {
      console.log(item.editStatus)
      if (item.editStatus) {
        item.newCarriers = []; item.carrierIds = []; item.carriers = carriers.value
      }
    })
  }
  console.log(form.value.details)
  for (let i = 0; i < form.value.details.length; i++) {
    console.log(form.value.details)
    totalCarriersNum.value += form.value.details[i].carrierNum == null ? 0 : form.value.details[i].carrierNum
  }
}
//改变送货方式
function handleChangeDeliveryMethod() {
  if (form.value.deliveryMethod == 1) {
    form.value.freightAmount = form.value.freightPrice * totalCarriersNum.value;
  } else {
    form.value.freightAmount = 0.0;
  }

}
//打开历史记录弹窗
function handleViewRecords() {
  proxy.$refs.dialogOutsourcedRecordsRef.open(form.value.id);
}

function selectText(value, data) {
  if (value) {
    return data.filter((item) => item.value == value)[0].label;
  }
}

/** 取消按钮 */
function cancel() {
  visible.value = false;
  // reset();
}

const handleDelete = (index) => {
  totalCarriersNum.value -= (form.value.details[index].carrierNum == null ? 0 : form.value.details[index].carrierNum);
  if (form.value.deliveryMethod == 1) {
    form.value.freightAmount = form.value.freightPrice * totalCarriersNum.value;
  } else {
    form.value.freightAmount = 0.0;
  }
  form.value.details.splice(index, 1);
};

/** 表单重置 */
function reset() {
  // console.log(proxy.parseTime(new Date(), "{y}-{m}-{d}"))
  form.value = {
    id: null,
    tenantId: null,
    formCode: null,
    formDate: proxy.parseTime(new Date(), "{y}-{m}-{d}"),
    supplierId: "0",
    supplierName: "",
    deliveryMethod: "0",
    freightPrice: 0.0,
    freightAmount: 0.0,
    packagingMethod: "0",
    remark: null,
    details: [],
    isSubmit: 0,
    isFirstProcess: 1
  };
  proxy.resetForm("formRef");
}
/** 保存 */
function saveFrom() {
  if (!form.value.details || form.value.details.length == 0) {
    proxy.$modal.msgError("请添加产品明细");
    return;
  }

  proxy.$refs["formRef"].validate((valid) => {
    for (const item of form.value.details) {
      if (!item.processNames) {
        proxy.$modal.msgError("请选择" + item.lotCode + "批次的工序");
        return;
      }
    }

    if (form.value.packagingMethod == 1) {
      console.log("form.value.details", form.value.details);
      for (const item of form.value.details) {
        if (item.newCarriers.length == 0) {
          proxy.$modal.msgError("请选择" + item.lotCode + "批次的新箱号");
          return;
        }
      }
    }
    if (valid) {
      saveOrder(form.value).then((response) => {
        if (response.code == 200) {
          proxy.$modal.msgSuccess("保存成功");
          visible.value = false;
          getList.value();
        }
      });
    }
  });
}

/** 保存并提交 */
function submitFrom() {
  console.log("from", form.value);
  proxy.$modal
    .confirm("是否确定提交，提交后不可修改，删除")
    .then(function () {
      return;
    })
    .then(() => {
      if (!form.value.details || form.value.details.length == 0) {
        proxy.$modal.msgError("请添加产品明细");
        return;
      }

      proxy.$refs["formRef"].validate((valid) => {
        for (const item of form.value.details) {
          if (!item.processNames) {
            proxy.$modal.msgError("请选择" + item.lotCode + "批次的工序");
            return;
          }
        }
        if (form.value.packagingMethod == 1) {
          console.log("form.value.details", form.value.details);
          for (const item of form.value.details) {
            if (item.newCarriers.length == 0) {
              proxy.$modal.msgError("请选择" + item.lotCode + "批次的新箱号");
              return;
            }
          }
        }
        if (valid) {
          console.log(form.value);
          submitOrder(form.value).then((response) => {
            proxy.$modal.msgSuccess("提交成功");
            visible.value = false;
            getList.value();
          });
        }
      });
    })
    .catch(() => { });
}
//5.29保存
function handleSubmit() {
  if (form.value.isSubmit == 0) {
    proxy.$modal
      .confirm("是否确定保存，保存后外协商不可编辑！")
      .then(function () {
        return;
      })
      .then(() => {
        if (!form.value.details || form.value.details.length == 0) {
          proxy.$modal.msgError("请添加产品明细");
          return;
        }

        proxy.$refs["formRef"].validate((valid) => {
          for (const item of form.value.details) {
            if (!item.processNames) {
              proxy.$modal.msgError("请选择" + item.lotCode + "批次的工序");
              return;
            }
          }
          // 判断是否有批次没有炉号
          const unfurnace = form.value.details.find(v => v.furnaceNoInfo == null)
          if (unfurnace != null) {
            proxy.$modal.msgError("请选择" + unfurnace.lotCode + "批次的炉号")
          }
          if (valid) {
            console.log(form.value)
            submitDetailsOnFirst(form.value).then((response) => {
              proxy.$modal.msgSuccess("提交成功");
              visible.value = false;
              getList.value();
            });
          }
        });
      })
  } else {
    if (!form.value.details || form.value.details.length == 0) {
      proxy.$modal.msgError("请添加产品明细");
      return;
    }

    proxy.$refs["formRef"].validate((valid) => {
      for (const item of form.value.details) {
        if (!item.processNames) {
          proxy.$modal.msgError("请选择" + item.lotCode + "批次的工序");
          return;
        }
      }
      if (form.value.packagingMethod == 1) {
        console.log("form.value.details", form.value.details);
        for (const item of form.value.details) {
          if (item.newCarriers.length == 0) {
            proxy.$modal.msgError("请选择" + item.lotCode + "批次的新箱号");
            return;
          }
        }
      }
      if (valid) {
        console.log(form.value)
        submitDetailsOnFirst(form.value).then((response) => {
          proxy.$modal.msgSuccess("提交成功");
          visible.value = false;
          getList.value();
        });
      }
    });
  }
}

/***************************** 外协商对话框相关 *****************************/
// 打开外协商选择对话框
const handleShowDialogSuppliers = () => {
  proxy.$refs.dialogSuppliersRef.open();
};
// 外协商选择带回
const handleSingleSelectedSupplier = (data) => {
  console.log(data);
  form.value.supplierId = data.id;
  form.value.lossLimit = data.lossLimit;
  form.value.supplierName = data.name;
  form.value.deliveryMethod = data.deliveryMethod;
  form.value.freightPrice = data.freightPrice;
  form.value.settlementType = data.settlementType;
  if (form.value.deliveryMethod == 1) {
    form.value.freightAmount = form.value.freightPrice * totalCarriersNum.value;
  } else {
    form.value.freightAmount = 0.0;
  }
};
/***************************** 外协收回明细相关 *****************************/
//打开收回明细表单
function handleDetailsRecycling() {
  proxy.$refs.formDetailsRecyclingRef.open(row);
}
function handleSingleSelectedRecycling() { }
/***************************** 产品对话框相关 *****************************/
// 打开产品选择对话框
const handleShowDialogProducts = () => {
  // const dayworkIds = form.value.details.map((item) => item.dayworkId);
  // console.log(dayworkIds);
  proxy.$refs.dialogProductsRef.open();
};
// 产品选择带回
const handleMultipleSelectedProducts = (selection) => {
  // 获取所有批次信息
  const requestData = {
    planDetails: selection,
    supplierId: form.value.supplierId,
    supplierName: form.value.supplierName,
    masterId: form.value.id
  }
  getLotByProductionPlanSub(requestData).then(res => {
    // console.log(res)
    if (res.code === 200) {
      form.value.details.push(...res.data.filter(e => form.value.details.findIndex(t => t.lotId === e.lotId) < 0).map(e => ({ ...e, hasReturnReceiptDetailFlag: true })))
    }
  })

};

/***************************** 外协工序对话框相关 *****************************/
// 打开外协工序选择对话框
const handleShowDialogProcesses = (row) => {
  currentDetail.value = row;
  proxy.$refs.dialogProcessesRef.open(row);
};

// 工序选择带回
const handleMultipleSelectedProcesses = (selection) => {
  currentDetail.value.processes = []
  console.log(selection);
  const processNames = selection.sort((a, b) => a.processStepNumber - b.processStepNumber).map((item) => item.processAlias);
  // 使用join方法将数组转换为以逗号分隔的字符串
  let commaSeparatedString = processNames.join(",");
  currentDetail.value.processes = [];
  currentDetail.value.processNames = commaSeparatedString;
  selection.forEach((item) => {
    const newProcess = {
      processId: item.processId,
      processCode: item.processCode,
      processAlias: item.processAlias,
      processStepNumber: item.processStepNumber,
      technologicalProcessDetailId: item.id,
    };
    currentDetail.value.processes.push(newProcess);
  });
};

function handleSelectionChange(selection) {
  selections.value = selection
}

// 选择炉号
const handleChoiceFurnaceNoInfo = (row) => {
  // 判断选择的产品是不是同一个
  const changeFurnaceNoInfo = row ? [row] : selections.value;
  let checkSame = true
  changeFurnaceNoInfo.forEach(l => {
    checkSame = checkSame && l.productId == changeFurnaceNoInfo[0].productId
  })
  console.log(checkSame)
  if (!checkSame) {
    proxy.$modal.msgError('请选择相同计划单批量选择炉号')
    return
  }
  if (changeFurnaceNoInfo.length === 0) {
    proxy.$modal.msgError('请选择需要变更炉号的计划单')
    return
  }
  dialogFurnaceNoInfoRef.value.open({ details: changeFurnaceNoInfo, queryParams: { ...changeFurnaceNoInfo[0] } })
}

const handleSingleSelectFurnaceNoInfo = (details, info) => {
  details.forEach(l => {
    l.furnaceNoInfo = info
  })
}

function handleCarrierNumChange() {
  let sumNum = 0
  form.value.details.forEach(v => {
    sumNum += (v.carrierNum == null ? 0 : v.carrierNum)
  })
  totalCarriersNum.value = sumNum
}

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>